Essential skills for the new UX designer (Part 1)

So you are bored of your current career. Having heard a little about this thing called "User Experience" you want to dig deeper and start building a skill set. Having done the same thing myself here are five areas that I believe are essential over the long term. The first part looks at how to get your idea out of your head. The second will delve more into realizing it as a working system.

Sketching

The first major asset of any designer is being able to quickly take ideas from one's head and dump them onto paper. The goal is explore as many possibilities as you can quickly and cheaply. Don't focus on getting the specifics nailed down. If inspiration strikes run with it and try all kinds of variations. The worst case is that you end up throwing them in the garbage after five minutes investment.

One key to successful sketching is the right tools. Personally I prefer using lined graph paper but other people swear by these Moleskine notebooks. Contrast and color improves creativity - don't be afraid to go beyond a basic blue pen or graphite pencil. Get a set of colored pencils, fine point pens, or if you really want to keep it low fidelity a set of Sharpies. Choose whatever you are most comfortable with and what fits your budget.

To keep things organized I prefer to use file folders. Come up with a system that works for you to keep track of the ideas you are throwing out there. Don't toss the ideas you think are terrible or don't like. Store them for later inspiration - you may discover that what works in your mind is a total failure when other people try to use it and vice versa.

Wireframing

The next step once you have a picture of what you want is to create mockups. People swear by many different tools and every week brings something new. Here are some recommendations that I have personally used and can be effective for any budget.

Microsoft Powerpoint ($49 to $99)
Keynote ($69 for three licenses)

At the low end of the spectrum are presentation software packages like Powerpoint or Keynote. Using a familiar interface you can quickly create templates, add links between pages, and share them easily with others. With a shallow learning curve compared to more narrowly focused products you can be mocking up designs in very little time. Also with Microsoft Office and iWork being fairly ubiquitious chances are that you might even have a copy already. That means your starting cost is "free" compared to buying another program.

There are limitations however. As far as I know it is not easy to create annotations. A second drawback is the ability to move forward. You can export to HTML but it won't be effective for building on. Overall though using a presentation tool like Powerpoint or Keynote for wireframing is no different than creating a slide deck for an upcoming talk. Once you have created a few master templates and widgets you can fly through screenshot after screenshot.

Microsoft Visio ($249.99)
OmniGraffle Pro ($199.99)

A little higher up the food chain are programs like Visio and OmniGraffle. These gives you more flexibility when it comes to creating templates. In fact if you search around the web you'll discover that people have already created libraries for working with the most common platforms (HTML, Android tablets, iOS devices, etc). An extensive list of options is available from Smashing Magazine.

The advantage to using a piece of software explicitly designed for diagramming is that you can snap components into place like legos. In addition it is relatively easily to create designs that give you plenty of space for annotations. This makes it easy to create elegant looking deliverables which a client can immediately understand. Having used Omnigraffle extensively for a while the biggest drawback might be the lack of dynamic features. You aren't going to export working prototypes with animations. In fact once you get past a medium fidelity level of formatting you will probably want to start exploring other options.

Adobe Creative Suite 5 Design Premium ($499 and up)
Axure RP 6 ($589)

At the high end of the spectrum are the heavyweights. I highly recommend investing in the most recent version of the Adobe Creative Suite that you can afford. Though the price tag is daunting there are often deals to be had on eBay or through academic licensing agreements. Likewise Axure has a high initial investment but offers a 30 day trial. In addition if you happen to be studying HCI, User Experience, or something similar be sure to check out the Good Student Program for a free license.

The Adobe Creative Suite has long been known as the indispensable toolkit for anybody working on the web. My personal preference is for the Design Premium bundle which includes Dreamweaver, Illustrator, InDesign, Flash, and Photoshop. For doing wireframing I tend to lean towards InDesign although I know people who swear by other applications in the suite. With a rich set of layers, effects, linking, and control over the visual styling it has everything you need to create professional looking designs. You can easily generate dynamic PDFs to share your ideas with the world.

My current preferred weapon of choice is Axure. Version 6 recently came out of beta and provides everything you need to create wireframes, manage projects, and export a basic scaffolding for the eventual prototype. Among its best features is the ability to control the "sketchiness" of an interface. If you want to convey a rough cut blue sky idea slide you can do so. As you refine the design you can scale it back until you have a pixel perfect presentation of the final goal. Another powerful aspect are dynamic panels. Don't stop at basic dropdowns, text boxes, and menus. Let your imagination (and technical skills) be the limit as you design sliders, accordion forms, lightboxes, and whatever else your imagination dreams up.

Conclusion

I've obviously glossed over a huge number of alternatives so don't be afraid to keep looking. If you have no budget there are a number of free options such as the Pencil Project and cloud based services like Mockingbird. Find the one that works best for your situation and grow from there. Even a stack of printer paper, some markers, and a conference (or dining room) table might be the launching point for a highly creative final product.

The process of getting ideas onto paper and into the computer is the first step to being a successful user experience designer. The faster that you can turn around possibilities the quicker you can identify which ones will work and which are total failures. Catching a flawed design early in the process will save considerable time and money compared to scrapping a system just about to go into production. Don't let your mistakes discourage you - learn from them to improve the final experience for everyone.