web design tips & tricks

1. interface design & visual design
2. site design
3. home page design
4. page design
5. images
6. others

1. interface design and visual design

1. consistent theme of the web site
2. composition & colour scheme
3. simplicity and consistency
   even if your page uses no inlined graphics, a consistent approach to the layout of titles, subtitles, page footers, and navigation links to your home page or related pages will also reinforce the reader's sense of context within your site
   organization
4. clear navigation, no dead ends


Dead End Document

 

5. type and its legibility, and font sizes
   
   
    
6. create interest
7. capture the attention
8. major elements / information in the home page
9. use breathing space
10. try to make an identity of the site
11. user centered design, design it as the user wants
12. consistent graphic identity
13. make your own style

back
 

---

2. site design

• make a hierarchy of the information. it should not be too deep or too shallow.



 

• design the longest / deepest module
• mix and balance between graphics and text.
• give the index of the site

 back
 

---

3. home page design

• resolution 640 by 480  vs.  800 by 600
• use images for titles (if necessary)
• safe Dimensions of the page
• graphic "safe area" dimensions for layouts designed to print well:
  maximum width = 535 pixels
  maximum height = 295 pixels

  graphic "safe area" dimensions for layouts designed to maximize screen usage:
  maximum width = 595 pixels
  maximum height = 295 pixels

  

  back
   

  ---

4. page design

• think in screens and not pages
• use templates
• manipulate text blocks
• always give a title to the page, fix the background colour and hyperlink properties
• page size around 50KB
• use tables for page layout,  specify pixels,
  don't use long tables,
  avoid nested tables
• page footers
• in general, you should favor shorter web pages for:
1. home pages, and menu or navigation pages elsewhere in your site
2. documents to be browsed and read online
3. pages with very large graphics

• in general, longer documents are:
1. easier to maintain  (they are all in one piece, with fewer links)
2. more like the structure of their paper counterparts (not chopped up)
3. much easier for users to download and print

back
 

---

5. images

• GIF files : (the Graphic Interchange Format)

1. 8-bit (256 or fewer colors- indexed images)
2. interlacing
3. transparency
4. animation
5. GIFs of diagrammatic images look better than JPEGs

• JPEG files : Joint Photographic Experts Group

1. full-color images (24 bit, or "true color")
2. huge compression ratios are possible, for faster download speeds
3. best suited for photographic quality images

• always give the alternate text to images along with their height and width.
  in some cases use Low Resolution Image also
  <IMG SRC="wdesign.gif" LOWSRC="wdesign2" ALT="Webdesign" WIDTH="14" HEIGHT="10">
• repeat  images
• reduce the colours to reduce image size

 

back
 

---

6. others

• web safe 216 colours (multiples of 51 and 0)
  e.g.,                         r           g           b
                               red       green     blue
  
                                 0          51          102
                               153       204        255

1. chart of web safe colours classified on the basis of value
   (gif - 239KB)
2. chart of web safe colours classified on the basis of hue
   (gif - 229KB)

• download time should be less
• animation wherever required
  
• use common fonts
• maintain a file name conventions
• use directories for different options
• use small caps for file names.
• don't use frames if not required,  use noframes tag
• avoid using wide spread text
• update the site regularly
• use meta tags for search engine registration
• register in search engines

back