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

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

I’m Hunter from Skillthrive and welcome
to the second lesson of this two-part Sketch course. In this lesson I’ll teach you how to create
the shopping cart section of the checkout design concept. Also, if you haven’t already, make sure
you download the final Sketch file by becoming a free member on Skillthrive.com. There’s a link in the description where
you can join. To get started, I’ll hit ‘T’ to create
a text layer and type ‘Your Shopping Cart.’ I’ll make sure that this text is set to
this Text Style that we created in lesson one. I’ll move the text layer 95 pixels from
the left and 110 pixels from the top so the bottom is aligned to the bottom of the ‘Card
Details’ layer on the right. I’ll hit ‘O’ to access the Oval Tool
and hold Shift while I drag out to create a circle that’s 150 pixels. I’ll turn off the border and then head back
into the free course files and drag in one of the included watch images. I’ll come up here and resize the height
to 150 pixels and left align the image on the circle. I’ll then select both layers and create
a mask. I’ll name this new group ‘Watch.’ I’ll move the group 80 pixels from the text
layer above. I’ll switch back to the Text Tool and type
out ‘Trendy Bamboo’ as a product name. I’ll select the text and pick this Text
Style. I’ll center the text layer to the image
and move it 65 pixels away. I’ll select the layer and hold Option while
dragging down to duplicate. I’ll select the text and type ‘Large’
to indicate watch size. I’ll then select the text again and change
the weight to medium, size to 15, and character spacing to 0.5. I’ll also save this Text Style and then
make sure the layer is left aligned to the title layer and that the top of the layer
is touching the bottom of the title. Now I’ll move on to the quantity selector. First I’ll create a rectangle that’s 9
pixels wide and 3 pixels tall. I’ll turn off the border and make sure the
fill is pure white. I’ll name this rectangle ‘Minus.’ I’ll duplicate the rectangle and make it
11 pixels wide. I’ll duplicate this rectangle and come up
here to rotate it 90 degrees. I’ll then select both rectangles and click
‘Union’ to combine the shapes. I’ll call this new shape ‘Plus.’ I’ll switch to the Rounded Rectangle Tool
by hitting ‘U’ and create a rounded rectangle that’s 60 pixels wide and 40 pixels high. I’ll turn off the fill, set the border color
to pure white, thickness to one, and radius to 8. I’ll switch to the Text Tool and type ‘1.’ The text should be the same as the font from
the ‘Large’ text, but if not, you can select the saved Text Style. Now center the number inside the rectangle,
group the number and rectangle, and name the group ‘Quantity.’ Then I’ll center and space the minus sign
20 pixels to the left of the rounded rectangle and then do the opposite for the plus sign. I’ll group the minus, plus, and quantity
and name the group ‘Quantity Selector.’ I’ll place the new group relatively even
to the product title and add 240 pixels of spacing. Next, I’ll type out a price and change the
Text Style to the same as the product title. I’ll center the text and move it 130 pixels
from the quantity. I’ll create a new rectangle that’s 22
pixels wide and 2 pixels high, turn off the border, and make sure the fill is pure white. I’ll rotate the shape 45 degrees and then
duplicate it with Command-D. With the duplicate selected, I’ll click this icon to flip horizontally. Then I’ll select both rectangles and click
‘Union’ to combine the shape. I’ll name the shape ‘Delete,’ center
it on the price layer, and move it 110 pixels away. Last, I’ll create a line by hitting ‘L’
on my keyboard. I’ll hold shift and drag out to create a
perfectly straight line. I’ll make sure the color is pure white,
the thickness is one, and the length is 1,095 pixels. I’ll left align it to the watch image, move
it 45 pixels from the bottom, and rename it to ‘Divider.’ I’ll select all the layers and groups for
the product section and group them with Command-G. I’ll name this group ‘Cart Item’ and
turn it into a Symbol. I’ll hold Option to duplicate the Symbol
and space each new section 45 pixels from each other. With Overrides, I can come in and dynamically
change the product titles, images, prices, and more, without affecting the original Symbol. I’ll switch back to the Text Tool and type
‘Continue Shopping.’ I’ll left align the layer and move it 45
pixels from the bottom of the last cart item. I’ll hold Option while dragging to the right
to duplicate the text layer and change the text to ‘Subtotal:’ I’ll duplicate the
text layer again and type the total price, which in this case is ‘$107.97,’ and change
the Text Style. I’ll center the layer on the subtotal and
space it out 10 pixels. I’ll group the subtotal and price layers
and name it ‘Subtotal,’ right align it to the cart items, and move it 40 pixels from
the bottom. I’ll group all the layers that I created
for shopping cart section and name it ‘Shopping Cart.’ And that’s it! We’re ready to export our project and share
it with the world. If you liked this Sketch tutorial, check out
these here. And, if you liked this video, please give
it a thumbs up, subscribe, and share it with your friends. I’ll see you in the next one.

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

Leave a Reply

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