Home.

Features.

Design.

Structure.

Structure Diagrams.

Storyboards.

Index of Pages.

Action Plan.

Fonts.

Graphics.

Colours.

Hyperlinks.

Domain names.

Hosting.

HTML.

CSS.

Testing.

DESIGN

The design of a site is the way it is presented to the audience. It includes the layout of the items on the page, graphics, colours, font sizes and styles.

 

The design needs to be suitable for the intended audience, look professional, use appropriate colours that fit in with the house style and are easy on the eye and easy to find the information your looking for.

A master page: is used to create a consistent layout for Web pages. Individual content pages then merge with the master page to produce output that combines the master page layout with the content page content.

 

 

Master Pages

It feels like we're seeing more simple 1- and 2-column designs than in previous years.

 

The overall feel you get is that designers generally agree that simple pages work better.

 

These pages read in a straightforward way from top to bottom, and you don't find your eye skipping around trying to work out what to look at. It's a much calmer and more solid browsing experience than in times gone by.

 

The other thing you notice about all top sites is that they're all laid out around a central axis.

 

Whereas a couple of years ago, you'd find a lot of liquid layouts and left-aligned fixed-width layouts, today content goes in the centre of the screen.

Left-oriented layouts are much less common than they used to be. Also, liquid (full-width) layouts are less popular.

The wisdom has always been that we should try to get as much information "above the fold" (i.e. visible on the screen without scrolling). Liquid layouts achieves this.

 

However, today we seem to be more comfortable with scrolling, and we're willing to put up with scrolling for the benefits of increased white space and line height.

Layout

Web design which achieves successful marketing results is sensitive to the cultural, instinctual and iconic meanings of colour in relation to the product being promoted and considers the cultural backgrounds and gender of the targeted clientele.

 

Avoiding the extremes of sheer garishness and boredom, effective design displays symphonic colour arrangements of shades, tints, tones and complementarities to tantalise and maintain interest. Adding textures too can alter colours - a roughly textured surface makes a colour seem darker, while a smooth surface lightens the same colour.

 

All the top sites have a plain background, the most popular being white and greyscale fades. These give a cool, neutral, soft base against which you can flash strong colour to draw the eye.

 

A soft, stylish background is the perfect base for adding eye-catching features. Strong colours and tonal constrast are great for drawing the eye to the more important elements on the page.

 

Red : Danger (stop signs), love (hearts), excitement (for sale signs)

 

Pink : Feminine colour, baby girls

 

Orange : Autumn, creativity, harvest

 

Brown : Yang, Earth, industry, grounded

 

Gold : Success, high quality, money

 

Yellow : Hope, joy, happiness, hazards, cowardice, weakness, taxis

 

Green : Spring, new birth, go, safe, environmental awareness, Saint Patrick's Day, Christmas (with red)

 

Blue : soothing, "something blue" bridal tradition

 

White : Marriage, angels, hospitals, doctors, peace, milk

 

Black : Funerals, death, mourning, rebellion, cool, restfulness

Colours

Font Size & Style

Don’t think that all the text on a web site should be supersize. In fact, in some scenarios, small text is fine (we tend to take in more when text is a bit smaller).

 

A good design makes the most important text on the page bigger than normal text

 

Like the other design techniques, it works when used in moderation. If all the text is big, then none of the text is big.

 

Bigger text should be used to help visitors see quickly what the page is about, what's most important, and figure out where they want to look next to find what they want.

 

When using fonts on screen, it is important to understand the differences between serif and sans-serif fonts. Serif fonts are the fonts that have little tails— fonts like Times, for example. A sans-serif font, such as Arial, lacks these tails. Due to the effects of anti-aliasing, it is important to try to avoid using serif fonts for on-screen use whenever possible.

Whitespace

Today's web designs are so fresh, they feel like they've taken a deep breath.

 

If you imagine taking a page design that's too crowded and sticking it on a balloon, then blowing air in until everything on the page pulls apart to leave healthy gaps.

 

Your eye needs space around page elements to help you clearly and cleanly identify things.

 

In general, the more white space the better. It's very rare that I look at a page and think: "Gosh, they really need to cram that page up a bit!"

 

Of course, "white" space doesn't have to be white. But it does have to be space!

 

It's great to see so many designs using good-sized margins to space elements apart, and extra line-height to aid on-screen reading.

 

 Copyright © All rights reserved. 2009