• 20 hours
  • Hard

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/30/21

Discover Artboards & Layers in Sketch

as

An introduction to Sketch

Sketch is an app for Mac that lets you create graphical elements. In order to build prototypes for mobile and desktop, we need to design and create the individual screens first. We will use Sketch for this task.  Bohemian Coding is the company that build Sketch. Their website describes Sketch as follows:

Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.

Installing Sketch

Go to https://www.sketchapp.com/ and click on free trial to start a download of Sketch. Install the app and you then have 30 days (at the time of writing!) where you use the software without needing a license key. After 30 days, you have to purchase a license key to continue using Sketch.

Buying a Sketch license for the first time will cost $99 USD and gives you a year of free updates. Sketch will continue to work after a year; you don't have to renew your license.

Getting Started in Sketch

There are two basic concepts that we need to understand before we can really be productive in Sketch:

  1. Artboards

  2. Layers

You can think of an artboard as being like a canvas. Within this canvas, you want to add a number of layers that then make up your desired design.

Let's take an example:

  • If you create a shape such as a rectangle in Sketch, this rectangle is one layer.

  • If you create some text such as the word "Patrick", this text is another layer.

  • Both of these layers then exist on our canvas (which we call an artboard in Sketch!).

Thus,  our artboard contains two layers.

An artboard with two layers
An artboard with two layers: Sketch gave the artboard a default name of 'Desktop HD'

Sketch Windows

There is a Windows option in the Sketch menu that allows you to show/hide various windows. The three most important elements of your Sketch interface are:

  1. Artboards: contain a set of layers

  2. Layer List window: shows a list of the layers of currently selected artboard (and their ordering)

  3. Inspector window: shows the properties (so you can edit them) of currently selected layer

Sketch Windows

Creating Artboards

During this course, we will create one artboard for each mobile app screen that we need for our prototype. If our prototype has eight screens, we will create eight artboards - one for each screen!

You can create an artboard by using the menu option Insert > Artboard and then choosing the size of the artboard you wish to create. The artboard options are grouped in dropdown:

Artboard Options
Artboard Options

  • For a web page, I would typically choose Responsive Web > Desktop HD

  • For a mobile app on iOS8, I would choose Apple Devices > iPhone8. Sketch then creates an artboard suitable for iPhone 8 designs (an artboard is created of width 375 pixels and height 667 pixels)!

iPhone8 Artboard
iPhone8 Artboard

Creating Shapes and Text

In the menu, you can choose Insert > Shape > Rectangle (or another shape).

You can choose Insert > Text to create a text layer.

Shapes and text are the most common elements that you can create. Take a few moments now to create a few of each (shapes and text) and practice creating shapes and text until you are comfortable doing so.

Ordering Layers

One thing to note is that if layers are overlapping on our artboard, then the ordering of layers in the Layer list (the left-hand window) will determine which layers are "on top" of other layers.

'Patrick' layer on top in the Layer list
'Patrick' layer on top in the Layer list

You can drag the layers in the Layer list to re-order them.

If I move the Patrick layer underneath the Rectangle layer, then the text layer for Patrick is hidden by the rectangle.

'Orange rectangle' layer on top in the Layer list
'Orange rectangle' layer on top in the Layer list

Summary

Installing Sketch and understanding Artboards and Layers means we are ready now to have some fun in the next chapter creating different types of shapes (layers) and editing their properties!

Additional Resources

Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Example of certificate of achievement
Example of certificate of achievement