Practice English Speaking&Listening with: Sketch Web Design Course: E-commerce Checkout Page Design Part 2 of 2

Normal
(0)
Difficulty: 0

Im Hunter from Skillthrive and welcome to the second lesson of this two-part Sketch course.

In this lesson Ill teach you how to create the shopping cart section of the checkout design concept.

Also, if you havent already, make sure you download the final Sketch file by becoming

a free member on Skillthrive.com.

Theres a link in the description where you can join.

To get started, Ill hit T to create a text layer and type Your Shopping Cart.

Ill make sure that this text is set to this Text Style that we created in lesson one.

Ill 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.

Ill hit O to access the Oval Tool and hold Shift while I drag out to create

a circle thats 150 pixels.

Ill turn off the border and then head back into the free course files and drag in one

of the included watch images.

Ill come up here and resize the height to 150 pixels and left align the image on the circle.

Ill then select both layers and create a mask.

Ill name this new group Watch.

Ill move the group 80 pixels from the text layer above.

Ill switch back to the Text Tool and type out Trendy Bamboo as a product name.

Ill select the text and pick this Text Style.

Ill center the text layer to the image and move it 65 pixels away.

Ill select the layer and hold Option while dragging down to duplicate.

Ill select the text and type Large to indicate watch size.

Ill then select the text again and change the weight to medium, size to 15,

and character spacing to 0.5.

Ill 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 Ill move on to the quantity selector.

First Ill create a rectangle thats 9 pixels wide and 3 pixels tall.

Ill turn off the border and make sure the fill is pure white.

Ill name this rectangle Minus.

Ill duplicate the rectangle and make it 11 pixels wide.

Ill duplicate this rectangle and come up here to rotate it 90 degrees.

Ill then select both rectangles and click Union to combine the shapes.

Ill call this new shape Plus.

Ill switch to the Rounded Rectangle Tool by hitting U and create a rounded rectangle

thats 60 pixels wide and 40 pixels high.

Ill turn off the fill, set the border color to pure white, thickness to one, and radius to 8.

Ill 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 Ill center and space the minus sign 20 pixels to the left of the rounded rectangle

and then do the opposite for the plus sign.

Ill group the minus, plus, and quantity and name the group Quantity Selector.

Ill place the new group relatively even to the product title and add 240 pixels of spacing.

Next, Ill type out a price and change the Text Style to the same as the product title.

Ill center the text and move it 130 pixels from the quantity.

Ill create a new rectangle thats 22 pixels wide and 2 pixels high, turn off the

border, and make sure the fill is pure white.

Ill rotate the shape 45 degrees and then duplicate it with Command-D. With the duplicate

selected, Ill click this icon to flip horizontally.

Then Ill select both rectangles and click Union to combine the shape.

Ill name the shape Delete, center it on the price layer, and move it 110 pixels away.

Last, Ill create a line by hitting L on my keyboard.

Ill hold shift and drag out to create a perfectly straight line.

Ill make sure the color is pure white, the thickness is one, and the length is 1,095 pixels.

Ill left align it to the watch image, move it 45 pixels from the bottom, and rename it to Divider.'

Ill select all the layers and groups for the product section and group them with Command-G.

Ill name this group Cart Item and turn it into a Symbol.

Ill 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.

Ill switch back to the Text Tool and type Continue Shopping.

Ill left align the layer and move it 45 pixels from the bottom of the last cart item.

Ill hold Option while dragging to the right to duplicate the text layer and change the

text to Subtotal: Ill duplicate the text layer again and type the total price,

which in this case is $107.97, and change the Text Style.

Ill center the layer on the subtotal and space it out 10 pixels.

Ill 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.

Ill group all the layers that I created for shopping cart section and name it Shopping Cart.

And thats it!

Were 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.

Ill see you in the next one.

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