Introduction

Web design is a relatively ‘young’ form of design, since the web is so much newer than other design media. There are unique aspects to web design such as the different nature of a computer screen compared to something like paper or canvas. However, the core design concepts that apply to other design disciplines are also used in web design, and web designers make use of the same elements and principles of design as other designers.

Read the rest of this entry »

Introduction

Since Tim Berners-Lee published what is believed to be the first website in 1991 the world wide web has become more complex and flexible. The original HTML specification only allowed the most basic definition of paragraphs and headings, but it created a new form of navigation as users became able to use hyperlinks to move from page to page. In 1993 the first freeware web browser – Mosaic – became available and within a year over 2 million people were browsing ‘first generation’ websites.

‘First generation’ websites were designed to deliver information, not amaze viewers. They had linear layouts, few if any graphics and a lot of text. They were delivered via modems and slow dial-up internet connections, so the pages had to be as simple and fast-loading as possible. ‘Second generation’ websites built on this basic formatting a little, but it was not until the third generation that the web began to include coloured backgrounds and animated images. This was when ‘web design’ finally began to be a factor.

An example ‘first-generation’ website found at http://www.wilsonweb.com/wmt3/980901firstgen.htm

Read the rest of this entry »

With the post on ‘Glossy’ web design, my series on web design styles is now at an end. I hope you’ve enjoyed reading it. If you have any suggestions on topics for the future, please add them to the comments.

Things I’ve learnt

Nobody should ever use ‘mystery meat’ navigation. This form of navigation is at best confusing to users and at worst will chase them away. Here’s an example: http://www.flatpakhouse.com/. Mystery Meat is commonly used with ‘real life’ and ‘collage’ style websites, with the result that navigating the website can be a guessing game. The navigation should always be obvious to the user.

Read the rest of this entry »

General description

A great deal of controversy surrounds the naming of this style. Although the title ‘web 2.0’ is in common use, there is an equally widespread opinion that ‘web 2.0’ only refers to actual web applications and that using this name to describe a design style is misleading at best. In the hope of placating both sides, the title ‘glossy style’ is being used in this text. Readers are invited to contribute suggestions or references to other names in use.

Glossy style has a number of distinctive features such as a simple, centred layout with elements that have heavy use of gradients, 3D effects and bright colours. Big, shiny buttons and appealing icons are an important feature.

Important features

• Single focus
• Simple layout
• Centred orientation
• 3D effects
• Neutral background colours
• Strong colour for text, headings, buttons, icons etc.
• ‘Cute’ or friendly icons
• Plenty of white space
• Big text
• Large shiny ‘call to action’ buttons

Read the rest of this entry »

General description

Urban style is similar to grunge, but heavily focused on the urban landscape. It features elements like graffiti and comic book art styles, cityscape background images and similar ‘dirty’ textures to the grunge style. A typical colour scheme would be predominately black and grey with bright highlights. The textures and backgrounds are developed from photographs taken in the urban environment, with ‘distressed’ type effects applied to make the texture look dirty and hand-made.

Important features

• colours derived from the urban landscape
• graffiti-like effects
• comic book art style
• buildings, cityscapes or other architectural images in the background
• similar types of ‘dirty’ textures to the grunge style
• halftone/dot gradient patterns
• ‘noisy’/low-quality (in an analogue sense) photographs and images reminiscent of street photography

Read the rest of this entry »