Design with Sketch

As little design as possible

Meng To
Meng To
Jan 10, 2014 · 4 min read

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.

Image for post
Image for post
I always start with an Artboard’s resolution.
Image for post
Image for post
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.
Image for post
Image for post
Artboards can be duplicated into multiple copies. I personally use this trick all the time.
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Here, I simply deleted the shape in order to have a Fill effect.
Image for post
Image for post
You can export your Assets to SVGs.
Image for post
Image for post
If you open your SVG in SublimeText, you’ll see the codes behind. Fully editable.
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
How I organize all my icons, assets and projects in Sketch.
Image for post
Image for post
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

Image for post
Image for post
You can also set custom Keyboard shortcuts by going to System Preferences > Keyboard > Shortcuts

A Growing Community

Sketch is powerful out of the box. But like any small team, they have to prioritize on certain features. That’s where the community comes in.

Image for post
Image for post
Just name your layer and Sketch Generator will automatically export your Asset.

Fantastic Resources

One of the early complaints about Sketch was the lack of downloadable resources. Well, no more.

Image for post
Image for post
Image for post
Image for post

Design with Sketch

Sketch is a powerful tool for modern design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app