The Sketch to Design Continuum
This illustration depicts the relationships between a design’s level of commitment and fidelity and what you are trying to communicate. These are the factors that matter when deciding where you are in this continuum. While the lines demarcating sketches (blueprints), wireframes, and prototypes aren’t clear, the phases of ideation, concept validation, and refinement and usability are—and that’s where we should focus our attention.
Blueprints
Creating a blueprint as the first stage of web design (or redesign) allows you to avoid visual distractions and focus solely on the most important part of the website – the content. Spending time on this stage can reduce the agony of restructuring later, which takes a lot more effort once the website is built.
Blueprints are also sometimes referred to as:
- Sketches
- Sitemaps
- Menu Trees
Helpful Hint: It may be useful to think of your website like a house. You would certainly not put a bed in the kitchen where it would be out of place. Using that same thinking, you want all of the relative information for your website on the proper page. Since all beautiful buildings began with a blueprint, it stands to reason that all well-organized, eye-catching websites should begin with a blueprint. When considering the website, keep in mind the pages are created for the content, not the other way around. As with thinking of the blueprint of the house, you begin with the furniture and build the rooms necessary to hold it.
There is no right or wrong way to go about creating a blueprint. The following, however, are a few of the standard starting points:
- The Old-Fashioned Way: Pen and Paper - Pen and paper can be very useful. They are quick to catch ideas before they disappear and can have designs doodled all over them. Each paper can represent a page on the website and be hung on the wall, to visually give you an idea of how it will be seen and navigated.
- Card Sorting - Using index cards is basically the same idea as pen and paper, but it allows you to shuffle them in your hands. Because of this, you can mix it up several different ways and allow others to choose from the cards to get a feel for what makes the most sense. This method gets others involved in the process and will give you a broad sense of how others group subjects / pages together.
- Spreadsheet Software - In this method, each cell of the spreadsheet represents a page. Columns represent the hierarchy. Notes can be added to cells to store ideas for page content, links, references, etc.
- Mind-mapping or specialized software - There are some really nice tools out there (some are free even) that allow you to chart your ideas and collaborate online with mind maps. For example, tools like Mind Meister allow everyone to come together in one place to give feedback simultaneously if needed, which can be very helpful for the collaboration process.
Blueprint Guidelines -
- Quick
- Making them does not require long periods of time.
- Timely
- You can create blueprints on demand.
- Inexpensive
- Creating them is cheap, using materials you have on hand.
- Disposable
- You don’t care if blueprints get thrown away.
- Plentiful
- Blueprints don’t exist in isolation of one another.
- Clear & Use A Common Vocabulary
- Blueprints comprise simple symbols and lines.
- Fluid
- They have a fluidity of line and flow that imply creativity.
- Minimally Detailed
- Blueprints are conceptual and suggest structure.
- Appropriately Refined
- They communicate just enough so others can understand your intent.
- Suggestive & Exploratory, Rather Than Confirming
- When blueprinting, you haven’t yet made any concrete decisions.
- Ambiguous
- You have yet to work out the details, then overlay your design on the foundation your blueprints provide.
Wireframes
Wireframing lets us outline a website’s basic, overall structure and flow and helps us explore divergent ideas from our blueprints. There isn’t much change from blueprints to wireframe— merely a slight refinement and greater formalism.
Value of Wireframing:
- Connect the site’s information architecture to its visual design by showing paths between pages.
- Clarify consistent ways for displaying particular types of information on the user interface.
- Determine intended functionality in the interface.
- Prioritize content through the determination of how much space to allocate to a given item and where that item is located.
Types of Wireframes:
- Low-fidelity wireframes help facilitate project team communication and are relatively quick to develop. They tend to be more abstract because they often use simple images to block off space and implement mock content, or Latin (lorem ipsum) text as filler for content and labels.
- High-fidelity wireframes are better for documentation because of their increased level of detail. These wireframes often include information about each particular item on the page, including dimensions, behavior, and/ or actions related to any interactive element.
Wireframe Guidelines -
- Quick
- Making them does not require long periods of time, but they do take longer than blueprints.
- Inexpensive
- Creating them is cheap, using materials and tools you have on hand.
- Viable
- Wireframes are not as plentiful as blueprints, so you should have narrowed your concepts down to viable options.
- Clear & Use A Common Vocabulary
- Wireframes comprise simple symbols, lines, and indicators of interactivity.
- Minimally Detailed
- They are conceptual and suggest structure.
- Appropriately Refined
- They communicate a sense of structure and layout.
- Confirmatory
- Wireframes present concepts that need validation. When creating wireframes, you still haven’t made any concrete decisions.
- Ambiguous
- You have yet to work out the finer points of interaction and content.
Prototypes
As we iterate our wireframes and get clarity on requirements and constraints, some of our ideas naturally fall away. It is at this stage a real prototype exists. Designs are still not final, but we have defined a set of ideas we know can actually be pursued, and we begin to refine and exemplify them. Some light coding may be invested to achieve a degree of interactivity, but a prototype is still a communication tool and artifact.
Value of Prototyping:
- Allows a designer to thoroughly test all the functions and tools on a site before the site is fully coded.
- Allows a client to test their site with prospective users before the site is officially published to the web.
- Helps designers track what users expect when coming to the site.
- Gives the client a substantial product to view and interact with before they give the go ahead to launch the site.
Types of Prototypes:
- Low-fidelity prototypes are often paper-based and do not allow user interactions. They range from a series of hand-drawn mock-ups to printouts. In theory, low-fidelity wireframes are quicker to create. Low-fidelity prototypes are helpful in enabling early visualization of alternative design solutions, which helps provoke innovation and improvement. An additional advantage to this approach is that when using rough sketches, users may feel more comfortable suggesting changes.
- High-fidelity prototypes are computer-based, and usually allow realistic (mouse-keyboard) user interactions. High-fidelity prototypes take you as close as possible to a true representation of the user interface. High-fidelity prototypes are assumed to be much more effective in collecting true human performance data (e.g., time to complete a task), and in demonstrating actual products to clients, management, and others.
Prototype Guidelines -
- Quick
- They should require only minimal development effort.
- Inexpensive
- The development they require does not require a major investment.
- Clear & Use A Common Vocabulary
- Prototypes comprise simple symbols, lines, interactive components, and content.
- Detailed
- They are conceptual and suggest structure.
- Appropriately Refined
- They represent an almost real application—though with a faked user experience.
- Validated
- In prototypes, a design is no longer ambiguous or suggestive. A prototype is an actual instantiation of an idea. However, it may still require fine tuning.
References:
Morville, Peter and Rosenfeld, Louis (2002), Information Architecture for the World Wide Web – 2nd edition, Sebastopol: O’Reilly, p. 272
Prototyping. (n.p.) Retrieved Friday, September 27, 2013 from the Usability.Gov website, http://www.usability.gov/how-to-and-tools/methods/prototyping.html
Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience. (May 7, 2010) Retrieved Friday, September 27, 2013 from UX Matters website, http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php
Web Design: Creating a Sitemap First Saves Time, Money, Headaches. (February 23, 2013) Retrieved Friday, September 27, 2013 from the Pixsym website, http://pixsym.com/blog/web-design/web-design-creating-a-sitemap-first-saves-time-money-headache/
Wireframing. (n.p.) Retrieved Friday, September 27, 2013 from the Usability.Gov website, http://www.usability.gov/how-to-and-tools/methods/wireframing.html