I discovered design a few years ago and was instantly hooked on Photoshop I spent a lot of time fiddling with layer styles and filters. After sometime I started designing user interfaces, it took a while for me to define an effective workflow but it was a lot of fun.
There weren’t that many tools to try out then but over the past two years, the tool options for an interface designer has multiplied and it can get quite overwhelming when choosing if you’re sometimes worried about cost. After some experimenting, I think I’ve finally found the right recipe for my work and I’ll be sharing that here.
Wireframing & Prototyping
Sketch is now more than awesome, I’ll find the right word later. Because I need to design screens and iterate quickly, it’s features make it my go to app among the likes of Photoshop, AdobeXD and Illustrator. With impressive feature updates to the app and a active community regularly creating free plugins, Sketch speeds up your work like you can’t imagine. For just $99, Sketch is also light on the pocket.
If like me, you’re no good at writing code and need to quickly add simple interaction to your wire-frames, Principle does the job perfectly. After watching a couple tutorials here, I got right into the swing of things. You can import your screens from Sketch or design from scratch within the app. One slight problem I have is the absence of a pen tool. This means I’m stuck with the rectangle tool (with corner radius options) and can’t create irregular shapes inside the app. PrincipleforMac is also $99.
Design Hand-off
Zeplin saves time, I can’t confirm yet but I believe it has saved lives at some point too. Since I started using Zeplin, I’ve not had to go through the excruciatingly painful process of exporting the different sizes of a design asset one by one. The devs also no longer ask for the hex code of any color. The only thing I hear is “Please update Zeplin with the latest design” and that is done with CMD+E. Zeplin has a free tier that allows only 1 project but paying for an upgrade is totally worth it.
I sometimes work remotely and this makes it hard to quickly get feedback on my designs. Marvel let’s me upload designs directly from Sketch and share a link with the team so they give feedback. I can also link all the pages and show the relationship between screens. Marvel has a free tier that allows unlimited projects but you’re only able to add comments to the first 3.
Asset Management
This is a pretty neat tool for organizing your icons and images. It supports all the relevant file formats. It also lets you drag the icons directly into the app you’re designing with, which in my case is Sketch. Icon Jar is free.
This is my favorite tool for organizing inspiration. I like it because it lets me access the images even when I’m offline. I can also invite people to view and edit my assets. Lingo is a subscription based tool created by the guys at Noun Project. It has a free tier and there are some pretty useful resources you can download to use in your projects.
Right here is my Number 1 Color Assistant. I used to take screen shots, import images into Sketch and then grab the color code (very time-wasting). Sip hangs right on the tool bar of my Mac and I can use it to grab any color on the screen. It also has a huge library of formats to display the colors in so it’s great for devs too. Sip is free but has a paid pro version with some cool advanced features.
FontBook
I use the default font management app that comes with the Mac, it’s simple and straight to the point. I’ve not really bothered so much about proper font management, so there’s a chance a better app exists that I’m not aware of. If you know any, please recommend. Thank you!
Plugins
Craft is a very useful set of Plugins for Photoshop and Sketch. It allows me design with real data, so instead of Lorem Ipsum I get to use meaningful dummy data derived from a particular subject like Travel, Astronomy e.t.c. It also let’s me fill in user names, phone numbers and dates. Craft is hooked to the Unsplash image library too, so you don’t have to leave the comfort of Sketch/Photoshop to add images to your interface. Pretty sweet stuff. Craft is free.
This is quite similar to Craft by InvisionLabs. The main difference is it does not require you to be connected to the internet. It is also hooked to the UIFaces library so you can easily place random male/female avatars into your design.
