Basic Web Design Principles

1
Basic Web Design Principles
2
Design

• Most people visit Websites to find information or
  to accomplish some task
• The content of the site should be organized in a
  way that is meaningful and useful to the intended
  audience
• Users need a logical structure so they know where
  they are and how they get there
• It is important to anticipate what the user will
  want to do, how he or she will use each section
  of the site, and in what order

3
Page Design

• Page design includes
• The look
• Layout of content
• Navigational elements
• Visual design should reflect
• The purpose of the site
• The identity of the Web site sponsor
• And contribute to the site's usability

4
Page Design Questions

• Style What's the overall impression you're
  trying to create?
• Layout Will the page composition be conventional
  or unconventional? How will the different
  elements be arranged into visual groupings? How
  will the navigation options be presented?
• Content Which tone of voice is best for the
  site's purpose and audience? What is the right
  combination of text and images?
• Page design ideas should first be sketched out on
  paper. Working out your ideas on paper allows you
  to quickly explore different design ideas

5
Web Design

• The heart of design is communication.
• The basic rule for any design is Form follows
  function.
• Design must support that function to the fullest
  extent possible.
• Think of web site navigation.
• The coordination between form and function is
  invisible to the user when done well and
  painfully obvious when it is not.

6
Navigation Design

• Most people ask four basic questions when they
  are getting around (anything)..
• Where am I?
• Where can I go?
• How will I get there?
• How can I get back to where I once was?

7
Navigation Design

• Navigation that really works should...
• Be easily learned
• Remain consistent
• Provide feedback
• Appear in context
• Offer alternatives
• Communicate the site hierarchy
• Provide clear visual messages
• Be appropriate to the site's purpose
• Support users' goals and behaviors

8
Working with Color in HTML

• Good combinations for web page
• Bad combinations for web page

Blue on White
Yellow on Black
White on Gray
Red on Pink
Yellow on White
Blue on Purple
Red on Green
Green on Orange
9
Images and Bandwidth

• Speed
• Do more with less
• Use images sparingly
• Select the most suitable image format
  (jpeg/gif/png)
• The more high-bandwidth media you use, the more
  you will limit your audience

10
Image file formats

• GIF (Graphic Interchange Format)
• To display clip art containing
• To create animated graphics
• To use transparent colors
• JPG (Joint Photographic Expert Group)
• To display photographs
• To use images containing 256 colors
• To reduce the size of the image through file
  compression
• PNG (Portable Net Graphics)
• A replacement for GIF
• Compressed
• More color depth
• transparency

11
Image tag

• Inline image a picture file that is referenced
  in the HTML code and is loaded with the HTML
  file.
• src attribute
• URL
• is usually relative
• If you want to retrieve an image from a different
  directory, you can add path information to the
  file name

12
Image tag attributes

• HEIGHT specifies the height of the image in
  pixels
• WIDTH specifies the width of the image in pixels
• BORDER determines the size of the border
• ALT specifies the text displayed on-screen when
  the image cannot be loaded
• ALIGN enables text to flow around the image at
  the TOP, MIDDLE, or BOTTOM of the image. Also
  used to flush the image to the RIGHT or LEFT of
  the screen

13
Bandwidth

• Image files are larger text files
• Use more network resources (bandwidth)
• Users who access the Internet via telephone lines
  will have to wait for image files
• estimate 7K / sec or less
• Use image files no larger than 30-40KB
• especially on heavily used pages
• Use "alt" text to describe images
• for users with image loading turned off

14
Battling Bandwidth Limitations

• Always specify height and width attributes for
  all your images so the browser can work around
  each image while it is downloading.
• TIP To find an image dimension open it using a
  Web browser, then select Properties on the File
  Menu.
• Dont put large images at the top of a Web page
• Use interlaced GIFs and progressive JPGs.
• Several graphic programs save GIF or JPG files
  in convenient formats Paint Shop Pro PhotoShop,
  etc.
• Use thumbnails reduced versions of your image

15
General Design Guidelines

• The name/logo of the site or sponsor should
  appear on every page
• Avoid busy or distracting backgrounds
• Prioritize your content. Call attention to your
  most exciting content with size, color, and/or
  screen position.
• Minimize less important content

16
General Design Guidelines

• Organize information into clearly distinguishable
  areas.
• Chunk related elements into visual groups through
  the use of space, graphics, or similarities in
  color, lightness, texture, or orientation
• 50-80 of space on a page should be used for
  content of interest to the user, not navigation
  or advertising

17
General Design Guidelines

• White space is not useless. It can guide the eye
  and help users understand the grouping of
  information.
• Keep pages simple. Review all of your design
  elements and remove them one at time. If the
  design works just as well without an element,
  kill it.

18
General Design Guidelines

• Use consistent
• fonts, color palette, graphical elements,
• navigation options,
• placement of elements on the page
• In general, use more short pages instead of fewer
  long pages.
• However, content pages should contain one
  conceptual unit of content.
• In general, people prefer to scroll to continue a
  single unit of content, such as an article,
  rather than click from page to page.

19
General Design Guidelines

• Never make the user scroll to locate important
  navigation options or the focal point of the
  page, such as "Buy Now"
• Always use highly visible page titles to provide
  location feedback and help users remain oriented

20
General Design Guidelines

• Reading from computer screens is about 25 slower
  than reading from paper
• Guidelines
• Be concise
• Use simple sentences
• Keep pages short
• Use bulleted lists
• Break up text with headings and subheadings
• Match your writing style to your site's audience
  and purpose
• Proofread!

21
Four Basic Principles

• Alignment
• Use a consistent alignment throughout each
  section of a document. Do not mix alignments.
• Proximity
• The proximity of visual element on a page should
  reflect the relationships between the content
  elements they represent.
• Repetition
• Repeat certain visual elements throughout the Web
  site that tie all the disparate parts together.
  Each page should look like it belongs to the same
  site, the same company, the same concept.
• Contrast
• Use contrasting elements to guide the viewers
  eyes around to important elements on the page.
  Good contrast helps create focal points to which
  the user is drawn naturally.

22
Alignment
23
Alignment
24
Proximity
25
Example of Bad Proximity
26
Better Proximity
Good proximity also means that elements belonging
to similar content or categories should be
visually grouped together.
27
Alignment Proximity
Notice how many times your eye has to jump from
one element to another on this page. About seven
times?
Notice how the spacing arrangements provide
visual clues as to the meaning and importance of
different pieces of information.
28
Repetition
29
Repetition
Repetition does not mean that every page in the
site looks exactly the same. It could mean that a
consistent set of style elements, graphic
elements, and visual cues are used on all pages.
30
RepetitionExample The class Web site
31
Contrast
Important elements that represent the focus of
the content must be set apart from sub-dominant
elements. Contrast can be achieved by varying
fonts, text size, colors, as well as through
proper alignment.
32
Contrast

• To achieve better contrast and create a focal
  point
• Take the logo out of its confining box and make
  it the focal point by virtue of it being the
  biggest and first thing you see.
• Reduce the size of the links (take them out of
  the bordered table!) and put them in an
  appropriate, subordinate position.
• Get rid of the dark background.