Step 2: Wireframing Pre-Design
Wireframing pre-design is creating a framework onto which you will ‘hang’ the various elements that make up your website. After performing your digital brand analysis or audit, you’ll have a clear (or clearer) idea of what you want your brand to represent and what your customers think of it.
It’s time to use this information to create your site, but we’re still in the planning stages.
If you’re tempted to skip over this step, think of an architect’s blueprint for a house or office block. Each element has a function and end-users in mind. It also needs to be aesthetically-pleasing. You wouldn’t expect an architect to grab some bricks and start stacking them on the first patch of land she came across. To build a house, as with building a website, you need to plan ahead and create solid foundations.
Your wireframe is your foundation, on which you lay out how you want users to process the information on the site. It’s your floor plan for the main rooms of your house.
Wirify shows you wireframed versions of existing sites, which will really help you understand the concept. And this is another useful site if you’re looking for wireframing inspiration: http://wireframes.tumblr.com/
Generally, you start with a grid. Add your layout on top of the grid, including logo, navigation, banner, footer, and other features for the main content area.
Great tools are available in paid or free versions to help you work in this way. Balsamiq http://www.balsamiq.com/ features drag and drop, reusable components that make wireframing your website easy. Check out this link for even more versatile platforms to help you with your pre-design http://wplift.com/wireframe-prototype-tools And you can also use software you may already own, such as Adobe CS, Fireworks, InDesign, or Illustrator. Moving from wireframing with illustrator to designing visual components in Photoshop is particularly sweet.
Since this is planning, be creative. Break out from the mold. Be aware that certain layouts are popular because they work extremely well and people interact with them as expected, but give yourself permission to deviate from standard layouts. As long as you ask yourself why you are making changes and what you think the affect will be, you will be keeping your end users, your potential customers, in mind. Ideally, your decisions should enhance clarity, easy of use, and the user experience.
This is the perfect time for experimentation, so go ahead and try different layouts and different sizes of type. It’s better to make mistakes at this stage than when you’re adding visual components and coding later.
As you develop your wireframe, you’ll see that it’s your website stripped of colors. You might even think about how the navigation will work. How do you want the buttons and menus to behave when users hover, and click? Note that if a user can navigate a site in black and white, you’re doing well. If not, adding color isn’t going to help solve underlying issues.
When you have your basic wireframe, you can then develop this. For example, you might then add grayscale, or colors, then fill in actual copy and logos, building the site up layer by layer. This kind of development is good for determining the best font sizes to use on your page.
Finally, you may want to make an interactive prototype of your site before plunging into more visual aspects and coding. Designers use their own methods that suit them. The important thing, for the vast majority, and with good reason, is to plan in, advance.
When you’re happy with your wireframe and you’ve tested it on unsuspecting friends, colleagues, and web users, now is the time to get to the part you’ve been spinning your wheels over. The web design and development itself. That’s where we come in, get in touch for a free consultation!