Once we’ve completed the research phase we typically embark on the development of an information architecture. Often, we start the process 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 working out business priorities and calls to action. Information hierarchies, wireframes and sometimes clickable prototypes are the deliverables we create during the information architecture phase.
Wireframing / Site Maps
As an interactive product, a website needs to support intuitive and pleasurable user experiences. It’s 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 with a client using good old fashioned pen and paper. Wireframing helps to bring focus to objectives, priorities and calls to action.
Yes. We still draw our initial storyboards on paper… and that could be a napkin. Aesthetics and visual design development starts with concept sketches that reflect possible design directions. These sketches get the conversation going between ourselves and client. They combine examples of colour, imagery and typography and often contain design elements grabbed from other websites that illustrate possible approaches. This concept process helps 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.
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.
When time and budget allows, we really like to create clickable prototypes of the websites we’re going to build. These prototypes are relatively simple to create and amend, so they can act as excellent tools to quickly test ideas and therefore avoid wasting time and effort during the build.