The Highlight — Design Tools

The Highlight — Design Tools

So far, as part of our ‘The Highlight‘ feature at the end of 2013, we’ve brought you our picks for ‘iOS 7 Redesigns‘ and these awesome ‘Website Designs‘. So on this third day of the Highlight, we’ve put together our favourite design tools that will help you take your ideas and designs to a whole other level. These tools include professional software, companion apps and in one case an iPad app that we think will help you get your job done beautifully.


Pixelmator has been a fantastic image editing app for Mac for a while now. It performs remarkably well as a native app and its performance has always been stellar. The team has been on a roll lately with their releases & updates to the app. Their last update, Pixelmator 3.0 FX which landed in October, brought along an all new image editing engine that improves its performance on OS X Mavericks and even supports the all new Mac Pro. It night not outright replace Adobe Photoshop for you, but Pixelmator does make for a fantastic tool in a designer’s toolkit. Pixelmator is $30 on the Mac App Store.

Procreate 2

Just as Pixelmator is on the Mac, Procreate is an invaluable tool in an artist’s toolkit for his iPad. Procreate offers a wide range of tools to sketch, paint and draw on iPad. There are some insane sketches being made via Procreate on iPad and it’s truly astonishing what the developers have achieved here. Procreate is available for just $5.99 on the App Store.


A designer is always on the lookout for new sources of inspiration. The internet has made it possible to browse millions of different sources & design examples. Ember for Mac makes it easy to store & organize them. Primarily an image manager, Ember offers a great UI to organize your screenshots into different collections and tag them. I love its ability to automatically fetch new images from any RSS feed you provide it. This way, new stuff is always readily available for you. Realmac Software also recently released Ember for iOS that lets you browse your library (via iCloud) on your iPhone or iPad. Ember for Mac is available for $50 on the Mac App Store.


Typography is just as important to a good designer as UI elements are. Bohemian Coding recently released Fonts for Mac, a gorgeous new Mac app to manage your fonts on a Mac. Sporting a modern user interface, Fonts let you easily organize your font collection & allows you to build different collections in your library. It does have a few features missing compared to its predecessor, but it’s still happens to be a phenomenally good looking app. Fonts is available for just $9.99 on the Mac App Store.

Briefs & Briefscase

Briefs impressed the hell out of us when it launched. It is the professional wireframing tool app designers and developers had been waiting for and it looks absolutely great. There are companion apps for iOS and Android available for free and you can see your designs and creations in realtime with the live viewer in the app. Briefs is powerful and it supports apps on OS X, iOS and Android with libraries for standard elements on those platforms. It allows almost anyone with no knowledge of coding to design and showcase a working prototype for an app and send it to others who can view it on their devices easily. Briefs deserves every bit of praise it gets. We also absolutely love the icon for the Mac app and Briefscase, which were done by Pacific Helm. Briefs is available on the Mac App Store for $199.99 and directly from the developer here. There’s also a free trial available on the developer’s website.

Paintcode & Webcode

PaintCode and WebCode by PixelCut are two extremely useful tools that not only let you get things done much quicker but also can teach you a boatload of stuff. PaintCode lets you convert vectors you draw into resolution independent Objective C or C#/Xamarin code. WebCode lets you draw various controls and elements for the web and it generates JavaScript+Canvas, CSS+HTML or SVG code. PaintCode and WebCode have realtime code generation for your drawings and the code is syntax highlighted. They will either help you save a load of time or help you learn how UI elements and things you draw are translated into code that is fully readable. PaintCode and WebCode both have free trials available on their websites. PaintCode is available on the Mac App Store for $99.99. WebCode is available on the Mac App Store for $39.99. While most tools teach you how to go from code to graphics, these two also do the opposite.

Sketch & Sketch Mirror

Just like Pixelmator, Sketch has been written from the ground up for OS X as a modern and professional design tool that isn’t held back by legacy technology. Sketch is simple to use and only takes a bit of getting used to for a new workflow. Sketch is the vector tool you need in your toolbox. Bohemian Coding have been updating it often and it is more than worth the asking price. It also won an Apple Design Award. Sketch Mirror, a companion app for iOS, is available to see live previews of your designs on your device screens. Sketch may not completely replace tools like Illustrator and Photoshop for you but it does loads of things better than them. Sketch is available on the Mac App Store for $69.99. Sketch Mirror is available on the App Store as a universal app for $4.99.

Skala View & Skala Preview

We’re huge fans of Bjango and their work. Their tool Skala Preview on the Mac coupled with Skala View for iOS or Android is the fastest way to quickly view how an image looks on your iOS or Android device. It even lets you view a monochrome version of the image and in newer versions of Photoshop, you can directly view the Canvas being edited on your device. Skala Preview was recently made free on OS X and the companion app, Skala View is available for free on the App Store and Google Play. Bjango announced that they are also working on Skala that will be going into an open beta in some time. We are excited to see what they bring the design community in 2014. Their articles online are also very useful.

App Design Handbook Complete

When it comes to iOS app design, there is a wealth of information available online ranging from Apple’s own documentation to posts on Stack Overflow and even design blogs. Books on the subject are usually not up to date with current design trends and hence are not much use. The App Design Handbook by Nathan Barry and Jeremy Olson was recently updated for iOS 7. Not only is this one of the most complete guides to creating beautiful interfaces for your iOS apps but it also comes with an insanely great package filled with case study PSDs, code, video tutorials and interviews. Instead of just being interviews with interface designers and developers, they have also interviewed people like Ellis Hamburger from The Verge and Denys Zhadanov, who handles marketing at Readdle. They provide great insights into what people look for in apps and what they look for when they write about apps or market apps. The design interviews include Marc Edwards of Bjango and Julian Walker of 53, among others. The App Design Handbook is available as an eBook for $39 only or as a complete package with all the aforementioned goodies for $249 over here. There’s a sample chapter available as well.