Design with Sketch

As little design as possible

Meng To

Follow

Published in

Design with Sketch

4 min readJan 10, 2014

--

It’s been one year since I first wrote about Sketch. Since then, Sketch released Mirror, Background Blur, and made many improvements for Artboards, SVG support and speed. All of these considerably allowing us designers to adapt to the future of design — a world with as little design as possible, and where user interface design is at the forefront. It makes us focus on responsive design rather than photo editing. Interactions and animations instead of faux textures. Sketch is the tool that makes our workflow 10x faster so that we can move on to other aspects of design.

Artboards

Over the year, I fine-tuned my design process. Now, I design straight for Mobile, then work my way up to Web. I have found that using Artboards was the most efficient way to create a responsive design.

In this design, I started with the iPhone first, designing at 100% scale. Then, I create the iPad resolution, which fits nicely on a Desktop as well. It’s important to keep things simple for the development stage.

Artboards can be duplicated into multiple copies. I personally use this trick all the time.

Often, you need complete control over your assets. Artboards are perfect for that reason.

Sketch Mirror

Mirror works beautifully with Artboards. You can quickly view your design from your iPhone and swipe between artboards.

I created 3 artboards for the List a Car experience. With Mirror, I was able to preview them on my iPhone. The 2nd screen was making sure that it works on an iPhone 4 without scrolling.

Vectors and SVG

I can’t tell you enough how crucial it is to work with vectors. As visual designers, we shouldn’t be happy with just using PixelLove and Streamline out of the box. We gotta customise them! Give them love. Add colors and re-shape them for the context that you design in.

Here, I simply deleted the shape in order to have a Fill effect.

If you open your SVG in SublimeText, you’ll see the codes behind. Fully editable.

SVGs are growing in popularity for good reason. You can colour them, animate them and they’ll look sharp on any device. We’re finally starting to understand them.

If you design in 2X first like me, you’ll enjoy the half-size export. Oh, and all the assets’ names are synchronized with your Artboards’ names.

Background Blur

This may seem insignificant, but it’s not. When you’re designing for iOS 7, you don’t want to manually blur things. Blur is an essential method for designing with depth and context while keeping all the natural colors. Just using a 80% black layer (to make the text readable) will completely dim the colors. Instead, you can dim less and use Blur.

Here I blurred background interface underneath the dialog. I also made the price text more readable by blurring a part of the car.

iCloud Support

I’m a visual person. I love to organize my designs in a very visual way. That’s why I stopped using Dropbox to browse and started using Mavericks’ tags.

How I organize all my icons, assets and projects in Sketch.

Since I organized my Assets into Tags, I can easily replace them in Sketch.

Keyboard Shortcuts

Since we spend an obsessive amount of hours designing in Sketch, we gotta work more efficiently with Keyboard shortcuts. Here’s a great list: http://sketchshortcuts.com