Graphic Design Theory

Font Types

Serif fonts

• These have the little tails on the end of the letters.
• These fonts are more serious and authoritative.
• These are good when there is smaller, more compact text. The serifs help you read and identify the letters a lot easier.
• Also described as traditional, stable and respectable.
• There are sub-categories such as old style (ie-Goudy), transitional (ie-Times New Roman), modern (ie-Didot), and slab serifs (ie-Courier).

Sans-Serif fonts

• No tails on the end of the letters.
• These fonts are more friendly, approachable, novel and contemporary.
• Also described as sensible, simple, straightforward, and minimalist.
• Help the text really stand out. They are good for headlines.
• Became popular in the mid-20th century
• There are sub-categories such as grotesque (ie-Source Sans Pro), neo-grotesque (ie-Helvetica), humanist (ie-Gills Sans), and geometric sans serifs (ie-Futura).
• Very easy to read font. These are good for body text.

Script fonts

• These fonts can help add a natural look.
• These have to be used carefully so that they do not overwhelm a design.
• Some sub-categories are formal scripts (ie-Snell Rounhand), causal scripts (ie-Sign Painter), and decorative typefaces (ie-Cheap Pine).

Mono Space Typefaces

• Fixed width letters
• All letters use the same exact space, whether they are a narrow or wide letter
• Often used for coding and programming

Typography Vocabulary

Glyph

• Symbols and shapes that represent a given character

Letterform

• Glyphs that are the basic shapes that form a letter

Character

• Letters, punctuation marks, and numbers

Typeface

• Collection of characters with specific characteristics

Font

• Specific way to represent a typeface in different formats
• For example, Roman, Italic, Bold, etc.

Font Family

• A collection of fonts for a specific typeface

Font Weight

• Light / bold
• Some fonts have a lot of font weight choices.
• Example: Raleway, Helvetica and Gill Sans
• Using two different weights from the same font help create a balance to your typography, and pair well together.

Italics

• Italics can make great accents
• Italics help when there is a lot of text in a particular space and you want to highlight a keyword or phrase

Spacing Terminology

• Kerning: when you manually set the spacing between characters
• Tracking: when you let the computer set the spacing

Spacing

• Default spacing
• Script fonts should stay at default spacing.
• Wider spacing - can take on a more elegant look
• Lowercase fonts do not look as good with wider spacing. Use all uppercase for this style.
• Tight spacing - helpful if you want your message to be loud and bold

ALL CAPS vs lowercase

• lowercase has a softer, more gentle feel to them
• ALL CAPS IS STRONGER. Can be good for headlines
• Balance between both is the best

Using Type in Layout & Design

Text Alignment

• Choices: Center alignment, left & right
• When choosing the headline alignment, it is best to choose it based off of the subject's alignment.
• For example: if there is a woman in the ad facing to the right, it is best to put the text in the direction that she is looking to help connect the image to the text.
• If choosing center alignment, consider using more whitespace to help create breathing room between the vertically aligned elements. Also make sure your image is also center aligned.

Mixing Type & Design Elements

• When you have a bold photo or subject matter, it is wise to embrace the image and place the text over the top of the subject matter.
• Play with how the text and photos interact with each other. This is where design gets fun!

No Photos, No Problem

• With proper fonts and typography, you can make a design that is relevant and still has impact.
• Using color and italics to highlight words, it helps the type become the design itself.

Whitespace is Necessary

• This helps your design breathe, and make it easier to read.

Font Pairing Tips

• Some fonts tend to work well together
• Make sure the fonts you pair have enough contrast between them so whoever is reading them can tell them apart.
• It is best to use no more than 2-3 fonts per design.
• Choose a good headline font, a body copy font, and a complementary font for variety.
• Find two fonts that have a similar mood and time era.

Font Pairing Suggestions

• Pair a sans-serif with a serif.
• Pair all caps with lowercase
• Pair a script font with an all bold sans-serif font
• Pair a script font with a slab serif font
• Contrast weights of title and body

Typography Articles

Designing for Readability

Beautiful Typography In Web Design

7 Web Typography Rules

Web Typography: 100 Educational Resources, Tools & Techniques

Expressive Web Typography: Useful Examples & Techniques

8 Simple Ways to Improve Typography in Your Designs

Color Vocabulary

The art and science of creating the right color palette for your graphic design project

Color

• Any color we see whether it is a hue, shade, tone, or tint

Hue

• This is the general color family our color belongs to
• There are no grays, blacks, or whites - only color

Tint

• Tint is a hue with only white added to it
• This makes hues appear lighter

Shade

• Shade is a hue with only black added to it
• This tends to make hues appear darker

Tone

• Tone is a hue with gray added to it

Value

• Value is the measurement of brightness of a color
• You can determine the value by converting your colors to gray scale, and then observe how dark or light the grays are

Saturation

• This is the brilliance of a color
• High saturation has no gray or black added to a color
• Low saturation has a lot of gray or black added to it

Color Mood

Color Impacts Emotions and Behaviors

Psychology of Color

You have to consider what mood a color invokes.

• Red = bold, powerful, and direct
• Commonly used in social media, food & beverage, fast food, entertainment, and news media
• Yellow = attention-grabbing, youthful, joy, and intellectual
• Commonly used in children & youth focused brands, non profit organizations, and cleaning products
• Orange = enthusiasm, happiness, and warmth
• Commonly used in social media, food & beverage, teen brands, and education
• Green = freshness, safety, growth, natural, organic, and mindful
• Commonly used in cleaning products & services, organic products, & investing companies
• Blue = trustworthy, stability, and serenity
• Commonly used in banks, technology, healthcare, social media, industrial, and transportation
• Purple = comfort, sophistication, and passion
• Commonly used in healthcare, technology, hospitality, and non profit organizations
• Pink = vibrance, romantic, feminine, and compassionate
• Commonly used in youth focused brands, feminine brands, and beauty industry
• Teal/Cyan = self-expression, experimental, clarity, open, and peaceful
• Commonly used in technology, start-ups, social services, service industry, and bio-tech
• Neutrals = provide balance
• Examples are brown, tan beige, gray, gold, silver, black, and white

Color Palettes

To find ideas for color palettes, go to Color Hunt. There are different palettes already designed by professionals, and you can just copy the hex codes right into your work.

Adobe Color Wheel is also a great resource. Lots of different ways to choose a color palette, or how to choose a color to match an existing color you already have.

Excellent Article on How to Choose a Color Palette

Paletton Color Palette Chooser

Color Combinations

• Analagous colors: two colors right next to each other on the color wheel. These work well together and feel harmonius.
• Good for navigation bars, the body of your website, or your logo and it's background.
• Not good for making something stand out.
• Complementary colors: two colors opposite each other on the color wheel. These two colors really make a statement by standing out.
• Good for two contrasting colors in a design scheme.
• Not good for font and background colors together.
• Lots of other ways to find matching color combinations.

Strong Color Palettes

• Color combinations from across the color wheel
• At least one color must contrast against the others
• Contains at least one neutral color
• Flexibility - allows for many different combinations of colors while still allowing for readability

Choosing a Custom Color Palette

• Let's develop a color palette together for a new company, and their main color will be blue
1. Start with analogous color to find closely related colors
• Using only pure hues can be a problem sometimes because they are all the same saturation and strength
• We can add white, gray, or black to any of our colors to create a wider color palette
2. Next we will take our analogous colors, and find corresponding completentary colors for each one
• The complementary colors will add a pop with it's higher contrast
3. To diversify even more, you can create various shades, tints, and tones to expand your complementary color set
• This will create a very large color palette that is really to large and unnecessary
4. Now we will choose primary, secondary, and neutral colors to create a final color palette for company
• Primary colors are the most used colors in a given project
• Primary colors will take up larger spaces and be featured more often as prominent colors
• Secondary colors are used less frequently, and are alternatives if a primary color is too bright, too dark, or too light for a given area
• Neutrals are anything with low saturation
• Only one or two neutrals are needed in a color palette
• Neutrals are often used for typography and other small design elements

Color Contrast in Design

Contrast is Essential

• Highest contrast available is white on black (or black on white)
• Text is most legible when it is black text on white background
• Using complementary colors (opposite on the color wheel) gives them high contrast

High Contrast Can Help Sell

• Contrast can help increase the effectiveness of an ad
• Use contrasting colors in the part of the ad you want to draw the most attention to (percent off an item, call to action buttons, etc.)
• Call to action buttons with higher contrast tend to convert better
• Color is just one way to add contrast
• You can add a border, different size font or different font style (italic, bold) to contrast from the other objects on the page
• Background color behind the call to action button is also very important to estblish its contrast

Low Contrast Design

• Low contrast can be used to reduce tension in your design and soften the look
• Font can match the color of an item in your ad, and have lower contrast to it's background
• Monochromatic colors make for a lower contrast color palette
• Neutral colors lack saturation, so when put together they have a unifying feeling

Weight in Your Design

• Weight of items also needs to be considered in your designs
• High contrast colors can help you decide which object is heavier, therefore getting the most attention - even if the obejct is smaller than the others

Design for the Color Blind

Rules for Thinking about Color Vision Deficiency

1. Never have important call to actions, buttons, or text dependent on jst color to be noticed or set apart
2. Use highly contrasting colors
3. Limit or modify tough color combinations
4. Use a color blindness simulator to try out your design: Color Blindness Simulator Website

Composition Vocabulary

Composition is the combination of photos, typography and color to produce your design. Following are some general terms used in composition.

Title or Headline

• top heading or title

Drop cap

• large capital letter at beginning of article, first letter of first word of sentence

Body text

• the paragraphs of the article

Leading

• The spacing between lines of type

Pull-quote

• A quote with larger text and set in between paragraphs within an article

Ragged lines

• Uneven lines of a right margin of a block of type

Folio

• The page number on a page
• Can also include dates, section title or webpage

Whitespace and margin

• Ample whitespace in your margins help to make your layout look more professional

Orphan

• Line of text with just one word, usually at the end of a paragraph
• Try to avoid orphans at all costs

Call to action

• A click now button on a paid digital ad or a line of text to purchase something on a website

Margins

• Margins border the entire layout
• Margins help you line everything up correctly and make sure they are within the viewing area

Objects in the margins

• Feel free to extend unimportant items off the margins and off the page
• You can do this with parts of photos and non-text design elements
• This helps the piece feel more alive

Go Vertical

• Turning some text vertically is a nice contrast to other horizontal items
• This can help draw attention to the text
• You can use the grid as a guide for placement

Hero Image

• This image is your main focal point
• Layouts work better if you only have one main focal point, and other images are smaller and in different sections of the layout

Supporting image

• This image supports the hero image
• It is not as large and compliments the theme

Columns

• Columns run vertically downward from the top of the margin to the bottom
• These are often used in magazine and editorital layouts to place text

Overlapping Elements

• Another way to break up a boxy layout is to overlap elements using the grid as your guide
• For example, a quote box overlapping a photo

Blocking your Layout

Blocking is the planning and organization of a design before the graphics are added

Blocking Tips

• It is usually done with just plain colored boxes in a general layout
• It is helpful so you can plan where all of your required elements will be laid out before you start adding images
• Using blocking can help you explore different layouts, really focus on what the main goal of your design is, and make sure your layout is supporting that goal
• Blocking your design really cuts down the time it takes to produce a finished layout
• The content decides the layout - lists, photos, important text, etc.

Visual Hierarchy

• Larger text, bolder colors and design elements are seen first
• Smaller, less important text, colors, elements are seen next, etc.
• This is easy to do with contrast in text size (h1, h2, etc), text weight, different fonts, text color, placement, different sizes of photos (one main one with smaller supporting photos), and with less important elements sized smaller and placed together

Focal Point

• Focal points provide direction
• This is accomplished by using different sizes of images or text to direct your eye to the main design
• Grouping also helps draw your eye from one element to the next

Optimal Readability

• Optimal line length is 50-60 characters
• This size helps your eye move from one line to the next
• Longer lines of text creates fatigue, and can frustrate the reading experience
• Column width
• Short line lengths are fine for short photo descriptions, but avoid using shorter widths for longer text areas
• Line breaks
• Too many or too few line breaks in longer paragraphs make type uncomfortable to read
• Longer sections need at least one break
• But too many breaks make it to choppy

Font Choices

• Type is measured in "points" in printed designs
• Fonts are measured by em's in digital designs
• One point is 1/72th of an inch in character height, so 72 pt font is one inch high
• 8-12 pt font sizes are recommended for longer blocks of text
• Anything below 8pt can be difficult to read
• Small print for disclaimers is acceptable at 6pt
• Font choices change based on the type of layout you're using, the way it is being read (print vs. digital), and the message you are trying to get across
• Some fonts work better at a smaller/larger size based on their weight
• Typographic scale - there is an acceptable scale at which font sizes should increase which is acceptable to good design
• You can create a type hierarchy plan for a client using the typographic scale

Alignment & Justification

• Alignment, or justification, helps you create a layout that is visually appealing
• It is best to choose an alignment for your design, and to stick with it throughout
• Grids can help figure out spacing and alignment
• Left-alignment
• A good use is with smaller or medium length paragraphs
• Also good for large headlines
• This is used the most because we read from left to right
• Center-alignment
• A good use is when this is used consistently throughout a design
• A bad use is when it is used with short columns or long columns of text
• Can be used when text is balanced on the left and right sides, creates a harmonizing effect
• Right-alignment
• A good use is when it is alternated with left-alignment to direct the flow of the design and to provide balance
• A bad use is with larger areas of text
• Also can be bad when you are using it with a punctuated sentence because the punctuation makes it feel like it's out of line

Using Photographs

• Simplify Complex Messages
• Photography and illustrations have the power to simplify comples messages without words
• In marketing, simple messages are more effective than complex ones
• Modern visuals, ads and social media have only seconds to grab your attention
• Framing Helps Tell the Story
• Framing is the isolation of a subject in a photo through the use of a shape
• This allows the main subject of the photo to become the main focal point
• Cropping for Emotion
• How you crop your photos can shift the emotional impact of your design
• Crop based on what you are selling - the emotional connection with a product (show a face) or the product itself (show it being used by a person)
• Use multiple photos in narratives
• The key to using multiple photos is to use photos with different presentations (face with eye contact, just the product, someone using the product in a wider view)
• This helps balance out the photo usage and allows us to tell the narrative with photos from different angles and perspectives

White Space & Spacing

• White space is incredibly important in design
• It allows for breathing room, and changes how a design feels when there is more or less
• More white space makes a design feel more professional and luxurious
• When items are spaced too closely together they can create anxiety and an uneasy feeling
• When spaced too far apart can limit the use of the included text, and feel like it is not well thought out
• Headline spacing
• Wide spacing between lines can give a dramatic flair. Too wide and it can feel disjointed and tiring to read
• Tight spacing can help you headline read nicely as one unit. Too tight and it feel unpolished and amateur
• Kerning/Tracking - Spacing between characters
• Large spacing between characters in all uppercase characters can feel elegant and high end
• Wider spacing between all lowercase characters can feel less connected because all of the letters have different heights

Repetition & Design Themes

• Repetition creates continuity throughout your design
• Repeating design elements such as color, type choices, color blocks, dividing lines, shapes, images, spacing, cropping, etc. all help create a theme

Layout Types

Editorial Layouts

• Magazines use editorial layouts, spreads (two pages), and also cover designs
• These tend to be photo driven with large areas of text
• Book covers do best with a layout that encourages a story being told
• This can be done through the use of photos or images that relate directly to the book's characters or unique typography that support the genre of the book

Social Media

• Social media posts are different sizes for all different platforms
• They tend to feature a prominent single focal point with a call to action
• These can be the most restricting due to limits set on size and text amounts by social media platforms. For example, Facebook paid posts restrict the total area of type, forcing the design to be more photo heavy
• Since different platforms require different sizes, responsive design comes into action
• Edit your design to the most important elements for smaller design, and elaborate and use more photos in larger designs
• Most effective social media designs focus on the viewer and not the company
• Design them to be outward focused, provoking an interaction or response with a quesion or comment

Large Format Layouts

• This includes anything larger than a standard piece of paper
• Designs include posters, billboards, signage, and banners
• These designs have to be simple because of the average viewing distance is very large
• Text needs to be large, simple, and easy to read
• The concept needs to be quickly understood and have photos that feature less complexity

Package Design

• Package design has new challenges for designers
• It must be appealing to consumers and look eye-catching on shelves
• These layouts tend to focus heavily on the company or product name, as well as any descriptions that may further explain the function of the product
• Most of the time package design comes in sets of different products (for example, four different soda cans)
• These sets need to look cohesive and have a strong design theme
• Keep in mind there might be legal or additonal information that is required on some food product labels, which reduce your layout options
• Bar codes, websites, and shipping information needs to remain clear

Apparel, Accessories & Other Tangibles

• These are all unique because they are not printed on paper
• These layouts usually have a single purpose and can be used multiple times
• For example, a lanyard design card might need to feature a clear, large job title, photo, or bar code depending on the company needing it

Grid System Vocabulary

Grids can help you line your elements up correctly in design. There are many specialized grids for specific design purposes.

Flowlines

• Flowlines are the lines that run horizontally all the way across the grid to help the reader follow the content

Modules

• Modules are the boxes or areas created by the vertical and horizontal lines of a grid

Spatial Zones

• Spacial zones consist of several modules to create blocks and content areas to give you a guide on placing photos and blocks of text
• These can be large or small depending on content

Gutters

• Gutters are areas between the columns and rows
• It is best to maintain the same width of the gutters throughout your entire project to maintain consistency

Margin

• Margins are the thick border along the outside of a grid
• Wider margins create more white space, which allows for edges, folds, and creases

Columns

• Columns run vertically from the top margin to the bottom margin
• These are often used in magazine and editorial layouts for print design
• These are also used in digital design when creating webpages

Rows

• Rows run horizontally from the left margin to the right margin

Types of Grids

Manuscript Grids

• Also known as block grid or single column grid
• This grid is great for books and long, continuous text
• Manuscript layouts consist of one center block that divides up the page with a clear margin, text area, header and footer

Column Grids

• This type is great for magazine layouts
• Columns are good when you want to mix up photos, quotes and text
• You can have anywhere from 2-12 columns depending on what you're designing

Modular Grids

• This is the most flexible type of grid
• Modular grids are good for posters, flyers, magazine cover and designs that require a more creative layout
• They can also be used for arranging a list of items or photos that need the same spacing or have the same order

Hierarchical Grids

• These are mostly used for the web because the gutters, margins, and columns can change based on responsive design
• The most important items are placed higher up in the layout so they are seen right away when a webpage is opened up

Composite Grids

• You can combine different grid types to work for your design
• For example you might combine modular and column grids elements
• You could have the top half be modular, and the bottom half column grids
• You make the rules - make it work for you

Isometric Grids

• These grids are used when you want to represent 3D objects in 2D
• This grid looks like triangles set at a 60 degree angle
• An advantage to this grid is that there is no distortion relative to location allowing you to compare sizes across large areas
• Using isometric grids allows you to determine where your light source is coming from and create lights and darks accordingly (bright, middle, dark)
• You can show depth and height by overlapping objects and using shadows

Icon Grids

• Icons exist as a design element for digital design, and sometimes come in a set or series
• There is a grid designed specifically for creating icons so that it can be centered and balanced
• Creating a grid set using the grid can also help create a cohesive look
• The spacing between the circles and lines are determined by the golden ratio

Using Grids in Your Designs

Grids in Logo Design

• Create spacing rules for a brand
• Establish spacing between elements of a logo, but also the spacing recommended for the areas outside of the logo
• For example: You determine that 50px of white space should be used between the logo mark and the logo type (icon and name)
• If so, then you should use a multiple of that for the white space around the outside, like 100px

Grids for Web Layouts

• Desktop
• Desktop uses a 12 column grid layout with a small gutter
• This grid is the default in Adobe Xd, which is commonly used for website and mobile app layout design
• Mobile Layouts
• Mobile layouts commonly use a 4 column grid
• These columns help guide the placement of buttons, photos, and all other design elements

Grids in Editorial Layouts

• Grides help keep both sides of a spread cohesive
• They help keep even spacing between gutters
• Provide a professional organization of large arounts of information

Breaking the Grid

• Grids are helpful, but they may not be necessary for all situations
• You might not need them if you have fluid movements, curves, and shapes where you want a bit of unpredicability

The Golden Ratio

What is the Golden Ratio?

(a+b) / a = a/b

The golden ratio is about 1.618 and is represented by the Greek letter phi

• Simply put, if one side of a rectangle is 1, then the longer side is 1.618 in length
• This is a simple ratio that can be seen throughout nature
• Using this ratio helps strike a balance between the main visual and the remaining content
• This creates a balance and a naturally pleasing division of elements

The Golden Ratio Spiral

• Also known as the Fibonacci spiral
• The golden ratio spiral is often applied to logo designs
• You can also apply it to layout designs
• When the golden ratio is repeated over and over, you get a series of rectangular shapes that circle around to a particular quadrant
• This helps lead the eye through your design, and can help you frame your photos

Golden Ratio in Logo Design

• Two divided halves
• The golden ratio is a naturally pleasing ratio and consists of two divided halves. The first being 1:1 and the other side being a multiple of 1.618 of the first size
• The ratio repeated
• Repeating the ratio and fitting those two halves inside the biggest half will create the golden ratio grid
• The golden spiral
• When you draw an arc from one corner to the opposite corner and continue to do so through increasingly smaller golden ratio rectangles, the result is the golden spiral
• Golden ratio circles
• If you create circles in the golden ratio grid boxes, you will be able to conver the ratio from a rectangle to circles
• A basic structure for logos
• These golden ratio circles can be used to help you create a wider variety of shapes and curves
• Overlaying circles
• Overlap these circles of different sizes to create your shapes
• This is most useful for simple curvy illustrations, icons, and symbols

Golden Ratio in Typography

• If you want to size your typography based on the golden ratio choose the size you would like to start with, and then multiple it by 1.618 and divide it by 1.618 to determine your three complimentary sizes
• For example: Beginning font size 12
• 12 * 1.618 = 19.5 (rounded)
• 12 / 1.618 = 7.5 (rounded)

Design Style History

Design style movements often swing from one extreme to the other. From intricately designed themes to minimalistic styles. This often occurs when one style counters the style previous to it.

Bauhaus - 1919-1933

• Bauhaus' focus was to make things as simple as possible without the use of anything unnecessary.
• This design style focused on mass production of items that are well designed and easy to make. This meant the design used less materials making it easier to manufacture and produce.
• Typography was influenced with rounded edges combined with sharp edges.
• There was a desire to create a style with more scientific ways of solving design problems. This bore grids, the golden ratio, and other ideas.
• It's focus was to use basic geometric shapes with clean lines and less emotion than the past.
• This is a clean, classic design that has been around for over 100 years, and is here to stay.

Art Deco - 1925-1940

• The Art Deco movement was inspired by cubism, a style of painting by Pablo Picasso. It was also influenced by basic 3D shapes like the cone, cylinder, and the sphere.
• This era developed after WWI, and wanted to show an excitement for the rapidly developing technology and industries of the world.
• It is defined by extravagant opulence with lots of details, sharp angles and modern day materials like plastic and glass.
• Two famous buildings in the Art Deco style are the Empire State building and the Chrysler building.
• Typography was influenced with long, stretched out letterforms with pointed ends but geometric inspired curves.
• They also added the cross bars for letters up high or extra low, underlined letters (often vowels), and sometimes nestled two repeat letters inside of each other.
• This style is popular in logos for coaching, personal development, and hospitality.
• Layout design in Art Deco style included a lot of boxes around text with double strokes and line art. This is often used in menus now.
• Gold was a color often used in this style because it represents success, wealth, and opulence.
• Symbols often used in this style include sunrays, plant leaves, shells, and other natural objects.

Swiss International Design (International Typographic Style) - 1950s

• The Bauhaus style came back with the Swiss design style. This is a "form follows function", and used grids, white space and sans-serif typefaces.
• This style still has influence today with its use of simple geometric shapes.
• Grids are a big part of the Swiss style. They help maintain order, but also keep things in a more readable design.
• White space is king in this style. In other styles white space may have been consider wasted space, but here it is used to help make it more readable and to maintain its minimalistic look.
• Typography is very important in this style. It uses mostly sans-serif styles, and the typography is often left-aligned.
• Helvetica (developed in 1957 by Max Miedinger) is still used today, and is often used for a clear, easy to read font.
• Grids were an important tool for the Swiss style, and so was the Golden Ratio.
• This style was all about making designs as simple and clean as possible.

Pop Art - 1950s-1970s

• This style featured every day items in a comic book style.
• A famous example is the Campbell's soup can by Andy Warhol.
• It became popular because the topics were relatable to their viewers.
• Pop art is not about grids and precision, but more of a less clean style with rough sketched lines, torn newspapers, and collages.
• The halftone, a group of different sized, but evenly spaced dots, was popular in this style.
• Most logos that use a Pop Art style also use expressive typography in their design. This might include hand drawn typography that fit inside a shape and the letters fit together like a puzzle.
• There was a comeback of Pop Art in the 1990s.

The Advertising Boom - 1960s-1990

• Graphic designers of the past might have just placed photos into stories before, but at this point they had a much more important job. They were helping companies establish a visual brand with logos and advertising.
• Design budgets were growing, and companies wanted to stand out from their competitors. This was a time of big growth for the graphic design industry.

Post Modern - 1980s-1990s

• This style was all about being fun, odd, quirky, and bold.
• You needed to break the strict rules of the Swiss design style, and make things look different than before.
• Non-rectangular shapes and distorted exteriors became part of the Deconstructionism in architecture of this time.
• Designers used rounded corners and objects that looked like they had a lot of movement in them.
• Abstract logos broke out of the grid, and utilized rounded edges and overlapping elements.
• The Memphis Style was popular in the 1990s. It included pastel colors, bold graphic lines, simple geographic shapes all over a grid.

Digital Age - 2000s-2020s

• The Digital Age has once again simplified designs. We are now designing for small, mobile devices with clean, simple, and small designs.
• UX design (user experience) is now a new category of graphic design. It focuses on how a user interacts with a website or app.
• Before mobile devices, we all surfed the web on desktop computers with big screens. The logos included logomarks, blurred highlights, drop shadows and layers.

Web 2.0

• Web 2.0 - The 2010s took us to a time where brands wanted to look high tech. They utilized a glossy look with reflections like the logo was sitting on glass, gradients, curved highlights, and anything that could emulate glass.

Skeuomorphic Design

• Apple revolutionized design when it came out with hyper-realistic looking icon designs - skeuomorphic design.
• These icons looked like you could almost touch them and they would feel like they were 3D. They used lots of details, effects, and layers.

Flat Design

• Flat Design - 2008-present - once again we are back to simplified designs. This was the counter to the reflective and skeuomorphic designs of the past.
• Flat design has zero effects, no drop shadows, and no details.
• Many companies updated their logos during this time to get rid of the Web 2.0 time, and simplified their designs into the current flat design style.

Hand Drawn Fonts

• What now? Hand drawn fonts are starting to come back in the 2020s, with some details to make designs look more unique and have them stand out against their competitors.

Gestalt Theory

Gestalt theory emphasizes that the whole of anything is greater than its parts.

1. Similarity

• The human brain groups together similar objects by color, size, and shape.
• Knowing that the brain does this allows designers to develop our layouts with this concept.
• We can bring attention to a part of our design by making it stand out from the rest. You can do this through color, size, or shape.

2. Proximity

• You should keep related objects grouped together.
• This should be kept in mind while creating layouts. You should group related items together in a layout so they feel like a larger cohesive group that shares a goal. This helps the brain organize the information that you are presenting.
• This concept should also be used while grouping text together like a logo and a tagline. Too much space between them will not connect them, but placing them too close together makes them feel cramped and uncomfortable.

3. Simplicity

• Your mind breaks elements into the simplest forms possible.
• This concept is often used in icon design. Icons need to be very small, so we simplify our illustrations so they are still recognizable in their simplest form.
• Think about where you could take out a detail, or make it more simple. Is this graphic design element crucial to my design?
• It's not all about showing off your creativity, but relaying your design's overall message. Make it clear, concise, and recognizable to look at.

4. Figure/Ground

• Our brain looks at color and contrast to find and assign objects as either in the foreground or the background.
• When designing, lighter colors tend to stand out more as foreground objects, and darker colors tend to be interpreted as background objects.
• If you want an item to stand out, use a lighter color and darken the colors of all of the items around it.

5. Symmetry & Order

• Your mind tries to achieve balance and establish order with everything it sees.
• Symmetry is more attractive, and feels more balanced.
• Balance shapes, initials in logos, and titles on a magazine cover so there is symmetry.

6. Closure

• Our brain likes to fill in the gaps.
• We can use this to our advantage in design by using negative space.
• Using negative space implies shapes or letters that don't actually exist.
• You can create designs using this concept by creating the part of the design that you want to be the negative space as a shape with the same fill color as the background color. This way you can move it around and see where you want it to line up.

7. Law of Experience

• We use past experiences to try to interpret new ones.
• In the design world some headlines have become more abstract, but because of our past experiences we are still able to read them. For example, a capital A without the crossbar.
• Some design trends should be kept, such as fine print at the bottom of an ad, but sometimes by breaking the trend you can bring your viewer's attention to it.
• Try using an unexpected pop or color, or turn your headline sideways to grab their attention.

8. Continuation

• Your eye prefers to follow smooth, curved paths over inconsistent, broken ones.
• In the design world this can be used to your advantage in your layouts.
• If you have a face in your design, the eyes/face should be facing the text that you want your viewer to read. You will see their face, follow their gaze to the headline, and read the words there.