1. Surface Stage: Design Comps
With approved wireframes - graphic designer creates the visual look & feel.
Consists of color schemes, typography selections, images & media such as Flash animation and video.
Tight design comps are created for the major screen layout changes to show the client the look and feel of the web site.
The creative design team selects a minimum of 3 to 5 DIFFERENT screens to show how the graphic design will be applied.

4. Visual Design
The following basic design concepts are an absolute must in understanding webpage layout and structure.
Alignment: to unify & organize the page
Contrast: creates interest on a page
Proximity: states one piece of information belongs to another
Repetition: visually links page elements
Visual Hierarchy: tells the visitor what is emphasized on the page

5. Alignment:
Be conscious of where you place page elements whether text or images.
Establish a grid for the page. Always find something on the page to align with, even if two objects appear far away from each other.
Avoid using more than one text alignment style on the page.
Flush left text alignment is the most readable.

6. Alignment of page elements
UNIFIES THE CONTENT, PROVIDES CONSISTENCY & LEADS THE EYE THROUGH

7. Contrast
Without it the page would be dull and boring. There are several ways to create contrast on a page.
Scale: Large vs small
Weight: Light vs dark
Form: Square vs round
Avoid:
Text that has all the same weight, size and direction: creates monotonous texture
Highly patterned backgrounds with overlaid text
Dark colored backgrounds with dark colored text. For example: red text on black background
Tight text linespacing: gives a claustrophobic feeling
Wide text columns: causes the eyes to skip information

8. CONTRAST OF PAGE ELEMENTS
CREATES VISUAL INTEREST - COLOR CONTRAST EASY TO READ

9. Proximity
When group related items are physically close to each other, they are seen as one cohesive group - not of a bunch of unrelated bits.
Place like information elements together to form a group. Use “white space” to separate groups.
Avoid erratically spaced page elements - it creates confusion & errors in user’s understanding.

10. Proximity of page elements
PAGE ELEMENTS GROUPED INTO CHUNKS OF INFO - MAKES IT EASY TO SCAN

11. Repetition
Page elements can be visually linked by repeating common stylistic features in the page to create associations to each other.
You can achieve this by setting up specific type styles on a page such as same weight, same spacing and color for headings or bulleted lists.
Or images that are the same size on width and height.
Avoid inconsistent spacing and sizing of page elements on the screen.

12. Repetition of page elements
REPEATED CIRCLE SHAPES, TYPE STYLES CREATE ASSOCIATIONS

13. Visual Hierarchy
Graphic Design is visual information management. Using the basic visual hierarchy, the design leads the reader’s eye through the page.
Use Size, Weight, Form & Direction to control the contrast of page titles, body text and image.
Establish a starting focal point for the reader

14. Visual Hierarchy of page elements
CLEAN SLICK TYPOGRAPHY TREATMENT - CREATE A DYNAMIC FOCAL POINT

15. Visual Design On a website you want ALL of the screens to have:
Consistent Format: brings unity to the whole site
Standard Header & Footer: identifies information about the page to the visitor
Images that Communicate: Use imagery to add meaning to the message & brand
Readability & Appropriate Typography: Critical for a positive user experience

16. Standard Header and Footer
Consistent Format
Allows users to adapt quickly to your overall design and predict the location of information and navigation controls across all of the site’s pages
Establish a layout grid that is consistent on every page but allows for diversity when placing page elements.
Set visual styles for the text and graphics and apply them consistently on every page to build unity.
Avoid
Pages that have different locations for navigation bars on every page.
Standard Header and Footer
Allows users to enter from multiple points other than the Homepage. Who know where a search engine will land you
Common Header & Footer elements include Navigation, Page Maintenance, Page Information and Comment elements.

17. Readability & Appropriate Typography
Choose Imagery Wisely
Use imagery to add meaning - either to the brand or the content.
Images slow page loading. So if the image does not support the content meaning or brand message - leave it out. Mobile browsing is especially susceptible.
Images that only decorate are discouraged.
An example is highly textured background images. They can distract the visitor from the communication & message as well as cause readability issues.
Readability & Appropriate Typography
To provide a positive viewing experience be sure to observe the following:
Don’t use too many type sizes - typically no more than 3 is appropriate: 1 for the header, 1 for the sub-header and 1 for the body copy
Use San-serif for body copy. They are more readable on the screen
Special typography treatment can be as interesting as images.
Use strong contrast with the background color. Black text with white background or white text with black background have the highest contrast.
Work with Caps and Lowercase type. All CAPITALIZATION slower to read - reduces word recognition by making all the letters the same size. All CAPS implies “yelling”.

18. Mobile Screens Usage of Icons WITH Label HELP DIRECT VIEWER
USE very specific call to action SUCH AS A PROMOTION
KEEP SCREENS SIMPLE AND MENUS VERY VISIBLE

19. Visual Design
When selecting which screens to create design comps the designer should look not at the screens that look alike but the screens that have differences in the layout based on their function
The Home page would definitely have a design comp.
A main section landing page would have a design comp.
A sub-category level would have a design comp.
A high end feature such as a shopping cart, gift registry, build your own product, etc.
A mobile phone screen would have a design comp

20. Webpage Design References
Visual Design
Web site with GOOD design principles applied: Click to view
Jess Marks Photography:
Emporium Pies:
Bensen:
Web site with REALLY BAD design principles: Click to view
Water Equipment Technology:
Who is Penny Juice:
One Nation:
Webpage Design References
Web Style Guide
Patterns for Websites