Throughout our UI / UX Design careers, we’ve explored many tools to help us create more efficiently, more painlessly, and more beautifully.
We have developed a love for a multitude of tools, but there are a few that have really stood out to us.
If you want to save on time, money, and pain, you should consider these tools.
Here are seven of our favorite UI and UX design tools that we just feel like we can’t live without.
Website: http://www.colorzilla.com/chrome/
Price: Free
Zander:
I can’t tell you how many times I’ve found some amazing designs on the internet and wanted to find the exact colors to use for another time on another project.
Well, Colorzilla has been perfect for plucking those colors whenever I want.
Whether it’s on Dribbble, Pinterest, Google, or whatever, it’s been a faithful tool for the past multiple years.
I simply click the ColorZilla icon in my browser’s toolbar, choose “Pick color from page,” and choose the area where I want the color.
The nice thing is that it automatically copies the color’s hexadecimal number for me to my clipboard once I’ve clicked on the color.
This extension is free, and it’s available on Chrome (which I use) and Firefox.
Website: https://www.sketch.com/
Price: Free to start, $100/year (unless you don’t want continual updates, in which case it’s a one-time $100 payment)
Zander:
For anyone who has been a UI or UX designer for a while, you’ll instantly know why we’ve chosen this tool as a favorite.
Sketch is the bread and butter for us because it’s an easy-to-use vector editor specifically made for designing user interfaces, or UI’s.
Kind of like how Photoshop is made for photographers, Sketch is made for UI and UX designers.
At least, that’s how I usually describe it to people!
From creating artboards and designing layouts to picking colors and choosing typography, Sketch is a great place to start your design journey.
Especially if you’re planning on going into UI / UX design, this will be a tool you’ll need to know because it’s practically an industry standard by now.
You can try Sketch for free, but it’s not too expensive to buy if you don’t get the continual updates.
I was able to get it at a 50% discount while I was a student, which you can find here.
Website: https://sketchicons.com/
Price: Free
Lydia:
This plugin is amazing if you’re a designer who works on a variety of projects that all need different kinds of icons!
Don’t resign to uploading them one by one - upload them ALL at once using this plugin. It’s so much easier to create libraries of icons.
The best part is you can adjust certain settings before import - size, color, and not to mention automatically converting them to symbols.
Website: https://www.invisionapp.com/
Price: Free for 1 prototype, $15/month for 3 prototypes, $25/month for unlimited prototypes
Zander:
If you want an easy, quick, prototyping tool that many companies will recognize (if you put it in your resume), you should try InVision.
It’s used by Airbnb, Amazon, HBO, Netflix, Lyft, IBM, and more.
It’s also used at the company I work at right now.
The reason for its popularity is because it's so simple to use.
You just upload static mockups or comps from your computer to the website and drag to make buttons that leads from one mockup/comp to another.
You can even add comments to each mockup/comp with the click of the button.
InVision includes a public (or private) link to your prototype that lets teammates or stakeholders comment anywhere within the project.
If you’re still not sold yet, there is a way for developers to view your prototype and inspect each element within its pages (as long as you have imported through Sketch, InVision Studio, or Photoshop).
For example, a developer will be able to see the width, height, x-position, y-position, font-type, color, etc. of a button sitting on your product page.
This will save you so much effort and headache when it comes to handing off your designs.
Website: https://www.invisionapp.com/craft
Price: Free
Zander:
Craft is a Sketch plugin that was created by InVision for multiple purposes. It lives as a vertical toolbar on the side of Sketch’s interface.
And I have to say–it’s a tool that’s very hard for me to live without.
First off, Craft will let you directly upload your artboards to InVision projects. So if you use InVision, that should be reason enough.
Second, it lets you create simple prototypes directly on Sketch.
Third, you can directly upload components or symbols that you share with teammates onto your artboards.
Fourth–and this is one of my favorites–you can instantly replace text in your artboards with real words in multiple topics.
For example, if you want to quickly replace a text box’s Lorem Ipsum (ie placeholder text) with people’s names, like Jerry Conner or Sandra Wicks, you can do it with a single click. As a matter of fact, you can replace many textboxes at once.
You can also do this for headlines, descriptions, articles, and more!
Fifth, you can replace shapes with free stock photos without having to leave Sketch.
This is especially convenient when finding filler images for quick mockups. I can’t tell you how many times I’ve done this.
If any of these five reasons appeal to you, I encourage you to check this tool out.
Website: https://zeplin.io/
Price: Free (to start)
Available on Browser or Web app.
Zeplin is the perfect middle ground for designers that don’t fiddle with code, but want to provide more accurate specs for their developers. I’ve found it more accurate and less clunky than Invision’s inspect tool - it’s lightweight, straightforward, and easy to collaborate with.
Although there is no prototype functionality, designers can set up projects based on device type (IE Web, iOS, Android) which will automatically set certain preferences depending on what you choose.
Designers can then sync directly from Sketch screens they wish to provide to developers. From there, all users can check out element spacing and auto-generated CSS.
This is directly connected to the auto-generated style guide built in. It will grab all colors and font styles from your screens, where you can manage them as well.
If you want to get more in-depth, they offer a “components” section, where your Sketch Symbols can be directly uploaded to. After you’ve synced your symbol components, any screens with those symbols will link directly to the style guide! Consistency is the name of the game for Zeplin.
You can also leave notes, write a description, and keep track of versioning - all on web or in the browser. It’s truly a robust tool for spec management and has become our team’s go-to for all projects.
Only Con: If you choose to upgrade to the “Enterprise” tier, you’ll only be able to seat 12 users. After that, you’ll need to pay an additional fee for any user added. However, all the lower tiers have unlimited member capacity! A weird drawback, but good for a team that needs more project space.
Website: https://getstark.co/
Price: Free
Zander:
Part of my job is to make digital products that are accessible to handicapped individuals. This includes visually impaired users.
Stark is a Sketch Plugin that will “help you design and build products that are accessible, ethical, and inclusive.”
This tool comes with a color contrast checker that will show you if your foreground and background colors are difficult to read.
The Web Content Accessibility Guidelines, or WCAG, requires an AA contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to be accessible, and so the color contrast checker will verify this for you.
If your colors happen to be non-WCAG compliant, Stark will suggest some contrast friendly colors to replace them.
However, the really cool feature of this tool is the colorblind simulator.
Stark will change the screen so you can see your interface as if you had color-blindness.
Here’s a fun fact: did you know there are multiple forms of color-blindness?
Whether it’s protanopia, achromatopsia, tritanomaly, or others, this tool will simulate the effect of color-blindness so you don’t accidentally use easily-confused colors for color-blind individuals.
