Best Practices for Sketch
By: Kai Tan
Tags: Sketch

Sketch is fast becoming the go-to app for user interface design. Here are some good practices to get used to:

Good Naming Conventions

When you set objects to export, they are exported into the folders you group them in, with the layer names. When exporting assets for development, stick to layer names that match and use folders that will make sense to the developer.

On occasion it can be as simple as inserting a prefix (eg. “img_”) to help out the developer. Whatever naming system you decide to use, make sure it’s discussed with the developers first so you can find out what’s best for everyone. This will make a much more organized process of exporting and importing.

Organizing Art-boards

An art-board is a dedicated drawing area or canvas that represents a page, view, or component of an interface. Sketch exports art-boards into files or pushes them directly into a prototyping platform. It’s a good idea to keep the naming consistent, transparent and in an order.

In Sketch’s drawing area, art-boards are placed in a vertical direction. To distinguish different forms of the same view, each art-board gets a trailing number, starting at 1.

This method not only gives you and others better orientation in large Sketch projects, it will also allow your exported files to appear in an order, which in turn, makes it easier to find or just replace a single screen. This will be highly beneficial for any large project.

Logotypes & Outlines

If you’re manipulating or resizing logotypes, make sure you convert it to outlines first. What converting it to outlines will do, is stop treating it as text but instead treat it as a group of vectors. You will then be able to tweak specific letters, adjust the spacing between letters and resize without losing any of your proportions.

Text Styles

Text styles can be applied to any layer of text in any art-board or page. This can be great for when you’re creating a website UI, web app interface, or mobile UI.

This can allow you to change all text on the same style seamlessly. If Text Style 1 for example has text across 50 pages but now needs to be turned from black to white text. Text styles will mean that one change of what black to white will effect all text across all pages as long as they are within the same text style. It’s not just colour, positioning, size and spacing can also all be changed for all of the text.

Symbols

Symbols are just like text styles, but for groups of layers or non-text objects. You can turn any button, box, or even entire UI frame into a symbol. This means, just like text styles, you just need to change that element in one place and will apply to all of the same symbols across all art-boards and pages.

Multi-Screen View

If you zoom out of a load of art-boards you can quickly see your flows and product depth. You can use this view to design a user journey, then design the screens one by one. Later, you can zoom out to get a high-level overview. Doing this from time-to-time will help you stay focused on the big picture.

Layouts

Design based on a web grid will make the developer very grateful. Turning a design into code is a lot easier when you don’t have to build a bunch of custom layouts. Keeping to a grid and consistent layout sizes will mean for a much smoother and faster developing phase.

Sketch Community

Of course there are loads of tutorials online, there’s nothing like learning from those with experience.While there’s tons of helpful tutorials, there’s nothing like learning from those with experience.

Sketch Resources:

Sketch App Sources

Sketch Resources

Sketch Shortcuts

Sketch Community

SketchMine

Brilliant Sketch

Sketch Tricks

Sketch Casts

Sketch Tips