Designing Site Architecture and Wireframes

P4NH_Sitemap-650x392.jpg

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
  • Wireframes

Though all these sections are important, I’d like to summarize the last two and why these are critical to any UX/UI process.

Site Architecture

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

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.

P4NH_wireframe.jpg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s