Top 5 Colour Resources for Web Design - April 24th, 2008

Colour harmony is very important in web design. Good colour combinations can by itself grab visitors attention and boost your conversion rates. Web site colours should also be used to convey your company’s statement or communicate to your target audience.

Achieving pleasant colour schemes is not always easy, however I have a set of web based tools which give me a helping hand.

Adobe Kuler – This great tool from Adobe labs enables you to create harmonious colours online with a few minutes. You can also browse the huge database of colour palettes made by the community.

Colour Lovers – You can find ideas for cutting edge designs using colour lovers, with thousands of colours palettes, single colours and background pattern to choose from.

wear palettes – A collection of over 1500 colour palettes inspired by the clothes featured in the fashion blog Sartorialist.

Tartan Maker – A “new trendsetting online application for cool designers”. Excellent for creating tartan backgrounds.

Stripe Generator - A tool for web designers who want to generate web 2.0 stripes. Set the spacing, colors, size, background and orientation, and then download your stripes to use wherever you want.

Tino

Web Designer

Posted in Web Design | No Comments »

Images And The Web - April 18th, 2008

When it come to websites there are 3 different file types that rule the roost. Gif, Jpg and PNG. they all have their place but when should we use them?

Jpg

Jpg or Jpeg which is its correct name were developed for the use of photographs, a jpeg can handle the thousands of different colors. A jpeg can besaved with different levels of compressionwhich obviousy means different qualities. If you save with 0% comression then you will have a perfect image but it will have a large file size. At the other end of the scale you can have a file saved at 99% compression but the image will be blured and blocky. There is however a perfect medium between quality and file size and this is 60% compression.

Downside to the Jpeg is that it cant be animated and it does not support transparency, also it is not a good fily type to choose if you have large blocks of the same color in an image as the edges will becpome blured. However this was developed for photographs.

Gif

Gifs have been used on the web for a long time. they can be saved using different amounts of colour from 8-bit color to 256-bit color. Gifs are a lossless file type which means they quality of the image does not degrade every time it is opened and saved. Because of the way a gif compresses the image it can create small file types which is ideal for the web. Gifs can also be interlaced so it can speed up the rate a webpage loads. this works by placing a poor quality version of the image to start of with and then progressivly improves the image untill it is full quality.

Finaly gifs can be animated, this means in the past (before flash) people had really annoying images that changed colors and spun arround! (thank god there not popular now!). Animated gif can however be used in a nice design, maybee in a banner that rotaes diferent messages.

PNG

Compared to Jpg and gif’s png’s are relativly new, It was invented when there was a taxation placed on gifs. png’s are very similar to gifs in the way they opereate. they are not animated but the 8bit version of the has simple transparency like the gif (on or off). Because a png 8 can compress better it can often make smaller file sizes than the Gif and the png is also lossless.

PNG 24 is more similar to a jpg quality, its not good enough to replace a jpeg but again being lossless it is a good file format for saving larger pictures.

The PNG 24 also handles multi level transparency, this means that you can set the transparancy on areas of a image on a scale so you can place a gradient of transparency or different levels of transparency. The only down side to this is that the way Png’s handle this means they do not work in IE6 or below. They do however work in firefox and IE7 but with al lot of people still using the old IE6 browser your work may not look correct or give the desired effect.

Gary
Web Designer

Posted in Web Design | No Comments »

« Previous Next »