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)

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”

CONTENTQuality of content

CONTENTOrganization of content

CONTENTPresentation of content

Don’t Forget

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