Web Page Design
Visual Design for Web
When considering design for a web page, one should pay particular attention to their audience. Putting a page on the internet opens up the audience far beyond who is the intended audience. The designer also has to always keep in mind the aim of the organization behind the website, its values, and its goals, as the web page will be used to communicate this to the users, and members of the page’s organization may also be users of the page.
Lin (2002) wrote that “A Web site is such a multi-user product. It is also a product designed for use by multiple audiences. Therefore, designing a Web page imposes the need for the designer to take the interests and concerns of those multiple audiences into consideration”. Therefore, the page’s purpose must always be in mind. The best way to overcome the possible differences in audience from intended and actual audience is to abide by certain values in web design, which revolve around simplicity, clarity and consistency.
Audience and Purpose
Redish quote: “understand your audience, why they come, what they need, and how to write web content for them.”
When you begin working on a web page, and throughout the process, keep these tasks, listed by Redish (2000), in mind. These will help keep you on focused on the goal of information design. This list is especially true for websites, since the designer has to understand that lay users may access the page. The page must be designed so that those who may, or must, use the information can:
The most important aspect of creating an aesthetically pleasing document is being familiar with your audience. Gathering information on the specific group you are writing for is helpful when deciding on content and how to structure the information in your document.
A way to help audiences feel connected to the information on the document is to create personas and scenarios.
There are many ways content can be presented, depending on the role of your document. If your document serves an informative purpose it might be helpful to display your content in question form that a typical reader might ask.
Effective Content Format Example:
Not only does this type of content display make it easy for the reader to find answers, but it also helps cut back on the amount of wordy content displayed on the page.
It is also helpful to break content up into topics and sub topics. Content should be displayed in time, sequence, or task format, which is typically used for information about a consumer product.
Sequence of Content Example:
A short explanation of how to prepare the flowerbed would be placed directly under the main topic.
A short explanation of different types of seeds would go here.
For more information on how to organize your webpage visit hierarchy and web design.
Simplicity, Clarity, and Consistency
As Williams (2000) described, elements on the screen must be legible, and often a pair of critical eyes is needed to judge legibility of text and images. Elements should contrast greatly with their backgrounds. Very small color elements can be seen much more easily on a black background rather than a white background.
Backgrounds should not be “busy” with clutter or heavy use of patterns. The foreground needs to be clear and easily distinguishable from the background, so a busy background distracts the user. Also to give the greatest contrast, backgrounds should be white or short-wavelength colors, such as light blue. It can also be a bad thing to use too many large file size elements on the page such as pictures, as they can take too long to download to be seen on the user’s screen, which hurts the page’s usability.
Since computer screens are typically wider than they are tall, often have less space than paper media, and give light rather than reflect light, certain considerations need to be made to distinguish design of a paper document with a Web document. The space available on a screen allows you to break information into chunks so that different elements on the page can be viewed easily on any screen. If there is an intended sequence in chunks, it is possible to use numbers or letters to code the sequence, or use graphical elements such as arrows to direct the user from one piece of information to the next. Otherwise, the most contrasted element to its background will likely be read first.
The following is a guide of key elements to consider:
To better understand how to effectively layout a web page, read more about how users process information on the web.
Loorbach and Geest (2005) cite Grudin’s distinctions of consistency in interface design.
Cues should also be given to remind the user where they are, and what organization’s Web pages they are accessing, so placement of logos or bylines should be consistent between sister Web pages to create a unity, and immediate and unambiguous recognition on the part of the user.
Maintaining simplicity, consistency, and clarity will help in the design of a very clean and usable, professional Web page. More information on web and information design can be found at the resources listed below.
Lin, C. (2002, February). Organizational size, multiple audiences, and web site design. (Applied Research). Technical Communication, 49(1), 36+. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA83262375&v=2.1&u=udel_main&it=r&p=AONE&sw=w
Loorbach, N., & van der Geest, T. (2005, February). Testing the visual consistency of Web sites. Technical Communication, 52(1), 27+. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA129165917&v=2.1&u=udel_main&it=r&p=AONE&sw=w
REDISH, J. C. (2000, May). What Is Information Design? Technical Communication, 47(2), 163. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA62828567&v=2.1&u=udel_main&it=r&p=AONE&sw=w
Redish, J. (2007). Letting go of the words. (pp. 13-257). San Francisco: Morgan Kaufmann Publishers.
WILLIAMS, T. R. (2000, August). Guidelines for Designing and Evaluating the Display of Information on the Web. Technical Communication, 47(3), 383. Retrieved from http://go.galegroup.com/ps/i.do?id=GALE%7CA64702894&v=2.1&u=udel_main&it=r&p=AONE&sw=w