Design with Sketch

As little design as possible


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.

I always start with an Artboard’s resolution.
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.
You can export your Assets to SVGs.
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

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.

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

Sketch Generator — Just like Photoshop’s Generator or Slicy, this neat plugin allows Sketch users to export assets merely by naming its layers.

Symbols — Love to re-use elements in your design? This plugin is for you

Here’s a full list of all the plugins available.


Fantastic Resources

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

Teehan+Lax released a very complete iOS 7 Sketch template.

I also use Tap+Apps iOS7 Template because they have other UI elements and the Keyboards broken down into layers.

For more Sketch templates, go to Sketchmine.co, SketchAppSources, Sketch’s Website


Discuss on Designer News