Web Design Principles

1
Web Design Principles

• Some basic guidelines for creating user-friendly
  web sites

2
Where to begin

• Before tackling a new project, there are
  questions you must first ask yourself
• What is the point of the site?
• What are your goals?
• Do you want to show the world pictures of your
  cat?
• Are you trying to sell worms through the mail?
• Are you promoting your new major motion picture?

3
Where to begin

• The answers to these questions will help you to
  focus.
• Next you would ask, Who is my audience?

4
Where to begin

• Finally, consider some technical questions
• How will your audience view your page?
• Will your content appeal to a business crowd
  accessing the Net on a T1, or is it for the folks
  at home with 28.8 modems?
• While considering speed, you should also think
  about browsers and plug-ins as well.
• What makes more sense for the purpose of your
  site?

5
Basic concepts

• Now that you've figured out what your site is
  about, who the viewers are, and what kind of
  technologies you want to use, it's time to think
  about hierarchies.
• Not everyone has a huge monitor, so your most
  important elements need to be at the top of the
  page, where viewers will see it immediately. The
  smallest monitor out there is 640 by 480 pixels,
  so your design should work on a basic level
  within those parameters.

6
Basic concepts

• Think of the home page of your website as the
  front page of a newspaper.
• Really important stuff goes on the front page,
  and the most important stuff goes on the top or
  "above the fold," as newspaper people would say.

7
Basic concepts

• Another thing to remember is that people read
  from left to right and top to bottom.
• They almost always look at the upper-left corner
  first, which is a good place to put something
  really important, such as a logo.

8
Page Layout

• White space is your friend.
• White space doesn't necessarily need to be white
  - it can be any color you want, but it should be
  blank. Eye relief is the concept here.
• Don't be afraid to leave some space around a GIF.
• Fat margins around body copy work nicely as well.
• White space helps the reader's eyes rest on
  what's important - whether that's an image or
  words. It helps unclutter your design and focus
  your concept.

9
Page Layout

• Navigation
• Remember that the navigation system is for the
  user.
• Like the table of contents or index in a book, it
  helps the you (the user) decide where the
  information you want is located.

10
Page Layout

• Navigation
• Unlike a book, you cant hold a web site in your
  hands so you have no idea how complex or deep
  the site will be.
• Because you navigate page by page, you can easily
  become disoriented and get lost.
• Good navigation is key.

11
Page Layout

• Navigation should
• Help readers quickly find the desired content
• Provide multiple navigation paths for different
  types of users
• Let users know where they are at all times
• Be consistent
• Provide feedback and support
• Not surprise or mislead the user

12
Page Layout

• Designing navigation is like designing highway
  signs.
• The overriding design principle is functionality,
  not style.

13
Page Layout

• If everyone navigated the same way, it would be
  easy to design a system however studies have
  shown that users navigate sites based on their
  own individual preferences.
• For this reason, it is a good idea to offer the
  user multiple ways of getting around.

14
Page Layout

• Some readers may want to navigate geographically.
  
• Some may want to navigate by subject matter.
• Some may have found themselves on a particular
  page as a result of a search they did and may
  want to get back to the home page.
• Some may want to read the most recent material on
  a specific topic.
• Etc.

15
Page Layout Type

• Readability
• Type should sit comfortably on the background
  color.
• It's more than an issue of high contrast. White
  type on a black background is readable, but if
  you try light grey type on black, the end result
  is more comfortable to the eye. Its subtlety is
  a little more complex and interesting.

16
Page Layout Type

• Readability part two
• The bigger the type, the easier it is to read
  the longer the line length, the more difficult it
  is to read.
• Also avoid making entire sentences links. It's
  cleaner and simpler to link off one word or a
  short phrase.

17
Links

• Links are an essential infrastructure allowing
  Web content to be navigable.
• Link management is therefore an important part of
  running a Web site.
• A broken link is a sign of an unprofessional
  site.

18
Links

• Links should be easy to understand, and graphic
  links should be clear and also have text links
  for accessibility.
• Try to use descriptive words for links instead of
  click here.
• Make pages or sections easy to return to. When
  you link to other sites you might want to use the
  Target command to open the other site in a new
  window

19
Links

• Include information concerning the size of the
  file when providing links to images, sounds,
  movies, or other downloadable files.
• It's annoying to click an icon and discover you
  just requested a 10 MB sound file.

20
Graphics

• Make sure graphics support the message.
• Using a graphic repeatedly throughout the site
  reduces download time because once an image is
  downloaded it remains in the computer's cache.
• During the browser session, the image is called
  from cache instead of going out to the Web site.
• Avoid overusing graphics and animations because
  they draw away from the message and increase
  download time.

21
Graphics

• Avoid large graphics with slow download time that
  delay page display.
• Bandwidth is a primary restriction of the Web and
  large graphic, audio, and video files that are
  slow loading distract the reader.
• If the load time is not worth the wait, the
  reader becomes frustrated with the site.

22
Graphics

• Avoid long pages without white space or relevant
  graphics.
• Unless the page is meant to be printed instead of
  read on the screen.

23
Final Checklist

• Once you have designed your site and it is ready
  to go public, ask yourself these basic questions.
  
• Do pages load quickly?
• Do they look inviting?
• Are descriptors crystal clear?
• Is navigation easy?
• Are links rewarding?
• Is the information current?