The purpose of this stage of development is to arrive at a finished design specification which the technical construction team can follow. The following are some of the processes and techniques typically employed for a web/multimedia project.
Mood boards are artwork documents containing selected images and colour and texture samples which a designer or client creates to help communicate their ideas about the aesthetics of a planned design. They may be created in the computer, or on an A3 or A2 piece of card.
A graphic designer may adopt a montage approach, pasting clippings from magazines, screen shots, and photos etc to try and convey their ideas about colour, typography, genre etc.
When a client has strong ideas for a project but has trouble communicating them, a designer may ask them to create a mood board which they will then discuss.
Once initial decisions have been made, perhaps with the help of mood boards and by looking at competitor and example projects, a typical process involves the design team creating a number of designs which are presented to the client who chooses one for development. These designs may take the form of ...
These are processes employed to help determine the aesthetic, schematic and organisational layout of a projects screens including colour schemes, fonts, styling and presentational look.
A "visualisation" or "mock-up" refers to some form of 2D representation of an idea, often with accompanying annotations, usually employed by a designer to communicate design ideas to a client. For example, a designer may create an image that shows the planned look of a web site page, with rough elements laid out (images, placeholder text etc) and annotations and arrows to explain the ideas.
"Website wire frame" may refer to a plan for the underlying structure of a project which will remain unaltered whatever changes may be made to the overlaying content and style. A graphic designer would refer to this as a grid. Wire frames in web design have largely been superceded by the use of CSS
In creating visualisations & website wire frames, considerations include ...
Consistency and coherence ... Navigational and stylistic patterns will be expected by a user who understands the context they are in, i.e. turning the pages of an electronic book. The design of the interface must be informed by considerations of clarity. Each design and style component must have a clear role within the context. There must be consistency in the design of navigation and menu elements and in the layout of the screens, balance in the organisation of components within individual screens, and a clear pattern of flow between screens.
Styling ... Although coherence is a primary consideration it is also important to consider how stylistic factors will impact on the delivery of your message. These factors inform the choice of type style, colour scheme and presentational approach.
Graphical metaphors ... It is common for multimedia designers to employ real-world metaphors in the form of icons, illustrations and diagrams.
A visualisation / navigation map for a CD-ROM project.
It is common for visualisations to be created for each primary screen type (menu, content page, dialogue box, form etc) before authoring commences.
It is important that a project has both consistency in its navigational framework and that different sections are identifiable in some way. This may involve making some elements consistent between screens (such as typography, navigational devices and headlines) whilst making dramatic content changes in media (images etc) between screens.
Here are some things to consider ...
I often use Adobe Illustrator to create my storyboards. It is flexible and powerful and allows you to define a precise background grid. However, many designers prefer to use Photoshop or Fireworx. All are good choices.
Storyboards are used to plan timeline content such as animations and video.
A prototype is a working model of a project. Working prototypes of web sites are often created with programmes such as PowerPoint, Flash and Adobe FireWorks. Web design work started in FireWorks can often be developed into a finished product.
Navigation maps are useful tools in developing project structure including ...
When the design has been agreed, a specification is written which all project members will follow. This will include ...