Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 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 Link

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 Link

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 Toolbox6
Sketch 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 Link

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 action9
AEFlowchart 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 app13
Text 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 Link

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 page15
Fleet 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!17
Working 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 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.

Symbols can simplify your workflow and save you time19
Symbols 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 Sketch22
Dynamic buttons in Sketch. (View large version23)

Creating A Product And Team Listing Page Link

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 action27
The 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!31
Bulleted lists in Sketch? Easy! (View large version32)

Designing Mobile And Tablet Mockups Link

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 time33
Multiple 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 Link

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 Sketch41
Exporting 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? Link

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 the only 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 Link

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 Link

(mb, al)

Footnotes Link

  1. 1 http://bohemiancoding.com/sketch/
  2. 2 https://www.smashingmagazine.com/category/fireworks/
  3. 3 http://www.fleetfeetsports.com/
  4. 4 http://bohemiancoding.com/sketch/support/developer/04-resources/01.html
  5. 5 http://sketchtoolbox.com/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/04/01-sketch-toolbox-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/04/01-sketch-toolbox-opt.jpg
  8. 8 https://github.com/tadija/AEFlowchart
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/04/02-aeflowchart-plugin-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/04/02-aeflowchart-plugin-opt.jpg
  11. 11 http://styletil.es/
  12. 12 https://github.com/ebinion/style-tiles-for-sketch
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/04/03-text-styles-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/04/03-text-styles-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/04/04-homepage-feetfleet-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/04/04-homepage-feetfleet-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/04/05-working-with-grids-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/04/05-working-with-grids-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/04/06-simplyfy-workflow-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/04/06-simplyfy-workflow-opt.jpg
  21. 21 https://github.com/ddwht/sketch-dynamic-button
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/04/07-dynamic-buttons-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/04/07-dynamic-buttons-opt.jpg
  24. 24 https://github.com/tylergaw/day-player
  25. 25 http://placehold.it/
  26. 26 http://lorempixel.com/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/04/08-day-player-plugin-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/04/08-day-player-plugin-opt.jpg
  29. 29 https://github.com/timuric/Content-generator-sketch-plugin
  30. 30 https://github.com/timuric/Content-generator-sketch-plugin
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/04/09-bulleted-lists-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/04/09-bulleted-lists-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/04/10-multiple-artboads-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/04/10-multiple-artboads-opt.jpg
  35. 35 https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8
  36. 36 http://www.invisionapp.com/new-features/28/invision-now-supports-sketch-files-high-fives
  37. 37 http://blog.uxpin.com/5535/uxpin-now-integrates-photoshop-sketch/
  38. 38 https://marvelapp.com/prototype-with-sketch/
  39. 39 http://twitter.com/sketchframer
  40. 40 http://framerjs.com/
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/04/11-exporting-assets-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2015/04/11-exporting-assets-opt.jpg
  43. 43 https://github.com/getflourish/Sketch-Style-Inventory
  44. 44 http://www.sketchappsources.com/
  45. 45 https://medium.com/sketch-app
  46. 46 https://medium.com/@jm_denis/sketch-keyboard-shortcuts-42c06583ae83
  47. 47 http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design
  48. 48 https://www.facebook.com/groups/sketchformac/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Ashley is a designer for New Media Campaigns, a web agency in Carrboro, NC. There she leads the design process for non-profits, political candidates, and universities like her alma mater UNC-Chapel Hill. Outside of work, you'll find her training for her next marathon, playing with her Italian Greyhound, or tweeting as @aabennet.

  1. 1

    I’m a long-time PhotoShop user (20+ years!) and I use it for everything from photo-manipulation to web-design. It’s my tool of choice due to my long experience with it, even though I know it’s clunky and slow.

    On a recent contract I needed to generate lots of screen designs and the client used Sketch. It only took a day to get up to speed with the tool and I ended up creating screens much faster than I ever could have done in PhotoShop. Now that my contract is over, I’ve returned to working from home and as I’m a Windows user, I’ve had to return to PhotoShop. It’s so very slow and cumbersome compared to Sketch that I now want to stab my own face off with a plastic spoon.

    Of course, it’s not the whole story. I still need to use PhotoShop for generating other kinds of work, including heavily textured bitmap interfaces, and at the moment Sketch is woefully behind for that sort of work. But that’s OK because it’s not setting out to do that sort of work. It’s a tool for creating flat, clean vector driven UI.

    If there is a Sketch equivalent for Windows, I am all ears. As much as I liked it, I’m not about to replace all my Windows machines with Macs just to run one app… ;-)

    20
    • 2

      Illustrator?

      3
      • 3

        Illustrator is almost as bloated as Photoshop. You get tons of features you won’t be needing in web design and you need to worry about color management and pixels and stuff because Illustrator is mostly used by print designers. Sketch is designed for web designers.

        And I don’t think it is a big problem to make complicated bitmaps in Photoshop or some other bitmap editor. That its the way it have been working with print desing forever. Decent app for decent job. Trying to put everything in same app make it difficult to use.

        I

        1
        • 4

          By no means saying it’s perfect, just thinking of other potential vector based programs that he could use on his PC.

          I used it for ages before I switched to sketching by hand and working in the browser, and it did everything I needed. Always preferred it to PS given the easy resizing/scaling of elements and have multiple artboards etc. Never had an issue with colour, found support throughout the program to be pretty solid.

          Kinda moot to me now anyway, my advice to any designer would be to bin all these programs and get out your pencil and a text editor, unless you’re designing complicated animations/interactions.

          2
        • 5

          Illustrator is a powerful program to design for web. It’s true that has a lot of options, but is true too that in the last versions adobe has made a very good work with the tools to design for web.

          Symbols, character / paragraph styles, font glyphs (sketch don’t has), management of guides and grid layout, artboards, export options, adjust to pixel perfect, import/export palettes, text management (much more better than sketch)… and the most important for me… export to psd & compatibility mac / pc.

          I love Sketch, I’ve designed some apps with it, but in my company a lot of developers, and occasionally clients, only have PC. That is my main stopper to migrate completely to Sketch to make my designs… And it’s sad that an app like this has no compatibility with pc.

          The document export to another formats is very bad, I can’t transform a .sketc file to a format that a PC developer be able to open and extract the elements. Sometimes I have no time to prepare the elements for web developer, and I have to send the original file and they extract icons, fonts, sizes, etc, etc. With sketch I can’t do this.

          It’s true that Sketch is the future of web / app design. But I hope that some type of compatibility mac – pc come in future versions… I truly hope…

          3
          • 6

            Imagine if Adobe created a vector app purely for web design…… hang on a minute

            7
        • 7

          Illustrator isn’t for print designers.. it is for creating vector illustrations.

          0
    • 8

      The only real alternative to Sketch on Windows is… Fireworks.

      Yeah, it’s an Adobe app; yeah, latest version is CS6 and seems it’ll be the last one as well; yeah, it has a few bugs as well. But for user interface design it’s the best app on Windows, hands down!

      (If you’re interested, you can read over 30 high-quality articles that we published about Fireworks in Smashing Magazine. :-)

      On the Mac, things are much better — there’s Sketch, and there’s also Affinity Designer now.

      Adobe over-bloated apps (such as Ps and Ai) I won’t comment, they are horrible for UI design and now with the Adobe CC “renting software” policy, too expensive as well. And using Ps or Ai for user interface design is probably the worst idea one could ever have. :)

      20
      • 9

        On Windows I use Fireworks for my web design and love that it saves various states and pages in the same document. However, after reading this article, I am tempted to try Sketch on the Mac.

        1
      • 10

        You are totally correct! I have used Photoshop, Illustrator and Sketch. It is INCREDIBLE that they discontinued Fireworks. Why buy it from Macromedia to discontinue it ? Buy the competition and burn it down… Maybe Adobe will do the same in the near future with Sketch, they buy it and then burn it down.

        I am really pissed that Adobe thinks Photoshop is GOD and you can do everything with it, hell, you can use a Ferrari to pick up your lunch on the corner, but you can also go walking or with the Bike which is easier!

        Regarding to MAC, indeed Apple has great products, but love my Origin PC which outperforms BIG time a good config of a Mac. I know I know I may offend Mac users, but feel that nowadays companies buy Mac’s for decoration purposes of a “modern” tech office instead of choosing for performance…

        Have tested Sketch and indeed is a great product, but hate when companies by default say they won’t support Windows or other OS. Maybe I am a romanticist, maybe I am old style, but haven’t found the simplicity of Fireworks on other products…

        0
    • 11

      Jack Lindsman

      April 19, 2015 10:08 am

      My workflow is Photoshop then either Webydo.com if I want to design and publish the website (includes CMS) or Webflow.com (which i use for prototyping when working with developers).
      Both work on PC.

      Sketch is cool indeed… especially the endless canvas. But it’s faster to go directly to production, and lack of PC sucks.

      -4
    • 12

      Dave Cearley

      April 20, 2015 5:48 pm

      Maybe Adobe can buy Sketch, port it to Windows and make it part of my CC subscription…

      -10
    • 14

      You could take a look at Xara Designer Pro (http://www.xara.com/us/designer-pro/). It was my tool of choice before I (forcibly) moved to Photoshop. Lot’s of vectors and bitmap options. No responsive options like Sketch though.

      2
    • 15

      Check out pixelmator as a bitmap editing tool replacement for PS. $29. Not sure if they have it for PC though…

      0
    • 16

      “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.”

      This actually is incorrect. Sketch has issues with this. You actually have to select your object and select “Round to the nearest pixel edge” unfortunately Sketch doesn’t do this for you for some reason. You can make a keyboard shortcut on your Mac but still a pain.

      0
  2. 17

    Olivier Heitz

    April 17, 2015 2:47 pm

    Thanks for writing this up, Ashley! Especially the mentioning of all the plugins with their use cases. I agree, plugins are very powerful and can be a tremendous help when working in Sketch, but finding the best ones for a specific workflow/situation isn’t always that easy.

    As an addition to your Additional Resources, I’m suggesting: http://sketchtalk.io – A Sketch user forum/community for getting answers and finding good Sketch related stuff.

    2
    • 18

      Ashley Bennet

      April 20, 2015 5:24 am

      Thanks for suggesting that one Oliver! Sketch Talk is such a helpful resource.

      0
  3. 19

    Not going to lie, you made Sketch sound pretty great. Seems like most of the great functionality is through plugins though. I might have to give it a shot here soon. Thanks for the article.

    5
  4. 20

    Sketch seems nice indeed but as long as its Mac OSX only, it won’t be a big competitor. While lots of designers nowadays have a macbook, i hate that these tools force you to use a specific platform. Lots of companies don’t have security policies and howto’s in place to use Macbooks in their environment. Sure its bad, but you can’t simply go around that. Designers are (mostly) too low on the corporate ladder to make any changes to this.

    Another reason is that it won’t really integrate with things like Git or Team Foundation Server, where most projects do version control and file-hosting.

    Simply put: without important changes like version control integration and Windows support, Sketch won’t be more than “that alternative for Photoshop/Fireworks”. It just needs to work on more than 1 platform. Especially if you are leaving out Windows

    4
  5. 24

    Luis Santander

    April 17, 2015 3:41 pm

    I love the way a case study works better to present software options instead of a plain tutorial or review. Case studies are the real deal. Thanks for the article.

    7
  6. 25

    Afonso Duarte

    April 17, 2015 3:56 pm

    Photoshop and Illustrator aren’t made for layout design, so it’s not surprising that the author found Sketch a relief to work with when designing a website.

    However I’d be interested in a comparison between InDesign and Sketch. I’m a long time user of InDesign, and I find that Sketch is still lacking when it comes to handling text and typography. Features that I consider key, like character styles (not just paragraph styles), underline styling and baseline alignment, simply don’t exist in Sketch.

    On the other hand, InDesign’s fluid layout allows me to easily develop several versions of the same content, and even define layout rules for elements. From the features listed in the article, I think that the only one that InDesign doesn’t have is the symbol library, which is terribly useful but not enough to make up for the rest.

    I’d be interested to hear if anyone else has had a different experience when switching from InDesign to Sketch.

    5
    • 26

      Kevin Lozandier

      April 17, 2015 6:09 pm

      Agreed regarding Sketch vs. Photoshop & Illustrator. It’s not a surprising conclusion as far as layout and traditional screen

      However, it’s a comparison I understood inevitable because of the *prevalence* of Photoshop and Illustrator by some screen designers who often use the latter by necessity for intricate vector work (usually to later include in Sketch files)

      Indesign & Fireworks are the two Adobe products to more appropriate compare to Sketch. Sketch is a great mix of both in terms of the alignment and page compositions it allow you to quickly to.

      Being an Indesign user who would much rather use that than PSD or Illustrator because of its far superior layout tools back in the day I did static comps (I don’t anymore; I rapid prototype and create web components at best using Sketch for web projects), you’re in a for a treat.

      0
      • 27

        Kevin Lozandier

        April 17, 2015 6:36 pm

        To clarify, Photoshop & Illustrator were mentioned as things to compared Sketch because of their prevalence to be used by screen designers for web application mockups.

        The latter is still often used by hardcore users of Sketch to create detailed vector work with more ease to then integrate back into Sketch.

        Sketch after all is best for screen designing interfaces, not unlike Fireworks, compared to the vector use cases Illustrator has.

        1
        • 28

          Ashley Bennet

          April 20, 2015 5:54 am

          Kevin was on point here – I did not mention InDesign purely from a prevalence standpoint. While InDesign has a ton of features geared toward web and mobile design now, it’s intended as a desktop publishing – not screen interface design. This means you’ll run into a lot of the same issues you do with Photoshop and Illustrator such as an overbloat of tools, and features like the HTML and CSS export which exports pretty unusable code. It’s also my understanding that time saved creating interfaces from InDesign’s layouts, is often just put off onto the developers.

          1
  7. 29

    Jeff Heiserman

    April 17, 2015 5:08 pm

    Interesting post! I’ve been eyeing-up Sketch for some time now… maybe I’ll test it out. One question…

    How clean is the exported code? Is it easy to modify as needed? It would be a shame if one had to re-export from Sketch just to, say, adjust the color of the tag.

    1
    • 30

      Ashley Bennet

      April 20, 2015 6:07 am

      Thanks Jeff! The exported code seems very clean to me, organized by commented out headings based on the layer name, and they seem to get things like CSS gradients right (something I find a lot of programs/plugins have issues with). Unfortunately, it seems like there’s no way to export Sass/Less as of now, so the developers I work with on sites like Fleet Feet use it as more of a guideline rather than directly using the code.

      As for modifications, I don’t think you can live-update anything without just re-exporting your CSS (though that takes very little time). Is there any design program that allows you to do that though? Seems like that’s something that can only be done if you are prototyping.

      1
  8. 31

    Jeff Heiserman

    April 17, 2015 5:11 pm

    Looks like my last comment didn’t go through completely. I was trying to say that it would be a shame if one had to re-export from Sketch just to, say, adjust the color of the H1 tag.

    1
  9. 32

    Matthew Trow

    April 17, 2015 5:44 pm

    As a developer and part time pixelpusher, I’ve previously pushed Sketch aside into a “why would I need it?” category. My take has been that the bulk of assets for modern web dev are sprites (SVG or PNG) and bitmaps – everything else can be done in code.

    After reading this article, I’m more convinced there’s a place for an application like Sketch.

    If it can facilitate the design mockup process and produce assets and style ‘guides’ that would speed up a developers workflow, that’s a good thing.

    What I would *love* to see, is an application that can produce modular, standards compliant, *compiled* css along with modular standards compliant HTML. Take the grunt work out of the basics, leaving the developer to focus on more complex tasks.

    The focus for front-end devs is shifting, being able to churn out HTML/CSS from designs is a low level task and a time consuming one. We have a set of amazingly well crafted patterns, a plethora of automation tools (grunt or gulp, sass or less, npm – lint, concatenate, uglify – yada yada)

    If that can be handed over to a design tool, if frees up the front-end devs to concentrate on client side application code.

    I hope applications like Sketch can realise that dream :)

    4
  10. 34

    Kevin Lozandier

    April 17, 2015 6:26 pm

    I found the Mood board example great, but still torn about using Sketch for full web pages. I find that use cae perfect for mobile app work, but not for web screen pages because of the limitations compared to getting to HTML, CSS, JS as quick as possible.

    For example, it’s extremely limiting the columns options you have available to you by Sketch (making them of asymmetrical design is impossible while intutive tools designers can leverage in the browser like Susy & Singularitygs are available today), and doesn’t allow designers to leverage and account easily for mutation of content data Flexbox & CSS Grid layout module provides that designers need for business-critical components on the web.

    Sketch files by themselves do not help in anyway negate the false assumption clients usually make with static comps than previous static comp tools: The most popular being pixel-perfect comp is supposed to look the same on every browser (that’s impossible).

    The better balance seem to me is to at best screen design individual *components*; This can be combined with other renders of that component to account for things like animation with things like Premiere or Framer.js (the latter can import Sketch files by the way) if the technical debt is too high to do it with HTML, CSS, & JS first.

    Such an approach can alleviate visually communicating the various levels of sophistication the component can have based on what a browser supports & doesn’t. This is what Scott Jehl does and I think that’s of value since it can be hard for an entire team to have the various browsers or tools (Saucelabs, Browserstack) to actually communicate that easily.

    While not neccessarily advocating doing everything through the browser, static comps through apps are pretty much obsolete to getting to code as much as possible

    0
    • 35

      Kevin Lozandier

      April 17, 2015 6:27 pm

      I thought I deleted the last paragraph of my message when editing on my tablet; oh well.

      0
    • 36

      Ashley Bennett

      April 22, 2015 10:52 pm

      I agree with a lot of this Kevin! The practice of designing various breakpoints can definitely be inefficient, and is why I talked a little bit about how prototyping from Sketch may be a more effective route.

      On many of my client projects I do only design at one size and the rest is designed during prototyping/the first round of development. However, on projects like Fleet Feet where the client may want a more customized approach for elements on tablet or mobile (those breakpoints are decided based on what users will most commonly be viewing the site on btw), I do still need to mockup for the developer what those things will look like.

      I also like your idea of designing individual components. I actually did this in a recent Fleet Feet update and it was a great way to communicate a lot of potential design elements to the developer and client without getting too stuck on what the static comp looks like. However, I’m not sure that would have worked out if I didn’t already have a basic layout approved from a static comp, as I think it would be difficult for the client to see how things would actually lay out.

      Also, while I agree prototyping is becoming part of the rwd process, I don’t think it’s going to cause static comps in apps to go extinct. As someone who’s tried designing solely in browser, I find the design loses a lot of “personal touch” when just being coded directly. I also think static comps provide for an easier/quicker exploration ideas when designing. What do you think?

      personal touch

      2
      • 37

        Kevin Lozandier

        May 5, 2015 12:46 am

        I thought I replied to this when I last saw this message on an iPad; thanks for providing more insight with your experience w/ Sketch & RWD! It’s really enlightening to hear.

        Having client expectations realistic & effectively communicating components indeed becomes a concern, especially if you do have a strategy that leverages Sketch (or Photoshop), Edge Animate, Premiere, & etc on a need-to basis vs. prototypes represented in the browser already because of time constraints, the preferences of the person assigned to the creation of the specific components, & etc.

        Usually for me, I strive to pursue an approach like Scott Jehel, that shows the various rendering of a component based on relevant breakpoints (example: https://pbs.twimg.com/media/B9ytb7gIgAAGK7X.jpg:large) & the component’s that stages of being progressively enhanced in another diagram.

        This of course becomes more complicated if you also have browser constraints that enable you to rationally pursue element queries as well.

        Another way I’ve liked is feature bullet graphs that Stephen Hay enlightened me about in his book I find seminal called Responsive Design Workflow.

        Makes it clear how the components will be PE’d & its breakpoints without having to rely heavily too much on screenshots which may be surprisingly time-consuming.

        0
  11. 38

    Kevin Lozandier

    April 17, 2015 6:42 pm

    A limiting factor of doing entire pages w/ Sketch is the fact it can be too easy for screen designers of a RWD project to deviate from the principles of responsive design to ignore design classes (only create breakpoint when the design breaks).

    Instead they pick viewports w/ the exact dimensions of a specific device… which isn’t responsive design, that’s *adaptive* web design…

    Can more information be provided on how particular breakpoints were picked and how the design and content played into that?

    1
    • 39

      Hi,

      what you mean is adaptive layout. There is a difference between adaptive webdesign and adaptive layout. Responsive webdesign is on the client side which is devided into adaptive and responsive layout. Adaptive webdesign works on the server side.

      0
      • 40

        Kevin Lozandier

        April 22, 2015 1:00 am

        Interesting, I never heard of that distinction articulated. The adaptive server side techniques you spoke of like RESS are necessary techniques to apply what I & many refer to as adaptive web design.

        Content is being realized on the web based on popular device classes rather than what responsive web design really promotes. Such an approach is brittle, and often leads to people making a big deal of devices that come out in the future like what happened when the Apple Watch was revealed.

        Anyhow, with static comps, designers can sometimes use extreme viewports to simplify *their* part of a project which can leave the content vulnerable of not having enough characteristics of that content scrutinized towards more variations of best representing that content online.

        That’s why many advocate a content-first approach that generally has the following things done:
        1. Research that ultimately leads to a a content audit that examines the actual or expected digital dimensions (inc. best ratios for the content) of core content. This includes what aspects of the content will and will not be on the web, in addition to notes based on interviews w/ the current people responsible for the creation & management of that content about the current pains for them dealing with each content. This also reveals dialogue on how to help the client & you to improve the workflow to best represent the content on the web online. Needless to say analysis of what competitors are doing with the same kind of content is considered.

        2. Content wireframes are then made that focus only on the content hierarchy and content blocks of core pages; a list of components is noted for each content block to later begin ideating with.

        3. A text only, HTML representation of such content wireframes using actual content is made; this is sensical since 90% of the web is text

        4. With the text only representation base element styling, accessibility attributes, and colors are then considered. This often manifests to things like mood boards & the initial version of the style guide for the web application.

        5. Sketches, browser dev tools, static comps tools such as Sketch & Photoshop CC; as well as tools such as Framer.js, Edge Animate CC, Premiere CC are then used regarding the components and other interactive things of the pages at a molecular level based on content they are to represent on the web via the content audit. This also includes a grid (or grids) generated based on the dimensions characteristics of components critical to the success of the web application. The best grid ( or grids) best for the content may become asymmetrical and a framework such as Susy & Singularitygs may be considered towards the manageable manifestation of such a grid rather than a team unjustifably just picking a 12 column grid from a framework such as Foundation/Boostrap to do the job.

        6. If not already done, the work of the previous step are then used towards the full realization of the components in the browser, with tweaks regarding accessibility & progressive enhancement/progressive enhancement done with actual content used to catch edge cases.

        7. Work is then done to compose the components together to represent the detailed version of the content wireframes shown during the beginning of the project.

        8. Various rounds of iteration (& client feedback) are done towards a production-ready version of the project.

        Given the capabilities of browser tools today along with sketching with an awareness of the limitations of the content, Steps 5-6 can often lead to situations where mockups are not needed through tools such as Photoshop & Sketch by many who follow such an approach to realizing web applications.

        A team’s mileage will vary when it comes to actually being able to do that. The important part is you *decided* via the browser (similar to what Dan Mall has said in the past about this, though not designing in the browser at all because of the aforementioned advancements of dev tools is a bit extreme).

        3
    • 41

      I’m looking forward to using Sketch 3 in tandem with html created in Foundation 5.

      Zeplin.oi looks GREAT!

      3
      • 42

        Kevin Lozandier

        April 22, 2015 1:07 am

        Being a person that have contributed to Foundation 5, based on what I’ve seen from that tool, it’s more focused on solving collaborative workflow problems rather than making any easier the process of representing content responsively.

        That’s not a knock on the product, I’m speaking from a front-end developer perspective that would have to deal with the deleverables from such a tool that honestly just makes easier the process screen designers call “redlining” a UI component.

        It doesn’t help that the examples show so much love for pixels compared to relative units; this program tentatively seems more useful for an *adaptive* design approach rather than a *responsive* approach.

        1
        • 43

          Ah, good point about pixels vs REM. However coming from a designer’s point of view Sketch 3 would enable me to work on initial design concepts before bringing them into Foundation where the content is prioritized, hidden, displayed or scaled according to media size.

          0
          • 44

            Kevin Lozandier

            April 26, 2015 11:23 am

            The problem with that thinking is, as Jeffery Zeldman said best: “Content precedes design. Design in the absence of content is not design, it’s decoration.”

            The most favorable & streamlined outcomes of content being represented online needs to have such content-concerns accounted for before initial design comps.

            For that reason, designers and developers ideally need to collaborate throughout the realization of components to minimize the work of both as far as design concepts are concerned.

            Being a heavy Sketch 3 user myself (as well as being a happy Adobe CC user), I consider such content concerns long before I further ideate on components through a browser.

            A great example of this sort of process can be found here: https://twitter.com/KevinLozandier/status/566518351284158465

            0
  12. 45

    you can also use zeplin.io , its a huge time saver for the style guide part of the design…

    4
  13. 46

    Luke Pettway

    April 17, 2015 9:09 pm

    Sketch is one of the greatest programs I have used in a while. There are a lot of preset artboard sizes however you can create your own custom ones as well. I can see why some people would be wary of creating specific sized artboards but it actually makes a lot of sense. Your design should be able to flow on any devices of that type (phone, tablet, desktop), if it is breaking that much across numerous device sizes then there is a serious issue in the design.

    As a designer you should work with the most used devices in mind first and find out the median screen size, or simply go for the most popular while keeping other sizes in mind.

    Of course Sketch won’t solve the issue of how the client will respond to the design’s functionality, but that is also why I am a fan of rapid prototyping and getting the design into the browser as fast as possible. I’ve found I have far less issue when something is on the web, as it is more tangible and the customers seem to have less negative feedback as it is a working product and not just a pretty picture.

    I’d argue that the biggest features that win Sketch over for me are the true value style attributes which prevent creating shadows or borders which cannot be rendered traditionally. Sure this can limit some of the more advanced things that are possible, but that is a discussion for the designer to have with the developer first to see what is or isn’t possible unless they posses the skills to build it as well.

    1
  14. 47

    Subramanian Sankaran

    April 17, 2015 9:59 pm

    Ignore this comment. I am a headliner, I read the first few lines in the content & last lines in the first comment.

    Sketch may be good, but if you are considering about the RWD, then think twice before recommending the tool for the global audience[at-least here].

    0
    • 48

      Subramanian Sankaran

      April 17, 2015 10:12 pm

      I posted a wrong comment, I had read the whole article & the comments section, it seems to be my comment is absurd, please do delete them.

      2
  15. 49

    I work on Photoshop at Adobe specifically on making export from Photoshop better. I agree we definitely need better export options and new features to make it easier to design, but there are lots of inaccuracies in this article about Photoshop:

    – PS defaults to pixel grid for vector shapes (the article states you can frequently get into half-pixel states and blurry objects). https://twitter.com/divya/status/589147183544344577

    – Article states PS does not have a way to easily create layouts without plugins. This is incorrect. https://twitter.com/divya/status/589131772702527489

    – Article states there are no ways to create symbols in PS, but linked smart objects are like symbols: https://twitter.com/divya/status/589137214488977408

    – Article also states its harder to share PS files with developers. We initialized CC Extract just for this purpose to share with the same language for measurements & values. (click on the ‘Extract’ tab) https://assets.adobe.com/link/ad7110b3-340f-4d68-9479-c8aa1b0ad25e?section=extract

    – It is almost impossible to represent states by hiding and showing layers in Sketch, you can do that with Layer comps in PS.

    10
    • 50

      Lenny Terenzi

      April 20, 2015 2:29 pm

      Sorry Adobe. You fall way behind in ease of use to
      Match the functionality of Sketch for UI design.

      Bring back Fireworks and actually put out a tool for today’s web UI designers and we can talk. Instead you rehash the same old features you have years anytime someone comes along that challenges you.

      2
    • 51

      Kevin Lozandier

      April 22, 2015 12:07 am

      Using Adobe Extract in the past; it’s nirvana for developers to effectively work with PSDs through Adobe’s Creative Cloud service. It’s without a doubt a workflow game-changer as far as web development involving Photoshop files.

      0
    • 52

      Ashley Bennett

      May 11, 2015 2:35 pm

      Divya – This article is more of a look at why the overall experience of using Sketch for web design is better, not a blatant attack on Photoshop. I, like many other designers, used Photoshop as a web design tool for years. This is why I draw many comparisons to it. I say directly in this article that Photoshop has many of the same features that Sketch does (and I rarely state PS does not have something unless it doesn’t). The hitch is that with many of the features that Sketch shares with PS work significantly better for web design. That is what I’m trying to communicate in this article, and I hope it comes through.

      I am happy to hear that people are working on Photoshop to make it better for designers. However, I think that until Adobe creates a trim, web-centric design tool, there is no better program than Sketch.

      0
  16. 53

    As a long-time Fireworks enthusiast going back to v3 it was a harsh blow when Adobe announced the end. Turning wireframes into high-fidelity mocks was straightforward, duplicating pages to work on different states seemed far more efficient than turning layers on and off in PS, and for at least a decade drawing simple shapes was far more easier–much closer to Illustrator than PS. With Adobe’s decision, one that alienated and outraged a large and passionate community, I’m no longer interested in renting Adobe products for outrageous monthly fees.

    So… Sketch 3, here I come. The resources available to the Sketch community (Foundation 5 UI? yes, please) combined with the ability to quickly move between device-sized boards is appealing and coming from FW the learning curve hasn’t been too painful. And the price-point is right.

    Thanks for your article–the timing couldn’t be more perfect!

    1
  17. 54

    Great article. Here are a few of my own thoughts as I tried it out on a large project for anyone considering the switch from Photoshop.
    https://medium.com/@dmolanphy/quick-thoughts-on-sketch-for-rwd-1c82c0b05102

    In the end, I can definitely understand all the buzz around it.

    0
  18. 55

    Maybe you should disclose the sponsorship of this post?

    2
  19. 56

    I’ve tried “Aeflowchart” and “Sketch Dynamic Button”, but none of them works on Sketch 3.2.2 (Downloaded by Sketch Toolbox).

    I don’t know if I’m the only one having this problem, but these plugins are not well documented and also no tutorials, which confuse me a lot.

    0
    • 57

      Ashley Bennett

      May 11, 2015 2:57 pm

      Sketch Dynamic Button is still working for me, though I’ve heard for others it is not. This is definitely why I disclose the plugins as being a downside to Sketch. While they can provide some powerful, awesome features, a program update or coding error can ruin the plugin for everyone!

      0
  20. 58

    Frank Hofmann

    April 21, 2015 12:19 pm

    Great Article, but I kind of miss the facts about how well sketch integrates / is integrated into other tools like InVision http://www.invisionapp.com/sketch-prototyping or Slack https://github.com/shahruz/Send-to-Slack. This is what makes Sketch a great choice when you’re not the only one on the project or if you’re collecting feedback from your clients.

    Cheers!

    0

↑ Back to top