Why Wireframing and Prototyping Matter To You

Take a second and think about your internet usage. How much time do you spend online a day? How many emails do you receive a day? How many websites do you visit? If you’re anything like the typical media consumer who spends most of their time online the numbers might astound you. For me I can list the top sites and apps I spend the most time on – Facebook, Pinterest, Gmail, Feedly, CNN, BBC, WCPO, WLWT, Blackboard, and Amazon. I hit up each of these places at least once a day and often multiple times a day & that’s not even including the links off of Facebook, Pinterest, Gmail, and Feedly. Between work, school, and play I average over 100 different websites a day and you’re probably not as far behind as you think.

Now what does this have to do with design? What does this have to do with you? The answer is, quite frankly, simple. As a culture we’re moving away from traditional media consumption and even shopping patterns – something we’ve been hearing about for years and with this shift comes the rise of the virtual news outlet, library, and shopping center. Even though we visit tons of websites every day we never think about the design and navigation of website until it’s so jarringly bad that we can’t help but notice it. So whether you’re a web designer building sites for a living or simply building and managing your own portfolio site you need to master the basics of prototyping and wireframing in order to ensure that your visitors have an enjoyable visit. These two basic elements of web design ensure that each page has it’s function and that the core objectives are not lost.

So what exactly are wireframing and prototyping?

Page 36 image for HOW full75.jpg

An example of a wireframe from Brian Miller’s book, Above the Fold: Revised Edition.

Wireframes are blueprints that map out individual pages. The wireframe shows the elements of a page and their relative importance. They are not intended to illustrate the lay out of the page; instead, they visually catalog the elements on a page and give a designer an idea of what the most important elements are., what the second most important elements are, and so on. They can also detail specific functionality for a page; illustrate different states for elements on the page or the entire page, like drop-down menus or expanding areas; or demonstrate how modular areas might work together.

Wireframes can be made for any page of the site that requires this type of detail, like the home page, subpage templates, registration forms, search results, and so on. This step helps a designer focus on style rather than a dual task of form and function during the layout phase.

Once wireframing is complete and the critical tasks are mapped out, it’s sometimes necessary to create functional prototypes for new or complicated functionality. Prototypes are working models of site features or functionality that help a developer and a designer work out the final details and provide proof of concept. These working models, which are usually devoid of any design treatment, provide valuable opportunities for evaluation and refinement that can’t be done with diagrams alone. Once a prototype is functional, it’s ready to be “skinned” by the designer. Skinning is a term used by designers that means to add a design treatment on top of a working model.

With sites like Squarespace, Wix, and WordPress do I even need to care about this?

brian-miller-instructorToday Brian Miller is launching an updated and revised edition of his successful web design book, Above The Fold, aimed at helping web designers both new and old master the necessary skills to build a spectacular website. In honor of this occasion Brian has sat down with us to discuss the importance of wireframing and prototyping and why a “drag and drop” site doesn’t do it all. Welcome Brian!

Q: With so many “drag and drop” website creation services available to business owners and designers are wire frames and prototypes still a good idea for designers working within these programs?

There should always be a need for wireframes and prototypes. Wireframes inform the design team and prototypes inform the development team. Wireframes help separate the process of hierarchical organization from stylistic treatment. And prototypes illustrate user interaction and animation.

Working out functionality, hierarchy and design all at the same time is like trying to eat breakfast, lunch and dinner at the same time. Doable, but not recommended. Each task is discreet and requires undivided attention.

In my experience, these types of programs are perfect for making wireframes and prototypes. The output of these applications is well-suited for local (not over the internet) presentation of Web design ideas. The code they produce is rarely production-ready, especially for large scales sites — but they are improving.

Q: What are the advantages of creating your own website versus using one of the drag and drop sites, like Wix, Squarespace or WordPress?

It depends on who you are. If a big brand with an image to uphold and an experience to deliver to your customers then you have to have a custom site. On the other end of the spectrum, if you’re a small business or a freelancer tools like Wix or Squarespace can offer you an efficient means of getting online.

In either case, the fundamentals of clearly communicating your message is exactly the same. That’s what Above the Fold is about and that’s the value that designers bring to a Web project regardless of the technology being used for the implementation.

Q: Wire framing and prototyping your website are important steps to complete when designing and building a website and making sure it’s user-friendly. What are some of the most common things new web designers overlook when creating these frames and prototypes?

In my experience, new designers tend to think that the wireframe stage is a pre-design or sketching stage. And it is not. Wireframes don’t necessarily work out the layout of a page, they work out the hierarchy — what items are more important than others and how is that importance illustrated. Prototypes, too, are not design tools, they are functionality tools. Prototypes help developers and designers work out a piece of functionality so the design phase is more defined and thus more manageable.

Q: We’ve showcased a variety off different approaches for wire framing and prototyping on HOW over the last few years – from drawings to spreadsheets – what method do you find most helpful?  Why?

I find hiring a good information architect is the best approach.

Kidding aside, wire framing, when done properly, can be as challenging as designing and therefore it’s often helpful to have a specialist involved.
For smaller projects I tend to use the tools I’m most comfortable with. So I have an InDesign template created with object styles that help me quickly box out and frame up a layout.

Q: You’re very experienced in website design and layout – what are your top three tips for both new and old web designers alike?

1. Develop a thorough scope document and technical requirements spread sheet before beginning a project. It will help you and your client understand the project better and it will give you a document to measure success against when the project is complete.

2. Form a relationship with a developer you trust and never let that person go. Communication between a designer and developer is essential for bringing a Web design to life.

3. The real work begins when a site goes live. So many designers and clients (myself included) hold on to an old tradition of breathing a sigh of relief when a site launches as if it is the end of the project. Analyze, revised, deploy, repeat.

above_the_fold_cvrThe text on wireframing and prototyping provided above are excerpted from Brian Miller’s new book, Above The Fold: Revised Edition available now at MyDesignShop.com!