Your tools won’t make you a great designer. But the right tools can save you time or simplify complex workflows. You’re probably already familiar with the juggernauts of the design industry: Photoshop, Illustrator, Axure, Invision, Sketch, and the like. Here are some lesser-known tools for designers that are built for very specific jobs.
If Photoshop and Sketch are power tools, xScope is the design equivalent of a Swiss army knife. Its many tools can help in a myriad little ways.
- The Loupe tool by itself is worth the cost of admission. With it, you can examine anything on screen at a pixel level, copy exact colors, and more.
- You can preview designs on iOS devices and Apple Watch with the Mirror tool.
- The Text tool is a quick way to get any text character in almost any format, including special characters.
- With the Dimensions tool, you can measure the distance between nearly any elements on screen.
- Rulers may seem similar to Dimensions, but they can help you measure any distance and also help with measure angles.
- The Overlay tool lets you overlay grids or images on your designs in the browser, helping you quickly check how well they match.
- Have you ever wanted to add vertical or horizontal guides outside of your design app? The Guides tool in xScope gives you that superpower.
- The Screens tool can help you preview your work in a variety of common screen sizes as well as simulate different types of color blindness.
- You can use the Frames tool to create a frame of any size, with or without a grid, and easily copy screenshots of the content within it.
- The Crosshairs tool gives you pinpoint coordinates for any pixel on your screen (and is also a convenient, quickly movable guide when you just want to check vertical or horizontal alignment).
ScreenFlow is perfect for easily capturing video of what’s on your screen. It’s a quick way to record a full usability test or share a quick design concept with your team. ScreenFlow has tools built in for recording, editing, and sharing the final result.
Sometimes a full video is overkill. Giphy Capture is a great tool for capturing motion on a small portion of your screen. When capturing interaction, it will show the mouse and where you click. You can edit the size, loop style, and FPS of your GIFs. either publish them to Giphy or save them locally.
It’s important to test your designs for colorblind users. But if you’re not colorblind and you don’t have easy access to colorblind users, what can you do? You could buy xScope above and use the Screens tool. If you can’t afford that app, though, you can also install Sim Daltonism. It’s a free app that will let you view any portion of your screen through a color blind lens.
When you’re making icons, you’ll need a variety of formats and sizes. Icon Slate can help you preview your icon at different sizes and with different backgrounds. You can export your files in a multitude of formats for nearly every platform.
Your website’s performance is an important part of the overall experience. One of the easiest ways to improve performance is to optimize your images. But how? Drag your images into ImageOptim, and it will automatically optimize them according to the file type.
ImageOptim is great, but it should be the last step in optimizing images. It won’t help you choose the right format or create an optimal image from the start.
MAMP lets you easily run an Apache server with PHP and MySQL locally without all the hassle of setting up the services yourself. It’s a perfect tool for designers who want to play around with code without the overhead of managing a full development environment.
Confession: I haven’t had a dedicated Windows computer in close to 10 years. There are times, though, when I need to either test websites in Internet Explorer or use Windows-specific software briefly. While there are a few browser testing services that will let me grab screenshots of a website in various versions of Internet Explorer, none of them easily let me use the website myself.
To get a real feel for a site I’m testing in Internet Explorer, I rely on VirtualBox. It’s a free, open source tool for running any virtual environment. I can install a virtual machine on top of it. Microsoft’s Modern.IE provides several Windows virtual machines for free to test with multiple versions of Internet Explorer.
Sharing your designs with developers is easy with Avocode. With plugins for Photoshop and Sketch, you can quickly upload your work. Once it’s in Avocode, developers can extract specific images in the format and resolution they want. They can generate HTML and CSS translated from your designs. They can extract color codes in the format they need. And they keep track of notes and revisions to your designs.
Great writing is a big part of great design. With Ulysses, you can organize your writing by project, with individual documents, articles, or chapters as separate sheets. Ulysses uses plain text with Markdown rather than complicated visual formatting like Microsoft Word. It syncs across your devices using iCloud, and they have apps for iPhone, iPad, and Mac. I’m using Ulysses right now to write this post.
Mind mapping is a great way to think through ideas, analyze their structure, and explore related concepts. MindNode can help you do that quickly, letting you focus on the content and how it’s structured. As you add items, MindNode automatically tidies the interface and adds more space. You can add notes or tasks to specific branches and view the whole mind map as a simple outline for easier searching. When you’re ready to share it with others, you can export the data to a number of formats OR share it over the web using their service.
What if your iPad could work like a Wacom tablet and let you draw in apps on the Mac? With AstroPad, it can! AstroPad lets you interact and draw directly with apps on your Mac from your iPad. It works really well with the Apple Pencil and decently with other styluses. (The lag time is more noticeable.)
When you want to show or capture what’s on your phone from your Mac, Reflector is the perfect tool. Simply install the app on your Mac and it acts as an Airplay device for your iPhone or iPad or a Google Cast receiver for your Android device. It will show your device on the screen along with exactly what you do as you do it. This can be particularly useful for demoing mobile apps or websites and recording usability tests on those devices. It has built-in features to let you record or even livestream the screen of your mobile device.
Briefs is great for building and testing mobile app prototypes, specifically for iOS. It includes a basic library of components for quick concept mockups. You can also add your own images and assets to create a more polished prototype. You can package prototypes up for multiple platforms, including different iPhone models and the iPad. It runs through their native app (Briefscase) so transitions and interaction feel more natural than web-based prototypes.