Techniques For Strong Web Design

When designing for the web, there a couple things you need to take into consideration. Here are the dos and don’ts of web design.

Dos:

  • Keep all file sizes as small as possible for faster downloads
  • Inverted pyramid (put your most important information in the first screenful)
  • Limit the lengths of your page to two or three screenfuls
  • Use same styles for similar elements (eg. all headings in bold red)
  • Break content into small paragraphs
  • Use anti-aliasing in text in graphics (except for under 9p)
  • Save transparent images to png to prevent white halos
  • Provide alt text for images

 

Don’ts:

  • Designing explicitly for one web browser
  • Using too many animations
  • Uploading a page that is not yet finished
  • Setting type in all capital letters, bold, or italics
  • Setting type significantly smaller than the default
  • Making graphics that look like buttons but don’t link to anything
  • Making thumbnail images by scaling down full-size images using width and height properties
  • Centering everything on the page
  • Having different text alignments on one page
  • Using too many colors
  • Using wild patterns for backgrounds
  • Using knock out type for a large body of text
  • Using clipart images

Here are a few examples of good and bad websites…

Good Websites:

www.cvs.com – This site is very clean. The homepage can be fully seen in two scrolls of the mouse. They have clearly defined headers at the top of the page that gives links to their sister-sites. Next to their logo, they have the most popular categories (with accompanying icons) that customers look for when coming to their site. At the bottom of the page, they have more specific links for those who know exactly what they are looking for. This website caters to both types of web users.

www.deerpark.com – The design of this site is as refreshing as its water. There is a peaceful background image, but it doesn’t distract from the rest of the website. The colors reflect the brand. The type is legible and contrasts nicely with the blue background. The links are simple, all the info is contained within the first screenful, so there is no need to scroll.

Bad Websites:

www.getglue.com – When you first log in on this website, the layout is overwhelming. You are bombarded with a ton of information on the front page from people whose activity you follow. If you scroll. you scroll down endlessly at past activities. The tabs at the top offer no description, so you really don’t know where you’re headed until you click on it. You can’t view all the information you want at once; you have to keep clicking and scrolling to see it all. This is bad for users who know what they are looking for and want to reach their information quickly.

www.craigslist.org – HORRIBLE layout. Very overwhelming, just strictly text. Your eyes already feel fatigued after you scroll and scroll, desperately searching for a place to rest your eye on the page. If someone was using a screen reader, I’m sure they’d want to hit their head on the wall after all of this. There is no visual hierarchy, all the text is the same size, and the links are the default links with no design scheme.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s