Home / Uncategorized / 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

SEE MORE DETAILS BELOW:

Also, if you haven’t already, make sure you download the final Sketch file by becoming a free member on Skillthrivecom 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 05 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 ‘$10797,’ 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

Source: Youtube