web graphics

1. introduction
2. web design

A. introduction
 
 

web design process

1. concept  & planning
2. design and prototype
3. authoring
4. testing

back

---

B. web design

phase 1 - concept and planning

purpose & objective
before beginning to build your Web site you should:

• identify your target audience
• have a statement of purpose
• know your main objectives
• have a concise outline of the information your site will contain.

you should also begin to identify all of the content information and graphic resources you will need to collect or create to achieve the goals you have set for your Web site.

 

Web Design system

 

a clear, short statement of objectives should form the foundation of your site design. This is where you expand on the goals in your statement of purpose, and will be the tool you will use to analyze the success of your Web site
 

back

---

phase 2 - design and prototype

content design

• web ready




• informative
• interesting
• flexible

site structure

• techniques of structure design : sequence, hierarchy, grid, web



 
 

• distribution & packaging of information
• flexible
• visual logic versus structural logic

site design

• translate the data into visual design
• design of home page
• layout of the subsequent pages
• navigational design
• testing

navigation design

• techniques of navigation :

1. passive (web)
2. managed (sequence)
3. multiple paths (grid)

• where we are in the site
• easy to move around
• ease to go back to home page
• easy to go to the desired place

layout of the page

• make a grid of elements

• split the information into logical sections.
• balance between graphics and text
• direction the eyes( i.e. visual logic)
• visual hierarchy

 

-blocks of information
-directing the eye
-visual hierarchy

here the visual direction is by the 1-way
the other ways can be 2 and 3 also

back

---

phase 3 - authoring

• implementation of visual design
• programming (HTML, JavaScript, Java, Perl, CGI)

back

---

 

phase 4 - testing

• functionality testing (does it work, at volume)
• usability testing (is it natural and intuitive)
• proof-reading, graphic contents, links
• compatibility with respect to Netscape & IE versions,
• 
  for JavaScript/plugin/applet/frames
• without images
• text only browser
• different colour settings
• screen resolutions
• download time

 

back

---