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

Intro To Design

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

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:
- Adobe Fireworks
- Moqups
- Sketch App
- Webflow
- Macaw

Establishing Visual Hierarchy

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

Find and Add Fonts
- Choosing a typeface
  - http://inspirationlab.files.wordpress.com/2010/04/infographiclarge_v2.png
- Combining fonts
  - Visual contrast is key.
  - Don’t use two fonts with similar characteristics. Like Helvetica and Franklin Gothic.
  - Serif and Sans-serif fonts are an easy way to pair
  - If you can pair two different fonts from the same typographer, that usually works well.
  - Here are some great combos suggested by Hoefler Frere and Jones, a well-known font foundry.
  - Links
- Size
  - Use the Golden Ratio Calculator
    - I could go over the math for this, but this tool does all the work for you
    - http://www.pearsonified.com/2011/12/golden-ratio-typography.php
- Kerning
  - The space between two letters
  - This is almost always an eye ball it approach, and you need to adjust until it feels right to you. The more you do it, the better you’ll get.
  - Check out this awesome kerning game that is AWESOME practice
  - http://type.method.ac
- Font Crimes
  - NEVER EVER EVER stretch a font vertically or horizontally. Ever. If you do I will hunt you down.
  - If you’re going to use a fancy script font, use it in moderation. Don’t set the entire thing in script font.
  - The key is READABILITY. Make sure you can clearly express your message.
  - Never use Comic Sans or Papyrus under any circumstance
Links
There are many places to find high quality fonts:
- MyFonts
- Typekit
- Google Fonts
- DaFont (Free but not that high quality)

Personality and Context In Color

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:

Ysmael Casten

UX Designer @ USNR

10

68