Wireframing with Sketch

While working at Mozilla, we have lots of chances to work on wireframes to specify our needs for different interfaces and user flows. We have been using Adobe Illustrator as our main wire framing tool, but recently we heard that people from other offices started to use Sketch instead of Illustrator. So last week I decided to give Sketch a try to see what it’s good at, and how it can help our design process.


What’s Sketch?

Sketch is a graphic design tool from Bohemian Coding. It can be used for wireframing, UI design, icon design and even web design. It’s a light-weighted tool created to design fast, precise, and also flexible, and it’s for Mac only.


First Impression

Before reviewing how Sketch can benefit our design process, I’ll first walk you through our current process. For UX designers at Mozilla, our workflow includes wireframing screens for new proposals and fixing bugs for current user flows. We also have to create a UX spec in a document form (usually PDFs) for other designers and developers to review. So basically, we creates wireframe of several screens, put it in a document with some notes, and then share it to others, and we’ve been doing it all in Adobe Illustrator.

As I started to use Sketch, I notice a few interesting things on first impression. First of all, Sketch has an infinite canvas where you can create your artboards. It doesn’t need to ask about your document size, and you can quickly start creating artboard to work on. Secondly, the interface is simple and clean, all the major functions are on the top, layers on the left, and detail settings on the right. With the layer view on the left side, it’s easy to browse through your assets on different artboards, and you can even search for it with keywords. And lastly, Sketch saves your file every time you make a change, so you won’t be worrying about losing your hard works.


Favorite features

After going through some Sketch tutorials and testing out some functions, I want to share with you some of my favorite features, and how they can improve my workflow.

Artboard Sizes

Sketch provides a bunch of preset artboard sizes and it’s really easy to add them into your canvas. It’s super convenient if you are working on responsive websites with multiple screen sizes. You can also use the “Make Grid” tool to quickly create an array of artboards without dragging them out one by one. There are also some interesting plugins that make it fast to navigate through artboards.


Symbol and Text Style

Symbol and Text Style is probably the most useful tool when you are wireframing lots of screens. Symbol lets you select a group of assets and make it a symbol that can be reused across all the screens you are making. For example, if you make a green navigation bar as a symbol for your mockup, and then you realise you actually want it blue, you can just modify the symbol and it will change all the navigation bar in your design. Text style is the same, but for texts. It’s like creating CSS classes for your title text or your content text. Adobe Illustrator actually has similar functions for creating symbols but I’ve never used it before. Sketch just make it much easier to use.


Vector v.s Pixel

Although Sketch is a vector-based application, it provides a view mode where you can show the pixels of your design. It could be pretty handy for designers to create pixel perfect icons.


Export Options

Sketch has a pretty flexible export options. You can easily export your design for multiple screen resolutions with suffix @2x, @3x, @4x and so on. You can export individual artboards as PNG files or export all the artboards as a PDF file. You can even drag a group of assets to your desktop to export as a PNG file. The new Sketch 3.4 even have "Share" function to localhost your wireframes and share the link to people in the same network.


UI Kits & Plugins

One interesting feature about Sketch is that it’s preloaded with different UI Kits such as iOS UI and Material Design UI so that you don’t need to create your own symbols. Another interesting feature is plugins. There are a bunch of 3rd-party plugins that can accelerate your design process. For example, I’m using a plugin that can generate “Lorem Ipsum” as my placeholder texts. You can check out more plugins here: https://github.com/sketchplugins/plugin-directory



Conclusion

I've created my own wireframing template with customized symbols, and created a document template for me to quickly load in my wireframes and modify them if needed. It seems that Sketch is a perfect tool for UX/UI designers to do wireframes, interface mockups and to manage files with great amount of assets. Still, there are some problems I encountered when trying to select an asset inside a group, or resizing a group of assets with text in it. For me, I would still use Adobe Illustrator for more detailed vector works or illustrations simply because I’m more used to the bezier curve tools there, and it’s also easier to export files between Adobe creative suite products.


Resources:

Sketch Official Website & Blog:
https://www.sketchapp.com
http://bohemiancoding.tumblr.com

Sketch Quick Overview from Design + Code:
https://designcode.io/sketch

Levelup Tutorials:
http://leveluptuts.com/tutorials/sketch-3-tutorials

Sketch App Sources:
http://www.sketchappsources.com

Sketch Tool Box:
http://sketchtoolbox.com/

Sketch Plugins:
https://github.com/sketchplugins/plugin-directory