Tag Archives: sketch

How To Create A Sketch Plugin With Front-End Technologies

UX design hasn’t been the same since Sketch arrived on the scene. The app has delivered a robust design platform with a refreshing, simple user interface. A good product on its own, it achieved critical success by being extended with community plugins.

How To Create A Sketch Plugin With Front-End Technologies

The open nature of the Sketch plugin system means that anyone can identify a need, write a plugin and share it with the community. A major barrier is stopping those eager to take part: Designers and front-end developers must learn how to write a plugin. Unfortunately, Objective-C is difficult to learn!

The post How To Create A Sketch Plugin With Front-End Technologies appeared first on Smashing Magazine.

Originally posted here: 

How To Create A Sketch Plugin With Front-End Technologies

Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers

I’ve been a long time Photoshop and Illustrator user. Both programs are really useful and powerful, and they’ll remain a key part of any digital artist’s or designer’s toolset, including mine. However, for all user interface, web and icon design workflows, I recently converted to Sketch. Here is why.

Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers

While Photoshop is awesome at what it does, defining what it is might not be so easy anymore. I remember watching a storyboarding tutorial by Massive Black’s El Coro (unfortunately, it doesn’t seem to be available for sale anymore). In it, he says that 17 or so years ago, Adobe had no idea that digital artists were using Photoshop to digitally paint pictures! So, it had to catch up with its own user base by adding more — you guessed it — painting features.

The post Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers appeared first on Smashing Magazine.

View the original here:  

Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers

Sketch Vs. Figma: The Showdown

The past year has seen quite a rise in UI design tools. While existing applications, such as Affinity Designer, Gravit and Sketch, have improved drastically, some new players have entered the field, such as Adobe XD (short for Adobe Experience Design) and Figma.

Sketch Vs. Figma: The Showdown

For me, the latter is the most remarkable. Due to its similarity to Sketch, Figma was easy for me to grasp right from the start, but it also has some unique features to differentiate it from its competitor, such as easy file-sharing, vector networks, “constraints” (for responsive design) and real-time collaboration.

The post Sketch Vs. Figma: The Showdown appeared first on Smashing Magazine.

Follow this link:

Sketch Vs. Figma: The Showdown

Designing With Real Data In Sketch Using The Craft Plugin

Besides the user’s needs, what’s another vital aspect of an app? Your first thought might be its design. That’s important, correct, but before you can even think about the design, you need to get something else right: the data.

The image shows a preview of a movie app, designed with the Craft plugin in Sketch

Data should be the cornerstone of everything you create. Not only does it help you to make more informed decisions, but it also makes it easier to account for edge cases, or things you might not have thought of otherwise.

If you want to get even more out of Sketch, feel free to check out our fancy new book, “The Sketch Handbook”, with practical examples that you can follow along, step-by-step, to master even the trickiest, advanced facets and become a true master of Sketch.

The post Designing With Real Data In Sketch Using The Craft Plugin appeared first on Smashing Magazine.

Source article: 

Designing With Real Data In Sketch Using The Craft Plugin

How To Create A Realistic Clock In Sketch

Creating a clock in Sketch might not sound exciting at first, but we’ll discover how easy it is to recreate real-world objects in a very accurate way. You’ll learn how to apply multiple layers of borders and shadows, you’ll take a deeper look at gradients and you will see how objects can be rotated and duplicated in special ways. To help you along the way you can also download the Sketch editable file (139 KB).

How To Create A Realistic Clock In Sketch

This is a rather advanced tutorial, so if you are not that savvy with Sketch yet and need some help, I would recommend to first read “Design a Responsive Music Player in Sketch” (Part OnePart Two) that cover a few key aspects in detail when working with Sketch. You can also have a look at my personal project sketchtips.info where I regularly provide tips and tricks about Sketch.

The post How To Create A Realistic Clock In Sketch appeared first on Smashing Magazine.

Continued here: 

How To Create A Realistic Clock In Sketch

Designing A Responsive Music Player In Sketch (Part 1)

Sketch is known for its tricky, advanced facets, but it’s not rocket science. We’ve got you covered with The Sketch Handbook which is filled with practical examples and tutorials that will help you get the most out of this mighty tool. In today’s article, Christian Krammer gives us a little taste of all the impressive designs Sketch is capable of bringing to life. — Ed.

Music plays a big role in my life. For the most part, I listen to music when I’m commuting, but also when I’m exercising or doing some housework. It makes the time fly, and I couldn’t imagine living without it.

Designing A Responsive Music Player In Sketch (Part 1)

However, one thing that has always bothered me is that the controls of music apps can be quite small and hard to catch. This can be a major issue, especially in the car, where every distraction matters. Another issue, in particular with the recent redesign of iOS’ Music app, is that you can’t directly like tracks anymore and instead need to open a separate dialog. And I do that a lot — which means one needless tap for me.

The post Designing A Responsive Music Player In Sketch (Part 1) appeared first on Smashing Magazine.

Link to article: 

Designing A Responsive Music Player In Sketch (Part 1)

Sketch With Material Design

In the past year, adoption of Sketch at Google, where I work at, has taken off and is now a widely preferred tool. The more tools in our belts, the better, so here’s my take on why Sketch and the new material design1 system are a great match.

Tools are an extension of our hands, and as such, they should be versatile, quick and intuitive. A lot has changed between the print era of offset presses and the digital era of cross-platform screens. Developers have attempted to adapt our tools, but Sketch is perhaps the most successful app in this regard — its creators have removed the bloat, started afresh and presented a smaller, fit-for-purpose feature set. What may seem on the surface to be a simple drawing tool in fact nails the core workflows of digital design.

Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects.2
Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects. (View large version3)

The latest version of Sketch (3.2) ships with something special for those interested in Google’s latest visual design language: the material design sticker sheet. In this tutorial, we’ll design a test app with the help of Sketch and the material design sticker sheet.

Let’s Create a Notes App!

In this article, we’re going to make a very simple app — a notes app. Luckily for us, all of the components we need are already available in the latest Sketch app. These are the screens we’ll create:

The exported screens4
The exported screens.(View large version5)

You can also download the Sketch file6 (ZIP) that was used to make this notes app prototype; it could help you along in the tutorial.

The Template

In our template — File → New from Template → Material Design — you’ll see a wide set of components, icons and layouts. The sheet itself was designed by the hardworking material design team at Google and has been ported with the love and care of Amar Sagoo and myself. The groups and objects are named, styled and organized in a truly Sketch-friendly way.

It All Starts With an Artboard

With your new document open — File → New (or Command + N) — press the A key (which is a shortcut for the Artboard tool). You can draw an artboard just as you would draw a shape, a slice or any other object. That’s because Sketch has a simple set of objects that all work the same way (more on that later). When the Artboard tool is selected, you can see on the right side a list of artboard sizes, including — you guessed it — all of the material design sizes. Click on the “Mobile Portrait” size and a white box should appear.

Sketch 3.2 provides the material design sizes within the new Artboard tool.7
Sketch 3.2 provides the material design sizes within the new Artboard tool. (View large version8)

Sketch’s Killer Feature #1: Scale-Independent Exports

Note: Material design is defined using density-independent pixels9. As the Android Developers page explains10, a density-independent pixel (DP) unit corresponds to the physical size of a pixel at 160 DPI. Though we’ll be using pixel units11 (px) in this Sketch tutorial, these are really density-independent pixels because you can scale them up or down upon exporting.

In today’s world, you can’t depend on the same pixel density, so DP units allow us to talk the same language when dealing with different device layouts. Sometimes you may be compelled to work at double or triple pixel size because you want to match the pixel size of your surface — don’t go down that route.

Stay at 1x pixels and then just export at the upscaled sizes. Sketch makes that as easy as a simple drag and drop. You’ll see a panel in the bottom left showing you the sizes slotted for exports, and you can even add your own suffix conventions for file names. When you do an “Export All” operation (Command + Shift + E), you’ll see that artboard, and Sketch will export all versions of the bitmap.

Always work at 1× pixels. You can easily scale up or down in the “Export” panel.12
Always work at 1× pixels. You can easily scale up or down in the “Export” panel. (View large version13)

Now, head to the sticker sheet template and select the “mobile global elements” artboard. Only the important stuff there is selectable, so just click on that artboard and copy and paste into your document. You now have the basic layout of a mobile material design app. As you can see in the Layers panel, you have a group named “screen”. You’ll only need the contents of that group, so just go ahead and ungroup (Command + Shift + G) the “screen” group. You’ll now see four layers:

In the sticker sheet, you’ll find some ready-made artboards that you can copy and paste directly into your sketch file.14
In the sticker sheet, you’ll find some ready-made artboards that you can copy and paste directly into your sketch file. (View large version15)

  • navbar
    This is a symbol (symbols in the Layers panel are marked with purple color), which means it will be the same everywhere, and if you change the contents of the symbol, it will change everywhere in the file.
  • status bar
    This is the top bar on the screen with Wi-Fi, time and status information.
  • app bar
    This is your main navigation header, which displays the name of the current page and a button to go up or open the drawer.
  • screen bg
    This is a background color, but it’s also a mask. You can delete this because your artboard will act as the mask for your screen.

Masks in Sketch Work… Upward!

In Sketch, masks work upward, meaning that layers above a masking object are cropped by that object. In Adobe Illustrator, however, you would place a shape on top of other layers to create a clipping mask; this threw me off at first. For more on masks, check Bohemian Coding’s documentation16.

If you move these layers around within an artboard, you’ll see that they are masked by that artboard. That’s the only case when an object that is higher in the Layers panel masks the objects below. Artboards always mask their contents and also house the coordinate space; so, an x value of 0 and a y value of 0 would mean the top-left corner.

Cards are a standard pattern and work well for heterogenous information.17
Cards are a standard pattern and work well for heterogenous information. (View large version18)

Let’s go back to the sticker sheet. Let’s grab the half-width card components19 and paste them in our composition. The suggested margins for these cards is 8 pixels, so go ahead and space them out.

Sketch’s Killer Feature #2: Hover Guides

One of Sketch’s most useful features has to do with spacing: Select an object, hold down Alt, and then mouse around to see distances from your selection to other objects. And holding down Command + Alt and mousing around will measure objects that are deep within the hierarchy relative to other objects contained in groups.

The floating action button is a unique component in material design.20
The floating action button is a unique component in material design. (View large version21)

Finally, let’s get the floating action button from our buttons components and put that in. It should be 16 pixels from the navbar and 16 pixels from the right side.

Great! So, we’ve got the composition for our first Material app. It’s a scrolling card view.

The Navigation Drawer

Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration.22
Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration. (View large version23)

To get around the various areas of our app, we’ll make use of the navigation drawer component. Let’s duplicate our original artboard: Click on the artboard in the Layers panel list or on the title of the artboard on the page, then press Command + D. This will duplicate the artboard and move the new artboard 100 pixels to the right. You can continue your flow simply by duplicating and modifying, which is what we’ll do now.

Grab the navigation drawer from the mobile artboard — the layer is called “side nav.” Paste it onto your new artboard. You can change the categories in the navigation, but the top area is reserved for switching user accounts.

Material Forms

Forms in material design morph. Depending on their state, placeholder text becomes labels.24
Forms in material design morph. Depending on their state, placeholder text becomes labels. (View large version25)

What happens when you tap that big plus button? Well, you should probably be able to make a note. Let’s grab some of the form’s components in the sticker sheet and make a new artboard for them. Here, we can make use of the keyboard, which is a symbol that can be placed whenever we need it. We’ll use the dark one to fit our dark app.

Reusing Artboards

Of course, after you’ve created a note, you should see it added to the card view. Let’s duplicate the first screen and add in our new note. Just click on the name of the artboard right above the artboard itself. Now that the artboard is selected, press Command + D. That will duplicate the artboard and move it 100 pixels to the right, perfect for quickly mocking up a flow.

You can duplicate artboards and they’ll move to the right side of your flow.26
You can duplicate artboards and they’ll move to the right side of your flow. (View large version27)

Sketch’s Killer Feature #3: The Color Picker

Sketch provides a powerful color picker. Just press Control + C to select a color anywhere on the screen. Combining this with Command + click to click through to any element, you can easily recolor any object in no time.

The color picker is quick and accurate and can be used on anything on the screen.28
The color picker is quick and accurate and can be used on anything on the screen. (View large version29)

Covering The Tabs

Tabs are a great way to show different sets of content. In our app, we will have notes of importance and notes shared with others. Let’s make some tabs for “saved” and “shared” notes, with our current view being “all” notes. Jump back to the sticker sheet and click on the “tabs” component. Copy and paste that and position it next to the app bar. If you’ve grabbed the whole “app bar” tab from the sticker sheet, you’ll notice that it’s the wrong color. So, change the background color: Click through (Command + click) to the background of the tabs, and change the color to our main color. Move the tabs to the top, and you’re set.

Tabs allow for multiple views of the same content types.30
Tabs allow for multiple views of the same content types. (View large version31)

When copying components from the sticker sheet, you can take any level of elements. This means you can take a whole screen, just the components within or even just the icons. The tabs, as well as other components, have been prepared with a transparent background. Move within the “app bar” group and you’ll be able to copy the “tabs” group and paste onto any existing background. The advantage of a transparent background is that you will get the proper spacing around the component, but you can quickly place it on top of an existing background or toolbar.

Making A List

You’ll use lists a lot. They’re a fundamental component to any app, and material design gives us a number of options. We’ll have our “shared” tab contain a list view.

Copy the “three-line item” list from the sticker sheet and paste it in a new artboard. Ungroup the list and then just Alt + drag to duplicate an item, a set of items or a group. Do this until you have a full page of rows.

Lists are a common way to display collections of data.32
Lists are a common way to display collections of data. (View large version33)

Secondary Actions Are Shortcuts

You’ll notice a box on the right side of the list. This box is a secondary action. Tapping anywhere to the right of this action would open up that list item; but for quick actions (such as calling a contact or opening information about a document) you can use the secondary action. We’ll replace this placeholder box with a heart so that the user can quickly save notes.

In the sticker sheet you’ll find a small set of icons in the top left under “typography.” Grab the heart icon and paste it where the gray box is located. The icon should be in a group containing the heart icon and a transparent 24 × 24 box. This box helps with spacing, so make sure to grab the whole group.

Symbols allow us to quickly manipulate many instances of the same icon, component or even layout.34
Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version35)

Sketch’s Killer Feature #4: Shared Symbols And Styles

Now, let’s make the row group into a symbol. This will allow us to edit its contents in many places at once. When you select a group, you’ll see a field in the toolbar that says “No symbol.” Click on this field and select “Create new symbol.” The name will default to the selected group’s name: “row.” Now you’ve got a symbol!

Symbols allow us to quickly manipulate many instances of the same icon, component or even layout.36
Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version37)

Select each of the other row groups you’ve positioned on the artboard and, once again, click on the area that says “No symbol.” This time you’ll see your row symbol available for use; select it. Now that you’ve got a bunch of rows using the row symbol, when you change one, they will all change. Just like that, you have an interconnected set of elements.

Using our newfound power, let’s replace the heart with an overflow icon. The overflow icon is a set of three vertically stacked dots and indicates that more than one action is available. All you have to do is copy the “overflow icon” group (along with the padding) from the sticker sheet and paste it right beside the existing heart icon. Line it up with the heart icon, and then delete the heart icon. As you’re doing this, you should see the other rows automatically update. Yay for symbols!

With Sketch’s symbols, there is no editing mode. Symbols act just like groups and update immediately. This makes it easy to change symbols. Watch out, though: You may be editing a symbol in one place only to find that it has also changed in many other places across the canvas!

Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages.38
Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages. (View large version39)

Bottom Sheets

In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed.40
In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed. (View large version41)

In material design, bottom sheets are a great way for the user to take action without leaving the current context. These enter from the bottom of the screen and display a set of actions. In our app, the bottom sheet will be invoked when the user taps the forward icon in the top right.

Let’s grab the bottom sheet from the sticker sheet and paste it in a new artboard. Also, grab the scrim (semitransparent background) from the previous navigation drawer artboard and paste it behind the bottom sheet.

Dialogs When Needed

Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows.42
Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows. (View large version43)

As a last step, we’ll add in a dialog. This will be invoked when the user selects the delete action from the bottom sheet. In this case, we want to be really really sure that they want to delete this note. And finally, speaking of deleting, I encourage you to start fresh with your own designs. Sketch is such a quick program and material design is such an enabling guide that you can think big and different about how to delight users in your app. So, happy sketching!

Quick Start With Sketch Resources

Here’s a list of material design resources built for Sketch to get you up and running quickly:

Conclusion: Keep The Principle In Mind With The Tool In Hand

Thanks for walking through material design in Sketch with me and making an awesome notes app. We have not only learned a new tool, but also started on our way to a new design system.

One final note of caution: Sometime we focus on existing components and miss an opportunity to address our users’ needs in a new way. You can always check your designs against material design’s principles49:

  • Material is the metaphor
    A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
  • Bold, graphic, intentional
    The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.
  • Motion provides meaning
    Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

Remember, no matter how good it looks, the greater focus is not on the pixels, but on the user. If your sight is true, all else will follow.

(mb, al, ml)

Footnotes

  1. 1 http://www.google.com/design/spec/material-design/introduction.html
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
  6. 6 http://provide.smashingmagazine.com/sketch-material-design.sketch.zip
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
  9. 9 http://developer.android.com/training/multiscreen/screendensities.html#TaskUseDP
  10. 10 http://developer.android.com/training/multiscreen/screendensities.html
  11. 11 http://en.wikipedia.org/wiki/Pixel
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
  16. 16 http://bohemiancoding.com/sketch/learn/
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
  19. 19 http://www.google.com/design/spec/components/cards.html
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
  44. 44 https://github.com/BohemianCoding/SketchTemplates/blob/master/Material%20Design.sketch
  45. 45 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Icons.sketch
  46. 46 https://github.com/google/material-design-icons
  47. 47 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Whiteframes.sketch
  48. 48 https://github.com/google/material-design-icons
  49. 49 http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

The post Sketch With Material Design appeared first on Smashing Magazine.

Jump to original:  

Sketch With Material Design

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

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

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

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

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

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

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?

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

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

(mb, al)

Footnotes

  1. 1 http://bohemiancoding.com/sketch/
  2. 2 http://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 http://www.smashingmagazine.com/wp-content/uploads/2015/04/01-sketch-toolbox-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/04/01-sketch-toolbox-opt.jpg
  8. 8 https://github.com/tadija/AEFlowchart
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/04/02-aeflowchart-plugin-opt.jpg
  10. 10 http://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 http://www.smashingmagazine.com/wp-content/uploads/2015/04/03-text-styles-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/04/03-text-styles-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/04/04-homepage-feetfleet-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/04/04-homepage-feetfleet-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/04/05-working-with-grids-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/04/05-working-with-grids-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/04/06-simplyfy-workflow-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/04/06-simplyfy-workflow-opt.jpg
  21. 21 https://github.com/ddwht/sketch-dynamic-button
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/04/07-dynamic-buttons-opt.jpg
  23. 23 http://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 http://www.smashingmagazine.com/wp-content/uploads/2015/04/08-day-player-plugin-opt.jpg
  28. 28 http://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 http://www.smashingmagazine.com/wp-content/uploads/2015/04/09-bulleted-lists-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/04/09-bulleted-lists-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/04/10-multiple-artboads-opt.jpg
  34. 34 http://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 http://www.smashingmagazine.com/wp-content/uploads/2015/04/11-exporting-assets-opt.jpg
  42. 42 http://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/

The post Using Sketch For Responsive Web Design (A Case Study) appeared first on Smashing Magazine.

Original post:

Using Sketch For Responsive Web Design (A Case Study)