Sketch in a Day
Sketch is a modern design tool, perfect for creating layouts and user interfaces for the web and mobile apps. It's scaled back interface – when compared to incumbents like Photoshop – puts the tools needed for modern layouts at the tip of one's fingers.
Until this week I had only used it for scaling icons for different iOS screen resolutions. This used practically none of the application's powerful tools. With a few design jobs in the pipeline at Plymouth Software, it was time to dig a little deeper into Sketch.
By my own admission aesthetic design is not one of my stronger skills. This has always bugged me as you can have the best product in the world, but if it's not sold right, from the design up, it won't do well. To sharpen these skills I set the challenge of learning the basics of the tool in just a day. The goal: to create a basic mock up of a design I've had floating around in my head for a few weeks.
Familiarity
To become familiar with the tools Sketch has to offer I found a great tutorial over at Tuts+. The tutorial does not go into the depths of Sketch, instead acting as a “hello world” introduction. It covers the commonly used aspects of the application over and over, as well as providing insights into some best practices. The tutorial created a long-form email layout. It covers topics such as creating groups of commonly used elements, reusable styles as well as the basics of creating a consistent layout.
Prior to this I had always used Photoshop for creating detailed mockups. Most people would probably agree that, whilst being incredibly powerful, Photoshop is not intuitive to use, especially when just starting . It's always taken hours to put together a layout of any complexity.
In contrast I was shocked at how easy It was to quickly create a good-looking layout in Sketch. It feels like Sketch gets out of the way, allowing ideas to flow more freely.
With the tutorial completed and confidence running high, it was time to create my website layout. Using the Web Design template, I quickly set about mocking up the layout contained within my head, and in doing so quickly stumbled upon the thriving Sketch plugin ecosystem.
Plugins
Plugins extend Sketch, providing the app with even more powerful and more importantly time saving abilities. The first plugin I'd recommend installing is the Sketch Toolbox. It's a plugin for managing plugins. Very meta.
It saves lots of time in finding, installing and updating plugins.
For my simple design I did not want to worry too much about content. I added the Day Player and Sketch Data Populator plugins allowing content to be added at the click of a button. No more copy and pasting ‘lorem ipsum’ text from the web! Another helpful tool, although separate from Sketch, was the SkyFonts application.
Typography
A large part of web design is the mastery of a pages typographical content. I wanted to use the same fonts in my mockup as I had chosen for the the site. SkyFonts allows installation and instant updating of fonts from many online sources, including Google fonts. Of course, a beautiful fallback was chosen for iOS users using Safari's content blocking plugin.
Even though it's in its early stages of development, I'm very happy with the outcome of this page mockup. It served the purpose of becoming familiar with Sketch and its abilities. With a little more iteration it will be ready to be prototyped using Macaw.
If you are looking at diving into Sketch yourself, I'd highly recommend taking a look at the following resources: