The document discusses principles of web design such as consistency, balance, movement, color schemes, templates, navigation, and accessibility. It provides examples from real websites to illustrate concepts like maintaining consistency across pages, using symmetrical or asymmetrical balance in layouts, directing the eye from upper left to lower right, employing consistent theme colors, and ensuring equal access for all users. Templates and navigation elements help provide structure and context for users.

1. EDIT 6325 Ninghua Han 2009. 9 Design and The User Interface

2. Introduction The key to designing any web site begins at the planning phase. During the planning phase, a design strategy should have been established with input from the client and all members of the team. The design should be simple, easy to understand, easy to use, and follow the design principles.

3. Metaphor A metaphor is a figurative representation that links the content of your web site to an established mental model. Well-designed and targeted metaphors can be powerful communication tools.

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. Consistency Consistency is an especially important component of a Web site. It applies to both the appearance of each page and how the navigation scheme works.

6. Consistency sample: http://lacountyarts.org/ This is a main page of Los Angeles Country Arts Commission website. Consistency

7. All the subpages of this Web site keep using same style. One hue stands for one page. Consistency

8. A template is a precise layout indicating where various elements will appear on the Web page. A template can aid the design process in several ways: Provide consistency Shorten the development time Prevent “object shift” Template

9. Template Sample: http://bestmoban.com/ 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. This a European style template. Template

11. The media elements should enhance the content. On Web pages, less text is usually better. The number of levels should be reduced. The content should be always accessible. The content should be easy for users to learn the purpose of the Web site quickly. The texts and background should always be tested. Content

12. Balance in Web page design refers to the distribution of optical weight in the layout. Optical weight is the ability of an element to attract the user’s eye. It is determined by its nature and size. Balance is determined by the weight of the elements and their position. Balanced Layout

13. A Web site can have three kinds of balance: Symmetrical balance This is 2009 GIVENCHY Web site. It keeps the black and white color style and symmetrical balance layout. Balanced Layout

14. This is Previous GIVENCHY Web site. It also use black and white color scheme and symmetrical balance layout. Balanced Layout

15. Asymmetrical balance This Web site arranges nonidentical elements on both sides of central line. Balanced Layout

16. No balance There is no central line for this website’s layout to arrange elements. Balanced Layout

17. Movement relates to how the user’s eye moves through the elements on the Web page. 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. Movement is especially important in training and educational Web sites. Movement

18. Color scheme immediately convey information and set the mood or tone of the Web site. The beginner should avoid trying to work with too many colors at one time. 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. Color Scheme

19. Many Web authoring programs include preset color schemes that can be applied to Web pages and entire Web sites. 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. Color Scheme

20. Yellow is Kodak company’s theme color. It’s website also uses yellow as their website theme color. Color Scheme Sample:

21. Color scheme software Adobe Kuler Color Scheme

22. Color Blender Color Scheme

23. Color Schemer Online v2 Color Scheme

24. The Web sites need to keep fresh and functional. The best design strategy is to include basic information such as the following consistently on every Web page: Contact information Last modified date Copyright notice Link to home page FAQs Independent and Functional

25. Unify is a desirable design goal in multimedia web sites and can be achieved by maintaining consistency in shapes, colors, text styles, and themes. A web designer need to consider two types of unify: Intra-page unify and inter-page unify. Unified Piece

26. All of the multimedia elements in this website work together to create a unified piece and stands for company’s mission. Unified Piece Sample

27. User interfaces are designed to give users direct control over the Web site and interact with the Web site without even thinking about it. Interactive Interface

28. The Disney Web site is always visually appealing, functional, and user-centered. Interactive Interface

29. 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. Studies have shown that users favor menus with a minimum of five to nine links. Link Effectively

30. Web users rely on context to help them determine where they are within the hierarchy of information at a Web site. The Web-page designer needs to provide functional and contextual cues for the users. Sense of Context

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. A well-designed Web site gives users the opportunity to establish an ongoing relationship with the company or organization. Feedback

33. All the people should have equal opportunity to access to the multimedia Web site. 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. Equal Access

34. Stay current on accessibility laws to ensure that the web sites are compliant. Equal Access

35. HTML, XHTML, AND Web Authoring