Interface Design

Good Design = Usability Information Architecture Structuring information Designed around the purpose/goals/objective Designed around needs of intended audience Interface Design Interface Design - How the sites logical structure appears visually on a page Navigation Create an Identity - clear and appropriate

Interface Design Navigation – Guides the user, shapes the user experience, influences how they move around the site Clarity, Consistency, Efficiency Navigation must be easily learned It should look like navigation Predictable & Dependable (consistent in appearance & location) Efficient – keep links manageable http://www.nacd.org/ www.apple.com http://www.spice-work.com/ (no navigation)

Interface Design Navigation – Homepage link from all pages Site-wide navigation Secondary navigation or section navigation Links back to main sections from all pages 3-click rule http://www4.uwm.edu/

Create Identity Images Should support your message and/or add to the content of the site Provide visual documentation Can alter the feel and message of a page Use metaphors with caution Can make the page more readable Break up the content Provide rhythm, pacing of content Engage the audience Lego – kids site RJ Reynolds vs. American Cancer Society

Create Identity www.vagabonding.com

Design Principles Visual hierarchy – create a visual hierarchy with elements on the page Emphasis important elements (don’t make everything look equally important) Organize content logically and predictably Use the layout to lead the reader’s eyes through the page Contrast Contrast makes things stand out from their surroundings Provide variety within a page by utilizing contrast in size, shape, and color If everything on a page is high contrast – everything will be fighting for attention http://computercorps.org/ (no hierarchy)

Balance & Unity – page should have a sense of balance Design Principles Balance & Unity – page should have a sense of balance Balance & Unity in composition Appropriate proportion of text to graphics http://www.jimesch.org http://my.barackobama.com/page/content/kidshome/ http://www.bbc.co.uk

Design Principals Color Color can carry meaning, express personality, differentiate, and highlight content Color is a good way of identifying, grouping or differentiating elements Color for organization Color for audience Intense color attracts the eye – too many intense areas of color attract the eye in too many directions – this may be ineffective

Design Principals www.lacountyarts.com

Interface Design - Tips Understand your message and purpose Make the Sites Purpose Clear Make design decisions based on purpose Use visual design to support and enhance your message (“Don’t Decorate, communicate!”) Design for your target audience (in content and appearance) Make things relevant Do it on purpose or don’t do it at all Organize information for the most effective communication Design your interface to guide the user through the page Create an exciting visual experience (intuitive navigation) Make pages appealing, compelling, or entertaining Design “above the fold”

CONTENT CONTENT CONTENT Don’t Forget Quality of content Organization of content CONTENT Presentation of content CONTENT

Content, Content, Content Your content and the organization of that content is what will keep people coming back to your site It may LOOK great… but if you have no content, you have no audience! Let content speak with as little interference as possible Contents only requirement is to get seen and understood

Design Principals “Making a clear web page depends on making the most important elements appear important, less important stuff less important, related stuff look related, and different stuff look different.” http://www.webdesignfromscratch.com/graphic-design.cfm