Web Site Design:Layout

Fall 2013

Basic Concepts

• Basic Web Design Concepts– Proximity– Alignment– Repetition– Contrast

http://library.albany.edu/imc/webdesign/

Basic Concepts: Proximity

• Refers to the distance between elements on a Web page and how the elements relate to one another. – Text– Navigation– Headings– Etc.

• Elements that are close together appear to have a stronger relationship than elements that farther apart

Proximity

Dots closer together create a more robust image

Dots further apart do not look related

Basic Concepts: Alignment

• One of the most critical principles of design. • Significantly affect the readability of material

on a page.• Align text left to right. Avoid horizontal

scrolling, especially for text.• Proper alignment will create strong

associations and a pleasing presentation.

Blue lines show how the elements on this page are aligned

Basic Concepts: Repetition

• Saying the same thing several times to get a point across.

• Use of a consistent theme throughout a Web site.

• Should be enough similarities on pages of a web site to create a consistent look and feel to the site. – Makes site easy to navigate

Basic Concepts: Repetition

• Page on right is similar to page on left, different information, but the look is similar.

Basic Concepts: Contrast• Color of text against background• Differences between elementsCan You Read The Text Below?

This is an example of poor contrast. The color of this text is not different enough from the background color. Higher contrast is far easier to read.

This text is much easier to read than the text above. Higher contrast is far easier to read.

This text is much easier to read than the text above. Tests indicate that white wording on a black background is harder to read than the black text on a white background.

Navigation

• Several basic styles of navigation– Top (common)– Left Side (common)– Right Side (very rare, should avoid)– Bottom (used when pages are long)– Horizontal (usually top or bottom on page)– Vertical (usually left or right on page)

This page uses vertical navigation on the left side

This page uses top horizontal navigation

This page uses primary navigation at the top andsecondary navigation on the side

Navigation

Readability: Fonts

• Text in Web pages is displayed by browsers using the fonts available in the viewer's computer.

• Most PC users have Arial and Times New Roman installed.

• Macintosh computers usually have Helvetica and Times.

• Arial is similar to Helvetica and Times is similar to Times New Roman.

• The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

Readability: Fonts

• Here are the most common "Web safe" fonts:– Arial– Helvetica– Times

– Times New Roman

– Verdana– Georgia

• Here are some uncommon fonts:– VIKING– Batavia – Courier– Onyx

A recent article in the New York Times concluded that Baskerville is the font that is most believable

Readability: Fonts• Cascading Style Sheets (a technique for controlling presentation of

elements in Web pages) allows use of non-standard fonts using @font-face rules. Details about how this can be done are at the W3 Schools CS3 Fonts page.

This page illustrates good use of fonts. The headlines and main topic headers use a sans serif font that is easy to read. The text body uses a serif font, such as Times or Times New Roman, that is easy to read in blocks of text.

However, many designers find the standard Times, Times New Roman, Arial, Helvetica fonts to be dull. They will try to improve a site by using alternative fonts. This can now be accomplished using both traditional HTML Web safe fonts and the @font-face rules.

Serif and Sans-Serif Fonts

Sans-serif font

Serif font

Serif font(serifs in red)

Sans-serif font does not have the small projecting features called "serifs" at the end of strokes.

Readability: Fonts

• Large text is hard to read because people can only read one or two words at a time.

• Small text is difficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances.

Readability: Fonts• Here are common font sizes that are both fixed

and proportional:– 6 pixels

– 10 pixels

– 14 pixels

– .9 em– 1 em– 1.2 em– 1.4 em– 90%– 100%– 120%

Web Page Analysis

This page has a very busy background that causes the text to blend it. It is very hard to read.

This page has low contrast between the text and the background. This should be corrected for easier reading.

Web Page Analysis

This page has pretty good contrast, but the center alignment makes the page very hard to read.

This page is the best because it has good contrast, lots of white space, and simple left alignment.

Design Considerations:Page Size and Layout

• How do you deal with design questions such as page size and layout? Should you use tables, or should you try Cascading Style Sheets? These topics are explored on the following slides.

Top Tips to Annoy and Insult Your Web Site Visitors: (Don't do this stuff!)

• "This site best viewed with _____" - Sites should be designed to work right on all combinations of equipment and software.

• "Under Construction" - People take detours around roads that are under construction.

• Background music - Takes too long to download.• Horizontal scrolling - Avoid it because people will click out

rather than do it.• Silly or Useless Animated GIFS - Take longer to download. But,

for a specific goal or purpose they can be effective. Never use them just because "you can."

• Splash pages - They are annoying and wasteful in most situations and should be avoided.

Design Considerations: Tables• Originally used to control the width of

material presented on web page• Can specify in percent or pixels

– Percent causes table size to change depending on browsers screen size

– Pixels could cause horizontal scrolling

Example of tables using percentage instead of pixels

Design Considerations: Tables vs. Cascading Style Sheets

• Cascading Style Sheets (CSS): used to control presentation on web site

• Saves editing time once the site is built– Many pages can use the same CSS– Can have many CSS for a web site

• This is preferred over using tables

Links to popular browsers

• Browser Question - There are several browsers on the Web. One is much more popular than the others. But that changes, sometimes month to month

• Popular browsers– Microsoft Internet Explorer– Firefox– Safari– Opera– Chrome

Testing and Checking a Web site

• Pre-Launch Web site check list:– Before launching my site I checked it with Internet

Explorer– Before launching my site I checked it with Firefox – Before launching my site I checked it with Safari – Before launching my site I checked it with Chrome – Before launching my site I check the code to make

sure it was valid

Testing and Checking a Web site

• In addition to checking pages with different browsers, it is good practice to validate your code.

• Valid code is more likely to make your pages display properly.

• Many Web editing software programs, such as Dreamweaver, have code validation functions.

• But many Web designers use the World Wide Web Consortium's online code validators. – You can find that at www.w3.org and just follow the links

and instructions.

Other Online Resources• Below are links to other resources for online

information about Web design, the World Wide Web, and the Internet.– World Wide Web Consortium (http://www.w3.org/)– Webmonkey (http://www.webmonkey.com/)– Lynda Weinman HTML (http://www.lynda.com/)– HTML Writers Guild (http://www.hwg.org/)– Web Design with Style, Ease, and CSS

(http://www.onlinewebdesigndegree.com/resources/web-design-with-style-ease-and-css/)

– Interactive Media Center Home Page (http://library.albany.edu/imc/index.htm)