Home Services Projects Blog About Contact

What are the best tools to use to shape your design process?

Elle at her desk working on a design file

This blog briefly explores each of the main design tools we use at Brightec to demonstrate how, and why, they are used.

Being a UX/UI designer has progressed a lot since the days of using Photoshop to make mockups. At Brightec, the main tools we use are Sketch, Abstract and Zeplin.

Designing with Sketch

For the vast majority of my working day, I have Sketch open. It’s a great programme with many features used to make designs to send to developers. If you’re familiar with Adobe programmes such as Illustrator, Sketch is fairly easy to learn (and arguably a lot more user friendly!).

Designing with Sketch
Designing with Sketch

Sketch has a multitude of built-in features such as a gallery of artboard sizes for common devices. The interface is fairly minimal, with all your artboards and component names in the left hand bar, and editing options for components on the right. In the top bar you can add elements such as shapes and text, as well as options for editing components like rotating or re-scaling them.

It’s also helpful to create symbols for repeated components like buttons or even groups of objects if they are identical on multiple screens.

You can build a library of colours and typography
You can build a library of colours and typography

One great thing about Sketch is that you can build a library of colours and typography etc for a design system. This makes it easy to design consistently; you can select from the saved styles in the gallery from more general things such as defined colours, to specific components like buttons, (as well as symbols). This not only makes consistency easier, but also speeds up the design process as you’re not having to manually input the styles for individual elements.

Sketch also works brilliantly with other programmes through its huge array of plugins. These range from organisational ones such as Symbol Organiser that rearranges your symbols into alphabetical order, to a Zeplin plugin (more on that later) which seamlessly uploads your selected artboards to a Zeplin project.

Managing our work with Abstract

Abstract is not your typical design tool. It doesn't offer any way to actually create designs, but it is a version control tool. When multiple designers are working on the same project, it’s essential to use version control to avoid work being overwritten. For every Abstract project there is a master file, which designers create branches from when you want to change or add something. Once this branch has been finished, you can then merge it into the master file.

It’s also super helpful to be able to see past changes (‘commits’) and be able to revert to them if you’ve made a mistake in your latest commit. Abstract is great because you can also do design reviews within the program before merging your latest work into the master file.

Abstract 2

Handing over to developers with Zeplin

As with Abstract, Zeplin is not a design tool in the way Sketch is, but it is an incredibly useful tool to bridge the gap between designers and developers. When Sketch* designs are ready to be shared with developers, you can upload them onto a Zeplin project. For each screen, developers can look at things such as padding, colour and typography styles and download the assets for things like icons.

On Zeplin, you can also leave colour coded notes for people. This is particularly useful because designers can add notes in one colour to explain parts of the design that may not be immediately obvious to the developers, and in another colour developers (or indeed the client if they have access to Zeplin) can ask questions and start a comment thread.

Handing over to developers with Zeplin
*Zeplin also works with Figma and Adobe XD

Creating prototypes with InVision

We also sometimes use InVision, which is a tool for making prototypes for user testing. You upload Sketch artboards and then add hotspots for linking it all together (e.g. adding a hotspot to a button will mean that clicking on it will take you to the artboard that follows the button’s action). There is a Sketch plugin that makes this easier but unfortunately it is not compatible with the latest version of Sketch.

Find out more

To read more about our design, head over to the Design section of our blog where you can find how-to’s, technical term glossaries and more!

Looking for something else?

Search over 300 blog posts from our team

Want to hear more?

Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!