Hints, Tips And Tricks For Web Design Part 1: Beyond The Visual

When people hear the word "design" they often think only of the visual aspect; what something looks like. However, visual design is just one part of the web design process. In fact, the visual design element of some projects usually only accounts for a small percentage of the work. Web design does of course involve a strong visual side, but it also requires design of the interaction between the site and the user. This post addresses not just what a site looks like, but  how it behaves and how it is organised.

Web Design Part 1

All Your Sites needn't be the same.

If you design a lot of websites, it can be easy to get stuck in a rut. Remember to treat each project individually; that way you'll end with a site you need, rather than a site just like all your others. Need some inspiration? Read on.

Books can be a great Source of Ideas.

The obvious place to look for inspiration for great web design is online, but there are plenty of excellent books showcasing good web design too. The writers have gone to the trouble of sourcing the best and the worst of the web, so you don't have to!

Use a Digital Camera for Inspiration

If you're feeling lost for inspiration, try snapping a few digital images as a starting point. Take them into Photoshop and start trying out those effects! An extreme close up of a flower, a blurry picture of a child's toy, clouds, fabric, leaves... the possibilities are endless, and you can end up with a unique image to incorporate into your design. Keep all these images in high-res format into your library of pictures. You never know, you may need them one day! It will save you loads from buying images.

Quick Tips for Colours

Create a fun, busy design by using a rainbow of different colours. Done well. your design could look like a bowl of candies, creating an attractive, jolly atmosphere. These are a few sites that made use of a wide range of colours beautifully.

Havaianas

Havaianas Homepage

Feed Stitch

Feedstitch Homepage

Pally Giraffe

Pallygiraffe Homepage

Digital Mash

Digitalmash Homepage

Geek in the Park

Geekinthepark Homepage

Boompa

Boompa Homepage

Complementary Colours

A basic understand of colour theory can help even the most experienced designer. Complementary colours - those which you can be sure will work well with each other- lie opposite each other on a standard colour wheel. You can use these as a jumping-off point when working on a new design.

Colour Tints for a Consistent Palette

Rather than use lots of different colours, use tints of your main colours to help maintain a consistent feel to your design. For example, if your main colour is a nice strong green, you could use a 25% tint of that colour to create panels.

Mixing Colours using Opacity

If your design uses 2 main colours which you can use transparent tint panels overlaid on one another to 'mix' the 2 colours together. For example, a 50% blue panel laid over 50% red panel will give you a purple panel. Assuming your main colours are 'complementary', this new middle colour should sit nicely in your colour scheme.

2 Superb Colour Sites that I always refer to:

Colour Lovers

Colourlovers Homepage

Kuler Adobe

kuler-homepage

Colours for the Web

Web Safe colours are limited range of hexadecimal colours designed to display consistently across older 8-bit colour computer systems. To be absolutely certain your design will display correctly even on older machines you should think about using them; this could be a consideration if your target audience is in the developing world, for example.

Fewer Colours mean smaller GIFs

GIF images use a limited colour range (a maximum of 256 colours) so are best suited to graphic images such as logos and background patterns, rather thank photographs. Also, GIF images can be animated, unlike JPEGs.

GIF Images

Reduce the size of GIF images by limiting the number of colours used. Not all images need the full range of 256 colours, so experiment with reducing the number until the image starts to suffer. Try selecting 128, 64, or even as few as 4 colours. You’ll be amazed how few colours you can get away with.
How to do it? File > Save for Web and Devices OR Ctrl + Shift + Alt + S

photoshop-gif

Making Smaller JPEG Files

JPEG compression works by “blurring” areas of low detail in an image-such as a blue sky- to reduce the amount of data needed. You can help this process by subtly blurring the less important areas of your images before setting JPEG compression level.

Fonts for the Web

Replacing text with Images

If you really need to preserve the look of a special font that is not commonly installed in web browsers you can use a GIF or JPEG image instead. But remember to inclide alt text that is identical to that displayed in the image.

Alternative Sans-Serif font and Serif font

Certain fonts are available as standard across most computer operating system but the range of truly web safe fonts is very limited. Whichever font you choose, ensure that substitute fonts are included in your list.

Web Sanserif Fonts

Sans-serif - My personal favourite san-serif font is Lucida. It's al ittle different to the standard Arial, and looks much more pleasing than Verdana at larger sizes.

Web Serif Fonts

Serif- I often use Georgia as an alternative serif font in place of the more classic Times. It has a slightly more modern feel and is very widely installed, so most users will be able to see your site as intended.

Use Verdana at small font sizes- Verdana is great to use for small font sizes. I use it for things like 'breadcrumbs trails' or additional navigation in the page footer, but it starts to look a bit clumsy for body text at about 12px.

That's the Hints, Tips And Tricks For Web Design Part 1: Beyond The Visual. Do stay tune for Part 2, where I will be exploring aspects of web standards layout, proportion and some production techniques.