ITEC 745 - Roderick - Fall 2005
Design Concepts

745 Home 745 Schedule 745 Links 745 Forum 745 Helpers 745 Syllabus

In the short history of the Web, many design preferences, fads and recommendations have come and gone. In the beginning, web pages were text-based with no graphics. With the introduction of the first graphical web browser (Mosaic), graphics were added in rudimentary and clunky ways. Over time, browsers grew more sophisticated and began bastardizing the HTML specification to afford designers even more ability to control design and presentation aspects of their pages. Today, the trend is to renounce many of the added tags and techniques used to spice up the look and feel of web pages in favor of a simpler approach using CSS and layers while keeping the underlying code structurally pure. In fact, the W3C is actually stripping many of these tags from future specifications.

Screen Size:

  • Standard monitor settings include: 640x480, 800x600, 848x480, 1024x468, 1152x864, 1280x1024
  • Larger monitors have recently dropped in price dramatically making 15" monitors far more scarce than before. Now,17" monitors are more of the standard and 19" and 21" monitors are more prevelant.
  • Use the "Window Size" pop-up menu in the bottom-right corner of your Dreamweaver document window to help test your current design against various default monitor settings. You can add your own special settings in the Preferences>Status Bar window.

Color:
[Additional Points]

Tables as Design Mechanism:

Tables were introduced to the HTML specification for presenting tabular data but soon became used as a trick by designer's to approximate placement of elements in their web pages. It allowed for the alignment of blocks of text alongside images and powered the very popular left-hand nav bar style. While the future of web page design and presentation will eventually abandon tables used in this capacity, their limited and smart usage is still acceptable for standards based web pages.

Bandwidth Friendliness:

  • Usability tests show that users desire, above anything, to get their pages fast. In these heady days of DSL and Cable high speed access, it's easy to forget about those still on 56.6k and 28.8k. It's such a big issue that Jakob Nielsen (usability expert) suggests refraining from graphics as much as possible.
  • This issue should enter into your design planning. Designing pages for speed not for glitz can pay off in terms of user satisfaction.
  • Dreamweaver will provide feedback as to your current file size and download time (default setting is for 28.8 modem). This is located in the bottom-right corner of your Document window. It will also calculate any graphics or other files you've embedded in your document. You can change the default setting in Preferences>Status Bar.

Web Page Real Estate:

If San Francisco was a web page, imagine the Marina being the very top of the site (I actually hate that neighborhood but bear with me). The idea holds that the area of a web page which immediately appears on a users screen is the most valuable. Space that must be scrolled to becomes less valuable the further a user must scroll to get to it. Content placed within the high value real estate area should be central to the user's needs. The more overhead taken up by navigation, irrelevant content, ads, etc., the more you are stepping on the user experience on your pages. Content should account for at least half of the space on a page and should optimally approach 80 percent.

Use of White Space:

What does whitespace look like? It can come in many forms and doesn't necessarily need be white but refers to the absence of elements in a page (be it text, graphics or media). Sometimes in a frenzy to fill up real estate, designers will fill pages with content, making a dizzying amount of selections and stimuli for users to contend with. Sometime, designers will over-decorate pages with images and other visual elements. Whitespace is the room in-between those things. It provides relief for the users eyes but more importantly it helps provide separation for content.

 

 
© 2005 Andrew Roderick. Some Rights Reserved. ( Creative Commons License). XHTML | CSS | 508
Email Instructor | Department of Instructional Technology - San Francisco State University