After a project kick-off meeting the first steps involve creating a document that encapsulates all the shared ideas. What we’re doing as designers is taking any visual, verbal and documented feedback and summarizing key points, laying out a framework for the project.
A good initial document should contain the following sections:
- A branded cover with relevant project and contact information
- Design approach including a summary of the UX/UI problems and their solutions
- Inspirations – a mood board of sorts – keep it succinct
- Concepts and thumbnails that give weight to the chosen navigation paradigm and depth to the drafted design
- The site architecture
Though all these sections are important, I’d like to summarize the last two and why these are critical to any UX/UI process.
A visual site map reveals the bigger picture making sure that the user is never at a dead-end. It also helps developers envision how they are to build the site. It’s a visual representation of the site that is probably based on the chosen navigation paradigm. The example above demonstrates the architecture by grouping pages into a drop-down navigation system commonly used in many sites today.
Wireframes are just that, wireframes. They should include little to no detail and are meant to show how the information is organized. Technically, the more “designed” the wireframes become, they serve more as a distraction than a useful tool. Some customers are different from others so the level of detail depends on what they can handle while considering the overall scope of the project. Visual composites are the next step, but that’s another subject. The example below should give some context.