When you’re building a new website, you probably have a long list of elements to include and a vision of how you want the site to look and function. Building a site can be time consuming and complicated, so how can you flesh out your ideas without wasting time and effort?
You need a wireframe. A wireframe is a visual outline of your website, a simple black-and-white sketch or layout of what goes where and how it all works together. Wireframing takes the small details like drop shadows, font styles and background colors out of the conversation so you can focus on the bigger picture: the Page elements, User experience, Conversion flow and more.
A wireframe is a way to have a visual conversation in which everyone on the project—the client, designer, developer and coder—talks about how things fit, flow and function. It can keep you from heading down dead-end streets, thus saving time, effort and frustration along the way. The wireframe phase gives you a chance to fix things, before spending time on full design and coding.
Wireframing is an iterative process through which good ideas are verified and bad ideas are discovered and weeded out. It doesn’t have to be complicated or hard. In fact, wireframes work best when they’re simple and let you focus on the structure and function of a new site, not its aesthetic design.
It may help to take a look at the wireframe of other sites you like with Wirify, an app that’s a little bit like x-ray vision and shows the wireframe underneath just about any live site.
Most websites are built on a grid system, one element at a time. You simply add boxes and sections that represent text or images, laying everything out in grayscale, which helps you focus on structure and navigation without the influence of colors, imagery and fonts.
To really be sure your site will look, feel and act the way you want, consider creating a high-definition wireframe with actual with actual text copy and more detailed elements, but maintaining the grayscale coloring.
Picking a wireframe tool
When thinking about a wireframing tool, consider how you and your team work and how you design sites. Some tools are easily integrated into your other software (like InDesign or PhotoShop), while others are not.
If you have a large team of designers and developers in different locations, you’ll need software or an app. But if you’re all in one spot and prefer to walk through designs in group meetings where the conversation is fluid, a dry erase board is still one of the easiest and most collaborative tools.
Yes, it’s just like it sounds. A cocktail napkin or the back of an envelope might be too small, but markers and dry erase board work well, especially for team discussions where technology could get in the way of brainstorming and hashing out ideas quickly.
If you’re nimble with PhotoShop, it can be a great way to show layout and navigation; it’s flexible enough to let you move elements around easily.
There’s a variety of programs available online. Most are inexpensive and many offer free trials and tutorials. We like a few in particular:
Hotgloo: intuitive and easy, and allows you to develop right into prototype websites and apps.
Balsamiq: also very easy to use with drag-and-drop elements, with a good look and feel that clients can readily understand and work with.
HTML + CSS
A new trend with designers who also know code, this might be worth trying out, especially when building responsive sites (desktop, tablets and mobile). If you’re quick with code, you can easily play with elements, moving and resizing them to show how different screen sizes will work.
No matter how you do wireframing—with pen and paper or with a sophisticated tool—the important thing is to do it. You’ll be glad you did. Few things are more frustrating than having to rework a fully designed site because of a structural problem that could have been discovered earlier. Wireframes help you avoid structural and design flaws and create sites that do just what everyone envisioned.
Contact New Perspective to learn how to bring your vision to life through wireframing.