Great Application Design Comes Before the Pixels
A couple weeks back I wrote an article titled 5 Reasons Sketching Wireframes in Groups is So Important. I explained the importance of wireframing on paper and why working in groups is so crucial to your app’s success. In this article I would like to present you with my process for successful wireframing. Just so we’re clear, there isn’t an absolute way to wireframe. Everyone has their own process when it comes to specific projects. This is my process I’ve constructed after years of experience in web design and development. Let’s first talk about the tools needed and then discuss the process.
The Tools
I have used just about every digital wireframing application on every device known and nothing compares to tangible tools. Applications are entirely too time consuming and I have become infatuated with detail, thus diverting me away from the purpose of being there. Here are my top five tools for wireframing in order.
- Sharpie + Printer Paper
- Jumbo Marker + Oversized Craft Paper
- Dry Erase Marker + Dry Erase Board
- Chalk + Chalkboard
- Paint Marker + Wall
You’ll notice a similarity with all of these grouped objects. The utensils are blunt and the surfaces are blank. There is no need for grids, dots or lines. Save that paper for your logo or icons sketches.
The Process
Whether I’m working alone or working in a group, I use the same process. Here is my ten-step process for wireframing success.
Step 1: Write Down Your End Goal
In one or two sentences state your goal with the app. Be as specific and short-winded as possible. This is the most important step as it will determine the app’s direction. If this changes, everything changes. Make sure to nail this down before moving forward. Here are a couple of examples.
Bob’s Bakery Website:
This application will portrait Bob’s Bakery as a fun, connected, brand for everyone to enjoy. The viewer will feel connected and in need of their products.
Mobile Weather App:
This application will provide the weather in the simplest way possible.
From these two examples you can see the applications are completely different. The first is a bakery website and the second is a mobile weather app. However they both have three things in common. They both use emotion to describe the application. Also they don’t use functionality to describe the product. This is really important when creating your app goal. Don’t get hung up on the details and functionality, we’ll be here all day. Use emotion to explain your application. Lastly, they both start off with “This application will…”, this ensures guarantee that your application will exist and acquire these characteristics. By starting this way, you’ve just brought your application to life.
Step 2: List Your Content
I like to refer to this step as puking on the page. I like to take three to ten minutes depending on the project and just write anything and everything you think needs to be in the app. I use sticky notes for this step. This is where features, graphics, copy, video, products, etc… go. Simply make a long list and understand that nothing is wrong, just write it down.
Then once you have a massive list together start organizing it. Categorize everything into sections. They don’t need to have specific titles but certain things will feel better together than others. Simply rearrange your sticky notes.
Step 3: Prioritize Your Content
After you feel you have your notes arranged accordingly, prioritize them by importance. Whatever feels most important goes on top and what feel least important goes on the bottom. Always refer to your main app goal when questioning importance.
Step 4: Turn Your Content into Shapes
We are now ready for our Wireframe tools. Grab your blunt object and approach the blank surface. From your list of prioritized content, start making shapes or blob of where you think this should go on the page. So each group turns into a page. Remember we read left to right, top to bottom. If you’d like, you could place your sticky notes in the areas. If not, it doesn’t matter, just make sure to label it.
Start with your most important categories and then move down the list. If we are dealing with a web application like Bob’s Bakery, never start with a home page layout. That should be the last thing you complete. The home page should be a synopsis of the application, especially if it’s content heavy.
Step 5: Make More Options
Don’t be afraid to make multiple layouts per category section. Maybe it all doesn’t go in the layout, maybe it tiers down. Give yourself options. If it helps to give yourself a time limit, then do it that way. Create a small deadline, say 10 minutes, and just puke wireframes. Pay no attention to detail, simply communicate and document your idea.
Step 6: Narrow Down Your Options
This step works great when doing this in groups. Everyone could make their own layouts and then meet up after 10-15 minutes depending on the project and discuss their options. You will find more often than not, individuals will come up with the same layouts. This immediately flushes out bad UI hence a better UX. By then end of this step you should decide on the direction you want to go in.
Step 7: Document Your Process
Don’t throw anything away just yet. Now we have a bunch of content and wireframes we don’t want to use. Make sure you document them though before getting rid of them. Document each one of your steps and your final layouts before proceeding to the next step. Take photos of the work as they happen.
Step 8: Break & Revisit
At this point we’re ready to stop and take a break. Change your focus for at least 15 minutes before revisiting the project. This could be something like getting a cup of coffee or calling it a day. I personally like to exercise at least once a day to change my thought process. There is something about elevating your heart rate that really alters my focus. It’s almost like a forget about the project. Then when I go back to it, I’m fresh and will immediately know if I or we made the right decision when we narrowed down our options. If something seems off simply look back into your documented process.
Step 9: Create a Final Rough
Again using the same tools recreate your final decided layouts. Spend a little more time on it then your original design. Don’t be bothered with detail just make it more legible. At this point you should have rough final wireframe(s).
Step 10: Get Digital
Now it’s time to crack open an app of your choice and layout your wireframes. This could be Photoshop, Illustrator, Balsamic, Mockingbird, Framer or any other wireframing app. Again, document the process and get ready to start the development process.
Conclusion
By having a clear vision of what you want the app to be, we can easily go through the wireframing process step by step and flush out the unnecessary content and layouts. I strongly encourage completing this ten-step process in a group rather than by yourself. If you are building the app yourself, simply buy your friends lunch and ask them to take part as you value their opinion.
Another valid point I would like to leave with is this. The majority of designers are under the assumption that the constructive process of an app is like that of a painting. You take your time and place every pixel in place, then when you launch the app you think you’re done. This is unfortunately on the contrary, you’ve just begun. Yeah you might you nailed the brand identity, yeah the multi-device functionality is there, but the user experience has just started. Now it’s time to tweak and tweak until it’s this amazing piece of digital nector that truly fulfills your app’s goals.
Great application design happens before the pixels and after launch, everything in between is just a manufactured process.
by Mat Helme
via (http://blog.teamtreehouse.com/great-application-design-comes-before-the-pixels)
