Keywords: web design, development, website, designer, W3C, HTML, PHP, CSS, Flash

Short definition: Web design is the design of web pages, web sites and web applications using HTML, CSS, images, and other media. Web design is distinct from web development, which includes web server configuration, writing web applications,etc.

First of all, what exactly is web design ?

Web design is the creation of a visual support enabling the conception of a web site : it should, in an aesthetically pleasing manner, portray the identity of the business or organisation it represents and appeal to the user or potential client. The web designer should be particularly attentive to the usability and accessibility of the site. Users and content are “king” so the website should be user-friendly (easy to navigate for example).

Website design requires competence in several areas:

  • graphic design (with software such as Photoshop, The Gimp …);
  • coding in HTML and CSS;
  • programming (PHP, for example);
  • animation (for example, Flash);
  • knowledge of technical constraints in the field (respecting W3C standards, accessibility);

The steps involved in a web design project :

Define the Site Goals

The first stage consists of defining the focus of the website and its target audience.
Why do you need a website? What do you want it to achieve for your business ? What information does your audience need to find ? How can we build a strong visual identity?

It is essential at this early stage to have a clear idea of what the final content will be; this is because web sites are primarily driven by their content ,which plays an important role in how we will make the information available to the site visitors (e.g. website layout and hierarchy, navigation or linking schemes).

Also, the visual identity of the website should remain constant throughout the website, ie, each page should have the same layout and system.

Creation of a site map or a diagram

The next step is to create a proposed site map: a diagram will clearly show the hierarchy, the various sections and how they link to each other : different pages, menu and sub-menus, and the linking scheme.
Creation of a static prototype

A mockup will then be created: a mock up is a dummy version of the website, a static prototype created with Photoshop or the Gimp (two well known graphic editors) for example. The goal is to show what the site design will look like : this lets the client make any comments and see what their site will look like, before going on to the next stage, which will be the creation of the actual live website.

Coding and tests on the web site

… and last, but definitely not least, what makes a website a website: the coding and the programming, which is then followed by the different tests that the site will undergo to ensure it complies with web standards and accessibility, for example.

© 2007 Clifton Web Design