Using Sketch For Responsive Web Design (A Case Study)

Using Sketch For Responsive Web Design (A Case Study)
// Smashing Magazine

If you’re a member of the web or UI design community, it’s been hard to avoid talking about Sketch1 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 Fireworks2).

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 Feet3, 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 plugins4 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 Toolbox5. This plugin manager allows you to directly browse and install plugins and to keep track of what you’re using.

Sketch Toolbox6Sketch Toolbox. (View large version7)

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.

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 AEFlowchart8 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 action9AEFlowchart plugin in action. (View large version10)

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 tiles11 (of which a handy Sketch template12 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 app13Text styles in Sketch app. (View large version14)

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 page15Fleet Feet’s home page. (View large version16)

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!17Working with grids in Sketch: easy! (View large version18)

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 symbolthat 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.

Symbols can simplify your workflow and save you time19Symbols can simplify your workflow and save you time. (View large version20)

While I do use symbols for things like blog posts and product listings, I like to use the Dynamic Button21 plugin for buttons on the page. The plugin essentially creates a symbol for your button, but automatically adjusts the padding on the sides according to the length of the text. It’s a great time-saver with pages that have several buttons, such as this home page. Simply create a text layer with your initial button text, select the plugin, edit the layer’s name to reflect the padding of your button’s background (for example 10:20:10:20), hit Command + J and ta-da! You’ve now got a dynamic button that you can repeat consistently throughout the design just by editing the button’s text.

Dynamic buttons in Sketch22Dynamic buttons in Sketch. (View large version23)

Creating A Product And Team Listing Page

I touched briefly on how helpful symbols can be on the home page, but what about with pages with a lot of repeated content, like product and team listing pages? While using a symbol to create an individual item in a listing would be helpful, content will eventually need to be added to all of these objects in order to look realistic to the client.

Adding content to 20+ items in a mockup would be a huge pain. Additionally, clients rarely have content ready before the design is approved. Thankfully, Sketch has several plugins to generate content automatically in a design.

For something like a product listing page, we don’t want to spend a lot of time searching for shoe images with white backgrounds prior to the first round of revisions; instead, we just need a placeholder image. The Day Player24 plugin is a great resource that fills in placeholders from various image services. I like Placehold.it25 because that’s what the developers who I work with use, and I use Lorem Pixel26 to get specific images. Select the plugin and the image service you’d like to use, edit the options for your placeholder such as dimensions and color, and insert it in the product object group. That’s much easier than searching for images on Google to use as placeholders!

The Day Player plugin in action27The Day Player plugin in action. (View large version28)

For mockups that need significantly more filler content, I like the Content Generator29 plugin. The team listing page, for instance, needed a male or female image, a name, a title and some contact information. Using the plugin, all I had to do was select the image placeholder boxes for each of the team members, go to the plugin options and choose between a male and female avatar. Filling in a name, along with an email address and phone number was also just as simple.

Sketch’s features aren’t just useful for mockups with repeated content, but for standard web pages as well. Let’s say we need to add some text to the bottom of the team page, where there’s a bit of text explaining careers with Fleet Feet. For placeholder text, we can again use the handy Content Generator30 plugin to fill in lorem ipsum text, completely eliminating the need to find an online service to generate the same thing. Also, did you notice the bullet points in the text? Another great feature of Sketch is the built-in generation of numbered and bulleted lists — a feature that has always been lacking in other design programs (including the almighty Photoshop and the screen design-oriented Fireworks) and painstakingly tedious to achieve. Being able to format text exactly how it will appear in the browser is great, and Sketch helps you do it!

Bulleted lists in Sketch? Easy!31Bulleted lists in Sketch? Easy! (View large version32)

Designing Mobile And Tablet Mockups

I’ve touched on how to create several elements for a standard web page. Now, let’s get into the nitty gritty of why Sketch is so great for responsive web design.

One of my favorite features of Sketch is the support for multiple artboards on one canvas. Photoshop forces you to create multiple PSD files and then switch between windows to work on various mockups. This process was such a hassle that I would create mobile and tablet mockups only for big-budget projects.

In Sketch, you can see desktop, tablet and mobile mockups all in one view, allowing you to work on the mockups simultaneously. For Fleet Feet in particular, multiple artboards proved to be especially helpful because of the sheer number of templates. When editing symbols, text styles and colors, I could see how changes affected all of the mockups at once. Seeing this also helps the designer to remain conscious of content flow and interactions going from desktop to mobile.

Multiple artboads in Sketch allow you to work easily on desktop, tablet and mobile mockups at the same time33Multiple artboads in Sketch allow you to work easily on desktop, tablet and mobile mockups at the same time. (View large version34)

Creating these multiple artboards is also easy in Sketch. Simply press A to create an artboard, and Sketch will present a list suggesting 28 common screen and icon sizes to select from, including “Retina” sizes. This is particularly helpful in responsive design because you don’t have to worry about getting the dimensions right when creating mockups.

Another neat feature of Sketch is that you can preview designs on the device they are meant to be viewed on. Although not technically a built-in feature, the Sketch Mirror35 app syncs with your open document and allows you to see how your design would look on an iPhone or iPad and instantly preview changes. This app has proven to be great for making final tweaks and showing off designs to clients.

While creating static mockups in Sketch at different breakpoints can be a great way to show a client or developer how something should appear, it’s not always the most effective (or efficient) way. Giving a more fluid and realistic preview of how a responsive design will actually look through interactive prototyping is quickly becoming a necessity for web designers. While Sketch doesn’t have a built-in prototyping feature, thankfully other programs are integrating Sketch in their workflow models. Well-known interactive prototyping apps such as InVision36, UXPin37 and Marvel38 can now directly use Sketch files. Even prototyping plugins look to be on the rise also. Sketch Framer39 uses FramerJS40 to help you create interactive prototypes directly from the canvas, and it currently works with Sketch’s latest beta (3.3).

Moving To Development

Once the Fleet Feet design was ready for development, it was time to export the assets. When I first started using Sketch, none of the developers I worked with had the app, and I wasn’t going to force them to purchase something that I was just testing. Thus, it was up to me to slice up all of the assets for the project.

Thankfully, Sketch makes exporting all of the files super-easy. Take the icons we’re using in the mobile navigation, for instance. By just clicking the group of layers and then clicking the “Export” button in the bottom-right corner, I can save the icons for web in SVG or PNG format or in PNG @2x for Retina displays. This covers all of the bases for displaying the assets on various devices.

Exporting assets in Sketch41Exporting assets in Sketch. (View large version42)

So, I’ve delivered graphic assets to the developers, but how exactly would they get by without knowing all of the colors, fonts and font sizes? Sketch makes this simple, too. Using the Sketch Style Inventory43 plugin, you can create in one click an inventory of all of the swatches and HEX codes of colors used on the page. Fonts work the same way. I like to use the plugin to create a text styles inventory as a reference guide for developers. Also, remember that I mentioned that you can copy the CSS styles for any element in a document? To get these text styles into a useable form for developers, all you have to do is select all of the layers in the type inventory, copy the CSS styles and paste them into a style sheet. Using Sketch, you can give developers all of the assets and styles they’ll need to get started without their ever having to touch the app!

What’s Missing?

I’ve talked a lot in this article about how great Sketch has been for my design workflow, but what about the downsides? Well, the app still cannot be theonly design program in your toolbox. The bitmap-editing tools in Sketch leave a lot to be desired, and they don’t work for me most of the time, leaving me to crop or delete plain backgrounds in Photoshop. And while intensive illustration work can be done in Sketch, it often slows down the app.

Another downside of Sketch is its plugins. Although I’ve raved about many of them in this post, I wish many of these features were built directly into Sketch. Because these plugins are created by third parties, a simple update to Sketch or the plugin itself could render them inoperable. This means you can never completely rely on them in your workflow.

Finally, this program is still restricted to Mac OS X users. Not only does this rule out designers who use Windows, but it makes it very unlikely that you can ever share a native file with a developer, project manager or client.

Conclusion

Although it’s definitely still a work in progress, Sketch continues to be my go-to web design program. Its tools and interface prioritize design for the web. Things like the premade artboard templates, symbols and simple exporting functionality have drastically sped up my workflow and made the design process a little easier. Sketch has also improved my entire workflow, from moodboards to the early stages of development, making it an optimal tool for responsive design.

Have you tried Sketch yet? Has it become your tool of choice for responsive web design? Do you have any other tips or tricks from your workflow that I haven’t mentioned? Let us know in the comments!

Additional Resources

 

21 Comments

21 Comments
  1. Awesome blog! Is your theme custom made or did you download
    it from somewhere? A design like yours with a few simple adjustements would really make my blog stand out.

    Please let me know where you got your design. Thank you

  2. seo

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

  3. I want to express thanks to this writer just for bailing me out of this matter. Just after surfing around through the search engines and finding opinions that were not beneficial, I thought my life was well over. Living devoid of the strategies to the difficulties you’ve fixed as a result of the guide is a serious case, and the kind which may have in a negative way damaged my entire career if I had not noticed your blog. Your actual capability and kindness in playing with every item was precious. I’m not sure what I would have done if I hadn’t encountered such a thing like this. I am able to now look forward to my future. Thanks a lot so much for your high quality and effective help. I won’t hesitate to propose the sites to any person who will need counselling on this situation.

  4. A lot of thanks for your own effort on this web page. My daughter loves conducting internet research and it’s easy to see why. I know all concerning the dynamic ways you render sensible guides by means of this blog and as well as foster contribution from others on this area while our favorite simple princess is certainly learning a lot. Take pleasure in the remaining portion of the year. Your doing a great job.

  5. I want to show my appreciation to this writer for rescuing me from this type of dilemma. As a result of browsing throughout the the web and finding suggestions which were not pleasant, I thought my life was gone. Living without the approaches to the difficulties you have solved through your entire blog post is a critical case, as well as those which may have badly affected my career if I had not discovered your site. Your own training and kindness in taking care of all the details was very useful. I don’t know what I would have done if I hadn’t discovered such a step like this. It’s possible to at this time look forward to my future. Thanks for your time very much for your impressive and amazing guide. I will not think twice to propose your site to anyone who wants and needs guidance on this subject.

  6. I needed to send you a little bit of remark so as to say thank you over again for the pretty advice you have contributed on this page. This has been really tremendously generous with people like you to convey unhampered what numerous people would’ve supplied for an e book to generate some dough for their own end, particularly now that you could have done it in case you considered necessary. The guidelines as well served like the fantastic way to recognize that other individuals have the identical zeal the same as my very own to realize somewhat more when it comes to this issue. I think there are numerous more pleasant situations ahead for those who take a look at your website.

  7. I simply needed to say thanks all over again. I am not sure the things I might have achieved in the absence of those recommendations shown by you regarding my topic. This was an absolute daunting situation in my view, nevertheless witnessing this expert form you solved that made me to leap with happiness. Now i’m happy for the service and then expect you know what an amazing job you were putting in teaching many others with the aid of a site. More than likely you’ve never encountered any of us.

  8. Thanks so much for giving everyone an exceptionally spectacular chance to read in detail from this blog. It’s usually very excellent and jam-packed with a good time for me personally and my office colleagues to visit your web site not less than thrice every week to read through the new secrets you have got. And lastly, I am actually satisfied considering the splendid pointers you serve. Certain 1 points in this posting are indeed the most beneficial we’ve had.

  9. I have to show thanks to you just for rescuing me from this particular setting. Because of surfing throughout the world-wide-web and meeting principles which are not productive, I thought my entire life was over. Existing minus the approaches to the problems you have solved by way of the report is a crucial case, and the ones which might have adversely affected my career if I had not discovered your blog post. Your primary mastery and kindness in taking care of a lot of things was vital. I don’t know what I would have done if I hadn’t encountered such a subject like this. I’m able to now look ahead to my future. Thanks a lot so much for your impressive and results-oriented help. I will not hesitate to refer your blog to anybody who ought to have recommendations on this matter.

  10. I am only commenting to make you understand what a fine experience our child had going through your web page. She even learned a lot of details, which include how it is like to have an excellent coaching mindset to let other individuals really easily completely grasp some tricky subject areas. You undoubtedly exceeded her expected results. I appreciate you for delivering such priceless, trusted, edifying as well as easy thoughts on the topic to Evelyn.

  11. My wife and i got very thrilled when Chris could finish off his researching through the precious recommendations he obtained when using the weblog. It is now and again perplexing to just find yourself releasing strategies which a number of people have been trying to sell. Therefore we recognize we have got the writer to thank because of that. The most important explanations you have made, the easy site navigation, the relationships you will assist to engender – it’s got most sensational, and it’s letting our son and us reason why that subject matter is excellent, which is certainly highly mandatory. Thanks for everything!

  12. I and also my buddies were found to be reviewing the great tips located on your site and so all of a sudden I got an awful feeling I had not thanked the site owner for them. These men were definitely so excited to read through them and now have definitely been loving these things. Appreciate your turning out to be very accommodating and for using variety of really good subject matter millions of individuals are really needing to be informed on. My sincere apologies for not saying thanks to earlier.

  13. A lot of thanks for all your valuable efforts on this web page. Kate enjoys conducting internet research and it’s really obvious why. We hear all of the powerful way you provide priceless techniques by means of your blog and as well as attract response from other people about this subject so our princess has always been being taught a great deal. Have fun with the rest of the new year. Your performing a dazzling job.

  14. I and my guys came examining the good helpful tips on your website while before long came up with a terrible feeling I had not expressed respect to the blog owner for those secrets. My people came consequently happy to see all of them and have now seriously been taking pleasure in those things. Appreciate your indeed being considerably accommodating and also for figuring out these kinds of impressive information most people are really desirous to understand about. Our honest apologies for not expressing gratitude to you sooner.

  15. I have to show appreciation to you for bailing me out of this particular circumstance. Just after browsing through the search engines and coming across tips which were not beneficial, I assumed my entire life was gone. Living minus the answers to the difficulties you’ve sorted out by means of your entire site is a critical case, as well as ones which might have negatively affected my entire career if I hadn’t noticed your web page. Your own personal know-how and kindness in dealing with every aspect was invaluable. I’m not sure what I would’ve done if I had not discovered such a step like this. I can also at this moment look forward to my future. Thanks a lot very much for your professional and result oriented help. I won’t be reluctant to endorse the sites to any individual who will need guide about this area.

  16. I would like to express thanks to this writer just for rescuing me from this type of issue. Right after checking through the the net and getting principles which are not helpful, I believed my life was over. Living without the solutions to the difficulties you’ve sorted out all through your main site is a crucial case, and those that could have in a negative way damaged my entire career if I hadn’t noticed your web page. Your own personal skills and kindness in handling all the details was very helpful. I don’t know what I would have done if I hadn’t discovered such a stuff like this. It’s possible to now look ahead to my future. Thank you so much for this impressive and sensible guide. I will not hesitate to recommend your web page to any person who needs assistance about this area.

  17. I’m also commenting to make you know what a nice encounter my child gained browsing the blog. She mastered a wide variety of things, which include what it is like to have a very effective coaching character to have certain people very easily have an understanding of chosen multifaceted topics. You truly surpassed our own expected results. Many thanks for coming up with such necessary, safe, informative as well as unique tips on the topic to Sandra.

  18. I wish to express some appreciation to this writer for rescuing me from this type of situation. Just after exploring throughout the world-wide-web and seeing basics which were not productive, I was thinking my entire life was well over. Existing without the answers to the difficulties you have sorted out as a result of your entire report is a crucial case, as well as the ones that would have adversely affected my career if I hadn’t come across your site. Your own personal competence and kindness in dealing with every item was important. I am not sure what I would’ve done if I hadn’t encountered such a subject like this. I’m able to now look forward to my future. Thanks a lot so much for the expert and amazing guide. I will not think twice to endorse your web page to anyone who would need guidelines on this problem.

  19. Thank you so much for giving everyone such a spectacular chance to read critical reviews from this web site. It is usually so superb and as well , stuffed with a great time for me and my office colleagues to visit your web site not less than thrice per week to read through the latest things you have got. Of course, we are usually impressed with the surprising suggestions served by you. Some 3 points on this page are in reality the most effective we have had.

  20. I enjoy you because of every one of your effort on this site. My mother enjoys setting aside time for investigation and it’s simple to grasp why. My partner and i know all about the powerful medium you render both interesting and useful secrets on the web site and in addition foster response from other individuals on this theme and our own daughter is really understanding a great deal. Have fun with the rest of the new year. You have been performing a terrific job.

Leave a Comment

Leave a Comment