At the start of 2017, we decided to switch to Sketch. Since then, I've had the opportunity to implement two major projects using it. The program is intuitive to use, making it very easy to get started. Nevertheless, it takes a while to establish a personal workflow and learn the tricks that make a designer's life easier.
From Photoshop to Sketch
Sketch is a very lean program. This makes it possible to save the entire design of a website in one file (with Photoshop, this often led to endless loading and saving times). The app can also be expanded many times over, as there are countless plugins and compatible 3rd party programs, for example, for prototyping. Anyone who tries to compare Sketch with Photoshop, Illustrator, or InDesign will quickly reach its limits. While it is a vector program like Illustrator, it is less geared towards illustration and truly designed for UI and web design. Therefore, it doesn't entirely replace any of these programs. Adobe offers Adobe Experience Design as an alternative. While promising, it still lags behind Sketch.
Structuring Content
Sketch is in a league of its own. Since the app is optimised for UI and web design, it offers entirely new possibilities, for example, in structuring content.
Pages
For structuring subpages, I use Pages – meaning I have a page for the landing page, one for the news overview, one for the article detail page, and so on.
Artboards
To display different variations of the subpages, Artboards are very practical. For example, for the 'Contact Page', I can create an Artboard for the contact form:
- before filling out (empty form)
- during filling out (display of inline errors)
- after filling out (success message)
The same applies to displaying various responsive options. For instance, Artboards for Desktop, Tablet, and Mobile can be created with Sketch's suggested dimensions.
Symbols
The next great built-in feature is Symbols. They work similarly to Smart Objects in Photoshop, but they offer entirely different possibilities. For example, if you create multiple icon symbols of the same size, you can swap them in the design via a dropdown. This even works when symbols are nested. Naming conventions are also very practical in this context. If a button, for instance, has a hover, focus, and active state, the symbols can be grouped by naming them “button/hover”, “button/focus”, and “button/active”. This contributes to both clarity and faster findability.
Text Styles
Text styles in Sketch work similarly to other programs. For a clear presentation, I've numbered the individual styles. The foundation for separating semantics and visuals can already be laid in Sketch. Our headings bear the names Heading XXL to Heading S. If you were to name them, for example, Heading1, that could be misleading because it might imply the h1 element. Usually, the visual and semantic headings do match, but they often need to be set separately, for example, when smaller blog titles follow a large heading (h1) on a blog overview page.
Creating Layouts
In web design, it is essential for the designer to work with a grid. For this grid, an overall width is defined, and it is divided into a certain number of columns (usually twelve). Additionally, a column width is defined, which also determines the gutter width. Defining a grid ensures that the design is easily implementable. Creating such a grid is often tedious, whether it's dictated by a CSS framework like Bootstrap or Foundation, or calculated manually in consultation with development, or created using online calculators. Sketch therefore offers the 'Layout Settings' option, where the desired values for the respective Artboard can be conveniently entered, and the 'Grid' or 'Layout', as it's called in Sketch, is displayed automatically.
Responsive Design with Resizing
Whether you use the mobile first approach or traditionally break down from desktop to mobile, Sketch offers a great tool for both variants. The 'Resizing' option allows you to define the behaviour of objects. The designer can specify which corners an object is fixed to and whether the object's size remains the same or grows/shrinks proportionally during resizing. A detailed explanation of how this tool works can be found in Jon Moore's article Sketch 44 Resizing: How does it work???.
Exporting Components
For exporting, Sketch offers a very innovative system. Every element can be added to the exportable components via the 'Make Exportable' button in the bottom right. Then, you can choose the resolution in which the element should be saved. Special selection options, for example, for Retina displays, prefix/suffix, and file formats, make exporting easier than ever. Afterwards, all exportable components can be saved in the selected format with a single click.
Shortcuts
Listing all Sketch shortcuts here is impossible and would exceed the scope of this blog article. Some shortcuts represent enormous time savings, such as using the Alt key to display distances between elements. If you want to find out more about shortcuts, I recommend the following reading from designcode.io.
Plugins
Just like with shortcuts, there are so many plugins that I cannot list them all here. Nevertheless, I'd like to introduce a few that provide me with excellent assistance:
- Top of the list is Craft by Invision. The plugin has many functions, but I mainly use it for dummy content. Images, for example from Unsplash or a specific folder, can be inserted randomly. Names, addresses, and phone numbers can also be added automatically.
- Also very practical is the plugin Clipboard Fill, which allows you to insert an image into a specific shape. Since Sketch doesn't offer this feature natively, this plugin is a great advantage.
- The plugin Magic Mirror allows you to display perspective transformations with a single click. For example, screens can be quickly inserted into shapes (e.g., an iPhone screen).
Prototyping
Since the web is agile rather than static, prototyping tools are indispensable in the design process. Sketch alone does not allow prototyping, but there are many compatible programs:
- Zeplin: Displays colours, assets, and fonts, and guidelines can be created. It also has a comment function for discussions with developers. Furthermore, source code (iOS/Android) can be exported.
- Invision App: This is an online prototyping tool that is free for one project. For multiple projects, there are various pricing models. With the Invision App, click dummies can be created, and it also has a comment function.
- Flinto: Is a prototyping tool with which scrolling, transitions, and microinteractions can be animated.
- Principle: Is also suitable for animations.
- Marvel: Offers everything from design to prototyping to collaborations.
Conclusion
I love Sketch! And I would highly recommend everyone to try it for themselves.
