April 3, 2020
Sketch Web Design Course: E-commerce Checkout Page Design Part 1 of 2

Sketch Web Design Course: E-commerce Checkout Page Design Part 1 of 2


I’m Hunter from Skillthrive and welcome
to the first lesson in this two-part Sketch tutorial. In this lesson I’ll begin the project, create
symbols for the color palette, and create the purchase modal for the checkout design
concept. If you’d like to download the final Sketch
file that I’m creating today, you can join Skillthrive in the link below for free and
get instant access. With that said, let’s get started. After opening Sketch, let’s go ahead and create
an Artboard by clicking ‘A’ on the keyboard. Then click and drag to start the Artboard
and come over and set the size to 1920 by 1080. Name the Artboard ‘Shopping Cart.’ Next, let’s create a few Artboards that
will hold the colors that I will be using in this design. After, I will turn them into Symbols that
I can use to easily control color throughout our project. I’ll hit ‘A’ again to access the Artboard
Tool and then hold Shift while I drag out to create a 180 pixel square. Then I’ll hit ‘R’ to access the Rectangle
Tool and fill the Artboard with a rectangle. I’ll turn off the border and set the fill
to the hex code F2B632. I’ll go ahead and save that color in my
Document Colors as well. I’ll name this Artboard ‘color/’ followed
by the hex code. I’ll do a similar process with the other
Artboards, which will tell Sketch to group these Symbols together. Then, I’ll repeat this process 5 more times,
using the hex codes on the screen. Once I’m done creating the Artboards, I’ll
select them from the Layer List. Then I’ll right-click over one of the layers
and select ‘Create Symbol.” Go ahead and create a new page that will hold
all of your project Symbols. I’ll fill the Artboard with a rectangle
to create the background and turn off the border. Instead of picking the fill for the rectangle,
I’ll use the rectangle as a mask for a color Symbol. So, I’ll come up to ‘Insert,’ down to
‘Document,’ over to ‘Color’ and select this color. I’ll move my mouse on top of the rectangle
and click to place the Symbol. Now, I can resize the symbol to fill the background. I’ll select the Symbol and the rectangle
from the Layer List and come up and click on ‘Mask.’ Then I’ll rename this grouping to ‘Background.’ If I want to change the color of this background,
I can select the layer and come over here and pick one of the colors. Next, I’ll create a rectangle that’s 637
pixels wide and 1,080 pixels high and place it on the right side of the artboard. I’ll turn off the border and I’ll place
a color Symbol on top of the rectangle. Resize it and use the rectangle as a mask. I’ll rename this layer to ‘Modal Background.’ I’ll hit ‘T’ on my keyboard to access
the Text Tool. I’ll click on top of the rectangle and begin
typing ‘Card Details.’ I’ll select the text and come over to my
text settings. I’ll set the typeface to Montserrat, weight
to semibold, size to 40, and character spacing to 2.3. I’ll click the box above the text settings
that says ‘No Text Style’ and click ‘Create new Text Style.” Now I’ll be able to refer to this in order
to change and keep consistent text styles throughout my project. Before moving on to the next section, I’ll
select this text layer with the Move Tool and place it 120 pixels from the top and 95
pixels from the left. Keep in mind that you can hold Option while moving layers to see their spacing from other elements. I’ll create another text layer and type
‘Card Type.’ I’ll select this font and change the text
size to 20 and character spacing to 1.7 and create a new Text Style. I’ll align this layer to the left of the
‘Card Details’ layer and move it 85 pixels from the bottom. I’ll then head to my course files and grab
the three credit card images and drag them into Sketch. With all three layers selected, I’ll hit
Command+K to scale all three layers proportionally to 60 pixels. I’ll left align the first layer and move
it 25 pixels from the bottom of the section title. I’ll center the next two layers 60 pixels
apart from each other. I’ll group all four layers by hitting Command+G
and I’ll call the grouping ‘Card Type.’ I’ll go back to the Text Tool and type ‘Name
on Card.’ I’ll left align this layer and move it 60
pixels from the bottom of the first group. I’ll hit ‘L’ to access the Line Tool
and I’ll hold Shift while dragging out to create a straight line. I’ll make sure the line is 365 pixels long,
1 pixel thick and set to pure white. I’ll also left align it 60 pixels from the
section title. Then I’ll group the two layers and name
the group ‘Name on Card.” To create the next section, I’ll select
the ‘Name on Card’ group and hold Option while I drag down 60 pixels to duplicate the
group. I’ll rename the group to ‘Card Number’
and change the title to match. I’ll duplicate the next section the same
way and I’ll call this group ‘Expiry Date’ and change the section title. I’ll shorten the line to 53 pixels. I’ll then create a 20 pixel vertical line
with the Line Tool, this time holding Shift while I drag down. I’ll then move the line in the Expiry Date
group. I’ll hit Shift-Command-R and use my mouse
to rotate the line 20 degrees. I’ll then align the line to the bottom of
the left line and make sure it’s 5 pixels away. I’ll select the two layers and hold Option
while I drag to the right. I can also hold Shift to ensure I’m not
moving the line up or down. This time I want the new bottom line to line
up with the top-edge of the rotated line on the left. Now, I just need one more bottom line, so
I’ll select this one and hold Option and align this one the same way. I’ll group the 5 line layers and call the
group ‘Expiry Info.’ I’ll move this layer 43 pixels from the
bottom of the section title. For the next section I’ll hold Option on
the Expiry group and drag to the right. I’ll name this group and section title to
‘CVV.’ I’ll come into the ‘Expiry Info’ group
and drag the leftmost bottom line out of the group. I’ll then select the group and delete it. Then I’ll right align the group, while holding
shift to ensure I don’t move the group up or down. I’ll select all these layers and group them
and call them ‘Card Details.’ I’ll create a new rectangle that’s 638
pixels wide and 152 pixels high. I’ll turn off the border and use the yellow
Symbol color. I’ll name the layer ‘Button Background.’ I’ll switch to the Text Tool and type ‘Complete
Purchase.’ I’ll select the text and change the size
to 30. I’ll select this text layer and the button
background and group them together, calling the new group ‘Purchase Button.” I’ll center the text layer and I’ll also
create a new Text Style from this layer. I’ll select the Modal Background, Purchase
Button, and Card Details group and name this group ‘Checkout Modal.’ I’ll then create a Symbol from this group
and send it to my Symbols page. And that’s it for this lesson! In the next lesson we will create the shopping
cart. I’ll see you in the next one!

2 thoughts on “Sketch Web Design Course: E-commerce Checkout Page Design Part 1 of 2

Leave a Reply

Your email address will not be published. Required fields are marked *