Menu Search
Jump to the content X X

New Smashing Book Getting The Sketch Workflow Right: Meet “The Sketch Handbook”

Do you use Sketch, too? If you’re designing for the web today, you probably are. Well, we do, too, so we created The Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient and fast — with Sketch.

About The Book

Can you believe that there once was a time when a majority of web designers used Photoshop to design everything? While Adobe’s application is powerful, only a fraction of its features does actually make sense for interface design work. So why not take something simpler that’s more geared towards interface design? Something that can better respond to the ever-changing landscape of devices we need to design for today?

Sketch offers a wealth of tools and features to make it the perfect application for today’s designers: It lets you design interfaces, websites and icons with ease. To help you get the most out of this mighty tool, The Sketch Handbook will show you every aspect of it. Not in theory, but backed up by practical examples that you can follow along, step-by-step. Please note that this book is based on Sketch 41, the latest version of Sketch.

A photo of the new Sketch Handbook1

The book will guide you through every aspect of Sketch: From smart guides and layer manipulation to responsive baseline grid, nested symbols and group resizing. Whether you are a beginner to design or just started to use graphic apps, this book will teach you the techniques you need to start designing user interfaces in Sketch.

What’s in it for you? Well, you’ll get an overview of practical techniques and strategies that will make your design workflow more efficient and future-proof. You’ll learn how to design an advanced multi-screen mobile app, a responsive article and a variety of icons, and dive deep into organizing the artboard and exporting your assets for iOS and Android. Icon and logo design and export are also covered — along with recommended plugins and some obscure but handy tips and tricks. Pretty much everything you wanted to learn about Sketch, in one place.

The Sketch Handbook is now available, shipping worldwide2

$29 $39

Get the book3Print Hardcover + eBook.
Free shipping worldwide. Save 25% today!134

$9.90 $14.90

eBook5PDF, ePUB, Amazon Kindle.
Available now.

About The Author

Christian Krammer

Christian Krammer is a web designer and Sketch app pro. He’s been running SketchTips.info6 for more than two years and has shared a number of tips and tricks about Sketch there. Christian also released two Sketch courses on Skillshare recently. When he’s not fiddling around with Sketch, he loves to spend time with his family or watch a good movie. Occasionally, he also shares Sketch tips on Twitter7 — but who doesn’t?!

Table Of Contents

You’ve probably guessed it — the book doesn’t deal with theoretical concepts but real-life examples. A centerpiece of the book is workflow efficiency: You will learn how to get great results quickly, using the full power of available features, shortcuts and techniques that other designers have learned over the years, and apply regularly.

CHAPTER DETAILS
1. An Introduction To Sketch

Summary The first chapter gives you a compact overview of the most important features of the design app, as well as an introduction to the interface of Sketch. Mainly, you will get a short peek into its best features: Sketch is easy to learn, fast and lightweight, it has a clean, uncluttered UI, grids are built right in, it provides powerful export options, lets you easily adapt your design to different sizes, and most of all: Sketch is vector based. Everything you build is indefinitely scalable — a must with today’s vast array of devices.

Keywords Interface basics Sketch basics Bitmaps vs. vectors

2. Designing An App

Summary The first screen we tackle is the details page. Everything starts here with the artboards which give your design a defined space. After you have added the first elements and text layers, you can read how to style them and change their properties. This includes an overview of the available shapes and fill types, as well as the usage of images. With the first layers appearing in the layers list, it’s also important to learn the best way to organize them. Lastly, you will employ an 8-px-grid, that gives the design some structure and avoids random placement of the elements.

Keywords Artboards, Designing at 1x, Shapes, Smart guides, Layer manipulation and organization, Fill types, 8-px-grid, Colors, Opening and closing shapes, Dashed and dotted lines

3. The Power Of Iterations And Artboards

Summary A design is never finished, so we will use artboards to evolve its elements and try out different ideas. You will learn about symbols and shared styles that allow you to reuse elements and keep them in sync. This chapter also comes with some advanced techniques, such as masks, shadows, gradients, and boolean operations. The latter are especially important, as they let you combine basic shapes to form complex objects. This is also the first touch point with plugins to enhance Sketch. To round things up, we will have a look at how easy it is to recreate an icon in the design app.

Keywords Artboard organization Image fills Symbols Customize the toolbar Aligning layers Custom shortcuts Masking Zooming Shared styles Undo and redo actions Plugins Icon creation Shadows and blurs Gradients Fill types Distribute content Boolean operations Pixel precision

4. Creating A Logo For The App

Summary In this chapter, you will not only learn how to create a logo but also how to generate ideas surrounding it. The logo creation process involves a great deal of vector manipulation. You’ll get an overview of the different point types and their specialties. Most of the time you don’t even need to create a vector from scratch, but you can manipulate a basic shape instead. Once the logo is done, we’ll also finish the details’ page.

Keywords Pages How to get inspired Types of vector points Vector point mode Create custom vectors Manipulate text Kerning and tracking Scale layers Layer management

5. Creating The Overview Page

Summary Now that we have a detail page and an overview page, let’s introduce a new options bar that contains a couple of different icons. We’ll create those icons all by ourselves, as this is the perfect way to apply all the skills you have already learned, such as nested symbols and the usage of rotation. Furthermore, you will also learn how to create the list of places to visit a card view.

Keywords Nested symbols Advanced icon creation Layer styles Black is never black Rotations Transformations Duplicate content Rulers and guides Pasting Design with real data (featuring the Craft plugin) Create color variations

6. Exporting

Summary This chapter is all about one of the strongest features of Sketch: exporting assets. When doing the setup right, all you need to do to export all your different assets is press a button. We’ll walk you through a set of iOS and Android assets and you’ll learn how to preview your designs on real devices and how to make your design workflow more developer-friendly.

Keywords Exporting options File formats Save space Multiple export Exporting iOS and Android assets Device preview Collaboration What about Windows? Printing Alternatives Prototyping tools

7. Design The Article Page

Summary We’ll focus on how to work with grids and layouts and how to lay out the content in an ordered manner. While dealing with lots of text and images, we’ll also look at how to sync paragraph and character styles.

Keywords Grids and layouts Baseline grid Text and borders Adding content with the Craft plugin Choosing font sizes Text options Tracking kerning and ligatures The optimal reading experience Add a drop cap Images Image manipulation Text styles Maximize available space Blending modes Duplicate content with Craft Nested symbols Layer order

8. Going Responsive

Summary In this chapter, we look at a few different screen widths to figure out how any possible adaptations might look. Sketch will help us define how those elements react when they are being resized. With a little preparation, you just need to adapt the parent container and everything changes accordingly. Finally, this chapter will provide some important tips and tricks on how to best adapt the font sizes from one breakpoint to another.

Keywords Designing with constraints (group resizing) Responsive grid How to go from one breakpoint to another Adapt content with Craft

9. The Final Breakpoint: Desktop Widescreen

Summary After we’ve finished the first two breakpoints, we’ll look at how the available information can be arranged on a widescreen display. Therefore, we’ll adjust the grid and adapt most of the article elements to this new grid.

Keywords Designing with constraints (group resizing) Responsive grid How to go from one breakpoint to another Adapt content with Craft Make the app responsive

10. Designing The Category Icons

Summary We’ll create four different icons to reuse them as often as possible and to combine them into complex shapes with boolean operations. We’ll use keyboard shortcuts whenever possible. Also, we’ll learn how to use these icons with a grid.

Keywords Advanced icon creation Icon creation workflow Grids Pixel perfection Efficiency with keyboard shortcuts Vector manipulation Boolean operations Pixel preview Layer duplication

11. Export The Category Icons

Summary The category icons are finished, but the work isn’t done yet. This chapter focuses on their optimization. These optimizations include adapting to borders wherever possible to keep the file size down when exporting these assets.

Keywords Icon export workflow Which format to choose: SVG or PNG Optimize icons for small file size

12. Mini-Projects

Summary In this course we will recap some of the topics we already have touched, but in a less formal way. Consider these as “design snacks” of sorts: fun projects that let you play around in Sketch. You will learn how to create a realistic clock, five different versions of pie charts, textured type, a round progress bar, and some logos. If you are already an intermediate user of Sketch, this is the chapter for you.

Keywords Create a realistic clock Create textured type Create pie charts (five different methods) Create a round progress bar Create some logos Advanced shadows Multiple borders and gradients Rotations Rotate copies Masks Image and pattern fills Blending modes Advanced vector manipulation Advanced border options Text on a path Create branding assets How to account for missing fonts

Technical Details

  • 376 pages, 17 × 24 cm (6.5 × 9.5 inches),
  • ISBN: 978-3-945749-47-0 (print),
  • Quality hardcover with stitched binding and a ribbon page marker,
  • The eBook is available in PDF, EPUB, and Amazon Kindle formats.
  • Free worldwide airmail shipping8 from Germany.
  • Available as printed, gorgeous hardcover9 and eBook10.

Who Is The Book For?

This book is for everybody who is designing for the web today. If you’ve used tools like Photoshop or Illustrator before and want to try out something that’s more geared towards interface design, take a close look at the book. Intermediate Sketch users will get valuable tips and tricks that they (probably!) didn’t know yet too, of course. Among other things, you will learn:

  1. How to style elements and text layers, change their properties and organize them properly,
  2. How to use artboards to evolve a design and iterate on ideas quickly,
  3. How to apply symbols and shared styles that allow you to reuse elements and keep them in sync,
  4. How to combine basic shapes into complex objects and optimize for maintenance,
  5. Advanced techniques such as dealing with masks, shadows, gradients and rotations,
  6. How to use an 8-pixel grid to bring more structure to designs and avoid random placement of elements,
  7. To work with grids and layouts and how to lay out the content in a structured, systematic way,
  8. How to efficiently design logos and icons in Sketch,
  9. How to export your assets and preview your designs on actual devices,
  10. How to use Sketch not only for digital design, but also for print projects,
  11. Tips and tricks for responsive design workflow with Sketch and adapting a mock-up from one breakpoint to another,
  12. How to define how elements react when they are resized with group resizing,
  13. The workarounds you can use when working together with developers on Windows.
Get the new Sketch Handbook by Christian Krammer11

$29 $39

Get the book12

Print Hardcover + eBook.
Free shipping worldwide. Save 25% today!134

Frequently Asked Questions

If you have any questions, we are right here to answer them. We’d love to help you in any way or just listen to your story. So please feel free to ask questions via Twitter @smashingmag14 — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

Question Details
Shipping costs for my country?

There’s no shipping costs for the The Sketch Handbook or any other order with the total cost above $20 — wherever you are in the world! We ship everywhere worldwide via airmail.

We pay a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay. Also, check estimated delivery times15.

Delivery times to my country?

All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview16.

Is the book available as an eBook?

Yep, sure is! The book is available in PDF, ePUB and Amazon Kindle formats. You can get the eBook right away!17

What payment methods are accepted?

We accept PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers.

Is there a money-back guarantee?

Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!

I have a question that is not covered here.

Please leave a comment below, or get in touch with us via the contact form18 or via @SmashingSupport on Twitter19. We would love to help you in any way we can — you know that!

That’s it, everyone! We sincerely appreciate your support and trust, and we’ll make sure to deliver the book to you as soon as possible. And huge thanks to Christian for writing a fantastic guide to Sketch that will make our design workflows so much more efficient. He’s quite a smart cookie indeed! ;-) Cheers!

Footnotes

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/11/the-sketch-hanbook-2.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/11/the-sketch-hanbook-1.jpg
  3. 3 https://smashing-magazine.myshopify.com/cart/31079075532:1?channel=buy_button
  4. 4 https://smashing-magazine.myshopify.com/cart/31079075532:1?channel=buy_button
  5. 5 https://smashing-magazine.myshopify.com/cart/31080306316:1?channel=buy_button
  6. 6 http://sketchtips.info
  7. 7 http://twitter.com/SketchTips
  8. 8 https://shop.smashingmagazine.com/delivery-times/
  9. 9 https://smashing-magazine.myshopify.com/cart/31079075532:1?channel=buy_button
  10. 10 https://smashing-magazine.myshopify.com/cart/31080306316:1?channel=buy_button
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/11/the-sketch-hanbook-3.jpg
  12. 12 https://smashing-magazine.myshopify.com/cart/31079075532:1?channel=buy_button
  13. 13 https://smashing-magazine.myshopify.com/cart/31079075532:1?channel=buy_button
  14. 14 http://www.twitter.com/smashingmag
  15. 15 https://shop.smashingmagazine.com/pages/delivery-times
  16. 16 https://shop.smashingmagazine.com/delivery-times/
  17. 17 https://smashing-magazine.myshopify.com/cart/31080306316:1?channel=buy_button
  18. 18 https://www.smashingmagazine.com/contact/
  19. 19 http://www.twitter.com/SmashingSupport

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    What operating systems?

    0
    • 2

      Vitaly Friedman

      November 29, 2016 8:00 am

      Thanks for your interest, Bill! Sketch is running only on Mac. Please note that this book is based on Sketch 41, the latest version of Sketch.

      1
    • 3

      Markus Seyfferth

      November 29, 2016 11:46 am

      Hey Bill, the basic principles in this book will apply for a longer time similar to e.g. a book on Photoshop.

      All the latest updates of Sketch were basically minor updates with only small iterations of Sketch and its interface and a better support for nested symbols, for instance.

      Besides that, we always will update our eBook, and the printed book is based on Sketch v41! I hope it helps, let me know if you have any questions!

      1
  2. 4

    Philipp Ringli

    November 29, 2016 4:11 pm

    Color Management is still completely missing from Sketch.
    And for some people it is a blocking issue. What you see inside of Sketch is your monitors profile color space, not sRBG. Your just lucky if your monitor’s profile is close to the sRGB color space. If you have a wide gamut display, you’re not so lucky.

    1
  3. 5

    A Physically–effortless shortcut for “Lock selection” and “Unlock all locked elements” is also still missing. [CMD + L] is very slow compared to illustrator’s [CMD + 2] and very inconvenient for your hand. In addition, to unlock your layers you first have to find them. It’s a blocking issue as well. It slows my workflow down a lot.

    0
  4. 6

    A great, useful tool … but the instruction to make a dotted line on pp55 is incorrect! It just doesn’t work. Dotted lines should be standard!

    I found this useful blog by Dean Hudson that does work, but it is a bit of a workaround, but it does work!

    http://deanhudson.co/post/144915763551/perfect-dotted-line-in-sketch-20

    0
  5. 7

    Christian Krammer

    December 1, 2016 6:45 am

    Hey Karen, just double-checked this and we’ll update the eBook of course!

    There’s an easier way to Dean’s suggestion of drawing a dotted line: can you please try drawing a line with a border thickness of 5px. Then set ‘Dash’ to 1 and the ‘Gap’ higher than its thickness, 7, for instance. This will draw a dotted line for sure!

    Also, please make sure that the dotted line’s ‘Ends’ are set to the middle icon (rounded).

    Cheers for the heads-up!

    — Chris

    0
  6. 9

    I want to learn about mobile (ios and android) ui . Do you also release sketch book on that subject?

    0
  7. 10

    Um, I’ve searched several pages and a few sites and I can’t answer this question:

    Who makes Sketch and where can I get it?

    0
    • 11

      Jim, you can get the app here.
      https://www.sketchapp.com/

      0
    • 12

      Jim, I’d say you’ve not been doing design for a few years because Sketch is the tool of choice for a lot of web and app designers. Here’s a 2015 survey.

      http://tools.subtraction.com/interface-design.html

      Yes it’s OSX only but it’s incredibly lightweight and powerful. It has deep integration with Invision for prototyping and lots of great plugins like Craft to make your life easier.

      Sure it’s not as powerful as Photoshop but it gets you 98% of the way there. It’s really lightweight 20Mb and very fast. And now with Invision inspect it’s become easier than ever to share designs with front end devs without needing them to have a creative cloud license.

      0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top