Entry

How do I design a graphical website?

What formats work best on the web?

How much graphics is too much on the Internet?

Apr 20th, 2007 08:50
Donald Choen, steven chan, Fedrix Marc, Matt Gregory, http://www.cpdiscount.com http://www.cpsilver.com http://www.cphandmade.com http://www.cpcustom-jewelry.com http://www.1st-art-gallery.com/home_gallery.htm

Many people will offer many opinions on this subject.  Somepeople say 
that the asthetic appeal of a web-page is more important than it's 
content.  Others will say that content is most important.
I like to believe that a hybrid is best in most cases, while some 
sights, depending on their market or needs, should be more one one or 
the other.
For instance, if your page is primarilly a marketing tool, then make 
it 
lean towards the asthetically pleasing side with more "wow" and 
less "how".  That translates into not making the reader read too much 
and leading them around the site with images.
If your page is functional, your images should be tight, low weight, 
and functional.
The first step in designing a graphical sight should always be to draw 
out your ideas as though the entire sight, text included, were part of 
an image you plan to professionally print for a brochure or magazine.  
You can worry about optimizing the sizes in a moment, but first get a 
feel for how you want the entire site to look.
Design your images at the size you will be publishing them on the 
internet, (Or design them in a separate image and them resize them to 
put into the page template).  Resizing images on the client side is a 
bad idea because the resize algorithms don't always do what you want 
and usually look really bad.
Try to make all your pages fit into the same design.  It's too much 
work to have a design which changes from page to page.  You want the 
user to be able to cash most of the heavy images so that they only 
have 
to dowload them once.
Now, carve up the image into sections, with set sizes, between parts 
of 
the design which change (buttons, text, page-specific images) and 
those 
which do not (logo, cosmetic fringes and borders).  You will want to 
replace any text not specifically part of an image with plain text in 
the HTML to save space.  Also, keep track of the width and height of 
each piece of the image so that when you write your html you can 
specify the proper sizes for the tables the images will be placed in 
(like a jigsaw puzzel where all the pieces are rectangular but 
different sizes).
Once you are done carving you need to select a format.  For gif images 
you need to select a pallet which works well for the entire site.  
Some 
people choose to save their images as JPEG, but unless you sacrifice 
quality and go with a lossy compression level (1-4) your site will 
take 
too long to download.  If you pick a pallet which looks good at 256 
colors then you can use gif images and save a ton of document weight.  
The downside of gif is that it is a proprietary format.  PNG is an 
excellent choice if you don't mind sacrificing older browser support.  
Now that you have your images, you can concentrate on content.  I 
usually try to pick all images which will be on most of the pages in 
my 
site and put the templates for their design inside a script which is 
loaded by additional pages.  This allows me to change the entire site 
without going through 300 pages.