The Big Guide To Web Design Part 3 Of 4 The Imagery of a site.

Author: Michael Land (me)

Date: 16 May 2005

Introduction:

I've decided to put all the information I know that is relevant into one compendium. The following parts to this guide have been designed in different stages. Each stage looks at the four crucial parts to a website. The SLIP method (Structure and Layout, Language and text, Imagery and the Producer's Intentions). By following the SLIP method, everyone should be able to produce a site that is of excellent standards, no matter how good or bad they are at certain areas.

If you have not read part 1, then please do so. Click Here.

If you have not read part 2, then please do so. Click Here.

Imagery

Basics:

Imagery of a website is very important. Adding a few pictures anywhere is however not the way to do it. Visitors always like to see a new picture (if the website contains a gallery or of similar sort) on the homepage everytime he/she fires it up. This is because the visitor knows then that the site has been updated recently (the use of randomization with various scripts can be an illusive way of achieving the same result).

Imagery should however (unless on a gallery or similar page) should only account for 30% of the total content on your site. This is because visitors want to know more information (if they are going to read properly) than they are just looking at images. Pictures may say a thousand words, but without a description or matching paragraph, that picture speaks gibberish.

Moving On...

Many people when designing their site go overboard on the amount of images or any other media on the homepage. Or, they will do the exact opposite and not put enough or any images on. Either is destructive to a website. Just by adding a cell background and putting on style borders to a table would count as roughly 1% > 5% depending on the size of your site. Remember, that imagery is also the colouring and styles of various elements of a site.

If you take a look at the likes of the BBC website and there numerous sub-sites, you will see that they might not always have the best navigational structure and prettiest of looking sites, but mechanically they are sound. This is because they have taken the 70/30 rule of thumb into account.

Over-sizing and under-sizing are also a main contributor to a site's death. Many designers over-size their images or just as badly, undersize. This can annoy visitors as it either takes up too much time loading or it makes them squint because it is too small. Try to stick to average - small sized images. The largest image that is on your site should be your header graphic (unless you have a preview window of an image). Your insite images should be no more than 75x75 pixels. Generally speaking, images should be 50x50px. If the image is from a much larger source, then provide a link underneath the image with the words "enlarge image" or to that effect, that opens the image in a NEW window with the original source.

Remember not to put boarders around your images unless it ties in with site genre.

If you have a gallery in your website, put a small preview gallery on the homepage, with only the recently updated on and link them to their location in the gallery (using #).

Don't over power your images, unless it fits in with the site genre. By this I mean, not adding several effects to an image to make it stand out more, e.g. putting Bevel, Drop Shadow and Emboss together.

When using shadows on images, it is best to have it at an elevation of 2 and a transparency set to 65%.

Regards,

--mik

Hmm... what are your feelings on sites that religiously refuse to use images in their main website design? As in no banner, no graphic backgrounds, only graphics in the main content (let's say, a photography page). Now that CSS is so prevalent and more accessible, many of the elements that were once done using images can now be reproduced easily with CSS. So, would that violate that 70/30 rule? I'm asking because I'm one of those people.

Imagery is often far over-seen. It is not just simple graphics, it includes any colour to aid in the design of a website. The only site that doesn't comply to the 70/30 rule is either a site map or something like the archive feature found in message boards.Like I said, pages like galleries (or photography) do not need to comply with the 70/30 rule.Even table borders are classed as the imagery of a site.Regards,--mik

Hmm. When I get my site up I'll pass you a link. What I'm saying is that you may have a non gallery page, and then that page is totally devoid of pictures. No pictures used, no img tags and stuff. No banners, no graphics and the like. Styling is done through CSS only, and maybe one background colour (black or white), text colour (some sort of grey), and then varying shades of one primary colour (light purple, dark purple) for links and headers. Do you think that would fulfill the 70/30 rule? No borders either.

chiiyo, i understand your side..I too have made my own website 1 or 2 years ago and it is made up of pure css.. i did not use any table tags since i wont need them anyway.. the placement was done by the css itself.. the only thing that can be considered as graphic on my website at that moment is the blue color that i have carefully layouted on my website to make some distinction..ill try to search my hard drive if i can find my prototype website. yeah, it is only a prototype but it is working and it is powered by php to make my dirty works less complicated when i update contents..my main purpose at that time is to develope a website that is as efficient as the other websites but loads at a faster speed.

I agree that sites pretty much do need some imagary regardless, but I would say that includes the overall design. And if CSS is used to create the design, then (depending on how well it is designed), that takes care of the whole image issue. Some may disagree, but I say it all depends on the kind of design style you're going for. Not all sites need to follow typical website conventions.... if that were the case, all links would be underlined (yuk). Designs vary, and with it, so do design 'rules'. So unless you're creating a very professional business site for an established, well-off company, I say go by your own design instincts. (now let's just hope you all have some...)Remember, there are ALWAYS exceptions to rules/conventions. Creativity is about creating your own.

I agree that sites pretty much do need some imagary regardless, but I would say that includes the overall design. And if CSS is used to create the design, then (depending on how well it is designed), that takes care of the whole image issue. Some may disagree, but I say it all depends on the kind of design style you're going for. Not all sites need to follow typical website conventions.... if that were the case, all links would be underlined (yuk).

 

Designs vary, and with it, so do design 'rules'. So unless you're creating a very professional business site for an established, well-off company, I say go by your own design instincts. (now let's just hope you all have some...)

 

Remember, there are ALWAYS exceptions to rules/conventions. Creativity is about creating your own.

<{POST_SNAPBACK}>