Using Sketch to Design Beautiful Responsive WordPress Websites

Using Sketch to Design Beautiful Responsive WordPress Websites

Back in 2008, little-known development company Bohemian Coding formed and created Sketch. The app was lost in the general commotion of the Internet for a long while, but recently it has taken off – and rightfully so.

Sketch 3 is now not only a viable alternative to Photoshop and Illustrator but surpasses it in so many ways, especially if your focus is web design.

Welcome to one of the best website design tools you'll ever use.
Welcome to one of the best website design tools you’ll ever use.

It’s obvious that Sketch was made with websites in mind, but the attention to detail and the thoughtfulness put into the UI makes it great for many types of design work. It even integrates with a bunch of different services, including InVision.

I use it for many of my projects and can’t recommend it enough.

In this article, I’m going to walk you through just what Sketch is capable of and point out some of the functionality that has made me choose it over Photoshop for most of my design needs.

Before We Get Started

Before we start getting into how to use Sketch, it’s important to point out that it’s only available for OS X users. Unfortunately, the developers aren’t considering supporting Sketch on Windows or Linux. Usually, we try to cater to both Windows and Mac users but, in this case, it’s difficult to do that because there is just nothing approaching the quality of Sketch on these other platforms.

Perhaps the closest application is Adobe Fireworks, which focuses on web development. Unfortunately, Adobe has discontinued this product but you can still use it. It’s pretty solid and bug-free, but the catch is there just won’t be any new versions.

Using Sketch: Inserting Elements

The first action you’ll likely take when you start using Sketch for the first time is inserting a new element.

The easiest to start with are the shapes, of which there are eight: line, arrow, rectangle, oval, rounded rectangle, star, polygon, and triangle.

A shape and some properties.
A shape and some properties.

On the right, you can see a rectangle with some modified properties.

Using the property inspector panel, you can change numerous aspects of a shape including its size, position, border-radius, opacity, blending, fills, borders, shadows and more. Best of all, you can assign multiple fills, borders and shadows to create more complex designs.

At first I thought the use of the inspector panel would be cumbersome, but as it turns out I was quite wrong. When creating a new website you want to be able to give a developer a perfectly planned design. If the developer can actually measure the distance between two widgets or the distance between the post title and the meta data, they won’t have to come back to you to find out those details and tiny bits of information.

The inspector panel allows you to place things pixel perfectly. In tandem with the excellent automatic guides, you’ll never think about Photoshop’s hit and miss auto snapping again!

If you’re a vector kind of person you can use bezier curves just like in Photoshop or Illustrator to create whatever shape you want. I found an awesome video about how bezier curves work if you’ve always wondered what goes on in the background – it’s super-interesting!

Drawing nothing using bezier curves.
Drawing nothing using bezier curves.

As you can see from the screenshot above, you can add multiple backgrounds, multiple borders, change the opacity, add shadows, and do all the other great things with custom shapes just as you can for pre-made shapes.

Inserting text and images is, of course, pretty much standard. Just tap “T,” click and begin writing. You can insert images by simply dragging and dropping them into the application or copy-pasting from the clipboard. What I love about image placement is how easy it is to crop an image after placing it. Double-click, select and click crop.

Artboards are another of my favorite features. They allow you to compartmentalize your working area into different segments. This is ideal for creating a side-by-side desktop and mobile view. There are some pre-made artboards available to use, but you can create your own custom ones easily enough.

Inserting symbols is a powerful feature, allowing you to work faster and more consistently.

A symbol is a special type of grouped object. You could create a “buy” button and make it a symbol. This symbol would contain the background and the button text. You can then insert this symbol anywhere and editing one of them will update all the others. We’ll look at this in a bit more detail below.

Create new objects in Sketch with precision.
Create new objects in Sketch with precision.

Organizing Your Work

Organization is another area where Sketch excels far beyond Photoshop, in my opinion. There are five features you can use to create a super-organized and logical document: pages, artboards, layers, groups and symbols.

Pages can be used to show different pages of a website for example. Each page has its own set of layers of course. It’s kind of like having different spreadsheets in a Google document.

Artboards can be used to organize different views of your design. I use them to create the views for tablet and/or mobile versions of the same site. I’ve also used artboards to document elements of a design. I created an artboard for buttons, one for typography, one for common elements and so on.

Layers work just like they do in Photoshop or any other layer-enabled software. Layers are ordered top-down, the higher a layer is in the list, the closer it is to the “front” of the view. Layers can be simple objects (text, a shape, an image, etc.), or they can be groups or symbols.

Layers artboards groups and symbols
Layers, artboards, groups, and symbols

Groups are grouped simple layers. Just command or shift click layers to select multiple ones and click on the group button (or press Command + G) to create a group.

Once a group is created, all the layers it contains will go inside a folder which you can (and should) name.

Clicking on any element within a group in the main view will allow you to move the whole group – super handy.

You can double-click in the main area to enter a group and reach an element within it to manipulate only that element.

Symbols are special groups. A symbol works the same way as groups do, but changing a symbol anywhere in the document will automatically update all the other symbols of the same type. This is super-handy for creating buttons and other common elements that are featured throughout your design.

Text is always a huge part of a design, and something Photoshop doesn’t exactly make easy. Sketch allows you to add text styles, which will make your work much more consistent. They work just like you’d expect from Microsoft Word or Apple Pages. Select a text layer and choose a style for it to instantly change all its properties. Best of all, modifying a style anywhere will update text with the same style everywhere. This is great for creating consistent widgets, page titles and other text-based material across multiple artboards and multiple pages

Sketch Plugins

To make Sketch even better, you can use plugins. There are tons available on the plugins page and you’ll find a bunch more on Github.

One of my favorite ones is Align Text Baseline. Aligning text is a bit difficult to do because the vertical-align doesn’t get it right due to the line height of the text element. This plugin calculates the difference and aligns the text exactly to the middle of the chosen element. Perfectly aligned buttons, here I come!

I also love the Unsplash It Sketch plugin. Draw a rectangle and grab a random image from the always amazing Unsplash.

Take a look at this demo from the creator:

Unsplash It Sketch plugin demo
A demo of the Unsplash It Sketch plugin

Sketch Palettes is handy for projects where you’re working with a set color palette (should be all projects probably). You can save and load colors very easily and then select them anytime, as expected.

Creating test data is always a large chunk of our work as designers and developers. In design work, it largely consists of a lot of copy-pasting and then typing. There are some great plugins that help out with this task. Personas for Sketch allows you to generate user data right inside your document, here’s how (thanks to the project author):

Personas Sketch plugin demo
A demo of the personas plugin for Sketch

I love how plugins have been made for niche design needs as well.

The Artwork Fetcher allows you to select elements, specify an author and then wait as album covers are pulled from Last.fm right into your design. Here’s a demo, courtesy of the plugin author.

Sketch artwork fetcher plugin
A demo of the Sketch artwork fetcher plugin

There are a bunch of other really useful plugins out there, but I think these really show the power of Sketch, the ability to use third party services to empower you to work faster and better. If you have some favorite plugins for Sketch, please do share in the comments!

So Why is Sketch Better?

For me, Sketch has been a Godsend. I have finally ditched Photoshop for web design altogether! I have a number of reasons for this, which I’ll go through in detail so you can see where I’m coming from:

1. You Can Get Super Precise

Sketch gives you better precision all-round. One example is the customizable grid and the way-way better auto-guides, which actually help, as opposed to being in the way (even allowing you to set items equidistantly).

I also enjoy the ability to design by numbers, to type pixel values. This leads to pixel-perfect designs, which minimizes communication time and maximizes efficiency and clarity.

2. It’s Easy Vector Approach

I love myself some vectors, but what I love even more is the ability to work with them easily. Photoshop makes this unnecessarily complicated for some reason.

I have the latest version of Photoshop CC and when trying to add an SVG icon to a design I receive the error: “Could not place the document ‘1445368362_bubble.svg’ because no parser or file format can open the file.” I’m sure the company that makes a dedicated vector editor could figure this out. In Sketch, I just drag and drop my SVG icon into the app and it’s displayed as you would expect.

Another aspect of vector editing I love is the four buttons for union, subtract, intersect and difference. This allows me to select two shapes and combine them to create something nice. To make the speech bubble below I added a rectangle, then a triangle. I used smart guides to position them properly, selected them both and used union to make them into a single shape. Too easy.

Combined shape in Sketch
Combined shape in Sketch

3.It Supports Importing SVG

I’ve already talked about how you can drag and drop SVG images (I use icons quite a bit) directly into the app. I was pleasantly surprised when I could also expand the folder of the image to get at all the layers and edit the icon itself.

SVG Editing in Sketch
Editing a layer of an SVG icon

4. How Awesome it is at Masking

Masking is another area where Sketch gets it just right – I didn’t expect it to be so smooth!

To create a rounded image all I needed to do was draw a circle over it, select both layers and hit the mask button. Voila, roundedness achieved!

What’s happening is also very obvious in the layers panel, a huge plus for people who, like myself, aren’t really proper designers.

Masking in Sketch
A circular mask applied in Sketch

5. Pixel Perfect Spacing

There are many situations where you’ll need to space things out evenly and Sketch does a wonderful job of helping you achieve this.

Create objects, select them, right click and at the bottom of the contextual menu you’ll see the options to distribute horizontally and vertically. Works like a charm. Every. Single. Time.

6. Exporting is Easy

Sketch also boasts an extremely powerful export option. So much so, that whole tutorials have sprung up to show you how to get exactly what you want.

You can export whole pages, artboards, and even specific elements.

7. It’s Fast

I’ve heard reports of performance issues in Sketch, but these must have been fixed by the time I started using the app because I’ve never had an issue – quite the opposite.

I did a redesign of a site late last year and the Photoshop file was somewhere in the 100MB region. I have a pretty powerful iMac and it sometimes choked on it, having to wait for ages for some crops and getting choppy performance when scrolling through the document. I don’t even want to go into what happened when I wanted to nudge a bunch of elements (5-6 second wait).

I recreated the same design in Sketch and the file was about 25MB – a fourth the size of the PSD file. I experienced absolutely no lag no matter what I did – everything was much snappier than in Photoshop. I actually selected all elements on a page and nudged them, they went 10px to the left immediately. I could even click and drag everything around, it was rendered without any issues.

8. The Sweet Spot

To me, there is something intangible about Sketch that makes it better than anything I’ve ever used for creating websites. I think a large part of this is that it just works as you’d expect it to. I have a bunch of examples to demonstrate this.

You can add a rectangle and a rounded rectangle separately. In one instance, I added a regular rectangle and realized that I probably want a rounded one. Instead of having to delete it and create a new shape, I found that I could control the border radius and just added 3px.

Reuse your elements and save time.
Reuse your elements and save time.

Right after, I wanted to create a rectangle where only two of the corners were rounded. I thought I’d have to create two shapes and merge them, but I realized that the radius can be controlled for each corner separately.

I can’t recall all of them, but there were at least 5-6 moments where I actually shed a tear because I wanted to do something in a specific way and Sketch had the option right there, or did things even better. It doesn’t get better than that!

Websites Made With Sketch

I’ve used Sketch personally to handle the design of 3-4 WordPress projects now, including the redesign of a molecular biology website named Bitesize Bio and the upcoming redesign of the popular tech blog gHacks.

gHacks redesign with Sketch
gHacks redesign with Sketch

The sports shoe company Fleet Feet was also designed completely in Sketch:

Fleet Feet designed in Sketch
You can kinda tell it wasn’t designed by me because it actually looks nice

Aside from some of these real world examples, you can find complete website concepts as Sketch files that you can use as a basis for your own design, or to just learn a bit about how others make things.

A great example is this portfolio concept:

Portfolio concept in Sketch.
Portfolio concept in Sketch.

Using Sketch for Your Next Project

I first started using Sketch at the beginning of this year and, as you can see, I’ve become quite the fanatic.

If you’re interested in what others think there are a lot of reviews out there. Here are some of the personal stories that may be interesting if you’re considering switching:

It was one of those apps where I didn’t even have a learning curve (or just a very shallow one). I loved it instantly because it allowed me to do what I wanted, exactly how I wanted, and with the features I’ve always longed for in Photoshop.

Sketch’s developers have continuously worked to fix bugs that arise, pretty much always successfully. The most telling scenario is that even before they fixed many bugs a lot of people reviewed it. Almost all reviews I read said something along the lines of, “While Sketch has plenty of bugs, our team still decided it was better for UI design.” I feel the same way, any negative side of this app is so easily outweighed by all the amazingness it contains that switching back to anything else seems completely unnecessary.

So is it time to ditch Photoshop? If you’re a web designer at heart, then maybe. Photoshop has advanced photo editing capabilities and a lot of additional functionality that Sketch doesn’t, but the point is that it isn’t needed. I still have Photoshop installed, but next month I’m going to ditch it altogether and use Pixelmator instead. It does everything I need at a fraction of the cost.

If you haven’t tried Sketch yet I strongly urge you to do so. Once you’ve used it for a while please do drop us a line in the comments and tell us what you think. If you have any great plugin recommendations I’d appreciate that as well as I’m always on the lookout for great extensions.