About 18 months ago I was using Photoshop to design most things – websites, mobile designs and even saving out icons.

It wasn’t until our CTO and all-round tech guru, Mike Ebinum, suggested we (meaning me) should try this program Sketch.

Thinking it would take a long time to learn a new program, I resisted for a few weeks, then finally thought I’d give give it a go.

I started watching some tutorials and guides (linked below) and set out on my Sketch journey. 

Coming from Photoshop, Sketch probably took only a few days to master and an hour or two to get the lay-of-the-land.

After a few weeks, I was hooked.

In this guide, we’ll run through a bit of an overview of what Sketch is, how to use it and why we love it here at SEED.

Sheda uses Design, Artificial Intelligence and technology to solve complex problems with an emphasis on delivering solutions that make and accelerate impact and bring about social change.

What is it and what’s it used for?

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.

Exporting

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.

Export artboard

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 options

Export @1x, @2x and @3x (with extensions) for high res screens in one hit. File types include, .jpg, .png, .svg, .tiff, .eps, .pdf

Symbols

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

Text Styles

You can set a font, weight and colour to use through your design.

Layer Styles

Pretty much the same thing as text styles but for layers. This lets you sync borders, fills, shadows and other styles across multiple layers.

The Grid... Photo: Twitter

The Grid….

Customised grids allow you to design pixel perfect layouts.

Integrations

Invision

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.

Marvel

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:

Layout

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

   

Learn Sketch

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

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:

Sketch Toolbox

This tool lets you browse popular plugins for Sketch, download and automatically install your selected plugin. It also keeps those plugins up to date!

read more

Craft

Craft came out as a rapid data tool to use in design work, but is also set to release native protoyping within Sketch! Craft is also available for PS.

 read more

Font Awesome

Sketch’s Font Awesome plugin gives you vector icons that can be easily customised. Don’t forget to install the font!

read more

Generate GIF

Need to create a simple animated gif? Easy. Setup multiple artboards and you’re ready to go.

read more

Prism

Prism creates an artboard with all the colours in your 'Document Colours' with its respective label in a variety of formats.

read more

There are plenty more amazing plugins for Sketch. Here's a list of them.

Web Rendering

Sketch renders content much closer to the screen compared to PS. That is all.

Exporting

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.

Price

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.

Less Training

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.

App Size

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.

Limitations

Photo Editing

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…

Printing

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.

Resources

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.

read more

Official Facebook Group & Twitter

The people at Sketch are very active on social media. The Facebook group helps each other out by sharing tutorials, resources, solving and reporting bugs.

It’s also a good place to find out about the latest release, blog and guides.

Following them on Twitter and you'll be the first to know of any updates and get helpful advice.

read more

Sketch on Medium

Lot’s of guides and how-tos here.

read more

Freebiesbug

Much like Sketch App Resources, this is a collection of mockups, icons and UI elements to download for free.

read more

Keyboard Shortcuts

If you’re a shortcut junkie, this will satisfy. All the basics are there – CMD + C = Copy and so on.

read more

Conclusion

Sketch is good! 

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? Contact SEED to make an inquiry.

By

Matthew John

Senior Designer
@ Sheda
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.

Call us

Call +61 3 9028 6936

Drop in and say hi

4 Brunswick Pl,
Fitzroy VIC 3065
get directions

Follow us

Contact

Thank you! Your submission has been received!

Hmm... Something's not right. Try submitting again.