Sketch is a vector based design program used to create user interfaces, icons, prototyping, wireframes, web and mobile apps.
Why is it good?
Multiple Artboards & Pages
In one document, Sketch allows you to have multiple artboards with no limit, which is very helpful for things like mobile design, showing you all the screens in one view.
You can also have multiple pages in the same doc. This allows you to section out, design screens, icons, or whatever you desire.
Sketch gives you the power to export your work in several ways.
Slice (single) layer
Exporting single elements like images, icons or logos is super easy.
You don’t need to save out an entire artboard, just select the element you want to save and head to the export options at the bottom right of the screen to save.
Group layer slice
Need to export several layers together in one image? No problem. Group them together (Cmd + G) and export by choosing your export options as above.
Select an artboard an export the whole thing as an image.
Export all slices
File > Export to export all slice, or tick/untick what you want.
Export @1x, @2x and @3x (with extensions) for high res screens in one hit. File types include, .jpg, .png, .svg, .tiff, .eps, .pdf
‘Symbols’ are groups of elements (shapes, text, icons etc.) you can use throughout your design. If you change and element one, the rest of the symbols will follow.
You can set a font, weight and colour to use through your design.
Pretty much the same thing as text styles but for layers. This lets you sync borders, fills, shadows and other styles across multiple layers.
Customised grids allow you to design pixel perfect layouts.
If you haven’t heard of Invision, it’s a web based platform for uploading, prototyping and sharing design screens. No more emailing clients with massive .jpeg attachments!
Invision also integrates with Sketch in an awesome way.
Download Invision Sync, save the Sketch file in the Invision assets folder on your desktop, and all of your artboards will sync and appear on Invision.
Craft (created by Invision) will soon be releasing a cool prototyping version with animations.
To be honest, I haven’t used Marvel, but if you want a highly interactive prototype, and don't want to wait for Invision's Craft (more about Craft below) updates, this looks good.
How do I use it?
Whether you’ve used Photoshop or Illustrator before or not, sketch is a pretty easy program to use.
Let’s start with the basics:
The layout is similar, but more user friendly than most programs. Sketch has layers (for objects and elements) on the left, ‘Inspector’ (text, colour, dimension, blending mode etc.) on the right, toolbar (customisable) up top and canvas in the middle.
Resources to get started
Level Up Tutorials
Sketch vs Photoshop
Although this is a pro-Sketch-how-to post, we aren’t trying to start shouting war on whether one program is better than the other, but rather point out the strengths and best purposes for each.
Plugins make Sketch an amazing tool. Opening the software up to the people has allowed Sketch to grow quicker and become more useful than PS for screen design.
Here’s some of the most useful plugins for sketch:
This tool lets you browse popular plugins for Sketch, download and automatically install your selected plugin. It also keeps those plugins up to date!
There are plenty more amazing plugins for Sketch. Here's a list of them.
Sketch renders content much closer to the screen compared to PS. That is all.
Export options as we’ve explained above makes Sketch far more superior than PS in this regard. Sketch gives you the ability to export to save @1x, @2x or @3x, and does not need to be on an artboard.
Sketch is a one-off purchase of US$99 (about AU$130-$150), whereas PS alone is AU$11.99/month, then AU$22.99/month if you want Illustrator as well, then AU$57.99 for the entire suite.
The PS subscription isn’t outrages – just annoying. As a comparison, past one year of use, you’ll still be paying for PS/Adobe.
Firstly, if you’ve been using PS, transitioning to Sketch will be pretty easy. However, if you’ve never used any program like this, it will be much quicker to pick up than PS.
Some resources are ^above^ in this post to help you get started.
Sketch is Made For Screens
Sketch is made for prototyping, wireframing, web and mobile design. Photoshop was made for editing and enhancing photos.
Although PS is slowly being repurposed to also do screen-based work to compete with the likes of Sketch (PS now does multiple artboards in one file), it still has the behemoth-sized feel and overwhelming interface for new users.
Photoshop is a pretty big app and therefore needs quite a bit of space on your hard drive.
PS CC takes up nearly 900MB whereas Sketch is very lightweight and only requires about 45MB.
This is a pretty obvious one, but PS is better for editing images compared to Sketch.
PS is a huge program based around image editing and has far, far, far more options to create imagery.
However, you can still do the basic with with images in Sketch like cropping, blending, overlays, opacity, filters, even applying transparent gradients.
If you want more image editing capabilities, you may still need PS…or do you?
We have been using Affinity Photo which is new-ish photo editing software, and it’s awesome… We plan to do another whitepaper like this one on Affinity in the near future.
Mac Only, No Windows Allowed!
Another snobby Mac-only piece of software, I know…
Obviously Sketch is a web/screen based software. However, if you need to print out an app screen of a client (God forbid) you can print out via .jpeg or even a .pdf file. And yes, clients will still ask for printouts every now and then.
Sketch App Resources
This is probably the biggest collection of free and premium design resources for Sketch. Browse and search through a variety of UI kits, icons wireframes, iOS, material design and mockups.
It does everything you want in a design/prototyping program. It’s quick, lightweight, easy to use and made for the screen.
Let us know your thoughts on Sketch and how you've found it.
Want some help on building your startup, growing your business and creating products/services that your customers will love? ContactSEEDto make an inquiry.
Matt is our Design Lead overseeing the entire process of UX, visual, interaction design and branding. Trained in graphic design, Matt has over 9 years experience designing clean UI, mobile and web applications for various platforms.