Design and User Interface<br />Beth Case<br />EDSP 6325<br />September 17, 2009<br />
Introduction<br />Anyone can design a website. <br />Not everyone can design one well.<br />	A good web designer starts wi...
Metaphor<br />	A metaphor is a symbolic representation of a concept that is familiar to the user. Metaphors can be used to...
Metaphor Examples<br />The CafePress site has a shopping cart, for purchasing items, and a gift box, for it’s Gift Center....
Consistency<br />	Users feel more comfortable and will stay on your site longer if there is consistency in the appearance,...
Consistency Examples<br />Visitors to the Texas Tech web site find a similar  look and feel wherever they go.<br />
Template<br />	To help maintain consistency, a site may use a template. A template pre-determines a number of elements, su...
Content<br />	Users come to your website for its content, so make sure the content is clear, well organized, and easy to r...
Balanced Layout<br />	Each element on a page has an optical weight which refers to how much it draws the viewer’s eye. Bal...
Symmetrical Balance<br />	Symmetrical balance mirrors elements across a vertical or horizontal center line. The tutor-USA ...
Asymmetrical Balance<br />Instead of mirroring elements, asymmetrical balance uses different types of elements on each sid...
No Balance<br />Pages without regard to balancing the visual weight appear disorganized.<br />
Movement<br />	Movement refers to the path the eye follows around the page. A well-designed web page arranges elements to ...
Color Scheme<br />	Color choices affect the tone and effectiveness of your web site.  Colors influence mood and convey mea...
Color Scheme Example<br />	Earth911, a website that talks about conservation, uses a green color scheme, emotionally conve...
Independence and Function<br />	Web sites need to have consistency, yet not be stale. Carefully designed sites will allow ...
Unified Piece<br />	All of the elements of a site need to work together to convey your information. An element that seems ...
Unified Piece Example<br />	Amazon.com effectively uses balance, color, consistency, and function to create both intra-pag...
Interactive Interface<br />	Interactive user interfaces gives the visitor control over their experience. A good user inter...
Interactive Interface Example<br />WeightWatchers provides clear navigation and search features to help visitors find what...
Link Effectively<br />	Research shows users prefer menus with a minimum of 5-9 links. They prefer a few pages with lots of...
Sense of Context<br />	Help users know where they are in the context of your site by creating contextual cues. For example...
Sense of Context Example<br />	The Leisure Boutique maintains the same top navigation, with drop-down menu items, on all p...
Feedback<br />	Provide users with a simple way to contact you with feedback or questions, then respond promptly.  Examples...
Equal Access<br />	As more and more multimedia and graphical elements are added to websites, they become less available to...
Equal Access Example<br />	The Disability Law Lowdown video podcast provides captions for all its videos.<br />
Conclusion<br />	Effective web design requires careful consideration and planning. However, following proven design princi...
Upcoming SlideShare
Loading in …5
×

Design and User Interface

1,069 views

Published on

Summary of web design principles along with examples.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,069
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design and User Interface

  1. 1. Design and User Interface<br />Beth Case<br />EDSP 6325<br />September 17, 2009<br />
  2. 2. Introduction<br />Anyone can design a website. <br />Not everyone can design one well.<br /> A good web designer starts with a plan, focusing on the needs of the user, and applies time-honored multimedia design guidelines.<br /> This presentation will cover some of the key design elements every web designer needs to know.<br />
  3. 3. Metaphor<br /> A metaphor is a symbolic representation of a concept that is familiar to the user. Metaphors can be used to convey information quickly and easily. A common metaphor is a graphic of a shopping cart for e-commerce.<br />
  4. 4. Metaphor Examples<br />The CafePress site has a shopping cart, for purchasing items, and a gift box, for it’s Gift Center.<br />NPR uses a number of metaphors to show the different ways you can obtain their content.<br />
  5. 5. Consistency<br /> Users feel more comfortable and will stay on your site longer if there is consistency in the appearance, and function of your site. For example, maintaining a color scheme and the location of navigation buttons.<br />
  6. 6. Consistency Examples<br />Visitors to the Texas Tech web site find a similar look and feel wherever they go.<br />
  7. 7. Template<br /> To help maintain consistency, a site may use a template. A template pre-determines a number of elements, such as layout, color, or content that remains the same from page to page, such as a copyright statement. Templates also reduce development time, and “object shift”.<br />
  8. 8. Content<br /> Users come to your website for its content, so make sure the content is clear, well organized, and easy to read. Avoid busy backgrounds or a cluttered appearance. Most people scan the page instead of reading from beginning to end, so make sure your content is organized in such a way to make it easy for visitors to find the information they want. And always provide some way for users to know where they are in the larger context of your site.<br />
  9. 9. Balanced Layout<br /> Each element on a page has an optical weight which refers to how much it draws the viewer’s eye. Balance refers to the distribution of this optical weight. A balanced website is evenly distributed across a horizontal or vertical center line, whether symmetrical, asymmetricalor no balance.<br />
  10. 10. Symmetrical Balance<br /> Symmetrical balance mirrors elements across a vertical or horizontal center line. The tutor-USA site categories are mirrored across a vertical line.<br />
  11. 11. Asymmetrical Balance<br />Instead of mirroring elements, asymmetrical balance uses different types of elements on each side, but equalize the optical weight. In this case, the left column has several small elements to balance the large video on the right side.<br />
  12. 12. No Balance<br />Pages without regard to balancing the visual weight appear disorganized.<br />
  13. 13. Movement<br /> Movement refers to the path the eye follows around the page. A well-designed web page arranges elements to encourage the visitor’s eye to follow the path the designer wants. Ways to accomplish this include emphasizing text or a graphic, using lines, color gradients, or gaze direction of people or animals on the page.<br />
  14. 14. Color Scheme<br /> Color choices affect the tone and effectiveness of your web site. Colors influence mood and convey meaning. When starting out, use only a few colors, or try a monochromatic look. Suggested color schemes are available in many editing programs and websites, and can benefit the beginning designer. However, they can be overused and appear amateurish, so branch out as you gain experience.<br />
  15. 15. Color Scheme Example<br /> Earth911, a website that talks about conservation, uses a green color scheme, emotionally conveying the message of “living green”.<br />
  16. 16. Independence and Function<br /> Web sites need to have consistency, yet not be stale. Carefully designed sites will allow you to update individual pages without a complete site redesign. Visitors don’t always start at the home page, so some basic information such as a link to the home page and contact information, should be included on all pages.<br />
  17. 17. Unified Piece<br /> All of the elements of a site need to work together to convey your information. An element that seems out of place will disrupt the effectiveness of your site. All the elements of a page must work together (intra-page unity) as well as all the pages on a site (inter-page unity). <br />
  18. 18. Unified Piece Example<br /> Amazon.com effectively uses balance, color, consistency, and function to create both intra-page and inter-page unity.<br />
  19. 19. Interactive Interface<br /> Interactive user interfaces gives the visitor control over their experience. A good user interface will be intuitive and meet the user’s needs and expectations, allowing visitors to find the information they want quickly and easily.<br />
  20. 20. Interactive Interface Example<br />WeightWatchers provides clear navigation and search features to help visitors find what they want easily.<br />
  21. 21. Link Effectively<br /> Research shows users prefer menus with a minimum of 5-9 links. They prefer a few pages with lots of links over lots of pages with a few links. Your goal is to help visitors find the information as quickly as possible in the fewest number of clicks.<br />
  22. 22. Sense of Context<br /> Help users know where they are in the context of your site by creating contextual cues. For example, maintaining a color scheme, consistent navigation, and layout, for example. Providing visitors confidence in their ability to navigate your site will encourage them to explore.<br />
  23. 23. Sense of Context Example<br /> The Leisure Boutique maintains the same top navigation, with drop-down menu items, on all pages. Visitors can explore different crafts with confidence that they can always find their way back. <br />
  24. 24. Feedback<br /> Provide users with a simple way to contact you with feedback or questions, then respond promptly. Examples of effective feedback options include an on-line feedback form, email addresses and phone numbers.<br />
  25. 25. Equal Access<br /> As more and more multimedia and graphical elements are added to websites, they become less available to visitors with disabilities. In most cases, accessibility can be achieved with fairly simple additions to the page, such as appropriate alternative text for images, transcripts for audio, and captions for video.<br />
  26. 26. Equal Access Example<br /> The Disability Law Lowdown video podcast provides captions for all its videos.<br />
  27. 27. Conclusion<br /> Effective web design requires careful consideration and planning. However, following proven design principles results in a site that is professional and effective, providing users with a positive experience that leads to repeat visits.<br />

×