Getting Started In User Experience Design: Tools of the Trade - Sarah Doody
Image Image Image Image Image
Scroll to Top

To Top

Getting Started In UX

Getting Started In User Experience Design: Tools of the trade

Get my weekly UX Newsletter

A lot of people ask me what tools they need to learn in order to get started in user experience design. The truth is, I really don’t like this question! There’s a misconception that knowing a tool will somehow elevate you in the job market.

It doesn’t matter how well you know how the tool. What matters is what you do with that tool. What matters is how you use that tool to communicate ideas, to rapidly test concepts, and to help create a story that everyone on your team can participate in and contribute to.

My career started when someone gave me an early copy of Dreamweaver and Photoshop and told me to make a website about something I was interested in. So, I made a website about a fake ski resort. Though seemingly a silly exercise, it was fundamental in my understanding of how design and technology must work together. In doing that little project, I remember being less intimidated by actually learning the software than I was at deciding what that website was going to be about — the content, the tone, the design (I wish I still had a copy of it, but it’s long gone on a 3 1/2 disc somewhere!)

Whenever I start a project, the tools I use really depend on the nature of the project and who I am collaborating with on it.

For example, if I am collaborating closely with a developer who I know well, I may just do paper sketches of key userflows and pages and then jump right to visual design. These paper sketches of userflows and wireframes are often enough to covey the idea to the developer — giving them enough information to work on the backend while I get started on the front end.

However, if the project has distinct deliverables and phases, then I normally use some combination of the following tools:

Sketching
I can’t stress the importance of sketching enough. Sketching is critical to the process because the low friction of sketching allows you to really focus on the problem and solution rather than getting distracted by colors, styles, and other details that accompany a software program.The excuse of I’m not good at drawing is a total copout! We’re not looking for portrait quality here. Everyone can draw a box, lines, and squiggles to represent text.

The purpose of sketching is to get as many ideas out of your head and onto paper as quickly as possible. Sketching is about a brain-dump of all the possibilities that are in your head and assessing the viability of those ideas.  Sketching should also be accompanied by conversation. You should be talking about the sketches using them as a tool to aid in collaboration with fellow designers and the rest of your team.

Another value of sketching is that because of the accessibility of it, it reduces the intimidation factor that some people have towards participating in the brainstorming and ideation process. If possible, try to involve other people working on the project (stakeholders, clients, technology people, etc) in a sketching session as it provides a simple way for them to communicate ideas that might otherwise be difficult to put into words.

I recently found an app that I am in love with. Paper by FiftyThree is an amazing digital sketchbook that mimics a Moleskin notebook. To get the most out of Paper, you should get good stylus. The beauty of Paper is that your sketches are easily shareable and you can erase things (when I sketch on physical paper I always use a pen or a sharpie, so there is no undo!) I also love that Paper saves me actual paper and I don’t have to have folders of sketches stored at my workspace. There certainly is something special about sketching on physical paper, but the benefits of sketching digitally are slowly converting me to a digital sketcher.


Wireframing & Userflows
The main program I use for wireframing is Omnigraffle. Why Omnigraffle? Mainly because it’s what I started using over a decade ago and after using it for that long I know a lot of keyboard shortcuts that allow me to be very quick using it.

I also like Omnigraffle because there are a lot of interface templates available (called stencils) that allow you to just drag and drop elements such as buttons, video scrubbers, image placeholders, form fields, and such into your wireframe. When I started out, I don’t think there were stencils (or if there were, I didn’t know about them) so I used to create all my buttons and interface elements from scratch. Check out Graffletopia and Konigi for great Omnigraffle stencils for free and purchase.

I am certain that I probably don’t use 50% of the features in Omnigraffle though. I am not good at using magnets. I don’t know what outline mode is for. And I can never get diagram layout to work. I also have never made use of Omnigraffle’s Actions which allow you to link certain elements to other canvases, run scripts, show or hide layers, or link to an external website.

This is proof that it’s not about how well you know the tool, it’s what you do with it.

Don’t spend a lot of money taking in depth training courses for how to become a master at Omnigraffle. Chances are, someone will teach you how to use every single button in Omnigraffle. But then, when it’s time to actually do a project or client work, you’ll only use half of what you learned. And likely you’ll discover a lot of stuff you didn’t learn.

I have also experimented with creating wireframes in Keynote. The reason I started using Keynote was because I one day I discovered the motiona and animations that you can apply to click actions in Keynote. I also discovered many templates for Keynote that I found useful. I haven’t continued to wireframe in Keynote. But, if you don’t want to purchase Omnigraffle, then Keynote is a great alternative.

I’ve also experimented with Balsamiq but honestly I find the hand drawn look of Balsamiq distracting and unprofessional. I would never wireframe something in Balsamiq and show it to a client. I understand that hand drawn look is likely there to help people focus on the screens and less on how “pretty” the wireframes look. But I simply can’t stand looking at the sketchy design of Balsamiq wireframes. It’s a massive pet peeve of mine. This is just a personal preference, I’m sure many amazing and successful products were first brought to life with Balsamiq.

Update (November 4, 2013): I just learned that Balsamiq has a option that allows you to create wireframes and diagrams without the sketchy look. Good move on the part of Balsamiq. If I were going to use Balsamiq, I’d only create documents with this option! 


Visual Design
As I said earlier, I started out learning Photoshop on the very first project I ever worked on. Similar to Omnigraffle, I am sure I only know about 50% of the features and functionality in Photoshop. But, Photoshop is not just for designing screens of websites and apps. There are lot of features in Photoshop that would never ever apply to application and website design. Therefore, don’t waste your money taking courses on how to master Photoshop because again, you’ll waste your money and end up learning a lot of things you’ll never use.

Instead, I recommend getting a solid understanding of layers, layer groups, color profiles, saving preferences, grids & rulers, and basic grid concepts. These will all make your work in Photoshop more organized, manageable, and representative of what it will look like in the users browser. I’m the type of person who likes to reverse engineer things. So, when I started out I would open up the Photoshop files of other designers I worked with (and whose work I admired) and would see how they organized all their layers, how they named layers, and how they were able to acheive certain styles on images, text, etc. If you can’t ask a friend or colleague to see their Photoshop files, then buy one! There are plenty of places where you can buy design templates to use — check out Creative Market, BlazRobar, or Themeforest.


Prototyping / Making Wireframes & Design Interactive
There’s a lot of value in making a clickable prototype. If you don’t have the technical knowledge to code your design, don’t worry. There are a lot of tools available to help bring either your wireframes or visual designs to life.

Earlier this year, I discovered InVision which has completely revolutionized my workflow. InVision allows you to import screen designs or wireframes, organize them in whatever order you like, and then create hotspots on each screen and link those hot spots to other screens or other areas on the screen. This allows you to make a clickable prototype without needing coding knowledge. This is very helping in helping yourself or clients see and focus on how the design functions and not just how it looks.

InVision also makes the process of gathering feedback much more organized and simple. This is the biggest benefit for me so far. Instead of talking through designs or wireframes with a client in person, via a screen share, or over email (the worst, dreaded way to review anything) all the feedback can be easily centralized in InVision. The client can add comments not just to a specific screen – but they can point to a specific area on a screen and add a comment right there. So if they don’t like a button, they can comment on the specific button rather than say “the button that is midway down the page at the right below the image.

Another company called Stand In recently launched and is similar to InVision. I haven’t used Stand In so I can’t comment on it’s features or ease of use. But, I have been impressed with what they say they are going to do. So, I plan to test them out in an upcoming project.


Troubleshooting / Quality Assurance

If you do the visual design and follow a project through launch, one tool I highly recommend is the Chrome Developer Tools plugin which will allow you to inspect the code in greater detail than just a normal “view source” mode. With Chrome Developer Tools, you can live edit the code and see how for example CSS changes would affect the site. Since I have coding knowledge and understand CSS, I find this tool invaluable. If I see problems with the site, I can identify the exact CSS class and styles and send that to a developer rather than trying to describe the problem and solution.

That’s pretty much it in terms of the tools I use in my design process.

One thing I didn’t mention how I organize features and such. This is done in the very non glamourous world of Google Spreadsheets or Excel. I despise project planning programs because I find them too feature heavy and I spend more time trying to wrangle the program than I do actually doing work on my feature planning. 

If you have questions about my process or specific tools, leave your comment here. I’m happy to answer your questions and help you understand why I use the tools I do.

 

 

READ THIS NEXT:
Crafting A Perfect Pitch & The Role Of Personality In Business