So, what is a wireframe?
8 Nov 2011 by céline
A Wireframe is,
a visual guide that represents the skeletal framework of a website.
[1] The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.
Why a wireframe?
- To nail down requirements, goals, priorities, functionalities
- To help all stakeholders to make decisions, take a position
- It is faster to update than a finished designed, iterative process and design thinking
- It is a technical blueprint reference for developers
What are the steps needed before wireframing?
- Clear Brief
- Vision Document
- Feature Lists
- Research and Analysis Results
- Sitemaps
- Scenarios
- Content Strategy
An Overview of wireframes at different stages of a project
The Sketch
When to hand a sketch?
- Brandstorming
- To visualize and communicate clearly to other team members
- Communicating high-level concepts with client
- Iterative design work that is already in visual design
High-level but refined Wireframes
When to hand a high-level but detailed wireframe?
- Taking the hand sketch to the screen
- Specifying functionalities
- Visualizing detailed interactions
- Building out a prototype to test in user testing
- Communicate to the client more directly what the page layout will look like
- Setting the client’s expectations of the functionalities
Visual Design Hybrid
When to hand visual design hybrids?
- When we have the need to blend the interaction design with the visual design in order to communicate faster/clearer with more efficiency
- To make quick revisions to the client
- Building or tweaking on an existing website
- When collaborating closely with the dev team in a very agile process
All these examples are ALL Wireframes. The main goal is to provide enough information for your team and the stakeholders to make decisions.
Data Driven Design
6 Nov 2011 by céline
Data is information.
“… research is a way to make a designer’s gut instinct/intuition better. “
When meeting with a potential client most of the time designers are asked to show up with moodboards, mockups or design directions before even knowing WHO they are designing, or WHAT it is they are designing. Clients look at the early mockups that a designer might have done some guessing / astrology / voodoo to come up with. Then the client chooses a design direction, not really knowing WHY he is choosing a particular design or not, since the research has not yet been made…
This is dangerous.
It’s dangerous because the client sets the production on a designer’s vision of something that is still unknown, the design direction chosen might not yet be the one needed, and off goes the whole production… Sometimes in very risky waters… Sometimes in the wrong direction.
After my Paris Web conference, a lot of designers asked me to write about how we can improve that process in a design environment.
It took me a while to tackle the subject because in the meantime, in another context, at the College I teach Interaction Design at, a Designer Teacher raised a debate around what is a wireframe, and the role of an Interaction Designer in an agency.
(I will respond to that debate soon on this blog.)
There isn’t one way of doing things. We all agree. But there are some best practices several successful companies have shared during the past decade that have proven to be successful.
Data is information.
We are going to keep coming back to this idea. Since we are Information / Interaction Designer / Architects, we have to know the information of the site we are asked to re-design for a goal or another. Yesterday I attended Lou Rosenfeld’s web seminar: 8 Better Practices for Great Information Architecture: Closing the Findability Gap What I have learned was that research should always be a constant milestone within our process.
We design for the experience, yes. But the experience can be good or bad. Design should be focussed on engagement. What is the motivation for a person to use / contribute / re-use your site’s content? Why? is one of the most important question. And the answers can help make the experience a success.
How can we answer the question Why?
First, we must research. This is inevitable. We could guess why, or do tarot cards, meditation, or just talk to the genius inside us. But even the genius inside us needs information in order to grow, learn and develop. So best thing you can do for your client, is to know more about how their brand is being perceived, how their users are interacting with it, where is the brand living outside the website, …
There are many user testing techniques you can find out there that will allow you, with different level of accuracy, to leverage that research.
I’m stealing this screenshot from Lou Rosenfeld about gradual engagement model :
An important question was asked during the seminar : “How many audiences can a site handle?”
Keep in mind your end users, the audience you are addressing this site or service to. Learn who they are, and observe their behaviours on the site or on similar sites when researching about your competitors.
A great way to represent the data collected and analyzed can be by making a data visualization with it. It can be easy to understand, using the colours of your client’s brand. The goal is to communicate clearly your findings, and to come up with a series of actions to follow.
These actions can be a heuristic evaluation of the site in order to clearly find out what works and what doesn’t work. With this type of evaluation and doing gap analysis, the business goals might change, and the client’s vision of its own site might also change to meet what actually is in reality.
Sometimes a client comes in and wants a mobile app, or a blog, or something they heard other brands had that they also really-really-really want too. After doing some research and analysis, the client realizes that what he needs might be something else in order to make an effective progress in his business and ensure his ROI.
Hope this helps. If you have any questions, or want to add to my post, feel free to comment, and I’ll keep in touch!
* This is a great way to illustrate the data collected to present to a client.
