Taking what we’ve learnt about objectives and audiences we begin by separating content from aesthetics before merging them back together later on in the process.
Information architecture
Once we’ve completed the research phase we typically embark on the development of an information architecture. Often, we start the process during at a workshop 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.
Wireframing
As an interactive product a website needs to support intuitive and pleasurable user experiences. It’s about more than just looking good.
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
Aesthetics and visual design development starts 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.
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 as Axure, so they can act as excellent tools to quickly test ideas and therefore avoid wasting time and effort during the build.
Where we go from there is up to you. Some clients ask us to build them an entire site, others ask for templates they can give to their in-house team. We will work anyway you want. But, if you are looking for some advice please do get in touch.