PSD Week 2 Lecture page 1

APGR72 Week 2 Lecture: Design Techniques (Page 1 of 2)

This week's lecture focuses specific design techniques that you can employ to create organized and balanced web pages. So listen up (or read up)... this information could make a real difference to the way your web sites look!

First, we're going to explore various techniques you should use every time you design a web page. You'll want to print out the PDF notes before you begin reading this section. Now, let's move on...

Technique #1: Develop a Hierarchy

Hierarchy. Shows viewerhow information is organized and prioritized. Acts as a guide to content. Enhances the meaning of the content. Must be obvious and understandable.

Check out the following web pages. Is the content clearly organized into a hierarchy? Which site's information is the least visually organized and prioritized?
Intel.Com
http://www.guitarsolo.com/
http://www.vyniknite.sk/
http://www.victorianferndale.com/

Hierarchy is all about organizing and prioritizing content. You need to decide where a web site visitor will go first and what you then want them to look at.

First, assess the content in terms of the big structural picture. Once you've created a "site hierarchy," you need to look at each page individually. Determine which is the most important information and format/place it accordingly. Then prioritize the remaining information into groups. Think in terms of guiding your viewer through the content from most to least important. Your viewer should not have to "think" about what's most important, the design should make that obvious. Even when a site is viewed in a foreign language, the hierarchy should be clear.

Technique #2: Designate One Focal point

Focal point. Attracts viewers and draws them in. Element with the strongest visual interest. Each page should have only one focal point. Use photos, logo, graphics, letters. Emphasize by size, color, isolation, movement.

Check out the following web pages. Think about where your eyes go first? Is there a single focal point or are there multiple focal points?
Finch
Goldilocks
Sofa
http://www.versionsapp.com/

Every design needs a focal point. Select the element with the strongest visual interest and build your layout around it. Photos/graphics are more visually attractive than text (although dynamic fonts and letters can work well). Never use an element that doesn't relate to the material just to have a cool focal point!

Techniques for creating a strong focal point include:
Contrast (size, color etc.)-- make the focal point element very different from other elements.
Isolation -- set off the focal point using white space.
Placement -- where's the best place to catch the eye on a web page?
Motion -- viewers tend to look at animated objects first.

The following will weaken a focal point:
     Too many focal points.
     Distracting icons and nav bars.
     Visual clutter.
     Misuse of color that distracts from the focal point.
Can you think of any others?

Technique #3: Create Eye flow

Eye flow. Focal point attracts viewers, eye flow leads them. Guides viewers through content. Use direction and placement to encourage eye flow. Graphics, bullets, rules can help eye flow.

Check out the following web pages. Do you feel that you're being visually guided through the information?
Robins Donuts
http://www.looneybean.com/
Enchanted Learning

Eyeflow is your way of visually guiding the viewer through the hierarchy on your web page. Start with the focal point and then direct them where to go and what to read. The size and placement of elements guide the reader's eye. Graphic and animated elements demand attention. Use lines (rules), bullets, dingbats, fonts, type sizes, paragraph space, color to help direct the reader's eye.

What elements encourage eyeflow?
Strong focal point, simplicity, graphic elements that move your eye along, size relationships, visually interesting white space…

What design elements impair eyeflow?
Clutter (lack of white space), too many focal points, too much text/too many graphics the same size, similar spacing between all elements, over-animated pages…

4. Create White Space

White space. Blank areas on the screen help define the design. White (negative) space creates its own shape. Use it to emphasize (focal point) or separate groups. Use it to help the content and create visual appeal.

Check out the following web pages. What do you think about the handling of white space?
Foley Gallery
Care Pathways
http://bulletpr.co.uk/

White (or negative space) is a design element too! (To see white space as an element, try this: squint at the screen. See the shapes on the screen, not the details.) White space affects both how easily the content is interpreted and how attractive the screen design appears.

Look carefully at the shape, size and placement of the white areas in your layout. Use the white space to accent the focal point, to add to the logical grouping of the written content (space between paragraphs, before subheads, etc.), and add to the overall artistic effect (lighten up the layout, interesting positive/negative interplay). Too little white space makes a page crowded and unappealing. Too much white space overwhelms the intended focal point and breaks apart the relationships between design elements.

Here are some examples of how to create good white space...
Left aligned type: the right ragged edge invites white space into the page.
Space between paragraphs (instead of indents in some cases).
"Breathing room" between design elements, e.g. between graphics and text or two columns of text.
Flow: white space that flows into/around the design rather than being trapped.

Technique #5: Aim for Simplicity

Simplicity. KISS (keep it sweet and simple). When in doubt, take it out! Simplicity helps the content and the design. If an eleemnt does not help the content or the viewer, remove it!

Check out the following web pages. How well do they apply the simplicity rule?
Fred De Vos Workshops
http://narwhalcompany.com/
Barbie Fanatics

Simplicity... so seemingly easy, yet so difficult to achieve. If you keep your design simple and uncluttered, the content will come shining through. You'll also accomplish something else... a clean, professional design. So when in doubt... CUT, CUT, CUT!

Quick Links