Upload
kristina-morris
View
212
Download
0
Embed Size (px)
Citation preview
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