So You Wanna Make An App? Start Wireframing!

What is wireframing?

A wireframe is an architectural blueprint for your web-site. Before contractors go to work building the web-site of your dreams, they need a clear vision into what exactly you’re trying to construct. How many pages is your site going to have? Each page should have it’s own wireframe. At a much deeper level, a wireframe is very useful in determining how the user interacts with the interface. So as you conceptualize your web-app always keep the end user in mind.

How do I begin wireframing?

Well first, get some inspiration! Visit your favorite web-sites but this time really think about how those sites are laid out. Most of them probably have a universal navigation bar (nav-bar), a body, and a universal footer that includes contact information and all the links typically found in the nav-bar. Here’s an awesome tool called Wirify that lets you view any page as a wireframe. Try it out on your favorite sites.

Unless you have some experience using UI/UX tools like Sketch or Adobe Illustrator, your best bet is to either start with a pencil and paper or use this nifty online tool called Balsamiq. Balsamiq has a huge library of reusable components which you can drag and drop very easily to design your wireframes. Forget about things like colors and typefaces in the beginning, just focus on boxes. At it’s core, a web-site design begins with drawing boxes and then later these boxes will be filled with things like pictures, buttons, links, icons, maps etc… The navigation bar is probably going to be on every page of your site so it’s a great place to start! It’s just a rectangle with a bunch of links/buttons inside of it. Focusing on the nav-bar first will force you to think about all the other pages you would like your users to easily navigate to.

Next is the body of the page. Since you’re starting out on the homepage, make sure to clearly inform the user of what your site is. It could be a 1-3 sentence mission statement or a collage of images that illustrate what it is the user has landed on. Depending on your concept, the body could be broken up into many sections/boxes each containing pertinent information. Same as the nav-bar, start out with one big rectangle and draw smaller rectangles inside of it with labels that refer to what type of content you would like inside.

Lastly, design the footer. Sometimes the footer is just a bigger version of the nav-bar. It’s bigger because it might contain a contact form, a google map with a location marker and/or a quote. Think of it this way, after a user scrolls through your site and reaches the bottom you want to provide a way for them to continue the journey or you want to facilitate some kind of call to action. The last thing you want is a user scrolling to the bottom, losing interest and just leaving. Providing a bunch of options will help you retain attention.

simple-wireframe

What should I focus on when I’m wireframing?

Focus on user experience. If you show any one of your friends your black and white simple wireframe and they can’t understand how to get from one page to the next, you’re doing something wrong. Every good web-application has a flow to it and it’s almost impossible to get lost or not know where you are. If it’s an e-commerce site the flow is going to be designed to make the transaction process as simple as possible with the fewest amount of clicks. There’s this rule of 3-clicks that many companies have adopted, it states that your product(s) should never be more than 3-clicks away from the home-page. In fact, the fewer web pages you have the better. Usually, having a separate page just for user login is unnecessary; you can have the user login from any publicly visible page.

What kind of notes should I add to my wireframe?

If your wireframe is exceptional, which is rarely the case, any web-developer will review it and very quickly grasp what you’re trying to accomplish. Notes are great for letting developers understand what data you want to be visible on these pages and how a user is going to request certain data. Logged-in users will typically be able to view more information than non-logged-in users. When a user clicks a link that’s part of an accordion-like-element and that accordion section opens up, what data would you like to be rendered in that section? Does that data depend on other factors e.g. other users or time of day? Well placed notes could be very informative to developers. The more complex behavior your app exhibits the more notes your wireframes need. If you feel like notes are cluttering up your app, create a separate page(s) for notes.

Wireframes usually start out simple and could end up looking something like the sketch below, but it’s important to start out from a very high level perspective and gradually work your way down.

new-york-times-wireframe

 

Leave a Reply