While there’s many documentation and theory about project management and project workflow on disciplines such as software development, web design doesn’t seem to have received so much attention. Every web design project is different, and sometimes it’s part of a bigger web development initiative. However, there’s some steps that are common to most web design projects and constitute the minimal web design project workflow.
Stakeholder consultation (Data gathering and analysis)
The first step in the workflow of a successful web design project is gathering the required information. Generally, this can be accomplished by talking with the stakeholders, be it a client or internal to the company, about the website goals, requirements and needs. Identifying all those things will allow the designer to create a website design that matches what the client had in mind, and it’s appropriate for the target audience. There’s many checklists and documents about requirement gathering, and often the web designer will end up developing their own set of questions and adapting them to specific customers. From this step, the web designer will learn things such as who are the target demographic, what should a visitor feel like when on a website, what is the message or action that needs to be communicated to that visitor and what are the general style preferences or brand image rules.
Prototyping and wireframing
Prototyping is a quick way of turning the above requirements into a visual form, to check with the client that everything has been understood correctly and it’s on track. A prototype doesn’t even need to be done on a computer, can be a set of hand drawn sketches with the main items of the design and things such as website navigation and structure. This step will show the client where and how the information and content of the website is displayed, and how the user would navigate from one section to the other.
Mockups
At this point the general layout of the site has been approved, and the designer will start creating image files, usually with Photoshop or a similar graphic program. In many cases, there’s at least a few initial mockups, and the client will choose one of them to be refined. At this stage, the artistic aspect of Web Design becomes central, with things such as colours, fonts and images. This step of a web design project workflow is iterative, which means the initial mockup will change depending on client feedback and preferences. However, by this point there shouldn’t be major changes on the website layout and general idea behind it.
Coding into a website
Once the final mockup is approved, the web designer or programmer will translate it from an image or set of layered images into something a browser can display and users can interact with, the final website. This can be a simple XHTML/CSS interface, Flash, a template for a CMS or any other web language, and at this point the functionality of the website will also be added if required. Major changes on design are a no-no at this point, since it may cause much bigger delays than in a previous phase, such as when doing the mockups. However, in some cases the limitations of web development and existing browsers may need the original mockup adapted.
By following this simple web design project workflow and adapting it to the client’s needs and the web design particular way of working it’s possible to create websites that are fully tailored to the client’s needs in a most efficient way. The use of prototypes and mockups allow the client to make major changes on the navigation and looks of a website much easily than if those changes were to be made on an already coded website. By following a method instead of just improvising the web design process is simplified and approached in a more professional manner.