From a drawing to a functional wireframe

17 Oct 2011 by celine

For tomorrow’s class I will explain how we can go from a conceptual high-level drawing to a functional wireframe.

This is a sneak peek inside of one of my notebooks. It is a high-level drawing of the People’s page for the TASCHA website (under construction). After understanding the client’s needs, the audience’s needs and goals as well as the goals of the organization behind this project. We laid out some of the main points that will help us design respecting all of the requirements, needs, goals and constraints.
During a brainstorming sessions with the client, I sketch really quickly the ideas we are discussing.

Because I’m a very visual person, I also design or draw a high-level grid that I’m planning on using for the purpose of the People’s page. No content is added yet..

Basing the navigation on the site-map we have delivered earlier in the process, I am able to sketch with a little more detail using Balsamiq the interface to show my clients the step by step process.

Using real content, I make the wireframe as close as possible to the end result, so that all feedback can be divided by Aesthetics, Content, Ui, or Layout. That way we are able to save much time and money, and focus on a broader experience.

Tomorrow in the class, we will continue our workshop around wireframes, and illustrate scenarios, and behaviours.