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

Wireframing A Website

wireframe-650x421

What is a wireframe?

A Wireframe is a visual representation of content layout in the application.

Developer Perspective
Wireframes help developers visualize the entire product in a non-opinionated way.

Client / Business Perspective
Wireframes are an initial-stage deliverable that ensures both parties agree on the UX.

What are the benefits of wireframing?

Designers / Developers Perspective
Wireframes may inspire the designer, resulting in a more fluid creative process.
Wireframes give the developer a clear picture of the elements that they will need to code.

Client / Business Perspective
Wireframes provide the client an early, close-up view of the application (or a chance to get it re-designed).
Wireframes clarify any misunderstandings in the requirements

 

Storyboarding Short Videos for Microsoft

intune

Anyone considering making videos for Microsoft should take note of a few things I’ve learned. It’s good to be prepared to wait patiently as the stakeholders make revisions, meet legal requirements and give other feedback regarding design, audience and the message. The paradox is that as one waits for these crucial bits of information it’s important to keep moving the project along. The way I manage to do this is with the help of “For Placement Only” assets that I manipulate using Adobe After Effects, creating iterative versions of the video. The most important deliverable turns out to be a detailed storyboard representing the final product. This not only breathes life into sometimes banal scripts, it fosters buy-in from the client. The average amount of revisions for the entire storyboard seemed to be around ten. Where the average amount of revisions to the video should be about half of that of the storyboard, but not nearly as broad. It’s easier to make changes to a drawing than a video.