No two projects are identical, but the following stages illustrate how the different skills of information architects, graphic designers, user experience consultants and developers fit together on a website development project. There may well also be a project manager who oversees the designers and developers and liaises frequently with the client.
For a more detailed discussion on finding and working with web designers see our guide to getting a great website
1. Objectives and outcomes
As with any design process, the first stage in a web development project is to agree and then clearly state the desired outcomes – the objectives the site needs to achieve. This will form the basis of a design and development brief and although it is not carved in stone it will give client, designers and programmers a basis on which to build the site elements and assess their suitability and success at different stages in the project.
2. User experience (UE) and information architecture (IA)
There are potentially many different types of user for any given website and there are numerous ways they may approach and access a site. It is the design consultancy’s job to ensure that all potential target audiences are catered for. UE consultants develop wireframe models of different ‘user journeys’, which are then used by information architects, graphic designers and programmers to construct and populate a site with content.
Information architects and client then work together to start constructing the IA, or site map. The IA will ensure that everything that needs to be in the site is present. The IA and site structure are not necessarily the same as the structure of the company or organisation. The structure of the business may be important internally, but it is crucial to keep in mind the end-users of the site when planning its structure and content; this is something the UE consultants will oversee.
Good design processes are inherently user-centred and early prototypes or wireframe models of sites will usually be user-tested by UE consultants to ensure that the IA, content and navigational concepts make sense and are useful to people. Such wireframes are typically produced before graphic treatments are created and will therefore show the structure of a site, but not necessarily what it will look like.
3. Wireframes
Graphic designers, user experience designers and programmers start to build wireframe models of how the site is structured. These wireframes may be ‘flat’ images or linked HTML pages. The wireframe models show where the blocks of content are located, how they are accessed and give an overall feel for how the site will be set up. Wireframes can also be shown to user groups to test the site’s structure and navigation against the project objectives.
For a detailed review of the BBC’s approach to user testing, read this entry on the BBC Internet Blog.
4. Graphic design
Once the structure is clearly understood from the wireframes and the client has signed off the IA, the graphic designers can start work on visual versions of the pages. These graphic designs may be developed as ‘flat’ visuals or as a prototype HTML build (or as a combination of the two) and may or may not be directly linked to the IA at this stage.
The bulk of early visual work will not usually be shown to the client, although the degree of collaboration at this stage depends on the nature of the project and the relationship between the client and designers. When the designers have settled on one or more graphic ideas the suggested routes are discussed and selected with the client.
5. Build
After a graphic design scheme is chosen, proper building of the site can begin. The build is based on all the information gathered so far – during the IA, user testing and user experience phases – and aims to create a visually and functionally appealing implementation of the ideas. Programmers/coders work with the designers, information architects and user experience designers to ensure that the design is delivering the right content at the right time and in a way the users will be able to understand and navigate. This stage often involves a number of iterative cycles.
Interaction designers are responsible for every way that a digital system responds to user input. In the case of a screen based system, they will develop interaction mechanics, such as graphic or text motions and transitions, selections and focusing, media player controls and so on. For more information about the discipline see the Interaction Design section on this site.
6. Launch and post-launch
Once the site is fully functioning there may be a final user test in order to iron out any remaining glitches and ensure that nothing major has been overlooked. After this, the site can be launched. Even at this point, a site may be launched in a ‘beta-testing’ state, where a live version is used to work out any bugs or identify any changes that need to be made. Users are often asked to contribute to beta-testing by providing feedback and suggestions based on their experience with the site.
From an internal point of view, the launch itself may seem like the end of the project, but from a user’s point of view the launch is the very beginning. At this point the organisation should solicit and keep a careful, organised record of different types of user feedback (the design of the contact form is an important consideration in itself – see this Smashing Magazine article for discussion on this). This feedback can then be analysed to determine how improvements can be made to the site in future design iterations.
In reality, most websites are subject to regular revisions and improvements, although this may be handled in-house rather than by design and development consultants. One way of assessing the effectiveness of the live site is to use web analytics tools that can reveal which areas are accessed regularly and which are seldom used, for example.