Website Wireframes: Making your whole world better
by Steve Fisher
Now I might be slightly biased because I'm a UX designer, but I believe that wireframes are the foundation of any website project. You might be asking, "But what about the tasklist, features, and requirements of the project? Aren't those the true foundation?" Well, yes, but in my experiece, the true tasks, features and requirements are revealed through the creation and iteration process of wireframing. The great news is with a thoroughly explored and developed set of wireframes a project can begin with a clearly defined destination on the road to success.
So what is a wireframe? According to Wikipedia:
"A website wireframe is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface...Wireframes also allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps to develop an awareness of and familiarity with the site." At Palantir, wireframes are used to provide a visual reference upon which to structure each page, and are often completed before any artwork is developed.
An interesting side effect of going through the wireframing process is your team will connect better than before.
Creating a set of wireframes for any project is a solid way for all members of the team to communicate with each other. The iterative process allows everyone to gain a solid understanding of what the website is trying to accomplish (goals), what the user is coming to the site to accomplish (tasks) and how it will all fit together. I mean how great is that? Everyone on the team (clients, stakeholders, content creators, frontend engineers, developers, designers, etc.) gaining understanding and ownership early on in the process. Wireframes become the tool to enable a meeting of the minds and help to create a framework for the interactions that users will have with the site.
So what different styles of wireframes can be used for different projects?
Reference Zone Wireframes:
- Show just major positioning
- Discuss big ideas or concepts
- Show the overall structure of particular pages
- Show a family of pages working together
High Fidelity Wireframes:
- Show a lot of detail
- Don't include things you don't need to talk about
- Ensure that designers and stakeholders have the same understanding of the pieces
- A sequence of functionality
- A wireframe that can be understood without you being there
- Everything has to be communicated
- Documentation is critical in this style of wireframe
- A wireframe with enough detail to be built
Includes things like "triggers", "Content" and "Actions" (How to get there, what to look at and what to do after you look at it)
Sketch Style Wireframe:
- Something that really looks like it hand drawn or is hand drawn!
- These are meant to pull the discussion away from the visual design and back to the specification's functionality
Here's a bit of what we do.
At Palantir we regularly produce various levels of wireframes. Some that are just for the UX team in their exploration of ideas, some that never make it past internal meetings and testing, and of course the essential wireframes that get the ball rolling on discussions and finally the framework for the site. From my experience, whenever possible, the simpler the better. Most times I start with pencil and paper. It is quick effective and allows me to rapidly explore ideas. From there I'll move on the something the helps establish a well defined grid, but is still loose on the details. Finally I'll produce a set of wireframes that a highly detailed on the functionality and placement of elements including comprehensive annotations, but still show no color (expect blue for links!) and are purposefully kept separate from the UI design. So I produce sketch style, reference zone, and storyboard/standalone wireframes. Truthfully I am always sketching design concepts either in my head, on paper or in photoshop as I develop the wireframes, but this is so I can understand how it will all work together in a solid design system.
Ultimately wireframes are an excellent tool to communicate the functionality of the site and should be developed prior to any user interface design or final features list. It is always great to get off on the right foot. No one wants to trip at the start.
And finally, a few of the resources and links that I love related to wireframing:
- Omingraffle - my current tool of choice when not using pencil and paper. I even use it on my iPad.
- Connect a Sketch - helps make your sketches interactive and collaborative
- A list of 18 Wireframing, Mockup And Prototyping Tools To Plan Designs
- Tools for sketching user experiences
- Wireframes magazine
- A Smashing Magazine list of 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
- And last, but I don't think least is a newer tool that I'm currently trying out called Flair Builder. I think I might be falling in love with it, but it is too early in the relationship too tell.
Please post in the comments what you use and why and of course any questions or suggestions. Sharing is great!