ISL is an award-winning digital agency founded on invention. We built an internet powered apple launcher and a device that enables you to order a ride by clicking your heels.
Click here to see the original post by Interactive Designer Dan Rader.
Every team has their own set of tools they think are the cat’s pajamas. With so many apps to choose from and so many workflows emerging from the ether, it’s no wonder designers are having a hard time figuring out where to turn. Don’t worry, we’re here to help point you in the right direction and showcase the tools our team uses to deliver great products to our clients.
At ISL, we’ve learned that there is, to date, no tool to rule them all. Every tool has its own purpose in the ToolBelt™ of a UI designer. From creating assets and building comps, to prototyping interactions and capturing client feedback, there’s probably already an app that exists.
We’ve collected our team’s top 10+ tools in our UI ToolBelt™, as well as some alternatives that may work better for you.
Sketch
This is our home base for interaction design. Sketch is built for designing apps and web experiences. Down to the language it uses to control parameters, Sketch brings us closer to using the same jargon as developers, which makes the handoff that much easier. With features like flexible symbols, nested symbol overrides, and super flexible/easy to export artboards, Sketch is set up to make a UI designer’s life easy.
Perhaps the most powerful part of Sketch is the ability to augment the program with open source plugins. We currently use Sketch Toolboxto manage our plugins — our favorites being: Invision Craft, Icon-Font, and Sketch-Measure (which deserves its own feature below. 👇)
Alternatives: Illustrator, Affinity Designer, Figma
Sketch Measure
This Sketch plugin is so amazing we felt it deserved its own call-out. This tool allows for super easy handoffs for our development team. It exports CSS styles, measurements, and design assets for easy placement. Best of all, it produces an HTML document that we can then host on our local servers (and can thus be accessed by anyone working on the project) without dealing with messy logins. As a team we save so much time with this tool, significantly reducing our handoff time with our development team.
Alternatives: zeppelin, avocode
Illustrator & Photoshop
I’ve grouped these two apps together because we use them in a very similar way — for asset generation.
Illustrator is still our preferred tool for creating illustrations and icon production. The tools are more robust than Sketch and the flexibility of grid structures makes it easier to do our jobs. I’m personally a huge fan of the shape builder and the flow of reflecting and transforming shapes; it speeds up my workflow. This tool is still the best on the market at doing what it was made for: illustration.
Photoshop will always be the most powerful tool for photo manipulation. I’ll even argue that photoshop gives you more control on asset exporting than Sketch. I’ll often save photo assets for the web from Photoshop because it gives you more control while exporting, which allows for file size reduction without sacrificing image quality. Photoshop may have fallen out of favor as the home base for most UI designers, but it still holds an important place on our toolbelt.
Alternatives: Affinity Designer, Affinity Photo ,Sketch
Invision
Invision is a great tool for quick prototyping and collaboration. With super easy uploading, it’s the fastest way to get a your flat comps to feel like clickable websites. It’s also great for internal/client review and feedback. The comments show up directly on the comps;you can even resolve comments and override comps to reflect the edits.
This tool serves a very specific purpose for our and — although it is limited with how far you can push the prototype — it’s an invaluable part of our ToolBelt™.
Alternatives: Marvel, Justinmind, UXPin
Principle
IBM says it best: “Animation creates energy within an interface and lets the user know what’s happening before, during and after an action.” We too believe in the power of movement to increase usability. When we need to workshop and convey ideas in motion, Principle is our go to software.
This may be one of the most contested tool areas for UI designers. There are just so many options that all have their own strengths and weaknesses. We chose Principle because it is the fastest way to get your ideas out with the lowest learning curve. With Principle, we can create a working, clickable, animated prototype in minutes, which allows us to easily test, adjust, and share our prototype.
Principle offers a range of deliverables that our clients and developers really enjoy. We can easily export movies and gifs that display the animations and workflows in action (it even exports clickable prototype files). We find this feature really helps for collaborations with front-end developers and serves as a fantastic starting place for getting the right animations into our products.
Alternatives: Framer, After Effects, Origami
Google Sheets (Designing in Text)
Designing in text saves lives. OK maybe not lives, but it saves time, effort, and feelings. It gives you the power to design with real content, which makes for better informed decisions and solutions. Possibly one of most overlooked tools in our arsenal, Google Sheets can be one of the more critical steps to forming the best idea possible.
Alternatives: GatherContent, Contently
UserTesting.com
Test early, test often. When we come up against a task oriented design problem, it’s important that we test both our solutions and assumptions. With usertesting.com, it’s as easy as uploading your files and test script, letting the system run the test for you, and collecting the results. The site sources testers for you and gives the benefits of a moderated test without the time. You can even tag notes to time marks on the test videos and export logical, compelling collections of results.
Chrome DevTools
Chrome DevTools may be one of the more powerful tools in our arsenal. Being able to collaborate and design in the browser is a major key (🔑 ) to designing for the web. The translation between static comps and responsive web is always a delicate dance of compromise, adjustment, and polish. We often review our work in the browser, open up the dev tools, and start adjusting values to finesse our design. Under the hood, there are some seriously cool features including theAnimation Inspector where you can slow down, tweak timing, and modify animation values to your heart’s content.
Alternatives: Everyone has their favorite. Our front-end team leans towards Mozilla DevTools.
Codepen
This online tool is perfect for collaborating and sandboxing ideas with developers. We use Codepen to create small code snippets and explore interactions. In the end, comps only go so far and designing in the browser is often the best choice. Additionally, this is also an excellent source for inspiration…we like to see what people are experimenting with out there!
Alternatives: jsfiddle, Atom, or Sublime
Github
At ISL we use Github to get 💩 done. It’s primary use is of course version control for our development environments, but we use it for so much more. It helps organize our workflows — especially through extensions like zenhub and waffle. It also serves as a place for capturing conversations and touch points between designers and developers. Our team also uses Github to version control our starter files for UI Design so we can constantly improve and all feel capable of editing.
Alternatives: GitLab, Bitbucket
TOOLS DOTH NOT MAKETH THE (WO)MAN.
At the end of the day, it doesn’t matter what tools you use. No app is going to magically make awesome interactions. It’s you, the designer, that has the power and mind to make something interesting, useful, and long lasting. Sure, some tools are going to make your job much much easier, but they’re just tools. It’s up to you to convey your ideas that will hopefully be translated into something real that people can use. Remember this, no one is buying flat, pixel perfect comps, they buy websites, apps, etc. However you get there, just make it great!
