Into Stormy Seas
How to Improve Your UI Design Workflow in Sketch
Let’s Go Swimming
When I learned to swim, I began with the dog paddle. Though I technically managed to get back and forth across the pool, it wasn’t with great elegance. Then I learned freestyle and was gliding through the water with ease. Similarly, there are ways to improve one’s efficiency in the design process.
Back in 2009 I wrote an article on how to refine working methods in Photoshop. I thought it would be interesting to do something similar for Sketch, based on my experience working on projects with teams. Like most interaction designers, I’ve now completed several projects using it as the primary design tool. The latest major release (Sketch 3.3 and beyond) resolved quite a few bugs. Its improved performance, combined with useful plugins, has elevated it into one of my most preferred software applications. It has pretty much become the industry standard.
Making workflow as effortless as possible — especially when collaborating with a team — leaves more energy for solving design problems, rather than the problems caused by the tools themselves.
One Master Sketch Document
One of the main reasons we all like Sketch is because of its focused nature — it works incredibly fast. Because of this, it can handle a lot of graphic elements in one single document. A lot of the time this allows me to keep all my screens for one project as separate artboards in one Sketch file.
Sketch also allows you to create individual pages within the same file, but I’ve found that working in teams the subpages sometimes go unnoticed. I’ve resolved to putting older iterations of screens or useful components on subpages and having the first page contain all the current designs. Sketch 3 sees improved performance with all these artboards in one document. However if you find your machine is chugging, then splitting up your design over several documents is fine, provided you are careful managing text styles, shared styles and symbols. I’ll explain later.
Iterations
As you’re designing you’ll be iterating constantly, trying out new directions. Sketch makes this process as easy as possible due to the speed in which you can duplicate artboards and page components. I like to keep iterations on the subpages of my document and bring the latest and greatest into the first page grouped with the rest of the design. Usually I label this page ‘Master Layout’ for clarity.
Syncing your Artboards
Once you have a sitemap, you can arrange your artboards in a similar fashion in the Sketch document. I like to name my artboards using numbers to directly reference the site map. For example I typically start with 00_Home for home, and then for example 01_AboutUs, 02a_Products, 02b_Products etc.
You can use blank artboards as a placeholder for screens that need to be designed. Having a visual representation of the missing pieces helps to identify the holes in your design and illustrates how everything fits together. As things change within the hierarchy, it is super easy to drag everything around and re-order. One last thing to remember, keep your artboards in order of hierarchy in the left column too.
Layer Structure
As with UI design in Photoshop, it pays to be neat and tidy in Sketch. Name your layers, and group them based on the hierarchy of the page. Think about how the page would be organized in code, using divs. So, at the top of the page if you have a header, then place this in a group and make sure it is at the top of your artboard layers. An example of a page structure could look like this:
Grouping page components and organizing them properly is important for several reasons. First, it means you can easily grab them and shift them around. You may want to test a page with content in different orders. Second, it means another designer picking up this file can find what they need quickly, and take a module for their screens without needing to find all the relevant layers. Third, if you are using Framer Studio to prototype you have to keep each component of the page grouped into a layer in order to reference it. Lastly, developers will thank your for the logic employed in your files when they start to build your design.
Text Styles, Shared Styles & Symbols
These features are incredibly powerful and save time, but if mismanaged can be terribly frustrating. The most common problem I’ve faced is when our designers work in separate Sketch documents, and upon merging their designs together, text styles or symbols that have been adjusted or created with the same name override each other, causing chaos. The last thing you want to be doing is going through the design making sure all the typography is correct, or adjusting the style of UI elements back to the way they are supposed to be. Knowing that this can happen means you can plan for it. At the start of a project when you and your team are iterating on different directions, don’t use any shared styles. Once you have a direction that is more formalized, create the styles and symbols then, and distribute the master Sketch document to your team so they are starting off with the essentials.
When creating text styles use a naming convention that everyone agrees with, and be as descriptive as you can. The format I’ve used recently is:
<Style Name> - <Font Name> <Style> <Size> (<color> , <alignment>)
Which looks like this:
Having this information will help when you make a style guide at the end of the project. Promise.
Photoshop & Illustrator
Sketch can’t do a lot of the things that Photoshop and Illustrator can do. If you need to create a vector illustration in Illustrator, make sure you retain any strokes (don’t outline them) and export as an SVG before bringing it into Sketch. Doing so will reduce any issues with the way Sketch interprets the file.
Typically I keep an assets folder with my Sketch file, included in this is an SVG folder and PNG folder. I export everything in here and make sure I keep AI and PSD files handy too. The one feature I would LOVE to see in Sketch would be linking to external files, like Indesign does, or some sort of smart object file like Creative Cloud. Until then, importing stuff manually will have to do.
In Photoshop I will often retouch a photo to work better with a design. It is a good idea to resize the image so it is as small as possible before you import it into Sketch. Goes without saying, but I’ve seen Sketch files containing a lot of scaled-down high resolution images, and as a result the file was massive. Either resize or crop the image and import it. Keep the original in your assets folder.
Before You Dive In
The most important thing to remember: if you design neatly and keep things organized from the start of a project, it will save you so much time in the long run. It will help your team’s workflow. This will leave you more opportunities to be creative… or more time at the beach.
