The design industry is once again enjoying a renaissance. Designers are crossing over into product, research, bleeding into highly-visible marketing roles, and even taking on leadership roles, giving birth to the full-stack designer.
Full-stack designers, generalist designers, and full-service designers are all designers that are adept at executing projects across a bevy of genres: traditional print and collateral, exhibit, product, branding and identity, etc. Another common buzzphrase is “T-Shaped Designers.” We still have our preferences, and specific strengths, but in a pinch we can often jump in and assist where necessary.
That being said, the tools out there are plentiful and quite frankly overwhelming. In the last 13 years of my career, I’ve used dozens of pieces of softwares to implement a range of projects both on and off screen. For your enjoyment, I’ve narrowed the list down to what I have been using day-in-day-out (as of right now).
Pro tip for recent grads: If you’re trying to figure out which softwares would be most helpful to know for your job hunt, just do a quick search for job roles you are interested in, read the job requirements and plug everything into a spreadsheet. A quick research of 15 or so job postings will give you a good idea of what you should be well-versed in.
TLDR;
- Wireframes (Balsamiq, Figma)
- Design (Sketch, Adobe Illustrator, Adobe Photoshop, Adobe InDesign)
- Prototyping (Principle, Figma)
- Hand-Off (Zeplin, Figma)
Wireframes
Balsamiq
Balsamiq is a fast and easy wireframing tool to help you get out of your own way. You don’t need to waste any time developing assets in order to get it done quick and dirty. It’s extremely low fidelity, but when communicating your vision this often helps. By limiting visual design, top stakeholders are forced to concentrate on UX.
Balsamiq comes with this weird sketchy look (which my design brain does not enjoy), but it also comes stock with a cleaner traditional wireframe look. The thing that’s missing for me is the lack of collaborative abilities. But this is a perfectly fine product for single-UX designers.
I’ve also found this product to be more useful for product design and less-so for website design. For website wireframes I still prefer Figma.
Figma
Figma is a relatively new piece of software to market. This is largely used as visual design software, but I like the collaborative elements of Figma, so if you have multiple real time contributors, this is worth looking into. The drawback: You have to develop your own wireframing assets OR find ready made ones.
Major bonus points for Figma recently releasing their prototyping capabilities a few weeks ago.
There’s a bit of a learning curve. While it *looks* like Sketch and in a lot of ways *feels* like Sketch, it isn’t Sketch. So keep an open mind and don’t walk into this expecting Sketch + collaboration.
Design
Sketch
At this point Sketch is nearly industry standard. It’s lightweight, inexpensive, and flexible. The open plugin development extends the functionality of this piece of software to suit your needs (almost) perfectly.
Combined with their extremely flexible Symbols function, Sketch lets designers swap out elements and override elements in a pinch. For more information about Symbols, please visit this link.
The drawback with sketch is their somewhat awkward vector pen tool, and extremely limited bitmap editing skills. This tool is built predominantly for UI design (think Adobe Fireworks, but better), so please just use the correct tool for the job purpose.
Bonus: here’s a short list of my favorite plugins
- Distributor: https://github.com/PEZ/SketchDistributor
- Sketch Runner: http://sketchrunner.com/
- RenameIt: https://github.com/rodi01/RenameIt
- Duplicator 2: https://github.com/turbobabr/duplicator
- Sketch Mate: https://github.com/getflourish/Sketch-Mate
Adobe Illustrator
Maybe it is because I have been using this piece of software for the last 13 years of my professional career, but I have yet to find a vector drawing tool that works as well as illustrator does. I mostly use illustrator to draw icons, charts, and technical diagrams.
There is a very big learning curve with Adobe Illustrator, but once you grasp the basics you’ll come to learn many of Adobe’s products learn the same way. In the past year or so, Adobe has aggressively stepped up their efforts to allow users to export production-ready assets (svg, pdf, @2x, @3x, etc.) in a pinch. I would argue this tool is one of the crucial Adobe 3 tools to know (the other two being InDesign and Photoshop).
It is worth mentioning designers should absolutely avoid building UIs in Illustrator as the files are extremely heavy. In the blink of an eye your file can grow over 1gig, making hand off extremely messy.
Utilizing any Adobe tool should generally include utilizing a very strict folder structure and workflow to ensure hand off between designers is seamless (example: always package your files).
Adobe Photoshop
There is a reason Photoshop has been an industry standard. Photoshop is best used for bitmap editing — it is a photo editing software. I highly advise you use Photoshop with a degree of restraint. Create vector artwork in vector programs. Please don’t built UIs in Photoshop, don’t torture your developers.
Adobe InDesign
Another good ol’ staple from Adobe. This is mostly used for print work. While this is typically not super applicable to UX/UI designers, it is really important for marketing designers who are developing collaterals (note: For packaging design such as boxes or large format — use Illustrator).
If a company is not leveraging a specific tool like Powerpoint, Keynote, or Google Slides to create presentations, InDesign is typically every designer’s de-facto presentation maker. InDesign offers fantastic design control (especially when you combine it with InCopy — which keeps copywriters from changing your design around too much), but lacks real-time collaboration.
Prototyping
Principle
The most lightweight timeline-based prototyping tool out there right now with the smallest learning curve. I have experimented with quite a few prototyping tools, but have yet to find one I can operate with this much speed.
There are some drawbacks, namely, the inability to export any usable code. However, you can export gifs (not really recommended), .mov, and apps. Bonus: I tend to export at .mov, then import it back into photoshop to make gifs.
It can also be a bit challenging if you are working across multiple artboards and have to swap some instances of elements and not others. This is, after all, a prototyping software — not a motion graphics program per say. Again, use the right tool the job. If you are doing pure motion graphics, opt for Adobe After Effects
Hand-off
Zeplin
You really can’t go wrong here. With Sketch’s tight integration with Zeplin, designers can safely hand off Sketch documents for development without fear of developers moving things around! Define text styles, colors, and allow devs to export assets as you like. Draw back? You have to decide and manually select which items need to export.
Figma
Figma has the benefit of being a triple threat: design, prototype, and hand-off. You can share files with your devs, have them define which assets they need to export, all without writing access!
This list is, by no means, a complete list of everything I use on a daily basis, but it covers approximately 90% of my day-to-day interactions. What are some of your favorite softwares?
