Proto-Framing: The UX Of User Experience

what_is_ux.jpg

By Brandon D. Finn (Founder, Designer Finn) A lot of people tell me how much they love Balsamiq and Mockingbird for wire framing and mockups of page designs and workflows. But none of them are designers.

I can understand how someone who is more used to a trackpad than a pentab would feel more comfortable with a wireframing tool than Photoshop (PS).

But for those of us who live and breathe the Creative Suite (CS) it seems like an extra, and unnecessary step.

If I want a rough mockup, I’ll just create a collage of snipped jpg’s in PS. And if I want it rougher than that, I’ll use pen and paper. To me, wire framing a concept outside of the CS is a completely unnecessary step, and in fact, can be a hindrance when trying to move that concept into PS and Illustrator where the real design work begins.

Here I will give you a little wireframe of my own -- outlining the process and tools I use as a designer from concept to completion of a UX design.

For the purpose of this article I will be talking mobile apps -- but I use the same foundation for work on software, web and infographics.

The Tools Of A Designer

  • Software -- I will assume you already have the Adobe Creative Suite. If not, get Illustrator, Photoshop and DreamWeaver. If I had a choice, I would remove every other program off my computer before those three.
  • Pen Tablet -- I use a Wacom Intuos3 3x5”. It is the smallest and cheapest of Wacom’s high-end tabs. Remember it’s not the size, but what you do with it, I find that with the added pressure sensitivity of the Intuos, the smaller tablet size is not an issue. The price tag is nothing compared to the time you will save, and the added joy it will contribute to your design process -- a must have for any professional. I got mine for $100 used on Amazon (remember that if you do buy it used, make sure it comes with the stylus, they can cost $100 to replace).
  • .zip -- iPhone Retina GUI (PS format) from teehan+lax is a free collection of iPhone design elements. It is an incredibly robust tool when creating mobile designs. Everything is the right size, the right shape and looks great.
  • Paper -- iPhone Idea Sheets. Leave it to the Japanese to make the most awesome FREE iPhone paper mockup template ever! Grids are soo 2008, it’s all about the DOTs!
  • Pen -- Pilot G-2 05 is the greatest pen ever made. It is gel ink, effortlessly glides on the page, doesn’t fade, doesn’t smear (except for like 0.5 sec after you put it on paper) it can even survive a light drenching with water. Perfect width in your hand and very comfortable rubber grips –- trust me, just get it.

Now that you have your utility belt fully equipped -- it’s time to get down to business.

Step 1: Pen and Paper!

Print out 4 copies of the 5x2 iPhone idea sheets. This is where it all begins. Don’t make it pretty, and don’t be too worried about relative sizes, just get your ideas down on paper. At this point, you may start having ideas about colors, textures and selective placement of drop shadows -- forget it! In my experience, those ideas rarely ever make it past the first draft in PS. All those elements are visual, and this is a time for workflow.

Keep it messy, keep it moving. Get yourself in a flow and start wasting paper. I like to look at my favorite apps and get inspiration -- Also, I especially look to the iPhone itself, perhaps the most overlooked UX in mobile design is that of the iPhone. This amazing device is one of the most intuitive ever made, and hugely familiar to its users -- the less your users think about your design, the better.

Step 2: Camera Time!

Pull out your cell phone and go through your sheets and take pictures of all the keepers. This will allow you to organize them in the correct order without pulling out your scissors and making a mess.

Step 3: Email Those Pics!

First, email them to yourself so they are safe and sound, and so you can access them on your computer and cc any interested parties. Resist the urge to post on Facebook.

Step 4: Drag & Drop!

Download all those pics and get organized -- sort them, stack them, get your flow on. This shouldn’t take too long since you already know this part.

Step 5: Unzip and Get Ready for Action!

Open up that GUI file from teehan+lax. This file is a bit scary at first, luckily everything is very nicely organized into folders and in order, top to bottom, left to right, as it appears in the screen. Start with the basic iPhone 4 folder, and drag that into your new file. From there grab, the buttons and bars that you will need for your first page.

Step 6: The Golden Rule

There is one more piece of advice I have, always do the easiest thing first. It is so easy to spin your wheels on some difficult and frustrating task. For many of us, what is even harder is to drop it and move on. There are a lot of intangible aspects to working in design, and the more frustrated you get, the more inspiration will elude you. We didn’t get into this industry because we wanted to suffer, we got in it because we love design and we love the process of creation. Remember that, and keep it fun. If you hit a wall, leave it be, move to the next page, and come back to it. You don’t need to create the design in the same order as the workflow. Be nimble, and don’t get stuck in the sand.

Editor's note: Got a question for our guest blogger? Leave a message in the comments below. About the guest blogger: Brandon Finn is the Founder at Designer Finn and the lead UX designer at Reppify, a SaaS company offering social media analytics in the HR and Recruiting space. Brandon is a former investment banker turned UX designer, eschewing the trappings of finance to unleash an unrestrainable desire: answering the eminent call for a champion of pronounced elegance and intuitive experience in the sculpting of our emerging digital environment.