Visual Design

The visual design of the site is the most obvious aspect that your client will be considering. Presenting them with a strong visual image that integrates their existing identity is key to creating a site that is successful in their eyes. It is very important that you are open to their opinions whilst gently asserting your professional expertise

Your visual designs will go through a number of stages, from rough layouts to finalized screens. Each stage has its own uses.

Initial Wire-frame Designs

This is a confusing term if you've ever studied 3D design! In web design, wire-frame refers to rough sketches that capture the essential aspects of the page layouts. This will include the positioning of menus, headers, footers, logos etc. Typically the space for content is clearly indicated, but the content itself is omitted.

Whilst you can easily do wire-frames by hand, there are also some specialist tools for the task, such as the Mockups application from Balsamiq (not free). There are also online tools such as Mockingbird which can be run from within a web browser.

Below you can see a typical mockup wire-frame for a suggested front page design. This was created using the evaluation version of the Balsamiq tool:

Mockup

Notice that there is no detail in the content design at all - its only purpose is to show the layout of the components on the page. Images are shown as placeholders and lorem ipsum text is used to get a feel for how the page will fill.

Some of the advantages of using a tool for these designs, rather than hand drawn sketches, are that the tool provides a large number of template elements that you can drop into your design, you can easily cut and paste repeating elements of design from one page to another, you can easily move elements of the design around and try elements in different positions, and you can export the final designs in a variety of formats. Also, some of the tools let you create dynamic, clickable prototypes that let you explore the basic links between pages.

Whilst these diagrams are very useful to you as the designer to identify how the pages will be structured, it is often hard for clients to visualize the intended finished result from such a bare-bones presentation.

Creating Your Final Designs

Once you have decided on a layout, it's time to start adding detail into the visual design to create the actual pages.

Many designers begin work with Photoshop or Fireworks for this stage. Both of these tools allow you to create a complete graphical representation of the page and then slice it into discrete elements that can be imported directly into your page design in Dreamweaver.

The example below shows the beginnings of a page design constructed in Adobe Fireworks. In this case, the logo, menu and some of the client content has been put into the image, and place holder sections have been added for some of the remaining elements. In the case of these elements, as they have scroll bars in the design and need to be dynamically allocated, any work done in this graphic would have to be replaced once the site was actually implemented.

Sample Page

Once this graphic was completed it would serve as the basis of final design discussion with the client. Once it was finalized, it could be sliced and the individual elements extracted into a page.

Colour Schemes

The colour scheme for your site can have a significant impact on many aspects from actual usability to the merely aesthetic. The example above uses an analogic colour scheme, keeping to a limited number of colours within a narrow range on the colour wheel.

Your choice of colours may be restricted by your client's existing visual image, in which case you will have to pick your colour scheme to fit around their logos. Alternatively, you may have a completely free choice. In that case, you need to exercise some restraint. There are some good tools on the web to help you come up with colours schemes:

Remember, it's often said that it's better to have too few colours in a design rather than too many.

Coding

An alternative method for creating the final design is to work directly in Dreamweaver. In this case, each of the individual design elements will be created separately and then assembled into a complete web page, either using the layout controls, or by hand coding the necessary HTML and CSS. The possible disadvantage of this method is that you won't have anything visual to show the client until you have actually coded some of the page. Of course, if you find that a fairly straightforward process, that's not a problem.

Which way you prefer to work probably depends on your creative background and your preferred workflow. If you come to web design through the visual arts, or if you approach problems in a holistic manner, you may prefer to start with the design of the whole page as an image. Conversely, if you come to web design through a more technical route, or if you approach problems from a more reductionist perspective, you may prefer to approach the final design by coding.

Resources

Creating a good, usable visual design needs a good understanding of many different aspects:

John Lovett has some clear examples of visual design from an artist's prespective:

...Return to the Overview