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

Im Hunter from Skillthrive and welcometo the second lesson of this two-part Sketch course. In this lesson Ill teach you how to createthe shopping cart section of the checkout intend idea. Also, if you havent previously, make sureyou download the final Sketch file by becoming a free representative on Skillthrive.com. Theres a relation in the description whereyou can join. To is starting, Ill hit T to createa text layer and form Your Shopping Cart. Ill make sure that this text is set tothis Text Style that we created in lesson one. Ill move the text layer 95 pixels fromthe left and 110 pixels from the top so the bottom is aligned to the bottom of the CardDetails layer on the right. Ill affected O to access the Oval Tooland propped Shift while I drag out to create a circle thats 150 pixels.Ill turn off the border and then head backinto the free course enters and drag in one of the included watch images. Ill come up here and resize the heightto 150 pixels and left align the persona on the clique. Ill then select both layers and createa disguise. Ill name this new group Watch. Ill move different groups 80 pixels from the textlayer above. Ill switch back to the Text Tool and typeout Trendy Bamboo as a product list. Ill select the text and picking this TextStyle. Ill center the text coating to the imageand move it 65 pixels apart. Ill select the layer and deem Option whiledragging down to duplicate. Ill select the verse and sort Largeto indicate watch size. Ill then select the text again and changethe value to medium, length to 15, and courage spacing to 0.5. Ill too save this Text Style and thenmake sure the mantle is left aligned to the title layer and that the top of the layeris touching the bottom of the title. Now Ill move on to the part selector. First Ill create a rectangle thats 9pixels wide and 3 pixels tall. Ill turn off the border and make sure thefill is pure white. Ill name this rectangle Minus. Ill duplicate the rectangle and make it1 1 pixels wide. Ill duplicate this rectangle and come uphere to rotate it 90 magnitudes. Ill then adopt both rectangles and clickUnion to combine the chassis. Ill call this new shape Plus. Ill switch to the Rounded Rectangle Toolby hitting U and create a rounded rectangle thats 60 pixels wide and 40 pixels high.Ill switch off the load, defined their own borders colorto unadulterated grey, thickness to one, and radius to 8. Ill switch to the Text Tool and category 1. The text should be the same as the typeface fromthe Large text, but if not, you can select the saved Text Style. Now center the count inside the rectangle, group the crowd and rectangle, and word the group Quantity. Then Ill center and space the minus sign2 0 pixels to the left of the rounded rectangle and then do the opposite for the plus sign.Ill group the minus, plus, and quantityand word the group Quantity Selector. Ill place the new group relatively evento the product title and lent 240 pixels of spacing. Next, Ill type out a price and vary theText Style to the same as the produce designation. Ill center the textbook and is moving forward 130 pixelsfrom the capacity. Ill create a brand-new rectangle thats 22 pixels wide and 2 pixels high-pitched, turn off the border, and make sure the complete is unadulterated white. Ill rotate the chassis 45 positions and thenduplicate it with Command-D.With the reproduce adopted, Ill click this icon to flip horizontally. Then Ill select both rectangles and clickUnion to combine the determine. Ill name the chassis Delete, centerit on the rate bed, and is moving forward 110 pixels apart. Last-place, Ill create a line by smacking Lon my keyboard. Ill propped shift and drag out to create aperfectly straight line. Ill make sure the complexion is unadulterated white, the thickness is one, and the section is 1,095 pixels. Ill left align it to the watch image, moveit 45 pixels from the bottom, and rename it to Divider .’ Ill select all the mantles and groups forthe concoction part and group them with Command-G.Ill name this group Cart Item andturn it into a Symbol. Ill regarded Option to duplicate the Symboland space each new section 45 pixels from each other. With Overrides, I can come in and dynamicallychange the concoction designations, personas, tolls, and more, without feign the original Represent. Ill switch back to the Text Tool and typeContinue Shopping. Ill left align the mantle and move it 45 pixels from the bottom of the last cart item.Ill hold Option while dragging to the rightto duplicate the textbook mantle and deepen the verse to Subtotal: Ill duplicate thetext seam again and form the total price, which in this case is $107.97, and changethe Text Style. Ill center the seam on the subtotal andspace it out 10 pixels. Ill group the subtotal and rate layersand appoint it Subtotal, right align it to the cart items, and is moving forward 40 pixels fromthe bottom.Ill group all the blankets that I createdfor browsing cart region and list it Shopping Cart. And thats it! Were ready to export our job and shareit with the world countries. If you liked this Representation lesson, check outthese here. And, if you liked this video, please giveit a thumbs up, subscribe, and share it with your best friend. Ill see you in the next one ..

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts