Hot News Tech

Using Sketch For Responsive Web Design (A Case Study)

If you’re a member of the web or UI design community, it’s been hard to avoid talking aboutSketch over the last year. The launch of this design app shook up an industry dominated by Adobe for more than two decades, and it has caused an ongoing debate about whether Sketch is better than Photoshop and Illustrator (and Fireworks).

A longtime Photoshop user myself, I made the switch to Sketch in early 2014 and haven’t looked back. I love certain features of the program, such as the simple interface, file autosave and infinite canvas. However, plenty of other programs out there have similar features, and until the most recent update (Sketch 3.2), users were battling a lot of bugs in the app.

So, why do I continue to use Sketch? Bugs or no bugs, it has become the best tool for UI design, including responsive web design.

Case Study: Fleet Feet Sports

Let’s look at a newly launched website design that I worked on for Fleet Feet, a running store with over 80 franchises across the United States. Unlike its old website, the new Fleet Feet has an ecommerce component to sell products online, and it’s responsive. With more than 15 templates to design for multiple devices and several rounds of revisions, this project was huge.

In Photoshop, staying organized amongst all of the documents and rounds of revisions would have been daunting and time-consuming. However, with Sketch’s tools, I was able to work through this project from start to finish more smoothly, easily and quickly than I could have done using another program. Let’s look at how creating a website in Sketch vastly improves the responsive design process.

A Look At The Basics

Firing up Sketch, you’ll immediately notice a clean, unbloated interface. Yes, Sketch’s toolset is certainly pared down compared to some other design programs. However, it includes only what can be recreated with HTML and CSS3. So, there are no unnecessary photo filters, 3D tools or other tools that would slow you down. The app provides only what’s necessary to do web and UI work, making for a much faster design process.

And what Sketch lacks, its plugins make up for. Sketch plugins are akin to Photoshop’s and cover everything from a simple tool that swaps the border and fill color to complete content generators. I waited several months to start using plugins myself because I wanted to be completely comfortable with the program. Big mistake — many of these plugins are huge time-savers and have become integral parts of my workflow.

The first thing I recommend downloading when starting in Sketch is Sketch Toolbox. This plugin manager allows you to directly browse and install plugins and to keep track of what you’re using.

Sketch Toolbox
Sketch Toolbox. (View large version)

The second basic thing to note is that everything you create in Sketch is vector. In the age of responsive design, creating a design in vectors is key. Designers constantly have to think about high-definition versus normal-definition displays, narrow versus wide screens and so on. Building designs that rescale for all of these formats is essential, yet creating a separate mockup for each size is tedious and time-consuming. Sketch’s ability to freely resize objects saves time and energy.

What sets Sketch apart from other vector-based programs is that it’s also pixel-aware. The shapes you draw always snap to the nearest pixel, meaning you no longer have to worry about half-pixels or blurry lines. This makes the program ideal for screen design.

Advertisement

Getting Started

Now, let’s walk through how I used Sketch to design Fleet Feet’s new website. In the age of responsive design, being able to hop directly into designing a mockup is pretty rare.

Because Fleet Feet would be adding new components to its website, first came the content strategy. I sat in on several meetings early on to discuss how the new website would be laid out. I like to use a handy Sketch plugin called AEFlowchart to create site trees for the websites I work on. For Fleet Feet in particular, it was useful for keeping track of the website’s new organization and for having something I could compare with my team. This was such a helpful reference aid in the design process, and I never would have spent the time creating it in another program simply because it would have been too time-consuming.

AEFlowchart plugin in action
AEFlowchart plugin in action. (View large version)

Sketch also makes moodboards simpler to create and a better project resource. First up, note that all of your files can live in one document. Sketch contains a page drawer in the artboard sidebar that allows you to quickly scroll between files. For large projects like this one, it was particularly nice to be able to quickly jump back and forth between the site tree, my moodboard and my mockups as I designed or made changes.

Let’s walk through an early version of one of Fleet Feet’s style tiles (of which a handySketch template is already available to download). Being able to create typographic elements is very useful because you can create text styles for inline styles such as headings and block quotes and then apply those styles later to text in other documents. If your client decides that they hate the h1’s font family later on in the design process, all you have to do is update one instance of the style and it will update every instance in your project’s files. The app also uses native text rendering (anti-aliasing) so that text appears in the browser exactly how it appears in the design file — no more wondering if the lightweight version of the typeface you chose for headings will be readable on screen.

Text styles in Sketch app
Text styles in Sketch app. (View large version)

Color management is also simplified with Sketch. Create the color palette in your moodboard, and the most common colors will be pulled out above all swatches for quick use later in the design process. In addition to common colors, the 3.1 update allows you to add custom colors to your document swatches (and according to 3.3’s beta notes, custom color palettes are coming soon).

Finally, just as you can scroll through each of your files in one document, you can also copy and paste objects and object styles (such as gradients and color fills) from one file into another. This feature has been impossible in Photoshop, but it’s very useful. Being able to copy and paste elements from a moodboard to your first mockup, and even objects from one mockup to the next, is great.

Designing The Home Page

Now that you’ve seen how to create some basic styles in a document, let’s look at how I created some of the elements on the home page.

Fleet Feet’s home page
Fleet Feet’s home page. (View large version)

One of my favorite features of Sketch is the built-in layout grid. In Photoshop, I’d have to rely on a plugin, a series of guidelines or separate layers with a makeshift grid that wouldn’t be easily editable. In Sketch, you can easily toggle a transparent layout guide and quickly change the column and gutter sizes. To edit the layout grid, go to “View” → “Layout Settings.” I’ve created a default 1080-pixel, 12-column grid with 30-pixel gutters, which I just change from project to project as needed. Whenever I want to see the grid or turn it off, I simply hit Control + L.

Working with grids in Sketch: easy!
Working with grids in Sketch: easy! (View large version)

As mentioned, anything possible in CSS is possible in Sketch. Creating rounded corners on an action button is as simple as clicking the object and adjusting the radius in the sidebar. Gradient overlays on images take just one click to add, don’t depend only on the colors in the swatches, and render faithfully to what a browser would show.

While the CSS3 tools are nifty, several other design programs out there have these same tools. Sketch takes it one step further by enabling designers to copy accurate CSS styles for these elements. Just right-click any object to copy the styles, including the layer’s name as a comment above the code. This makes for a more seamless experience between design and development.

In addition to creating and copying CSS styles, designing duplicated content is easier, too. Sketch allows you to turn a group of objects into a symbol that can be copied and repeated, and any changes to that object are automatically synced to all instances!

Look at the blog posts at the bottom of Feel Feet’s home page. Because there are only three, making changes to all of them wouldn’t be a huge deal, but it would still be tedious. Using symbols, we can play around with the sizes of the images, text and colors for all three at the same time, making life a little easier. Symbols even work between templates, so if we decide to use the same layout on the page listing blog posts, all we have to do is copy an instance of the symbol there, and the changes will sync between all of them. When you’re ready to add in real content, like a post image or a headline, all you have to do is right-click and detach the object from its original symbol.