For the past few blogs we’ve been digging into particular topics, conversational interfaces and protocol-oriented networking in particular. Now it’s time to stop, smell the flowers, and skip some rocks on the lake. Here are the five tools that are an absolute necessity in our design process.

Sketch

Sketch is a godsend for UI designers. It is absolutely the most important tool in my belt. Some UI designers are still using Photoshop, but that’s likely because they haven’t used a program that was created with interface design in mind. Photoshop is for image manipulation, Sketch is for interface design. Luckily, where the two are similar is in support from the public. Like Photoshop, Sketch has many community-created design resources and downloadable plugins.

Starting projects is easier than ever now that mobile and web templates are built in. Designers can start the project with low fidelity wireframes, then move on to high fidelity mockups in the same program. Not only that, but it’s actually conceivable (though not recommended) to have the wireframes and mockups within the same file. This is all because Sketch files are tiny compared to Photoshop counterparts. Sketch makes great use of raster and vector objects, making it feel snappier than Photoshop as well. It’s time to stop using layer comps.

InVision

InVision is an incredibly versatile collaboration and prototyping tool for mobile and web design. Teams can start projects by sharing ideas to an InVision board and create an interactive prototype with it later. And if you’re using Sketch, the two integrate beautifully with InVision’s own Craft plugin.

Interactive prototypes make it easy to see exactly how an app will fit together. Instead of just imagining everything, users are able to click, tap, swipe, or hover through prototypes on their desktop, tablet, or phone. InVision allows for hover states, timed interactions, custom animations and much more which means that it’s easier to make prototypes act like the real thing.

InVision is best for keeping collaboration right in one place. Instead of having long conversations through email or a separate chat, users can add feedback or comments directly to the prototypes. It makes it easy to follow the conversation, and insures that changes are made to the right parts.

Zeplin

Zeplin simplifies the design hand-off by generating style guides and assets, meaning there are fewer reasons that the final product would not look like mockups. From Sketch or Photoshop, designers export the mockups to a simplified interface, where developers can see specific information about every element in the mockup – no more guessing. Assets and style are available all in the same place.

Historically, the hand-off from design to development has been problematic. Designers spend time painstakingly figuring out spacing, colors, and alignment and going back and forth about how a feature should look. Then depending on the developer’s attention to detail, the application may or may not end up looking like the mockups. Luckily, even when there is a question or problem, threaded comments and version history are built into Zeplin.

Principle

Principle is basically Sketch’s animation equivalent. The interface simplicity and the fact that it’s catered to interface animation makes it a joy to use. Not only that, but (once again) it integrates well with Sketch. Principle allows granular control over animations in a timeline format. Want to design a complex animation with extreme specificity? You can do that. Want to make animations with the default animations? You can do that too. It all depends on what you want to accomplish.

Adobe Color CC

Color is one of the most important aspects of a design, and Color CC makes it easier to get the perfect color palette. Users can start their palette from an image or from a specific color value in HEX or RGB. From the base color, Color CC can automatically generate a 5-color palette from one of the selected color rules: Analogous, Monochromatic, Triad, Complementary, Compound, Shades, or Custom for designers that know what they want. Best of all: Color CC is completely free as a mobile and web app.

Want some help with your app? Get in touch with us.