Class summary: Visual hierarchy & structure; Grids

25 Feb

The learning objectives for this class were:

  1. Identify the principles used to create visual hierarchy in existing designs

  2. Use visual salience to create visual hierarchy

  3. Identify grid systems on existing designs

  4. Use the 960 grid system to create different Web layouts

You first look at some examples and identified how they create visual hierarchy:

Then, we talked a bit about techniques for creating visual hierarchy using these slides:

You then did an exercise where you redesigned the way flight ticket information would be presented in an iPhone travel app.

Then, we moved on to grid layouts. We started by counting columns in the following examples:

We then discussed the difference between columns and grid units (they might be much smaller than columns). I showed some slides from this deck:

You then sketched 3-4 different website layouts on thumbnail print-outs of browser windows with the 960 grid system.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: