0
EDIT 6325 Ninghua Han 2009. 9 Design and The User Interface
Introduction <ul><li>The key to designing any web site begins at the planning phase. </li></ul><ul><li>During the planning...
Metaphor <ul><li>A metaphor is a figurative representation that links the content of your web site to an established menta...
Metaphor This electronic shopping cart is one of the established  metaphor for e-commerce. They are all metaphors to link ...
Consistency <ul><li>Consistency is an especially important component of a Web site. </li></ul><ul><li>It applies to both t...
<ul><li>Consistency sample:  http://lacountyarts.org/ </li></ul>This is a main page of Los Angeles Country Arts Commission...
All the subpages of this Web site keep using same style.  One hue stands for one page.  Consistency
<ul><li>A template is a precise layout indicating where various elements will appear on the Web page. </li></ul><ul><li>A ...
<ul><li>Template Sample: </li></ul><ul><li>http://bestmoban.com/ </li></ul>This website provides many website templates th...
This a  European style  template. Template
<ul><li>The media elements should enhance the content. </li></ul><ul><ul><ul><li>On Web pages, less text is usually better...
<ul><li>Balance in Web page design refers to the distribution of optical weight in the layout. </li></ul><ul><li>Optical w...
<ul><li>A Web site can have three kinds of balance: </li></ul><ul><ul><li>Symmetrical balance </li></ul></ul>This is 2009 ...
This is Previous GIVENCHY Web site.  It also use black  and white color scheme and symmetrical balance layout. Balanced La...
<ul><ul><li>Asymmetrical balance </li></ul></ul>This Web site arranges nonidentical elements on both sides of central line...
<ul><ul><li>No balance </li></ul></ul>There is no central line for this website’s layout to arrange elements.  Balanced La...
<ul><li>Movement relates to how the user’s eye moves through the elements on the Web page. </li></ul><ul><li>In western cu...
<ul><li>Color scheme immediately convey information and set the mood or tone of the Web site. </li></ul><ul><li>The beginn...
<ul><li>Many Web authoring programs include preset color schemes that can be applied to Web pages and entire Web sites. </...
Yellow is Kodak company’s theme color.  It’s website also uses yellow as their website theme color.  Color Scheme <ul><li>...
<ul><li>Color scheme software </li></ul><ul><ul><li>Adobe Kuler  </li></ul></ul>Color Scheme
<ul><ul><li>Color Blender </li></ul></ul>Color Scheme
<ul><ul><li>Color Schemer Online v2  </li></ul></ul>Color Scheme
<ul><li>The Web sites need to keep fresh and functional. </li></ul><ul><li>The best design strategy is to include basic in...
<ul><li>Unify is a desirable design goal in multimedia web sites and can be achieved by maintaining consistency in shapes,...
All of the multimedia elements in this website work together to create a unified piece and stands for company’s mission. U...
<ul><li>User interfaces are designed to give users direct control over the Web site and interact with the Web site without...
The Disney Web site is always visually appealing, functional, and user-centered.  Interactive Interface
<ul><li>Users should be able to quickly locate and access information at the Web site, as well as be able to return to the...
<ul><li>Web users rely on context to help them determine where they are within the hierarchy of information at a Web site....
The same theme color, consistent navigation bar, titles, footers, and links of the Disney Web site are all reinforce the u...
<ul><li>A well-designed Web site gives users the opportunity to establish an ongoing relationship with the company or orga...
<ul><li>All the people should have equal opportunity to access to the multimedia Web site. </li></ul><ul><li>The designer ...
Stay current on accessibility laws to ensure that the web sites are compliant. Equal Access
HTML, XHTML, AND Web Authoring
Upcoming SlideShare
Loading in...5
×

Ninghua Ch3

253

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
253
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ninghua Ch3"

  1. 1. EDIT 6325 Ninghua Han 2009. 9 Design and The User Interface
  2. 2. Introduction <ul><li>The key to designing any web site begins at the planning phase. </li></ul><ul><li>During the planning phase, a design strategy should have been established with input from the client and all members of the team. </li></ul><ul><li>The design should be simple, easy to understand, easy to use, and follow the design principles. </li></ul>
  3. 3. Metaphor <ul><li>A metaphor is a figurative representation that links the content of your web site to an established mental model. </li></ul><ul><li>Well-designed and targeted metaphors can be powerful communication tools. </li></ul>
  4. 4. Metaphor This electronic shopping cart is one of the established metaphor for e-commerce. They are all metaphors to link to corresponding content of the web site.
  5. 5. Consistency <ul><li>Consistency is an especially important component of a Web site. </li></ul><ul><li>It applies to both the appearance of each page and how the navigation scheme works. </li></ul>
  6. 6. <ul><li>Consistency sample: http://lacountyarts.org/ </li></ul>This is a main page of Los Angeles Country Arts Commission website. Consistency
  7. 7. All the subpages of this Web site keep using same style. One hue stands for one page. Consistency
  8. 8. <ul><li>A template is a precise layout indicating where various elements will appear on the Web page. </li></ul><ul><li>A template can aid the design process in several ways: </li></ul><ul><ul><ul><li>Provide consistency </li></ul></ul></ul><ul><ul><ul><li>Shorten the development time </li></ul></ul></ul><ul><ul><ul><li>Prevent “object shift” </li></ul></ul></ul>Template
  9. 9. <ul><li>Template Sample: </li></ul><ul><li>http://bestmoban.com/ </li></ul>This website provides many website templates that can be applied to the web pages or the entire web site. This a Korean style template. Template
  10. 10. This a European style template. Template
  11. 11. <ul><li>The media elements should enhance the content. </li></ul><ul><ul><ul><li>On Web pages, less text is usually better. </li></ul></ul></ul><ul><ul><ul><li>The number of levels should be reduced. </li></ul></ul></ul><ul><ul><ul><li>The content should be always accessible. </li></ul></ul></ul><ul><ul><ul><li>The content should be easy for users to learn the purpose of the Web site quickly. </li></ul></ul></ul><ul><ul><ul><li>The texts and background should always be tested. </li></ul></ul></ul>Content
  12. 12. <ul><li>Balance in Web page design refers to the distribution of optical weight in the layout. </li></ul><ul><li>Optical weight is the ability of an element to attract the user’s eye. It is determined by its nature and size. </li></ul><ul><li>Balance is determined by the weight of the elements and their position. </li></ul>Balanced Layout
  13. 13. <ul><li>A Web site can have three kinds of balance: </li></ul><ul><ul><li>Symmetrical balance </li></ul></ul>This is 2009 GIVENCHY Web site. It keeps the black and white color style and symmetrical balance layout. Balanced Layout
  14. 14. This is Previous GIVENCHY Web site. It also use black and white color scheme and symmetrical balance layout. Balanced Layout
  15. 15. <ul><ul><li>Asymmetrical balance </li></ul></ul>This Web site arranges nonidentical elements on both sides of central line. Balanced Layout
  16. 16. <ul><ul><li>No balance </li></ul></ul>There is no central line for this website’s layout to arrange elements. Balanced Layout
  17. 17. <ul><li>Movement relates to how the user’s eye moves through the elements on the Web page. </li></ul><ul><li>In western culture, the tendency is to move through the contents of the Web site by going from the upper left to the lower right. </li></ul><ul><li>Movement is especially important in training and educational Web sites. </li></ul>Movement
  18. 18. <ul><li>Color scheme immediately convey information and set the mood or tone of the Web site. </li></ul><ul><li>The beginner should avoid trying to work with too many colors at one time. </li></ul><ul><li>It is easier to work with dark objects on a light background than it is to work with light objects on a dark back ground. </li></ul>Color Scheme
  19. 19. <ul><li>Many Web authoring programs include preset color schemes that can be applied to Web pages and entire Web sites. </li></ul><ul><li>Other authoring programs include themes. A theme contains a color scheme that has unified design elements for bullets, fonts, images, navigation bars, and other media elements. </li></ul>Color Scheme
  20. 20. Yellow is Kodak company’s theme color. It’s website also uses yellow as their website theme color. Color Scheme <ul><li>Sample: </li></ul>
  21. 21. <ul><li>Color scheme software </li></ul><ul><ul><li>Adobe Kuler </li></ul></ul>Color Scheme
  22. 22. <ul><ul><li>Color Blender </li></ul></ul>Color Scheme
  23. 23. <ul><ul><li>Color Schemer Online v2 </li></ul></ul>Color Scheme
  24. 24. <ul><li>The Web sites need to keep fresh and functional. </li></ul><ul><li>The best design strategy is to include basic information such as the following consistently on every Web page: </li></ul><ul><ul><li>Contact information </li></ul></ul><ul><ul><li>Last modified date </li></ul></ul><ul><ul><li>Copyright notice </li></ul></ul><ul><ul><li>Link to home page </li></ul></ul><ul><ul><li>FAQs </li></ul></ul>Independent and Functional
  25. 25. <ul><li>Unify is a desirable design goal in multimedia web sites and can be achieved by maintaining consistency in shapes, colors, text styles, and themes. </li></ul><ul><li>A web designer need to consider two types of unify: Intra-page unify and inter-page unify. </li></ul>Unified Piece
  26. 26. All of the multimedia elements in this website work together to create a unified piece and stands for company’s mission. Unified Piece <ul><li>Sample </li></ul>
  27. 27. <ul><li>User interfaces are designed to give users direct control over the Web site and interact with the Web site without even thinking about it. </li></ul>Interactive Interface
  28. 28. The Disney Web site is always visually appealing, functional, and user-centered. Interactive Interface
  29. 29. <ul><li>Users should be able to quickly locate and access information at the Web site, as well as be able to return to the starting point without hassle. </li></ul><ul><li>Studies have shown that users favor menus with a minimum of five to nine links. </li></ul>Link Effectively
  30. 30. <ul><li>Web users rely on context to help them determine where they are within the hierarchy of information at a Web site. </li></ul><ul><li>The Web-page designer needs to provide functional and contextual cues for the users. </li></ul>Sense of Context
  31. 31. The same theme color, consistent navigation bar, titles, footers, and links of the Disney Web site are all reinforce the users’ sense of context. Sense of Context
  32. 32. <ul><li>A well-designed Web site gives users the opportunity to establish an ongoing relationship with the company or organization. </li></ul>Feedback
  33. 33. <ul><li>All the people should have equal opportunity to access to the multimedia Web site. </li></ul><ul><li>The designer need to check government Web sites or the World Wide Web Consortium Web site to stay current on the changing laws and ensure that the Web sites you design are compliant. </li></ul>Equal Access
  34. 34. Stay current on accessibility laws to ensure that the web sites are compliant. Equal Access
  35. 35. HTML, XHTML, AND Web Authoring
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×