The Design Process

Rowers by Y

Rowers by Y

This is the second stage of the 5 Stages of Project Management series for web design projects. So far, we have taken an overview of the 5 stages as a whole and looked at how to write a successful design brief as part of the Inception stage. We are now ready to look at Stage 2, Design.

Before starting this stage, if you have completed the inception stage, you should have a well defined brief and understand the scope of the job. Without these, your project may end up with higher costs and delay because your expectations differ to those of your client. Now you are ready to evolve your ideas into some concepts to present to your client. For now, you are not actually building the site; you are designing concepts to a pre-construction stage that can be presented to and agreed by your client.

The brief may have given you a number of ideas for how to design the site and this stage is intended to consider these ideas, present the best to your client and identify the preferred option. But before you can do that you need to get answers to a few more questions and test your ideas against them.

Some things a web designer should consider:

Users

You need to test your ideas against what users will expect to see. The users of the site are of absolute importance – if you put your navigation system at the bottom of the page, for example, is this what users will expect? Where will they expect to see the logo? There are a number of conventions that users will expect and you should consider these carefully before you decide to go against them.

You also need to consider user-specified items that should appear on the site, such as login widgets, video, interactive elements, forms, etc. How and where will these appear? How important are they for functionality, usability and ‘stickiness’ — the ability to keep users on the site. Create a hierarchy of these objects.

Functionality

Really this is a subsection of Users because it describes how users interact with the site and whether it provides the functionality they expect in the places where they expect to find it. Do users have to search through 20 pages of description to get to the ‘buy me’ button? If they do, it ain’t functionin’! This is about making it easy for people to do what they want to do on the site. Functionality, to some extent, also covers speed: how quickly does the page load, how many server calls are made to load the page, does the JavaScript slow the page down?, and also how quickly can a user skim the content to find the piece that they want to read (is the typography helpful or a hindrance, is the structure of the page suitable to the content…)?

Accessibility

This is another important feature of any site and one that you should start designing into the site from the first drawing. In this sense, accessibility is about the colours you use — do they provide sufficient contrast? — The fonts you use, — are they easily legible? Is the content going to be overshadowed by that great picture you want to use? Are the link methods you are planning to use accessible? Have you structured content correctly, — is data stored in a table and is the table accessible?

The fundamentals of these questions will be put into practice when you start building the site. Creating the foundation of that best practice now, will make life a lot easier further down the line.

Plan the site

You should also have a clear idea of the content that will appear on the site, how pages will fit together — which page will link to which? This will help you to develop your site structure and the overall site map. This is essential for a large site but is also really useful for a small site and will help you to start structuring your Search Engine Optimisation as a core part of the page design.

Do you want to see my sketches?

Before you start anything electronically, you should use pen and paper to sketch your ideas. This gives you the opportunity to see how they look, modify them and hone them without spending hours getting Fireworks, Photoshop, Illustrator, etc. displaying what you intended and finding it doesn’t work. It also gives you some rough concepts to present to your client and seek feedback. You should only start committing them to electronic form when you have some clear ideas on paper.

Sketching a design allows you to play with where elements of a page should go to maximise visitors’ attention and optimise use of the hotspots on the page. It also allows you to ensure that visual elements work together.

What do you get out of following a design process?

There are very clear benefits to working through a design process (no matter how basic). It gives you a structure to work to and elements on which to focus; so, rather than jumping in and getting it wrong, you are able to concentrate on making the design achieve the results it expects before dedicating time and your client’s money to a concept that simply won’t work. Furthermore, it will help you to explain your design process to your client.

At the end of this stage you should be presenting your final mock-ups to your client for approval and to decide on which design to follow. This is much easier if you are able to describe the process you have followed and explain the reason you have made the decisions you have made.

The next stage in the five step project management cycle is construction. If you have developed your design well, you should have:

  • A site structure and site map
  • An understanding of the back-end data structure
  • An agreed design to carry forward
  • An understanding of what content will be required

How to write a creative brief

BT Tower, London

Creative brief, building blocks of web development

This post is the second part of my 5 stages of project management series and covers the most important aspect of the first stage; writing a brief for a web design project.

Why is this important?

Web design projects are only ever successful if two things can be achieved at the same time:

  • You provide your client with a site that fulfills the brief and they are satisfied with it; and
  • You have correctly estimated the time it will take to complete the project and you have been adequately paid for the work you have done.

To achieve both of these, it is essential for you to have a clear understanding of what your client wants to achieve. One of the ways we do this at Redcentaur is to set out in a creative brief exactly what the client wants to get from their web site and the reasons for it. This helps us to identify the objectives of the site and to scope the work necessary.

Obviously, the completion of a creative brief is not the be-all-and-end-all of understanding your client and the goals of the web site. It is the starting point, from which there needs to be conversation and discussion to drill down into the responses to the brief.

The brief

There are two parts to a creative brief that are designed to give the web developer a clear understanding of the client, their needs, desires, strengths and weaknesses. Paying heed and due attention to the brief can pay dividends for both client and designer in reducing the risk of missing the mark at a later stage.

The creative brief

The key part of the brief is to understand the creative requirements of the client. This can be broken down into four sections. Remember, your client might not have a clear grasp of these expectations themselves. This section of the brief should help them to start pinning down some of these concepts if they haven’t already.

Summary

This section should give a general overview of the client and the project as they envisage it. It should state the purpose of the project from their perspective and identify any specific goals they have in mind.

Audience profile

Your client probably has a general idea of who the target audience is for their web site and this section provides you with an opportunity to identify the target market from the outset. By asking your client what they think the target audience is, what they care about and why they would visit the site, you are able to develop an in-depth understanding of your client’s aspirations and the factors that will measure the success of your web design.

Communication

In our experience, this is one of the most difficult factors to obtain from a client. Often clients do not have a clear idea of their message or how that message should be conveyed. This section is about what it is your client wants to say to their target audience and why it is important for that audience to see this message. This section may help the client to start defining this message.

Competitive position

In an age when the internet has brought huge amounts of information to every audience, competitive edge is king. You need to be clear on the things that set your client apart from the rest and what factors make your client a success where others in their field are not. This will help you to identify the key strengths of your client that will need to be the focus of the design.

The technical brief

The client may have an idea of the technical aspects of the site that need to be delivered. These can be as fundamental as site logos and photography, copy, contact forms, etc. or more technical issues, such as database integration. The technical brief should be tailored to the services that you are able to provide. This is a secondary part to the brief as much of the technical specification will be a result of the design as it develops, but it is important here to understand if the client has decided the site will form the backbone of its customer relationship management, for example.

Roles and responsibilities

Once you have some answers to these questions, you can start to flesh out what are the roles and responsibilities within the project — who will provide the site images, who will provide the copy…?

It is important to have an understanding of this so that you can accurately estimate the time required to complete the design — if you suddenly find that the client does not have suitable photography, you will have to spend time either getting the photographs or sourcing them; a cost that you may not have factored into your quote.

Next steps

Once you are clear on the scope of the web site and have a clear brief, you can move on to the Design Phase.

Discussion

Please leave a comment below to let us know how useful this is to you. Are there other aspects that you feel have not been tackled in our brief? Is this something you don’t find useful? How do you understand your client’s expectations?