We design collaboratively

Chat window discussing design

When you work with Headscape on a web design project you won’t just brief us and wait for the results.

We have a design process that is collaborative and evolutionary. We start by understanding your objectives, your audiences and your brand as covered under research.

We then try to split left brain from right by separating content from aesthetics before merging them back together later on in the process. So, let’s drop the visuals for now and talk about IA and prototyping.

Information architecture

Once we’ve completed the research phase we typically embark on the development of an information architecture. Sometimes we start the information architecture process during the research phase by using pen and flipchart to sketch initial wireframes and Post-it notes to explore possible structures and labelling. This can be a good way of teasing out business priorities and calls to action. Information hierarchies, wireframes and sometimes clickable prototypes are the deliverables we create during the information architecture phase. We might use techniques such as card sorting to identify content groupings and test ideas.

'Information hierarchies, wireframes and sometimes clickable prototypes are the deliverables we create during the information architecture phase.'

Wireframing

Designing a website involves a whole lot more than designing something that looks good and reflects branding. As an interactive product a website needs to support intuitive and pleasurable user experiences.

We use wireframes to work out what will appear on pages, how it will be labelled and the relative emphasis on different elements. Often we will start wireframing interactively with a client using good old-fashioned pen and paper. Wireframing helps to bring focus to objectives, priorities and calls to action.

Moodboards

Moving back to how we approach the development of aesthetics and visual design, our designer’s first response will be with moodboards that reflect possible design directions. Moodboards get the conversation going between designer and client.

Moodboards combine examples of colour palette, imagery and typography. They often contain design elements grabbed from other websites that illustrate possible approaches.

We like moodboards because they help us to work together with our clients to identify the character of a design look and feel before we move on to detailed page designs. Moodboards get the conversation going between designer and client.

Page mock-ups

Once we’ve identified the character and personality of a design direction and we have some wireframes we start to mock-up page designs.

By now there should be no major surprises, no big 'ta da!' design unveiling moment. The personality of the site and the objectives and priorities for different page types have already been defined. Both parties have been heavily involved in the process which means that neither party 'owns' the design.

Often we help with the presentation of designs to senior management by illustrating the process, showing the options and explaining how decisions we’ve made relate to business objectives and user requirements. What we won’t do is ask senior management 'so, what do you think?'.

Prototyping

When time allows, we’re really keen to create clickable prototypes of the websites we’re going to build. These prototypes are relatively simple to create and amend using tools such Axure, so they can act as excellent tools to quickly test ideas and therefore avoid wasting time and effort during the build.

Testing

Testing is good. No matter how pleased we all are with the design, it is still good to get some independent input. Testing need not be expensive and it doesn’t need to involve lots of people or lots of time and effort.