[Week 5] Blog Post 4 – Web Design: Good and Bad Examples

1. Introduction

Surfing the Internet gives opportunity to a user to be exposed to an infinite number of websites online. Many websites started out simple and bleak in the beginning of the Internet Age, but as the years brought forth greater user demand and experiences, it is now a sin to show that level of workmanship. Web design is the art of designing the layout, content and appearance of a website. It shows users the essence of, and even influences decision-making, response and likability to the company or persons hosting it, apart from just the website.

A good web design is vital to the host and delivers a quality user experience, which is a factor in eventually assisting the host’s purpose for a website. Poorly designed websites bring great costs otherwise, by affecting sales or reputation, or even both.
2. Good Web Design

Examples below have neat, clear and visually appealing outlooks.

For a good web design, user satisfaction is of the utmost importance, since the website is essentially created for the user. It is over-assuming to say that all users have the same kind of satisfaction needs, but generally satisfaction requirements will require following this guideline:

Essential Good Web Design Criteria:

  • Neat and Concise Layout and Prioritization of Content and Menus
  • Rich, Precise and Relevant Content
  • Visually Appealing Graphics
  • Good and Clear Navigability of Menus and Links
  • Good Color Combinations
  • No Distractions, No Confusion, No Junk
  • Fast Loading Speed
  • Central Consistent Theme/Style

Detailed explanation of each criteria is given extensively below in the list of essential ‘Good Design Features’ by Robin Williams:

Text

  •     Background does not interrupt the text
  •     Text is big enough to read, but not too big
  •     The hierarchy of information is perfectly clear
  •     Columns of text are narrower than in a book to make reading easier on the screen

Navigation

  •     Navigation buttons and bars are easy to understand and use
  •     Navigation is consistent throughout web site
  •     Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
  •     Frames, if used, are not obtrusive
  •     A large site has an index or site map

Links

  •     Link colors coordinate with page colors
  •     Links are underlined so they are instantly clear to the visitor

Graphics

  •     Buttons are not big and dorky
  •     Every graphic has an alt label
  •     Every graphic link has a matching text link
  •     Graphics and backgrounds use browser-safe colors
  •     Animated graphics turn off by themselves

General Design

  •     Pages download quickly
  •     First page and home page fit into 800 x 600 pixel space
  •     All of the other pages have the immediate visual impact within 800 x 600 pixels
  •     Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
  •     Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

3. Bad Web Design

Examples below are untidy, full of distracting advertising, bad color schemes and visually unpleasing.

Committing sins of web design occur when the fundamental criteria of good web design are evidently reversed. Users will find the experience frustrating, offensive, distracting or confusing. It is important to know that a website is not generally bad if it fails to fulfill a good criteria, except when it actually does the reverse of a good criteria and causes grief to the user. Generally, bad web design criteria is as follows:

Sinful Bad Design Criteria

  • Untidy and Scattered Layout without Prioritization of Content and Menus
  • Poor, Chunky and Irrelevant Content
  • Visually Unpleasant
  • Bad and Unclear Navigability of Menus and Links
  • Offensive Color Combinations
  • Contains Distractions, Confusing and Junk
  • Very Slow Loading Speed
  • Inconsistent Theme/Style

Detailed explanation of each criteria is given extensively below in the list of ‘Bad Design Features’ by Robin Williams:

Backgrounds

  •     Default gray color
  •     Color combinations of text and background that make the text hard to read
  •     Busy, distracting backgrounds that make the text hard to read

Text

  •     Text that is too small to read
  •     Text crowding against the left edge
  •     Text that stretches all the way across the page
  •     Centered type over flush left body copy
  •     Paragraphs of type in all caps
  •     Paragraphs of type in bold
  •     Paragraphs of type in italic
  •     Paragraphs of type in all caps, bold, and italic all at once
  •     Underlined text that is not a link

Links

  •     Default blue links
  •     Blue link borders around graphics
  •     Links that are not clear about where they will take you
  •     Links in body copy that distract readers and lead them off to remote, useless pages
  •     Text links that are not underlined so you don’t know they are links
  •     Dead links (links that don’t work anymore)

Graphics

  •     Large graphic files that take forever to load
  •     Meaningless or useless graphics
  •     Thumbnail images that are nearly as large as the full-sized images they link to
  •     Graphics with no alt labels
  •     Missing graphics, especially missing graphics with no alt labels
  •     Graphics that don’t fit on the screen (assuming a screen of 800 x 600 pixels)

Tables

  •     Borders turned on in tables
  •     Tables used as design elements, especially with extra large (dorky) borders

Blinking and animations

  •     Anything that blinks, especially text
  •     Multiple things that blink
  •     Rainbow rules (lines)
  •     Rainbow rules that blink or animate
  •     “Under construction” signs, especially of little men working
  •     Animated “under construction” signs
  •     Animated pictures for email
  •     Animations that never stop
  •     Multiple animations that never stop

Junk

  •     Counters on pages — who cares
  •     Junky advertising
  •     Having to scroll sideways (800 x 600 pixels)
  •     Too many little pictures of meaningless awards on the first page
  •     Frame scroll bars in the middle of a page
  •     Multiple frame scroll bars in the middle of a page

Navigation

  •     Unclear navigation; over complex navigation
  •     Complicated frames, too many frames, unnecessary scroll bars in frames
  •     Orphan pages (no links back to where they came from, no identification)
  •     Useless page titles that don’t explain what the page is about

General Design

  •     Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
  •     Frames that make you scroll sideways
  •     No focal point on the page
  •     Too many focal points on the page
  •     Navigation buttons as the only visual interest, especially when they’re large
  •     Cluttered, not enough alignment of elements
  •     Lack of contrast (in color, text, to create hierarchy of information, etc.)
  •     Pages that look okay in one browser but not in another

4. Conclusion

Web design is not as easy as it looks. Many elements have to contribute and collaborate as a whole in order to produce a good and complete website. It is also easy to disregard few simple rules that can make or break a website. Users are always looking for a better experience, and their demands grow larger and harder to fulfill each year. User experience will affect how they regard and make decisions concerning the host or company website. In summary, web design is driven by user satisfaction and the benchmark keeps growing higher over time. Constant updating of interactivity, creativity, aesthetics and performance are essential in web design.

Below is a client asking for unrealistic demands from a web designer:

References:

http://www.ratz.com/featuresgood.html

http://www.ratz.com/featuresbad.html

http://notalwaysright.com/tag/web-design

http://www.topdesignmag.com/20-examples-of-bad-web-design/

http://www.topdesignmag.com/25-winning-examples-of-css-based-websites/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: