Sign Metaphor   «Prev  Next»
Lesson 11

Signs Metaphors Web Design Conclusion

You never have a second chance to make a first impression. Signs and metaphors play a major role in forming a user's opinion of a site. Because those opinions are formed so quickly, and are so difficult to reverse, your team should spend a good deal of time doing quality planning for the signs and metaphors of your site.
You have learned about some tools for planning and the importance of understanding the target audience.

You should now be able to
  1. Describe the importance of signs and metaphors for engaging users.
  2. Identify the individuals and responsibilities involved in development of signs and metaphors
  3. Describe how to use the RFP to determine sign and metaphor needs
  4. Describe how to use the Site Planner to determine sign and metaphor needs
  5. Describe techniques to gather information about your potential audience
  6. Describe how to create effective questions for audience analysis.
  7. Use audience analysis results to create signs and metaphors
  8. Describe how user groups help validate signs and metaphors
In this module, you were introduced to the following glossary terms:
  1. Cascading Style Sheets (CSS) :CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS can control the layout of multiple web pages all at once.

User Experience, Interaction, and User Interface design

Often, when we think of design, we think about how something looks. On the web, the first matter of business is designing how the site works. Before you pick colors and fonts, it is important to identify the goals of the website, how it will be used, and how visitors move through it. These tasks fall under the disciplines of User Experience (UX) design, Interaction Design (IxD), and User Interface (UI) design. There is a lot of overlap between these responsibilities, and it is not uncommon for one person or team to handle all three.

User Experience designer

The User Experience designer takes a holistic view of the design process, ensuring the entire experience with the site is favorable. UX design is based on a solid understanding of users and their needs based on observations and interviews.
UX design includes "all aspects of the user's interaction with the product: how it is perceived, learned, and used.

For a website or application, that includes the visual design, the user interface, the quality and message of the content, and even the overall site performance. The experience must be in line with the organization’s brand and business goals in order to be successful.
The goal of the Interaction Designer is to make the site as easy, efficient, and delightful to use as possible. Closely related to interaction design is User Interface design, which tends to be more narrowly focused on the functional organization of the page as well as the specific tools (buttons, links, menus, and so on) that users use to navigate content or accomplish tasks.

The following are deliverables that UX, UI, or interaction designers produce:

User research and testing reports

Understanding the needs, desires, and limitations of users is central to the success of the design of the site or web application. The approach of designing around the user’s needs is referred to as User-Centered Design (UCD), and it is central to contemporary web design. Site designs often begin with user research, including interviews and observations, in order to gain a better understanding of how the site can solve problems or how it will be used. It is typical for designers to do a round of user testing at each phase of the design process to ensure the usability of their designs. If users are having a hard time figuring out where to find content or how to move to the next step in a process, then it’s back to the drawing board.
In the next module, strategies and resources you will be using in developing your signs and metaphors will be discussed.

Wireframe diagrams

A wireframe diagram shows the structure of a web page using only outlines for each content type and widget (Figure 3-11). The purpose of a wireframe diagram is to indicate how the screen real estate is divided and where functionality and content such as navigation, search boxes, form elements, and so on, are placed. Colors, fonts, and other visual identity elements are deliberately omitted so as not to distract from the structure of the page. These diagrams are usually annotated with instructions for how things should work so the development team knows what to build.
Wireframe Diagram
Figure 3-11 : Wireframe Diagram

Site diagram

A site diagram indicates the structure of the site as a whole and how individual pages relate to one another.