UX Design

Digital product design with Sketch

: From the idea to the design. From design to product. How Sketch optimally supports us in UX design.

Sketch

Some time ago, we in the UX team decided to use Sketch as the primary design tool following a short trial. Here, we share our experience, give an overview of what has changed and what benefits we have seen.

Scalable designs

Starting with, or switching to, Sketch was relatively easy. The tool simplifies the work process for individual designers and promotes teamwork. The focus on the design for web and apps is already apparent when creating a new document. Sketch works with Artboards and provides templates for all popular devices and screen sizes (smartphones, tablets, smart watches, etc.).
When we develop a design, we initially create artboards for smartphone, tablet and desktop resolutions for the most important views. For websites, this could be the home page, an umbrella page or a details page, for example. This way of working helps us to consider a responsive design from the outset, and make sure that it works on all platforms. Thus, questions automatically arise in the design process; questions such as, “Does the interface also scale on mobile devices?” and “How does this UI component behave on a touchscreen interface?”. In Sketch, artboards and elements can be created such that they scale responsively when resized.

 

Workflow and Team Collaboration

Sketch has a very active community, and there are a variety of plugins that, first, help us to be faster, and, second, support us in providing optimised designs to developers. In this way, during implementation of the design, all relevant specifications such as dimensions, colours, typography, etc. can be read easily, and even the markup can be copied directly. This workflow allows for lasting use of the prototype, since, unlike other prototyping tools, we can rely on it here and use it again for the final product. In addition, this saves us the time-consuming task of creating style guides that, in any case, are quickly outdated and require maintenance. If wanted, style guides can still be exported relatively easily to document design guidelines. Global colours can be defined and replaced in a document. Working with icons also makes it much easier to keep documents up-to-date, since the elements only need to be edited once centrally and updated in all instances.

Teamwork with Sketch

Transfers and exchanges within our team are very important to us. In our experience, these are the essential foundations for creativity and innovation. Sketch is vector-based, so the files are small and can be shared easily. A Sketch document, which briefly consists of a number of artboards, showing, for example, an app concept, can be easily exported to a PDF and then sent by email. The Mirror-Plugin helps you test your design by showing it on a real end-device such as an iPhone, for example. Designs and prototypes can be made accessible in the Sketch Cloud, so they can be iterated in teams or presented to stakeholders.

We use a tried and tested workflow in which we create a Sketch master file for each customer or project, which we make available as a version control system via GitHub. Sketch Libraries offer the same advantage: all assets are centrally available and remain up-to-date. Each designer can enter the project immediately and concentrate on the crucial features of the user experience, instead of spending unnecessary time drawing graphics and UI elements.

Summary

When we made the decision to switch, Adobe’s licence model was also an important factor. A Sketch license currently costs 99 $ a year. This is significantly more affordable than an Adobe licence. Tools such as Sketch don’t just help us to conceptualize screens, they also support us in creating user experiences. Therein we see our task. There is still a lot of potential here: the areas of prototyping and animation, for example, are still so far only available in a rudimentary way, but will definitely be developed further in the near future.

Performance is one of the most important factors for positive user experiences. This is also true of tools used to conceptualise and develop UX designs. Interfaces should be sleek, quick and transparent. Using Sketch, we can achieve this brilliantly.

There is fortunately a lot going on in this field. It is worth following the developments, as they influence the way in which digital products are developed.

Further tools

Mike Ramahi

User Experience Designer