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.

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

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.

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

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

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

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.

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

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.

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

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

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

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

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.

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”.

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

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

Webpage Design References Visual Design Web site with GOOD design principles applied: Click to view Jess Marks Photography: http://www.jessmarksphotography.com.au/ Emporium Pies: http://emporiumpies.com/ Bensen: http://www.bensen.ca/ Web site with REALLY BAD design principles: Click to view Water Equipment Technology: http://www.waterequipment.com.au/ Who is Penny Juice: http://www.pennyjuice.com/htmlversion/whoispj.htm One Nation: http://sa.onenation.com.au/ Webpage Design References Web Style Guide http://www.webstyleguide.com/ Patterns for Websites http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html