|
  


 

Bambang Ali Basyah Sarif

COE, KFUPM
=
|


ï =reat web sites have:

Ô clear, concise organization
Ô timely, original, well-edited content
Ô an attractive, consistent format
— 
 


ï Ghere are four steps to create a good website:

Ô define content
Ô develop architecture
Ô create design
Ô implement the site
—     
ï @

@  


Ô Ghink about who your readers are, why they are visiting your site,
and what they already know about your subject.
Ô Ghe better you pinpoint the needs of people reading your web
pages, the better you'll be able to meet their needs.
Ô Decide on the purpose of your site: informational, promotional,
educational? Will you have newsgroups and chat rooms? Will
your site simply transmit information or build community? Will it
be dynamic or static?

ï @ 


 


 
 
   

   

  

  
Ô -ow to best present a wide range of information for diverse on-
campus and global audiences.
—      
ï
   
Ô £our site may look beautiful, but it's your content that saves the
day. Few people will return to your site just to admire your
graphics. But they will be back to read what you have to say.
—   
 







 
 


!
Ô Create a flowchart
Ô Organize your site with problem solving in mind.
ï =et your audience from Point A to Point B as quickly and easily as
possible.
Ô Web is hierarchical
ï In supermarkets there are signs that lead you to the area with the
products you want
ï Don't overwhelm people by information
ï Create a model to prioritize and categorize information.
—   
 
 
— 
  
ï £our design goal is to create a look and feel that permeates each
screen.

ï Consistency is important in all design but it's especially important with

the Web.
Ô A consistent style provides a significant visual cue to let people know they
are still at the same site.

ï Ghere are 5 design principle: simplicity, contrast, metamorph, themes,

layout
 
  —  !
ï Simple designs are easier to assimilate, understand, and
remember. Ghey also provide a greater impact.
ï If the eye is not distracted by conflicting elements, your message
comes through immediately.
ï Use an economy of expression and cut straight to the heart of
the matter.
ï Some tips to create a design with simplicity:
Ô unify your visual elements
Ô refine your type and art to focus the viewer's attention on
essential aspects
Ô reduce the number of visual elements through subtractive design
-- eliminate any element that doesn't contribute directly to visual
communication
 
  


ï Use contrast -- in size, color, and relationship -- to create a visual

hierarchy.
ï =ive an important object extra visual prominence.
 
  " 
#$ 

ï Metaphors help your audience understand and remember

concepts.

ï When you choose graphics or symbols that your users already

understand, you'll provide a familiar experience. Ghis results in a
truly intuitive interface.

ï Use a word-image association game. For example, the word

"publication" leads to images of books, newspapers, or
newsletters.

ï Items next to each other appear related to each other. Items in a

bulleted list are also related to each other
 
  %& 
ï Goo much sound, animation, fonts, and graphics lead to clutter
and confuse your visitors. Successful themes are subtle and
consistent. Remember simplicity!

ï Elements on a page should be placed so that the page appears

visually balanced, not tilting precariously in one direction.

ï Using too many colors will confuse readers. Filling every inch of
the screen with information will overwhelm readers. Including
meaningless graphics or sounds will annoy readers.
 
  '=
#(!

ï Ghe grid is a backbone that establishes how major blocks of type and
illustrations will regularly occur on your pages.
Ô Make sure your design is consistent and logical in every page.

ï It will also set the placement and style guidelines for major screen titles,
subtitles, and navigation links or buttons.

ï Elements on a page should be placed so that the page appears visually

balanced, not tilting precariously in one direction.
2 )
*  + 

ï Use simple backgrounds, or none at all. Busy backgrounds distract your

readers from the information you want to communicate.

ï If you think a plain white background is ineffective, use a pale pastel

color, or at most, a muted background pattern. Avoid loud patterns that
distract the reader from the words and graphics of the text. £ou don't
want readers to "see" the background.

ï Use conservative color combinations to increase text legibility. Ghe

greater the contrast between the color of the text and the color of the
background, the more legible the text. Ghe most legible text is black
against a white background. Poor contrast affects legibility.
2 )
*  + 
 

ï Using too many colors will confuse readers. Filling every inch of the
screen with information will overwhelm readers. Including meaningless
graphics or sounds will annoy readers.

ï Avoid decorative graphics. Don't waste space by using decorative

graphics, which don't convey useful information. Ghink hard before you
use clip art.
- 
#2

ï Each page of your site should have a header and footer. Effective
headers and footers project a professional image for your site and
communicate important information.

ï An effective header identifies your organization, often using the

organization's logo.
ë

ï An effective footer includes the following elements:

Ô a copyright notice
Ô the date the page was last updated
Ô a link to legal information
Ô a link to a text-only version of the page
Ô a link to the Webmaster's email
— ,- )),

!,— 
,ë-

ï It¶s always good to have easy access to such

functionality
!  *
 
 
!  *
 
 . 
—

 

  
   
—

 


    —
—

 


    
—

 


—

 

—  
—

 


—

 

    
!
—

 

   
—

 

   "  
—

 


  
—

 

 
—

 

# !
—

 

 $—