Fundamentals of Design: How to Think Like a Designer

Jack Zerby, Design at Vimeo, Pentagram, RGA, & Frog

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Lessons (1h 23m)
    • 1. Trailer

      1:12
    • 2. What is Design?

      2:06
    • 3. Intro to Grids

      5:05
    • 4. Screencast: Using a Grid in Practice

      5:19
    • 5. Grids and the Golden Section

      2:49
    • 6. Intro to Visual Hierarchy

      3:44
    • 7. Screencast: Using Visual Hierarchy in Practice

      6:39
    • 8. Types of Hierarchy: Color

      5:02
    • 9. Types of Hierarchy: Space

      5:00
    • 10. Types of Hierarchy: Alignment

      3:10
    • 11. Types of Hierarchy: Implicit and Explicit

      2:56
    • 12. Intro To Typography

      10:11
    • 13. Combining Typefaces

      2:58
    • 14. Picking a Font Size

      2:27
    • 15. Typography Crimes!

      1:39
    • 16. Screencast: Using Fonts in Practice

      5:54
    • 17. Intro to Color

      4:06
    • 18. Color Theory Basics

      3:53
    • 19. The Von Restorff Effect

      2:45
    • 20. Screencast: Using Color in Practice

      5:39
37 students are watching this class

Project Description

Design a personal portfolio page using grids, visual hierarchy, typography, and color theory.

Intro To Design

  1. Outline your personal page

    Prepare your copy in an outline format for a personal page you'd like to create. The purpose of design is to communicate a message or solve a problem, so make sure as you go along that your design is not interfering with the above definitions.

    Share your outline on your project page. Be sure to provide feedback to other students.

The Power of Grids

  1. Build your grid

    What is a grid?

    ■      A grid is simply a division of space on a page to create structure and order for the content.

    ■      There are infinite ways you can divide a page, but let’s stick one of the most flexible grids, the 12 column grid.

    ■      The great thing about a 12 column grid is that it’s the smallest amount of columns that give you the most equally divisible columns.

    ■      With a 12 column grid you can divide it into 1, 2, 3, 4, 6, and 12

    What’s the advantage of using a grid?

    ■      The advantage of a grid is that it makes it easy to create visual balance

    ■      It creates consistency and is a systematic approach.

    ■      It can scale, when you create new documents.

    ■      Let’s start by setting up a grid for our page

    ■      Lets bring our grid up.

    ■      I could make two columns and put a logo and a nav in either column

    Create the basic layout of your personal page using the grid system.

    There are many different tools out there to design with:

Establishing Visual Hierarchy

  1. Use Your Outline To Check Your Hierarchy

    In the previous lesson you wrote an outline of your copy. In this lesson you can use the following principles to establish a hierarchy that matches your outline.

    • The definition of Visual hierarchy is the order in which the human eye perceives what it sees. Humans tend to group similar elements into meaningful patterns.

    • Why is visual hierarchy important?

      • I just gave you the fancy pants definition of visual hierarchy, but maybe you could think of it this way.

      • We all have limited attention spans. We are rushing from meeting to meeting, picking up kids, and stuffing down dinner to watch the next episode of the Bachelor.

      • When we read something, we try to understand it as quickly as possible by scanning the page looking for patterns.

      • We look for relationships between the individual items, and how all those items connect as a whole.

      • If the designer does a good job we should be able to grasp the meaning of the page quickly, and then choose if we’d like to dive deeper into the content.

    • Here are the main ways to establish hierarchy

      • Size

      • Color

      • Space

      • Alignment

      • Implicit or Explicit

Choose and Combine Typefaces

  1. Find and Add Fonts

    Links


    There are many places to find high quality fonts:

Personality and Context In Color

  1. Explore Color Palettes and Combination
    • Theres a great article on color psychology on the HelpScout blog. Here’s a couple main points.

      • “There have been numerous attempts to classify colors, but the truth is people’s reactions to colors are significantly affected by their own experiences. Red may be classified as “danger”, but to an Alabama Football fan, it’s pure awesome.

      • It’s much more important for your brand’s colors to support the personality you want to portray instead of trying to align with stereotypical color associations.


    • Personality +  Context

      • But it’s not just about picking a color based on personality, it also has to based on context. Green can be used to design an environmental brand like GreenPeace, but green could also be used to design a brand like TD Bank.

      • In that case green could be used effectively for both.

      • So don’t rule out one color because green means “money”, green could also relate the the environment.


    There are a ton of resources to find color combinations:


Additional Resources

  • Here are all my notes for the class: 

Resources(1)

Student Projects

Laura Dos Santos
5 comments
Ysmael Casten
3 comments
Hello Nobo
2 comments
Katia De Juan
4 comments
Judith C.
1 comment
Claire O'Brien
2 comments
1 comment
Julia Maskalik
1 comment
Olivia Wendt
Melinda Klein
1 comment
Traci Lee
Calista Johnson
1 comment
Jacob Marsh
1 comment
Chay Reece
1 comment
Laurie Parkison
1 comment