vfowler blog

In general, there are two possibilities when designing on a two-dimensional surface: you can keep it flat, or you can create the illusion of three dimensional space or spatial depth. The illusion of spatial depth can be shallow or deep, recessive or projected.

The size and scale of the shapes or objects play an important role in creating the illusion of spatial depth. The size of one shape or object in relation to another can make elements appear to move forward or backward on the page (Landa 2006).

Some examples of web pages with depth (some more than others):

• http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css
• http://csszengarden.com/?cssfile=http://www.nicolehanusek.com/zenGarden/traffic/text.css
• http://www.csszengarden.com/?cssfile=/165/165.css&page=1

The Illusion of Spatial Depth

1. In Photoshop, turn on your grid (View > Show Grid).
2. Draw volumetric shapes like cones, cubes, and pyramids.
3. Use the grid as a guide for the vertical, horizontal, and diagonal lines.
4. Fill the entire page. Avoid creating flat shapes like squares and triangles.
5. Use gradients to give your shapes a 3D appearance.

Made using Fireworks, my attempt at the illusion of depth, in PDF.

Visual Hierarchy

the arrangement of elements according to importance and emphasis.

The question “What is the message?” needs to be answered before knowing which text and graphics should be emphasised.

Things to keep in mind when trying to design a good visual hierarchy…

In general, people from Western cultures will:

• Quickly scan from upper left to bottom right to get an overview of the screen.
• Tend to look at larger items first and smaller items last.
• Be attracted to bright colors first, but also look at colors that contrast with or are different from other colors.
• Interpret item places above other items as more important than items placed below.
• Look at items that appear “heavier” first.
• Assume arrows and elements pointing to the right mean forward while arrows pointing to the left mean backward.
• Look at moving elements before static ones.
• Tend to look at moving images of another human (such as a video) before moving on to other elements.

(Graham 1999)

Immediately, 2 thoughts come to mind: combining all the above list items into a single design is not going to create a supreme one; What do the other cultures in the world do when looking at designs?

Creating a Visual Hierarchy

1. Draw 7 shapes of varying sizes (can use Photoshop of Illustrator) – Again I used Fireworks.
2. Use colour or texture on some of them; leave some in outline.
3. Decide which shapes should be seen first, second, third and so on.
4. On an A4 sized page, arrange them in hierarchical order. – I still have no idea why were using A4 instead of, say 800×600.
5. Produce five versions. – This has been extremely worthwhile.

Since we are making for A4 size, I’ve attached a PDF of my 5 visual hierarchies and posted my favourite here.

Focal point

The following list contains some of the visual techniques you can use to emphasis the focal point in your visual hierarchy.

• Make it the biggest.
• Make it the brightest.
• Enclose the item in a different shape than that of the other content screen.
• Make the item a different shape that that of the other content screen.
• Add a border to the shape around it.
• Change the color of the item to make it contrast with other items onscreen.
• Isolate it from other items onscreen.
• Add a special effect to it (like texture).
• Make it bright if everything else is dull (or visa versa).
• Make it sharp if everything else is out of focus (or visa versa).
• Position the item so all the other elements lead to or point toward it.
• Animate it (make it blink or change colors, apply a rolling texture to it, or create a looping image animation).
• Use another animated element to call attention to the item.

(Landa 1996)

Creating a Focal Point

1. On a 20cm square format, draw ten arrows that all lead to one point or area on the page.
2. The arrows should be visually interesting; they may vary in quality and texture, and they may bend, curve, or intersect.
3. On an A4 sized page, draw seven arrows that lead to a main focal point and three arrows that lead to a secondary focal point. Make sure the arrows are visually interesting; give them texture, tone, various line qualities, and vary the directions and lengths.

Draw 3-D objects, like cubes, pyramids, or spheres using your Photoshop or Illustrator tools. Think about where your light would be coming from, and shade in the opposite sides with varying intensities of texture to create the illusion of three-dimensional space.

• http://www.colourlovers.com/patterns/top
• http://www.brusheezy.com/patterns
• http://www.devppl.com/photoshop-tutorials/
• http://www.inaneblabbering.com/photoshoptutorials/?view=list
• http://www.phong.com/tutorials/lightingeffects/