Design

My top UX / UI Design tools

Over the past couple of years, the tools available to your average Web / UI / UX designer have improved massively. Adobe no longer dominates my workflow and I want to share some of my favourites. I wrote a stand alone post for Webflow, which is becoming my favourite.

Sketch

One app that really changed the way I work is Sketch, from Bohemian Code. There is not a day goes by without me using this amazing tool.

Back when there was just one iPhone screen size to worry about, and UI was heavily into textures, shadows and skeuomorphic influences - Adobe Photoshop was what you used. I think this was because Photoshop was a beast of an app that was used by designers from all sides, whether that be print or web / digital, so was the first tool picked up when those designers that decided to (like myself) start playing with apps. 

As app design evolved, and especially when we had to cater for a wider range of screen sizes, Photoshop was gradually getting to be a pain to wrestle with and Bohemian came up with the perfect thing at the perfect time - Sketch! Sketch is vector based, so straight away with that and the ability to simply and easily export any component of your design in a multitude of sizes was a massive bonus and huge time saver. 

Adobe is now playing catch up with Adobe XD, but I think they have missed the boat - Sketch is now a massive favourite for UX and UI design. Something I want to mention is the recently added Symbols and Nested Symbols - these are really changing the way I work and enabling me to get a far greater amount of work done. 

Check out my post on these to get a better idea of how helpful they can be. Sketch also has a really good number of plugins that help improve workflow and help bridge the gap between design and development.

Craft

Craft is an amazing suite of plugins for Sketch from Invision, here are some of the things that it allows you to do, directly within Sketch

Data Integration:
Craft allows designers to populate their designs with dummy content and images, even use real data from the web, public APIs or your own files. 

Invision Syncing:
It also allows easy syncing of art boards to Invision for collaborative online prototyping. Assets Libraries:You can connect with asset libraries, which is great for larger design teams. If a design change is made, the library is updated and the rest of the team’s assets are automatically updated.

Duplicate:
This is a real time saver when it comes to repetitive content generation. Let’s say you design a news feed that contains an image, title, subtitle and summary text. With Craft, you simply design one item in that news feed, containing those elements. You then use the data integration feature of Craft to inject dummy title, summary and even image, then use the duplicate tool to generate replica items with associated content.

NEW - Freehand:
Invision have just recently released a new plugin within Craft, called Freehand. This is a really great tool that I have used with a number of clients already. It very simply allows me to sync my artboards with an online whiteboard, where I can discuss designs with clients, scribble notes, add images or text. This is also pretty quick, so means I can be on the phone with a client discussing a design - make the amend within Sketch, hit sync and the client can view that change almost immediately. I really like what I have seen of this so far.

Invision

Invision is an online platform for collaborative prototyping that has been mentioned before with their Sketch plugin suite - Craft. I have my initial designs for an app all made in Sketch, and am ready to run through it with my client - however, the client is in the US. Before Invision, I would have to take all my designs and create a nice PDF that shows each, with a write up to explain thoughts and email this to my client and await a response.
With Invision, I simply select the art boards I want and click “Sync”. These artboards and now on Invision, where I can add interactivity, notes, comments and share with the client online. My client can add notes and instructions and the whole process runs smoother and quicker - everyone loves to save time.

Zeplin

One of the big stumbling areas within the whole app design and development process is the link between design and development. Sometimes, like at Gourmet Pixel, those teams work incredibly closely and have a good understanding capabilities and how each side works - this is very rare. In most cases design and development are often working in different departments, or even countries. 

Zeplin is a tool that helps bridge that gap, by allowing designers to upload their designs to a platform that developers can use to view. Not only can developers view those designs, they can export assets directly from those designs, view colours, fonts and get precise measurements and positions.

 

Flinto

Flinto is a new one to me, but I have very much fallen for it. Flinto allows me to take my designs and develop animations to show clients and developers how I want the app to “feel”. Sketch gives a great idea of how the app looks, but Flinto then allows me to show how interactions from the user affects the app’s elements and flow. I have tried a number of apps that aim to do this, but the way Flinto works just seems to make sense in my mind and I found the learning curve very easy.

I have to mention Pablo Stanley's “Sketch Together” as a great resource for learning about Flinto, and also Sketch. He has been a huge help to me since I found his great YouTube channel. Pablo also runs mentoring classes in San Francisco that you can book via his website. Thank you Pablo!