Graphic Design

Introduction to Graphic Design

Graphic design is a type of communication. With that being said, it is important to know that communication is the process of effectively transferring information from one place to another. Graphic communication involves the use of visual material to relate ideas, such as drawings, photographs, slides, transparencies and sketches.

Graphics are visual presentations on some surface, such as a wall, canvas, computer screen, paper, or stone to brand, inform, illustrate, or entertain. Examples include photographs, drawings, Line Art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineering drawings, or other images. Graphics often combine text, illustration, and color.

Common uses of graphic design include magazines, advertisements, product packaging and web design. For example, a product package might include a logo or other artwork, organized text and pure design elements such as shapes and color which unify the piece.

http://colormatters.com/color-and-marketing/color-and-branding

Designs are created to appeal to a particular audience. What audience do you think this Lucky Charms box was designed to appeal to? If you said kids, you are right. Many cereal boxes are designed to attract the attention of kids, who then talk mom or dad into buying the cereal.

Notice that this box is a "limited edition" with double clovers. That makes people want it more because it won't be like this for long. Marketing involves a great deal of science and psychology. Companies are constantly launching new marketing campaigns to attract new customers and keep the old ones coming back. Even color has a lot to do with how these designs affect us. Some basic information is about how colors affect us can be found in the presentation below. To learn even more, check out the Color Matters website!

Color Meaning

Colors themselves have no specific meaning. We have culturally assigned meanings to them. We can use color to attract attention, group related elements, convey meaning, and generally enhance the aesthetics of your work. It can be used to organize your elements and create a visual hierarchy (levels of importance) in your design. A small dose of color that contrasts with your main color will draw attention. It will give emphasis. Repeating colors on elements like page headings gives an immediate visual cue that those headings are related.

Using colors that don’t work well together, using too many colors, or even not enough can drive people away before they have a chance to absorb your content. Ideally, you should plan and choose a color scheme from the start and you should be consistent in how you use color in your design. The following section is meant to provide a basic overview of color meaning. It only scratches the surface when dealing with color. You can always look up more information to help you create a better design.

To get started, let’s examine the two major categories for color, warm and cool. For the sake of simplicity let’s define warm colors as red, orange and yellow. These are the colors of fire. They radiate warmth. Warm colors are more often associated with passion, energy, impulsiveness, happiness, coziness, and comfort. They draw attention and have the advantage of being inviting and harmonious.

https://lh3.googleusercontent.com/1Dzb0tijvLykUlxErfcUHzwu5g5FvvosDAYF3ysbo8CgQLHAwvzqSyw4sd1YyuPDte6Z03b6xS-hDdeRRV3zYUgXoIuUv8yao5DyAcPsUSTGx5VTK0sLP-cp7XCBrADQZtkVbcP-

Let’s define cool colors as green, blue, and violet. These are the colors of water. Cool colors are more often associated with calm, trust, and professionalism. They are also associated with sadness and melancholy. They have the advantage of being professional and harmonious, but can also turn people off by the coolness they radiate.

https://lh6.googleusercontent.com/MpS-ETXG9oRSPyITThiRlcXou9rWjtPynnA25bxC2lFpjMkfpr-yq_XKEuvloWQglSIQM6Z7Ig8smhvdL1JtdtgWxR7q2G4l0SuATjtDkeHFv2ocKyHk0k-MOe-JCNTb0xnF_W67

The differentiation point between warm and cool colors falls somewhere between yellow/green and violet red. Green and purple don’t fall neatly into either warm or cool colors. They tend to take on the properties of one or the other based on the surrounding context.

https://lh6.googleusercontent.com/lj6IKdp-Z6JNa_pJpMbuJFG4630lJ2kLvOzDUNzJ548dhGU4uXyY92K7g9oVqkBpl8JygAAXC7H__03zXJpkRyuEbYfFkVdYIkApUwtVI9bmolr9aycnd1tZE6KsQvS8vtJtwyEW

Red is the color of fire and blood. Emotionally intense. Associated with energy, war, danger, strength, power, determination, action, confidence, courage, vitality, passion, desire, and love. Can enhance metabolism, increase respiration, and raise blood pressure. Red has a high visibility and advances to the foreground. It is often used for buttons in order to get people to take impulsive action.

https://lh5.googleusercontent.com/83_pBzqxDsrR7pWC4Xt8F1QY42STK5h1ONRSXvQGtT2RUkxSyd7_pI-wMid6QGVt46AsGp-yAgjrgV2D-7evFHVLIauMyqK8WBEnGoYjhdwW967tGYpEBVEaxXBu_iCUneqUbxda

Yellow is The color of the sun. Bright yellow attracts attention, though it can also be distracting when overused. Associated with joy, happiness, wisdom, and intellectual energy. It stimulates mental activity and generates muscle energy. Yellow produces a warming effect, arouses cheerfulness and is often used to evoke pleasant feelings. Shades of yellow can become dingy lessening the pleasing effect.

https://lh6.googleusercontent.com/xbrIWFSw906TWpFg3I-g-auNMDhM58XlNW3i42lGtbUOeaLaoN8VyMI0Sd08P5oIEoibOvHdDfaRV7i4rmDiRWYyDrGfXKxAGh0MHRxslHm1jWgcG67A6kSYYlUDsHeuK1afLeY7

Blue is the color of the sky and the sea. It has the opposite effect of red and slows metabolism, breathing, and heart rate. It’s seen as a masculine color. Associated with trust, loyalty, wisdom, intelligence, expertise, confidence, stability and depth. It creates a calming effect, suppresses appetite and has been considered to be beneficial to both body and mind. Blue is often used for corporate sites given the previously mentioned associations.

https://lh6.googleusercontent.com/iiY7V4eDnGFS6Rg19rUYrxdOy8oahYfHxM8E-2CU7vJxImCkHyql4gLLm4mN65jb6cXk6GdWlm7u1U4zCE2IfqX2tX7p_dtGWlfrwkJXas0RkdlFqjwVjdo41JyJL3DUYoP4CVg4

Orange combines the energy or red with the happiness of yellow. It’s not as aggressive as red and calls to mind healthy food (citrus). Orange is associated with joy, sunshine, the tropics, enthusiasm, happiness, fascination, creativity, determination, attraction, success, encouragement, stimulation, and strength. It can increase appetite and evokes thoughts of fall and harvest.

https://lh6.googleusercontent.com/j_AQxqGywwcd4OIoReErUolfCclFdA7xa-9EX9vITOCMFSIh7_5hlqdDMYEm5at_E9Hc7msZNrg3g19gwJbcINtjPhzmhw-WisRReUgL3zUcUz2sko6ZlH6S0ncSgcrlN8dOBCEF

Green is the color of nature. It symbolizes growth, hope, freshness, and fertility. In countries with green money such as the U.S. it evokes thoughts and feelings of financial wealth. Green is associated with healing, stability, endurance, harmony, safety, life, and well-being. It can sometimes signify a lack of experience and is often used to indicate the safety of drugs and medical products in advertising.

https://lh3.googleusercontent.com/VNFpyM4A2j303CQtUbSpTR3e7j6nG0dJ_fbamQ0_L7Dx7Fps2l9F4231-QDXrDunPDNTzT279JzTcOkh3oswhwqC7P74VO6qvtke9qkGZtlUxNcGQmhk9c2RwDErMMSMmbcuxf5V

Purple combines the stability of blue and the energy of red. It conveys wealth and extravagance and is seen as the color or royalty. It symbolizes power, nobility, luxury, and ambition. Associated with wisdom, dignity, independence, creativity, mystery, and magic. Light purple is seen as feminine and purple is a popular color with children. Purple occurs less frequently in nature and some may consider it artificial. In Catholic cultures it is representative of death and in some Islamic nations it is associated with prostitution.

White is associated with light, goodness, innocence, purity, virginity. It usually has positive connotations and is seen as clean and safe.

Black is associated with power, elegance, formality, death, evil, and mystery. It denotes strength and authority, is seen as formal and elegant, and brings forth feelings of fear and the unknown.

https://lh3.googleusercontent.com/kR2b7_8qUZ86QJI1hJRxSbAA9KBzO-0Yoi-b_bpKZRHq8ISoKj2AINqln__DUos87HoXVcAPfQ3Ph79aL5HKWvFjBU2c_GmQo9PCjTSGv4mCCl745ToKk-AHOvx8jHPCc8pyCpV-

Gray is the color of sorrow, detachment, and isolation. It connotes responsibility and conservative practicality. It’s a neutral color and creates a non-invasive feeling. Associated with security, maturity, and dependability. It can be used to reduce the intense energy of another color and to emphasize a willingness to comply. Some people who prefer gray many be seen as the lone wolf type or narrow-minded.

https://lh3.googleusercontent.com/Q6oOctY5DTSHHJ3EHjJINjjcWghCZSSREVvFQxJBQvDX1Ll4G1qeIWFWqtEHrmQUpNhxRhoGdfue2ZMIj_NZ4yeKI65LTDzvlC1cdOXQMeTd0cfUJHcA371NikLMHnV_5cKlBqT5

The color of the earth and tends to blend into the background. Associated with material things, order, and convention. It’s connection to the earth gives it stability. Brown can convey a solid and wholesome feeling.

Rasters vs. Vectors

There are two basic types of images: Vectors and Rasters

A vector is a quantity possessing both magnitude and direction. Another definition is a quantity with the additional requirement that such quantities are to transform in a particular way under changes of the coordinate system. If that doesn't make sense to you right now, it will soon. On the other hand, a raster (commonly called a bitmap) is a set of horizontal lines composed of individual pixels, used to form an image on a computer screen. Pixel stands for picture element. A pixel to an image is like an atom to an object. Rasters are typically used for complex images formed from lots of different colors and shapes, most notably photos.

A common problem with raster images is pixelation. When a raster is enlarged too much it become "pixelated" (you can see the individual pixels).

https://lh4.googleusercontent.com/yRwTrUe1HjeWqAZTk82KJDsN9xK2um5iHe0c0hDYflMTNclvEZoFXprZghzGVg77DOuuxGCFjXezRu5RunXVVeuzA6Esozh7M-IPpxk3v-kjNbzX9DNY2MSt3khvvNMN0PXMMlwv
https://lh5.googleusercontent.com/bbYiHL6swaNjBH_zutAQcv-KjwFlnKS_z8hQr1LGcoB40jkmtXa9rYG4q8xpM-ftZmSdQdsNSb7kNw3Z5L6AnwnLtoeI4PuI5KxqNVaCiYzIVbut3vVcfcav6G6GtNOA_LFARt8E

Look at the pictures above. The upper Batman image is crisp and clean. The lower Batman image is pixelated. This makes the image appear blurry. The edges are not crisp. You can also see marks above his head and cape in the white area. This is also the result of pixelation. Under normal circumstances, you do not want images to appear pixelated.

If and when you select images from the internet, there is an easy way to tell the quality of an image. Open another tab and search for an image (using an image search). Different sites will vary on where you see this, but using Google for example, if you place your mouse over an image that appears in the image search, a small black bar will appear at the bottom of the thumbnail. In this you will see a number (i.e. 2048 x 1536) and the website where it is located. If you click on an image, a pop-up appears within the screen that shows the same number off to the left of the image (see the image below). The number is the size of the image in pixels. The larger the numbers, the higher the quality of the image. This number can be converted into a number that you may be more familiar with, like inches. There are variables though. An image created or adjusted for use on the web will be different from one to be printed. Images used on the web are often set to either 72 or 92 pixels per square inch. Anything above this is unnecessary and just wastes memory and increases loading time. Images designed to be printed are generally at least 300 pixels per square inch.

https://lh6.googleusercontent.com/ny3vf4DJH8cUnqcP-QasRfAQz6Z_chSs_Rmq2DROr9zyHLJSC4pxxh3HtxApiA_yNUoJkSRWjaqrlrwVMIdAhvgx7wVYlyBaikFZy4UGmUVQ2qu6yeWP_Rher1P2n0iyDd9RaMn3

It is highly likely that you are most familiar with raster file formats. Typical raster file formats include: Joint Photographics Experts Group (JPEG), Tagged Image File Format (TIFF), Graphics Interchange Format (GIF), Portable Networks Graphics (PNG), and Bitmap (BMP). Some common programs used to edit these images include: Photoshop, GNU Image Manipulation Program (GIMP), Pixlr, PicMonkey, and Paint.

Vector files are made up of paths rather than individual pixels. These paths can be used to represent lines and shapes within the image. Most vector image formats can also include colors, gradients, and image effects. They are typically used for text, clipart, and basic shapes. All of the text that you are reading on this page is comprised of vectors.

Since vector graphics store image data as paths, they can be repeatedly enlarged and shrunk without losing quality, which makes them a good choice for logos and other types of drawings (like the fire dog example below). As a way to visualize the paths in a vector image, notice all of the nodes, which are end points of each path, are highlighted in the Hokie image below.

Vector graphics are typically made using illustration software. At this point, you are probably not familiar with many of these programs, but some common ones include: Adobe Illustrator, Corel Draw, Serif DrawPlus, and Google Drawing. Vector file formats include Encapsulated Postscript (EPS), Adobe Illustrator Artwork (AI), and Scalable Vector Graphics (SVG).

Knowing the difference between raster and vector files can greatly affect the quality of your work. Watch closely for pixilation. Unless it is intentional, it will ruin a project. Knowing what type of file you have will make it easier to know what you can (and can’t) do with the graphic. Raster images are best used for photographs and images with subtle shading. Graphics best suited for the vector format are Logos, page layout, type, line art, or illustrations. Vector images are ideal for images that have to be resized frequently. They are also necessary for laser cutting.

Elements & Principles of Design

The elements of design are basic building blocks of artistic design. Like elements on the periodic table, they are broken down to their most basic level and are capable of being put together in ways to create something new. A firm understanding of the elements and principles of design is necessary to generate good designs. The following lists are commonly seen elements and principles of design. Especially with design principles, there is no comprehensive list. Different artists, books, and websites have differing opinions on what should be included.

Elements of Design:

Color

Color can be primary, secondary, or tertiary. Color can set specific moods, atmospheres, and channel emotions. Color has specific connotations associated with it.

https://lh4.googleusercontent.com/qbtp6lUGR-k9vG6pBZ0rlJnM5lzFuZUTP9cHKQaclTF8Xgpl6cGF68pTyBIvJ7srfLXrR1M6VNDGeOwPBxSazLVqyhI97TLgbXwzCl5BuHVECI3YqI2z-4fapuNgV1om296MZ-pp
https://lh6.googleusercontent.com/IPZySj7ZB3fG8pXFZhOtw0BdqgTKf0t4VwjEuuAbVdBNGS2qr5_jKujlQlMfqjtbDCdbAkzzXylA0huQI57gVgD2XGzJLvnwrySm44poXL-6sdn6GuhHI2ytWa7NJMS9nl0IR10p
https://lh6.googleusercontent.com/_O6IRHXH4zlUstZ_eoiw2GO18lzHhnROG2vFBOjb9moF1LdGRSK6vhdaJVdz-FZ3K_zs4Xb287JR-xv5ZE_avdDA8Axy6Kafp-Hssu_Et2rDpm0b8Xj3FEHwEexkVHcWDNLzGdt_

Lines

Lines help direct the eye, creates emphasis, gives a sense of movement. Line can also evoke feeling; for example, strong black vertical lines can give a sense of stability and structure, whereas wavy curved lines may be felt as tranquil and soothing.

https://lh4.googleusercontent.com/WxiMRl5p9BlLrteOZZmaNxtpuvsEYwLU0zppI9J59tMYM2WhN-2L3i4l0sMqfTHKE5QBZhdqPolNIdmQQ83dH8muBag8Tns8mO-3uAT17NALWmeOS_QFS1ztafs1040ZddM1tAON
https://lh5.googleusercontent.com/Jal3j3F10Xd1_klKOKM37opJXLsYAh6kp1uskCQaYxhFir2gofoBLTTC47Zi1PsRJPDCA37wIfhD5AMXAhcJ7TALV4YlHE3ZLUimqJDUrGDfM-NYn0HnRZE3SX1QJRzO8AKdK3Ep
https://lh4.googleusercontent.com/q8wmGecjCk6q1RLAsSBlyBe3sArI-jOAGQwwwh_Yo20UPNcI5zF8tPQp0mRscJwvxy-NNDPb_b_HR_YsKKio1gUcLmsO28SPh-Z1Tc9VgjOpk4lbcBEkPZ_HtTyx-re0sUizIP7W

Shapes

Shapes can be geometric or organic (freeform) and are used to create interest. Almost everything in a design is a shape. Consider how those shapes interact.

https://lh6.googleusercontent.com/B2GTHBrrtMKruB0NNnTnaWk6EPPaaojef8XQy2rVhCcI6tIhvsOofCPbWIHWLFfzUx5CtrGRPa2pBpx-okUDNV7kUBJpCRNhtn-FzSQ9eInAhmexjrmPI2w4zDpYYU6zT3RLuM7u
https://lh3.googleusercontent.com/pd69FbdfHYwYcHWuKdQzbsbdGptPEit_naGmiQj2dGBbRvSe-B1eVfxB0HkHPSAUA-xGRf9YWqfL4hL7qRPRKNutTjtbpe2qDG0cD36Ll6RKx6RF8tkeU0-5y_bZHgqPxKtPjUJP

White Space

Space refers to the negative space between or around other elements, creating a shape in the absence.

https://lh5.googleusercontent.com/enrGxmZThlv9aroeiDndxSUqg9pWs4T5tiCYhSvldwWV4SC01yg27u-268_ogHyRtIsMrl8o2yrMLeMfZL_g8z7ppt1o0io25XgCCfZF4bB6QGL5gwnwJS3yQG3BhjfN_y3sj8uA
https://lh6.googleusercontent.com/SqKC4ZZM34GBNwskhi-VURqP5raNog7o4WZxHBubs0ymnGp1GTb1X2hsb8xfBnCxPjiBtx-x3P7heko00LNVQoAW5aDwk_CYpu_jFr7QO-5qtg_9wMYS4L71G9SpoUrFiDTM3R7e

Texture

Texture can add depth and the illusion of a surface not being flat and smooth. Texture can add interesting effects to your design.

https://lh5.googleusercontent.com/B1H1U3zRCfgRW6ZpeRLZ6YqF99CsDiiJAeYWyxMJ9i0T5CRgXEs6kRzM49kgb5Lj1I4L8PtTaxxl_ZDOKDE1pljTiWIdSXFf_CGbraMqtO1_57540y5T2qNgFFHbF_8ha7ih5xev
https://lh6.googleusercontent.com/VV8sTHK4JgsA-Ws4e_qT4pGe_PMedASxLegZkU7P3iu-x3lEdb9RN_81TrYSeXJslcAZVsfCv8SKdAcGB9lEVaNKlKkmCiCp3V3iq7lo7OZoTp45sfHYHKrffFHKvbtMii5cqQN0
https://lh5.googleusercontent.com/YRnIGBhVwVv8p3vWx83d2M5QBbN3m9yYvIIDCjXY778oQgPmOJlFh1eUnujQf1cXTD3jW0Xmfh6SEgdmg-__AO9TGwqmxcMk8ktyFBc1uIdH2QQKHV2RTuM09PgGtgQbsm8Mxf-E

Principles of Design:

Balance

Balance places the elements of a visual in an aesthetically pleasing arrangement. Formal balance is when elements are arranged to be symmetrical. Informal arranges elements to be asymmetrical. Radial balance arranges elements so they are symmetrical around a center point. When thinking of balance, think of a balance beam. When objects are of equal weight, they are in balance. If you have several small items on one side, they can be balanced by a large object on the other side. Visual balance works in much the same way. It can be affected not only by the size of objects, but also their value (ie. lightness or darkness, termed visual weight).

Image result for principles of design balance
Image result for principles of design balance
Image result for principles of design asymmetrical balance

Dominance

Dominance creates a focal point in a design. Dominant elements command attention. Care should be used not to make an element distract the viewer from the work as a whole. Designs should be balanced overall.

https://lh5.googleusercontent.com/sR1GJvF1oynSFv1zKk96l46TOETD79EFxC9oFog1agJ2hBMh5DrJE6gLdC7mdqc06A1cYI0EMAjMaHLcPB5k1W2Uexz5Ff9lBdxVirO0xs-URvrT6n9He0x4JrKwMy0D_R3ok52S
https://lh4.googleusercontent.com/HQDmQj-E4naOSymL-ej6HGmBiPV_uja2bjmiCsniRVoaOcjm_Cik_t4if1EgUTzVM8MbHmbVjcZYEU1oCUNQbWCHVxCCLM4DPHwv0K4U9Db721RWY-IH6XAzsap_grvVKKN3KbWm
https://lh4.googleusercontent.com/1xDGftI9QIy7M3SUIQbbpV5LfjhUwfNaquLsHuVh5SY0DYUzyxBdd00uQwYWmWZupoZ7xVjbcs22ncVRB2wuxXnVa7NO_QW5o0N-sT-eoDK_CdZdsBSizQk49_9SRELAs-4RA-xp

Emphasis/Contrast

Emphasis or contrast is used to make important information stand out. Size relationships, color, lines, and repetition are examples of ways to emphasize an element in a design.

https://lh3.googleusercontent.com/eCDdUzNqcCCRbLBGlzzlvBz-fIai2-jP83b1N8dM_csHwCZUAlHPLPqlTpk44OevFyBgXkMTJKTbY4Dt7vgNKDzMw7CRuGrUNTrIg9E6VOT65oYxTzhmYgtDO1yO8nnOI77pPCmG
https://lh4.googleusercontent.com/Qgng17erRw1nlqGchKFvzZW8ID1hROMEBqokDbzgi6_AY4jbyLwze-Ey9-tbeaVYfUyzbOrGpnhd7mWtxYd4eDUOZPgF2J_93LoWEaWc_iymMl66V5gPyNCZChQ9g9wxCgcahjcJ
https://lh6.googleusercontent.com/qlM2MUie2pqIAS0mzIh41Hk_8zgkHUcM6LIkdhGz_aR5Kxd8PtKJsTFaWWa_5gYri9xTmNwmm0RQhbFvpIW4inhomUyD8WQybt9uv-bjX3MuJ_aZi3E2hQ1-gvAmI6KBNeOqL2Y6

Movement

Movement (or the illusion of) can be created by combining visual elements in particular ways to produce a sense of action. Used to direct viewers through the work, often to focal areas. Such movement can be directed along lines, edges, shapes, and colors within the works, but moves the eye most easily on paths of similar elements. Movement can add to the mood of a design.

Image result for principles of design movement
Image result for principles of design movement
Image result for principles of design movement

Below are some additional examples of movement in a graphic.

Image result for principles of design movement
Image result for principles of design movement
Image result for principles of design movement

Proportion

Proportion refers to the relationship of size in a design. Proportion, when used well, can be used to create a more aesthetically pleasing design or effect.

Image result for principles of design proportion
Image result for principles of design proportion
Image result for principles of design proportion

Rhythm

Rhythm can be created by alternating positive elements with negative space to create patterns. Repeating a pattern and varying it created rhythm. We can create rhythm in three ways: repetition, alteration, and gradation. Repetition creates patterns through predictability. Alteration creates patterns through contrasting pairs, such as thick and thin or light and dark. Gradation creates patterns through a progression of regular steps. By placing elements on a page, a rhythm is going to be created. That, however, does not mean it is always a good rhythm. There are three types of rhythm that can be used to create interest in a piece:

Regular rhythm: occurs when the intervals between elements are predictable, or the elements themselves are similar in size and length. Placing repeating elements at regular intervals would be an example.

Flowing rhythm: occurs when the elements or intervals are organic. This creates natural patterns that evoke a feeling of organic movement. Stripes on a tiger or zebra are good examples.

Progressive rhythm: occurs when the sequence of forms or shapes is shown through progressive steps. Some characteristics of elements might have stepped changes, or the interval might have stepped changes. This gradual increase or decrease in sequence creates movement and can direct the eye through a piece. A color gradient is a good example.

Image result for principles of design and regular rhythm
Image result for principles of design and regular rhythm
Image result for principles of design rhythm
Image result for principles of design rhythm

Unity/Harmony

Unity or harmony creates a visually satisfying effect of tying similar or related elements together. This can be achieved in a number of ways, including: a logical layout (easy to understand and follow), similar shapes, common pattern, use of space, common background, common theme (color, font, etc.).

Image result for principles of design harmony
https://lh4.googleusercontent.com/uLa3k-ZLnTIqATPf8a0Aid1g-MBMtpN3YDilemMZ9qk0VVhHG6WvJc37x-I8qLm_SPvTyYqY6yNlYsgTZpQQg2-RcC0rZNg3q4M-2rC1H4WA6IvoNDBx5MNDjV_97TZmEExVqgP5
Image result for principles of design harmony

Typography

Typography is the art and technique of arranging type (letters and text) to make written language legible, readable, and appealing when displayed. Written word is everywhere and typography plays an important role in determining how a message is conveyed. It is often overlooked aspect of design but is capable of creating a strong visual hierarchy, providing balance to a design with text, and can set the overall tone of a text-based graphic design.

While there are many facets to typography, this page will focus on introductory concepts that will prove useful for graphics projects completed in class. When researching typography, many resources are available on the subject and often focus on a particular use, such as marketing, website user interface (UI) design, and app UI design.

A few good resources for learning more about typography are What Is Typography, And Why Is It Important? A Beginner’s Guide by Jaye Hannah and Typography Tutorial for Beginners: Everything You Need to Learn Typography Basics by Brittany Learning.

Fonts and Typefaces

Most of the time, when people are talking about "fonts," they are really talking about "typefaces" and it really does not help that most, if not all, computer programs use the term font incorrectly. These two terms have different meanings but the difference is very simple. A typeface is a family of fonts (Arial, Times New Roman, Verdana, etc), while a font refers to the size and weight of a particular type (bold, italic, light, narrow, regular, etc).

Type Classifications

Serif

Serif typefaces have little feet on the letters. Some common examples include Times New Roman, Georgia, and Garamond. If you are reading a paper or novel, you might notice the body text is a serif. That is because a serif is much easier to read in long, printed works due to the distinctiveness between letters.

Sans-Serif

Sans-Serif typefaces do not have little feet. In French, the word “sans” means “without.” So the term “sans serif” literally means “without serif.” Some common examples include Arial, Verdana, and Futura. You will see a lot of sans serifs being used in blog posts and documents on the internet because it feels more modern and looks great even at lower screen resolutions.

Script

Script typefaces are designed to look like handwriting. They can be formal or informal. Formal script typefaces are elegant and look like handwriting from the 17th and 18th centuries. These typefaces are commonly used for things like invitations and diplomas and are unsuitable for body text. Casual script typefaces look more like everyday handwriting and date back to the mid-20th century. They are also unsuitable for body text.

Display

Display or decorative typefaces draw attention. They are unsuitable for body text and are generally reserved for what is known as "short copy" such as headlines and other promotional content aimed at creating the most impact using the least amount of words. This is a very broad category of typefaces and includes the most variation.

Importance of Selecting Appropriate Typefaces

Below is a great illustration of the importance of choosing an appropriate typeface (and if you read the information above, this should really say "typeface matters"). The example on the left looks like a scene from a horror movie, while the one on the right looks like something a mom writes on a sticky note and puts on her kids lunchbox in a TV commercial. Take time in selecting a suitable typeface for the tone you wish to set in your design, even though it can be a challenge with the astronomical amount of choices available these days.

Hierarchy

Establishing hierarchy is one of the most critical principles of typography. Hierarchy aims to create a clear distinction between prominent pieces of copy (i.e. text - like headlines) that should be noticed and read first, and standard text copy (body text). With short attention spans resulting from social media, designers must be concise and create typefaces that allow viewers to take in the necessary information in short amounts of time. Ways hierarchy can be established include: contrast, color, size, weight, and layout.

Contrast

Contrast here is the same concept as above in the principles of design (emphasis/contrast), but is worth examining specifically related to typography. Contrast helps to convey which ideas or message you want to emphasize to your readers. Spending some time on contrast makes your text interesting, meaningful, and attention-grabbing.

Designers can create contrast in at least five different ways: size contrast, weight contrast, color contrast, tracking contrast, and style contrast.

Consistency

Combining too many different typefaces or styles on one page gets visually messy. Pick just two typefaces: one for your headings and subheadings, and another for your body text. With that being said, not all typefaces work well together. It is best to combine typefaces that are either very similar in form, or very different. An old rule-of-thumb is to use a sans-serif heading and serif body or vice-versa. Also, limit effects like shadows, outlines, and gradients.

Below are two examples. One portraying good consistency and the other, poor. In an attempt to help you avoid poor typeface pairings, check out these two helpful resources: FontPair and Canva's Font Combinations.

White space

Often referred to as "negative space," white space is the space around text or graphics. It tends to go unnoticed by the reader unless used poorly. Proper use of white space will ensure a design is uncluttered and text is readable. White space can even draw attention to the text and provides an overall visually pleasing experience. White space often appears in the form of margins, padding, or just areas with no text or graphics. Clumping design elements together is easily one of the most common typography mistakes, so be aware of it.

One worthwhile tip, however, is if your eye keeps moving to an area and it seem’s empty, then you should probably put something there.

Alignment

Alignment is the process of arranging text, images, and other elements on a page in a manner that is visually appealing. A good way to approach this is to group the elements based on their logical relationship. White space is a crucial part of alignment.

Be consistent with the alignment. For class project using either PagePlus, CorelDraw, or Adobe InDesign, guidelines can be pulled from the rulers on the page to assist in alignment of images and text boxes. In terms of paragraph alignment, there are options in the tools to align text to the left, right, center, or justified. Examples of this can be seen below.

Poor Example Good Example

Color

Color is where designers can really get creative and elevate their design to a new level. Text color, however, is not to be taken lightly: nailing your font color can make the text stand out and convey the tone of the message but getting it wrong can result in a messy design and text that clashes with background colors.

Color has three key components: value, hue, and saturation. A good design balances these three components to make the text both eye-catching and clearly legible, even for those with visual impairments. A trick that can be used to test this is by viewing the text in grayscale (without color) and making adjustments if the text is too dark or too light against the background color. A common problem in class is student designs are oversaturated, making the text difficult to read. The contrast between certain colors creates what is known as vibration. As one designer put it, "oversaturated colors cause a ringing effect and probably even death." While that is a silly exaggeration, it really can be painful to look at... seriously, it makes your eyes and head hurt!

Color works well when the colors used are complimentary (two colors opposite each other on the color wheel) or monochromatic (based on the same hue). Another option is compound color harmony, where an additional color is used that is adjacent to complimentary. A few resources you can use to help choose a good color scheme are Color Hunt and Adobe Color.

Legibility and Readability

The point of typography is to make the reading experience enjoyable. Readability refers to how well passages can be read, in terms of comfort. Legibility refers to how easily the letters can be seen. Readability is improved by a number of factors; for example, dark type on a light background makes for comfortable reading. That is why books don't have black pages with white print. For a flyer or smaller print that does not require a lot of reading, the opposite may prove beneficial, though. It just depends on what type of graphic you are designing.

Text is readable when it has the following:

1. Contrast, especially value contrast (difference in brightness, as opposed to difference in hue or saturation)

2. Appropriate tracking (space between characters)

3. Appropriate leading (pronounced ledding, which is the space between baselines - think single-spaced, double-spaced, etc)

4. A typeface without bells and whistles (this helps with legibility)

5. Sufficient size (size your type to your audience - little kids learning to read and older adults will benefit from larger text)

6. Noise-free background (not too busy)

7. White space around

Intellectual Property

Intellectual property can be defined as a work or invention that is the result of creativity, such as a manuscript or a design, to which one has rights and for which one may apply for a patent, copyright, trademark, etc. It protects the work of authors, artists, photographers, designers, inventors, innovators, and the like. These people earn a living from their work and it is important that we respect them and their work. In the United States, the United States Patent and Trademark Office oversees intellectual property records and requests.

Think about intellectual property this way, it is not okay for someone to take your belongings, like your shoes, bike, or your favorite games. Your ideas work the same way. Intellectual property laws protect your ideas and creations. They are your intellectual property. Your shoes, bike, and games are your physical property. Protecting people's’ intellectual property allows us to be the most innovative country in the world!

There are four ways to protect your intellectual property: patents, trademarks, copyrights, and trade secrets. The first, patents, give an inventor the right to exclusive use of their invention for a limited period of time - 20 years. At the end of the 20-year period, anyone can use the design. The system was designed this way to allow for improvement. If people owned the rights to their design for their whole lifetime, technology would not grow as fast and many items we take for granted today may have never existed or still be in a very primitive state. Want to see what an actual patent look like? Check out this link.

Trademarks protect the unique name, design, logo, symbols, or colors used by a business to identify their products or services. This allows businesses to build a reputable brand without having to worry (too much) about someone else using their name, design, logo, symbols, or colors to gain popularity for an inferior product. People would associate the failing product with those characteristics and both companies would fail. “Bootleg” items are an example of people infringing on trademarks to try and earn a quick buck by selling poorly made products that look like their quality counterparts. If you have ever visited New York City, you may have seen the people selling bootleg items on the side of the street, always moving to keep from getting caught. You may buy a copy of your favorite movie and when you watch it, it was filmed with a portable camera by someone sitting in the theater watching the actual film. Or, you may by a trendy item like sunglasses or a purse for a fraction of what it would normally cost, but the product is poorly made and will fall apart or fail in a short period of time.

Copyright protects creative and artistic expressions; for example, books, drawings, paintings, computer programs and music. If your favorite band releases a new album and only sells a few copies because everyone is making copies, it is highly unlikely they are going to make another album. There is no monetary reward for their hard work. This is where copyright comes into play. Copyright ensures that people creating these things can earn a living without their work being stolen. Financial reward is one of the most common reasons people invent and create.

Trade secrets consist of information that may include a compilation, device, formula, method, pattern, process, program, or technique. To meet the most common definition of a trade secret, it must be used in business and give an opportunity to obtain an economic advantage over competitors who do not know or use it. In the Crush Orange example below, the "with other natural flavors" is the trade secret. All orange sodas are nearly the same. For that matter, nearly all sodas are the same. They are primarily made up of sugar and water. The "other natural flavors" are the only thing that differentiates one brand from the next.

As an example of what rights using a logo may look like, click the NASA logo. The image is linked to their media usage guidelines. Students frequently want to use logos like this for class projects but this would be copyright infringement. Our goal in this unit is to teach and practice ethical usage of media.

Fair Use Doctrine

Along with intellectual property laws, there is also something called the fair use doctrine, which has long been part of U.S. copyright law and was expressly incorporated in the 1976 Copyright Act. A judge may excuse unauthorized uses that may otherwise be infringing. Section 107 of the Copyright Act lists criticism, comment, news reporting, teaching, scholarship, and research as examples of uses that may be eligible for the fair use defense. While this exists, there are no clearly defined principles about what can and cannot be used, and in no way does this give people the right to take people’s intellectual property. This is, for example, what allows you to quote someone else’s work in a research paper or to listen to a small amount of a song online to help you decide if you would like to purchase it. This is also what allows shows like NBC’s Saturday Night Live to perform comical sketches poking fun at movies and products that otherwise would be protected by intellectual property laws.

The graphic below is a good example of the fair use doctrine in action. While this looks like the Nike symbol and uses the slogan in a way (“Just do it”), it is transformative in nature. The image completely changes the meaning or idea behind the design. While this image has been circulating the internet, there is no clear author to the design. It may have been created by the Simpsons show or by an outside source. Both the Nike slogan and Homer Simpson would be copyrighted. The Nike symbol would be trademarked.

Image result for homer just do it later

Creative Commons License

Creative commons licenses are becoming more prevalent. Creative commons licenses can be used for many different types of media. Since the topic is graphic design, we will examine sites like Flickr, which have been created for people to share their photos with others. Settings on accounts and images uploaded would determine who can access the images. It is very important to read ALL of the fine print before pulling an image from this type of site. According to CreativeCommons.org,

“All Creative Commons licenses have many important features in common. Every license helps creators — we call them licensors if they use our tools — retain copyright while allowing others to copy, distribute, and make some uses of their work — at least non-commercially. Every Creative Commons license also ensures licensors get the credit for their work they deserve. Every Creative Commons license works around the world and lasts as long as applicable copyright lasts (because they are built on copyright). These common features serve as the baseline, on top of which licensors can choose to grant additional permissions when deciding how they want their work to be used.”

There are six different types of Creative Commons licenses. Each with different attributes. More information can be found at the Creative Commons website.

Public Domain

Once a patent or copyright has run its course, the item goes into the public domain, where it can be used freely. This can be a very long time in some instances (over 70 years). Also, there are many public domain websites out there now with images, audio, videos, etc. that the creators of the media give up their rights to the intellectual property to allow others to use the media free of charge and free from restrictions. Pixabay is just one of many examples of a public domain website. They offer public domain images for the public to use.

When using public domain websites to obtain images, it is necessary to download the images to the computer and import them into files to retain quality. Copying and pasting images will often cause a significant reduction in the quality of an image. When designing items for print, this can be a serious problem.

Searching for a particular topic in a search engine with “public domain” as part of the key words is not acceptable. To ensure an image or other type of file is in the public domain it is vital that a designated public domain website be utilized. Even filters on search engines, such as the “usage rights” filter on Google is not reliable. An example can be seen below. The Steelers logo is a registered trademark that cannot be used without permission from the National Football League (NFL), but the results of a filtered search can be seen below.

Stock Images

Often, students confuse stock photos with public domain images. Unlike public domain images, stock photos are not free and do have rights attached to them. Stock photos tend to be more interesting, but you have to buy them. They are almost always linked on public domain websites and can be somewhat deceiving. They may be advertised as “free,” but when clicked on, you are prompted to pay a monthly fee to access the “free” images or may receive credits for so many free images after signing up for their paid services. One easy way to tell if you are looking at a stock photo is to look for watermarks. Sometimes other copyrighted images are watermarked to discourage people from stealing the images. A couple watermarked image from Shutterstock, a stock photo company, can be seen below.

https://image.shutterstock.com/z/stock-photo-zagreb-croatia-august-official-nhl-game-puck-with-pittsburgh-penguins-equipment-211747894.jpg
View of downtown Pittsburgh from top of the Duquesne Incline, Mount Washington, in Pittsburgh, Pennsylvania USA