Become A Better Web Designer

The contrasting text sizes create a visual hierarchy of information. Some titles are larger, making them easier to read. Contrasting with size is also great where contrast cannot be made with colour, for example, in case of monochromatic web design. This has been used in newspapers for many, many years.

Contrasting with fonts

Any number of fonts can be used when you create a website. But until you're comfortable with Typography, it's best to stick to two at the most. Again by using fonts and sizes a hierarchy can be created on the page showing the viewer what information is more important, and what is less important. It's beneficial to remember that not all fonts look good (together). And small fonts might not always be as legible as others. So select your title fonts and paragraph fonts carefully.

This site uses a large serif font for the main title, and a small sans serif for the main copy on the page.

Repetition / Rhythm

By repeating design elements you create a consistent design. It also backs up branding. You will create a visual language by design repetition that will to help the viewer to understand the website and its coding. If elements are consistent, the viewer is able to understand the site more easily and he/she will get to the relevant information quicker.

Here are a few items that can/should be repeated;

- Headings and subheadings

- Colours Images (using the same style of graphic)

- Graphical elements (such as icons)

- Navigation menu items Calls to action

The same font is repeatedly and consistently used for the navigation menu and titles, with a contrast in size to differentiate their importance. A colour contrast is used for the selected menu item and identifies the page that the user is on. They used the same colour on the rest of the page to show the viewer that they are looking at 'All' the information available in the news section. The size of the squares is repeated, as well as the design that consistently contains straight lines and right angles.

Alignment

Arranging content on your website so that it is evenly distributed on the page and easier to read, is design principle number three. You can do this by designing your websites on a grid. This will make it much easier to align various elements and make your design look more professional and 'together'.

For more information on grids check out http://960.gs

Proximity

Proximity in this case means grouping the same design elements together and making visual connections between similar content. Utilise header tags and the correct text spacing. And last but not least try to avoid getting too much WHITE SPACE (a.k.a. negative space). White space, whilst elegant, can have a negative effect on how users view the page.

If all the content is bunched together, it becomes hard to define what to look for and what to read. When things are well spaced, the same content appears to 'breathe' and is much easier to decode.

Grids also help with proximity.

Principles of Web Design: How to Become a Better Web Designer