Discover Sketch App

148 Pages·2008·42.14 MB·English

by  Marc Andrew

For
Hanna, Sophie, Adam & Joshua
My world, and the elements that keep me young.
1
Table of Contents
Chapter 1: What makes Sketch so great?
Chapter 2: Opening up Sketch for the first time
Chapter 3: Creating the Homepage design (for Desktop)
Chapter 4: Creating the Homepage design (for Tablet)
Chapter 5: Creating the Homepage design (for Mobile)
Chapter 6: Time to wrap things up
2
What makes
Sketch so great?
Let me give you a little insight on how a certain application gave me back my
enjoyment of designing again.
My design mojo had been feeling low for quite some time, and I was be-
coming a little disengaged from my role as a UI designer. Not a ‘Network’ style
“I‘m as mad as hell, and I’m not gonna take this anymore!”, more of a Rolling
Stones “I can’t get no satisfaction…. with the current design application I’m us-
ing” moment.
After many years of creating for the web, both in a designer, and de-
veloper role, and working through the spectrum of small, to big name clients,
I started to question my design output with the software I was using (Phot-
oshop in my case). It wasn’t an overnight feeling that the work I was produ-
cing was becoming a little stale (hey we’re our own worst critics aren’t we?),
but a more gradual one over the course of about 6 or 7 months.
There were other elements also that started chipping away at my design,
and development processes. One of those was the speed at which I could
produce the next project, due to the fact that the projects I was working on at
3
that particular time needed to have a quick turnaround for my cashflow to re-
main healthy. I was up against it in terms of the quality of the work I could pro-
duce in the small window that I had.
I road-tested various products out there, including a couple of all-in-one,
‘design, and we’ll spit out the code for you’ applications (shudder). I can see
the hardcore developers readying their pitchforks, and burning torches with
that last sentence.
But none were suited to me. It went against everything I had taught my-
self over the years. To create your best work, you design in a program like
Photoshop, you develop in a code editor. That was the done thing. Hardcore
developers you may now lower your pitchforks. Normal service has now re-
sumed.
The one golden nugget I took away from those applications was the
cleanliness of their UIs, and their way of concentrating on only the important
elements you needed to produce great work, and increase your productivity
at the same time.
And so, via a few Tweets that I’d stumbled across, brought me to Sketch.
Huzzah!
The key things that switched me onto Sketch were what I’d seen in the
products I had come across previously on my travels. The focus, the simplicity,
the stripping back of the superfluous from the UI.
An application that was much more suited for the modern day UI design-
er, and one that could help me get back to creating my best work, and give
me a much needed kick up my bezier curved butt in the process.
4
Sketch has helped improve my design output, and increase my efficiency
at the same time. And I’m sure, by following the steps in this guide, it will do
the same for you.
Enjoy the guide!
5
Opening up
Sketch for the first
time
In this chapter I’ll be showing you how to work your way around the applica-
tion, and some invaluable plugins, and resources I use when creating designs
inside of Sketch.
Time to fire up the Sketch rocket!
Ok. So hopefully you have a copy of Sketch on your Mac. It would be a little
awkward if you didn’t. If you don’t, go grab yourself the free trial from here -
http://www.sketchapp.com
6
Once you’re all installed, fire up Sketch, and let’s create some awesome to-
gether!
Pleasantly refreshing, minimal inter-
face
After you’ve clicked past the Welcome screen, you’re presented with a pleas-
antly refreshing, minimal interface.
7
Your Toolbar at the top contains a variety of tools that you can use when
working on a project. This can be setup to your liking (show what you need,
hide what’s not required) by clicking on the View menu, and then on Custom-
ize Toolbar…. From there you can drag & drop elements around with ease, to
get a toolbar that’s suited to you.

Below that you have the 3 main areas. On the left you have your Layers List,
where any elements that you add to your design will be visible.
8
Quick tip: You can rename your page by clicking on the arrow at the top of
the Layers List panel.
9