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.
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.