Sketch, made by the nice folks at Bohemian Coding, is an excellent program for interface design. This beginner-level tutorial will introduce you to designing with Sketch. You won't need any previous experience with the program, just some free time to spend learning something new.
I will show you how to setup a simple artboard, how to create shapes using basic tools, boolean operations, the Inspector panel and the Layer list. We'll see how to change properties, organize layers, import images and other useful aspects of a Sketch designer's workflow.
1. Set up a Sketch Artboard
Step 1
Let's get started by creating a new document. Have you already opened Sketch 3? Okay, that's all you need to do! Let me explain; by default Sketch offers you an infinite canvas on which to work. You can start creating elements without fear of running out of space.
Let's go one step further and create an artboard. Artboards allow you to create fixed frames on Sketch’s infinite canvas.
To create a new artboard go to Insert > Artboard (A) from the toolbar or main menu. Click and drag inside Sketch's canvas. You will notice how Sketch displays the width and height values as you do so. Create a 600 x 800px artboard.
Tip: We can create as many artboards as needed. We can also change the artboard name on the Layer List to the left of the screen, or change its position and dimensions using the Inspector panel on the right. Delete artboards by hitting the Supr or Delete key when the artboard is selected.
For example, let's use the Inspector to change the artboard position to X=0 Y=0. Alternatively you can simply drag the artboard to that position.
Tip: Go to View > Show Grid to activate the default grid which comes with Sketch. It will help position objects exactly how you want them.
Step 2
Now we're going to change the artboard color. Doing so will help with the following steps. Select your artboard and take a look at the Inspector panel. Check the Background Color option and click the color swatch to the right. A color-picker will appear showing us different color options and properties. Pick the color you want. It doesn't really matter which color you select, but in this case we'll opt for a warm gray.
Your artboard is done and you're ready to start with the basic layout!
2. Design the Basics
Step 1
Go to Insert > Shape > Rectangle (R). Create a 360 x 500px rectangle on your artboard. Just as with creating artboards, you can draw a random rectangle and adjust its properties through the Inspector panel. Show the grid to make things easier!
Step 2
Having selected the rectangle, take a look at the Inspector panel. Remove the shape's border by unchecking it. Click the Fill sample and set it to white. We can set rounded corners in the Inspector panel too; move the Radius slider to the right or type 10 in the input field.
Step 3
Create a 40 x 40px circle using Insert > Shape > Oval. Remember, you can draw a random circle and use the Inspector to change its properties. Now, move it to the middle-top of your rectangle. Use the Zoom tool on the Toolbar if you need to zoom-in.
Step 4
Create another circle, this time 20 x 20 px. Align it within the first circle, in the middle. When moving it, you will see some smart guides to help you to align objects.
In fact, to make sure your content is lined up correctly, hold down the option (⌥) key on the keyboard. Sketch will help you get exact pixel measurements showing distances between objects. For example:
This is such a big help! Thanks, Sketch!
Step 4
Now we're going to turn our two circle objects into a single "ring". Select both circles directly, or through Layer List. Go to the Toolbar and click on Substract.
We now have a new complex shape:
Select this new object and also select your rectangle. Now click Union to get the final shape.
What did we do here? When we need a non-standard shape, we have to create it by ourselves. We could draw it with the pen tool, but often a complex shape is easy to break down into more standard shapes. We can use boolean operations for that. Sketch comes with union, subtract, intersect and difference boolean operations to get different complex shapes made by subpaths.
These options are non-destructive operations so we can change subpaths (basic shapes) properties easily by selecting them on the Layer list. When you have a shape with multiple subpaths in your canvas take a look at the Layer list. You will see a disclosure arrow on the left and if you expand that you will see a list of subpaths for your shape. On the right side you can pick a boolean operation for each subpath individually if you want to change it.
Step 5
Our basic shape is almost done! Make sure that your shape stays selected, look to the Inspector panel, select Shadows and set its properties as follows: Color > R=38 G=30 B=10 Alpha=50, X=0, Y=20, Blur=20 and Spread=0. In the end your shape should look like this:
3. Login Elements
A login form would be nothing without input fields and buttons, so let's make some!
Tip: You can lock your main shape to avoid mistakes and unexpected movements. Select it and go to Arrange > Lock Layer. A little padlock on the Layer List informs you which objects are locked.
Step 1
Using the Rectangle Tool (R), create a 280 x 50px shape, remove the border, set the fill color to R=239 G=87 B=46, Radius=2 and place it as shown in the following image.
Step 2
Create another 280 x 70px shape, fill it with white, radius=2, set border thickness to 1 and border color to R=234 G=234 B=234. Move it to the top of the orange rectangle, dragging it 10px up. Duplicate this shape (Control-D), select the copy and drag it another 80px up.
Step 3
Now create a little 20 x 20px square using Rectangle tool (R). Fill it with white and set Radius=2 , border thickness=1 and border color to R=234 G=234 B=234. Move it 10px below the orange rectangle. Your artboard should look like this:
Step 4
Ok, now we're going to spice up the login form with some text elements for labels and placeholders. Select the Text tool (T) and then you can click anywhere in the canvas to insert your text layer. You will see text being added and selected so you can start typing immediately. You will notice that the Inspector has changed to show you all the properties that apply to text.
Tip: You can also click and drag to create a text box of a fixed size. When the text gets too big to fit inside the box, it will resize downwards, as opposed to a normal text box which increases its width to fit the content.
Add the "USERNAME" text and go to Inspector panel to set its properties. Use the Montserrat font, Weight=Regular, Size=11, Spacing=1, Color > R=204 G=204 B=204.
Reselect the Type Tool (T) and add the "Armando" (or whatever you want) input text. This time use these values to set its properties: Montserrat font, Weight=Regular, Size=24, Spacing=0, Color > R=113 G=87 B=44. Select both pieces of text and place them as shown below:
Step 5
That sorts out our placeholder and input text for the first field. For the second, duplicate the text layers and move them over the second rectangle 80px down. Change the text content to "PASSWORD" and "*******".
Step 6
Add some new text layers and use the attributes as shown below. You will need Open Sans font.
You will notice the "Forgot your password" link is underlined. To achieve this effect click on the Text options button to reveal decoration effects. Pick the second one, while the text layer is selected.
Now, the result:
A Note on Organization
At this moment we should take a look at the Layer List. It could be a good idea to start organizing and renaming those rectangle shapes or simply grouping elements. Rename objects by double-clicking on them, or right-clicking and selecting the Rename option. To create a layer group just pick one or more layers, then click the Group icon in the Toolbar. You can also drag objects between groups in the layer list as you would expect.
The main objective is to change a messy layer list into something more elegant and organized. Take it into consideration, not only while following this tutorial but in every project you're involved with.
4. Adding a Logotype
We've already created the elements we need in our login box. It's time to add a logotype.
Step 1
Open the logo_icon.svg I've provided as an attachment to this tutorial. Now focus on the Layer list panel. You will see how the icon was made using different paths we can edit easily.
Step 2
Using the Rectangle Tool (R), create a 30 x 60px shape and place it as shown in the following image. It is not necessary to place it 100% perfectly at this time. Remember, you can use the grid and the option (⌥) key on the keyboard when moving. In this way, Sketch will show you precise distances.
Step 3
Now on the Layer list, drag the path layer into the "Shape" group. Put it on the top. You'll get a new compound shape by doing this. That's the power of boolean operations and vector shapes in Sketch!
Step 4
Do you remember when we talked about those tiny icons to the right side of your subpaths? We can pick different boolean operations for each subpath individually. So let's change the first to Substract and the second one to Difference.
Step 5
Easy step. Make sure that your new compound shape is still selected. Go to Layer > Paths > Flatten. In doing so you'll have lost your subpaths and their editing capabilities, but the next step will be easier now.
Step 6
Keep your shape selected. Go to the Toolbar and click the Edit icon. You will notice some changes to the Inspector panel and the shape itself. Select all the vector points by dragging on the canvas.
Focus on the Inspector panel and set Corners to 5. Click Fill to reveal the options window and select the second type of fill, Linear gradient. You will see two dots connected by a line overlaying your layer. Every dot on the line represents a color stop along the gradient.
To change the color of one of the stops, click on it in the canvas. You'll see that the color picker in the inspector updates to the color of that stop. Pick a new value in this color picker and you'll see the result. Knowing that, we can adjust the first color to R=245 G=166 B=35 and the second one to R=239 G=87 B=46. You can change colors directly on the color picker, too.
This is our final shape:
Step 7
Copy the shape and paste it into your login form.
Step 8
Your logotype is almost done, so now add some generic text. Type whatever you want, but for this tutorial I've used "myapp" and the following position and properties:
Our login form is finished!
5. Adding a Background
Step 1
Sketch allows us to work with bitmap images as well as vector objects. For the background I'm going to select an image from Unsplash. Awesome photography there! I'll pick this one made by Nick West.
Now go back to your document. Select your artboard on the Layer list panel and go to Insert > Image to select the picture. Warning: this image is huge! We're going to downsize it a little bit by going to the Inspector panel and changing its dimensions to something more manageable like 1280 x 876px. Position it at X=0 Y=0 and make sure it's on the bottom of your layers list.
Tip: If you import pictures while keeping an artboard selected you will get your image automatically masked using the artboard dimensions. Move the layer outside the artboard group to unmask it. Learn more about masking objects in the official documentation.
Step 2
In Sketch we can tweak the colors of an existing image using the Color Adjust panel located in the Inspector. We can change Saturation, Brightness, and Contrast. Set Saturation to 0 and Contrast to 1,9.
Now create a 600 x 800px rectangle using Insert > Shape > Rectangle (R). Place it at X=0 Y=0. On the Layer list move the shape layer just over the picture layer. Duplicate it and set the rectangles properties as follows: for the first rectangle set Opacity=100%, Blending=Multiply, Color > R=173 G=166 B=152. For the second one (just above the first one) set Opacity=50%, Blending=Normal, Color > R=173 G=166 B=152.
You’re Done!
Here is how it should look.
I hope you've enjoyed this tutorial...
But Wait, There’s More!
Since you're creating a UI element, adding some extra details to your login form could be really useful, don't you think? Form interfaces have many aspects; different states and feedback. All the techniques I've covered during this tutorial will have armed you with the skills to make some extra elements such as the following:
Think you can do it? If you get stuck or you need to ask me something, just leave a comment or find me on Twitter. I look forward to seeing how you get on!
