Design for Developers, Part 2: Tool Time
A little while back I got a new bike. I’ve long had the dream of becoming a bike commuter, but knew virtually nothing about what kinds of bikes were on the market, nor much about biking in general. I popped into a few bike shops to talk to the pros, but left feeling dismayed by the cost of entry, both knowledge-wise and price-wise. Typically I love a challenge. Figuring things out is totally my jam. So I was a bit confused as to my aversion to all of the bells, whistles and gears and gear that seemed to be necessary.
After giving it some thought I finally realized that I just wanted to ride — not train for a triathlon. I wanted to zone out and look at the scenery, not constantly wonder if I’m in the right gear. I finally hit up craigslist and nabbed a banana yellow, early 80’s road bike with old-style curly handlebars and one solitary gear. It’s not light-weight carbon fiber anything, and when I go up hills I just have to grit my teeth and pedal like hell, but I wouldn’t have it any other way. My bike may not be the perfect tool for the job, but it’s the perfect tool for me.
There’s no such thing as the right tool for the job…
…But there is such a thing as the right tool for you! Like bicycles, there are many different design tools on the market. But using the most expensive tool with all of the bells and whistles may not help you become a better designer. I’ll be honest and say that designing is hard. Learning to design is harder (but most things worth doing are, right?!). I read a blog post a while back that I think about a lot. It describes how humans have a finite amount of cognitive resources. Why use up cognitive resources figuring out how to use an extremely complex design program when you can use those limited resources to solve the actual design problem. That’s what’ll make you a better designer.
Finding the right tool for you
Ultimately it’s up to you to find which is the right tool or set of tools. Here are an assortment of design tools available, along with characteristics which may help you decide which tools work for you.
Pen and Paper
Some of the most talented and prolific designers I know of spend much of their creative process on paper. Even for things like web and UI design, doing quick sketches on graph paper can go a long way in figuring out what works and doesn’t work for an interface — long before it gets coded.
- Beautifully simple
- Go from idea in your head to idea you can see in like half a second
- Inexpensive
- No toolbars, help menus, or tutorials to speak of
- Introduces an extra step, since it at some point your work needs to be digitized
Photoshop + Illustrator
These are the behemoth industry standards. There are tons of resources out there to help you learn to use these tools, but in truth take years to master. They’re great for bringing your ideas from sketch to high def finished product, but may not be ideal for the brainstorming phase until you get very comfortable using the programs.
- Huge and complex
- Go from idea in your head to idea you can see in…usually at least a few minutes.
- Moderate to expensive, depending on which plan you choose
- Great to know if you’re looking at adding design to your resume
- Since they’re so widely used, they’re helpful to know if you’ll want to collaborate with other designers
iPad Pro + Stylus
To be honest, I’ve yet to try this combo. I’d love to hear from people who have. This article seems to imply that they could be used as a natural extension of existing established workflows in programs like Adobe Photoshop and Illustrator. There are no shortage of drawing apps to try for ipad pro, but in my experience you’re far better off trying the more established, wider-used products (like Paper by FiftyThree and Adobe Photoshop Sketch) since community and support will be extremely useful to you as you learn a new skill.
- Depending on how you use it, it may be hard to escape complexity with this choice
- Portable and easier than a laptop to capture ideas on the run, but still not as effortless as busting out a sketchbook when an idea strikes.
- Really quite pricey
- Fun. Seriously how fun is it that you can draw directly onto the screen?
Balsamiq
This program was introduced to me by a non-designer. I probably wouldn’t have gravitated toward or recommended it otherwise, but I witnessed it as being a tool a non-designer could easily use to bring immensely creative and design-focused ideas into existence that he struggled to translate into words or onto paper otherwise.
- Pretty darn easy to use
- You won’t feel like you’re starting totally from scratch, since it enables you to pull (or rather drag and drop) from a huge library of UI components.
- Since all the things are readily available to drag onto your canvas, it can be tempting to use all the things in your design.
- Moderately priced
- It’s exclusively a wireframing tool, so it’s lo-fi. At some point hi-fi design decisions will have to be made, whether in code or by utilizing another design tool.
Sketch App
This application seems to be growing in popularity and is pretty widely used. For a design beginner it can seem fairly complex, but the complexity in this case is the result of an incredible number of features that all make web/software-specific design a lot easier and more efficient.
- I could see it being complex and overwhelming for a non-designer, but they seem to have a fair number of learning resources.
- Complex at first, but could result in incredible efficiency once it’s mastered
- Moderately priced
- It may not be the best tool to just cut loose and brainstorm
HTML & CSS
There’s nothing that says you can’t just dive in and design with code. In fact, you may frequently find yourself in the position of re-designing an existing project. Just like dedicated design tools provide a blank canvas, so do browsers. So much of what you can achieve in a design program can be achieved via straight code — shapes, positioning, typography, color. Plus you get the added benefit of testing and using your design in the wild, right out the gate.
- Utilizes skills that you may already have
- You get to skip the static mockup step, which can make it a very efficient choice
- May be tempting to just go with something because it’s built, vs. taking it thoughtful design process.
- It’s basically free, since you’re using the tools you already have
What are your teammates and peers using?
If you work with other designers, it may be useful to ask around to find out what common design programs and workflows others in your circle are using. This could be helpful for the sake of getting targeted mentorship, as well making potential collaboration more efficient.
What’d we forget?
There are so many design tools on the market. What’s worked well for you? Can you think of any great design tools we haven’t mentioned? Tweet at us and let us know!
