Creating an E-Commerce App in Sketch: Part 3 of 3

Please Note: This is a scaled down version of the Chapter available in my new guide Sketch App Essentials. In the full chapter you will be shown how to create 12 screens inside of Sketch, instead of just the 6 covered here (amongst many other invaluable tips, and tricks).

Before we make a start on Part Three, make sure you have the following applications, and assets installed…

• Sketch
• Craft
• Iconjar
• Tutorial Assets (includes Fonts, Icons, and Images required)
• Raleway and Open Sans fonts*

* You can find these in the Tutorial Assets/Fonts folder.

Ok. Let’s make a start on the 3rd and final part of the Tutorial…

Category (Tees)

Press (A) to bring up the Artboard selection, choose the iPhone 6 option, and rename (Cmd + R) the Artboard to Category (Tees). Increase the height of the Artboard to around 1350px.

Draw out a Rectangle (R) 375 x 254px and place this at the top of the Artboard.

Click on the Color Fill, and choose the Pattern Fill option. Make sure the option is set to Fill in the select menu, and then click Choose Image…

Browse to the Tutorial Assets/Images/General folder, and choose white_t_shirt.jpeg

Add another Fill on the same Layer (keep this as a Color Fill), and set the Hex value to #303030 with an Opacity of 60%.

From the Symbol icon in the Toolbar, insert the Status Bar, and Navigation (Standard) Symbols.

Use (Alt) to align them correctly on the Artboard.

Insert a Text Layer (T). Change the wording to Tees, set the text to Uppercase, and then enter the following settings…

• Typeface: Raleway
• Weight: Bold
• Color: #FFFFFF
• Size: 36
• Alignment: Center
• Character Spacing: 9

Choose Create New Text Style, and name it Header Title.

Insert another Text Layer (T), change the wording to Our Hip-Hop Tees have arrived, and then enter the following settings…

• Typeface: Open Sans
• Weight: Regular
• Color: #FFFFFF
• Size: 12
• Alignment: Center
• Character Spacing: 2

Again, choose Create New Text Style, and name this Header Subtitle.

Use the Alignment tools, and (Alt) key to bring the two Text Layers into line.

Group (Cmd + G) both Text Layers, and rename (Cmd + R) to Title + Description. Align this group evenly between the Navigation, and bottom of the Header image. Use the (Alt) key to measure the distance manually.

Group together (Cmd + G) all the elements you’ve created so far, and rename (Cmd + R) to Header.

We’ll now create navigation, that will enable the end-user to swipe through the different categories available in our app, from within the one screen.

Insert a Text Layer (T). Change the wording to Tees, set the text to Uppercase, and enter the following settings…

• Typeface: Open Sans
• Weight: Regular
• Color: #9B9B9B
• Size: 11
• Alignment: Left
• Character Spacing: 2

Duplicate this Layer using (Alt + Drag), and change the wording for each menu item to match up with the existing category names you have, leaving a 12px margin between each element, until you have something like the following…

Select the first Text Layer, and tweak the following settings…

• Weight: Semibold
• Color: #303030

Draw a Rectangle (R), 375px x 1px, with a Fill Color of #86B2E6. This will act as the Divider for our navigation.

Quick Tip: You may be thinking ‘Erm. Why don’t you just use the Line Tool?’. I just find that when working with 1px, or 2px lines in Sketch, that creating a Rectangle just simply works better. The Line Tool can be a fickle thing from time, to time, and loves to sit on half-pixels a little too often for my liking, especially when creating duplicates.

Insert a Rectangle (R), around 40px wide, with a height of 4px, a Fill Color of #86B2E6, and position it below your first navigation item.

Group (Cmd + G) this element (yes, I know it’s just one element you are grouping here, but it is required if you’re taking this design to the prototyping stage in the next chapter), and rename (Cmd + R) to Active Marker.

Insert a Rectangle (R), with a Fill Color of #FFFFFF, making sure it snaps to the bottom of the header image, and sits up against the Divider we created before.

Then group (Cmd + G) all of the navigation elements, and rename to Category Navigation.

In the next section of this screen is where Craft takes things up a level. You’re going to enjoy this a lot!

We’re going to be creating a product list item (like the image shown). Yes, just the one…

…and then let Craft weave its magic, and do all the hard work for us. Let’s get to it…

Draw out a Rectangle (R) 140 x 140px, and then align it 30px from the bottom of the category navigation, and 30px from the left edge of the Artboard (screen).

From Craft, open the Data panel, click Photos, and select one of the empty panels to add a new item + Add Item.

Give your new item a name (i.e. T Shirts), choose a funky little icon, and then from the select menu choose Local Folder, and browse to the Tutorial Assets/Images/Tees folder, open it, and click Save Action. This will now allow us to pull in various images from this folder, and helps greatly when we come to use the Duplicate feature later on.

Click on your newly created item to insert an image from the folder you specified in the last step.

Please Note: If you want to insert just a single image you can select the Folder option, and use the Quick Place feature.

Similar to what we did for the Product Search screen, create a selection of color options for the product. Aim for something like the following…

Now, insert a Text Layer (T), keep the default wording as it is (we’ll be doing some more Craft magic on this shortly), and enter the following settings…

• Typeface: Raleway
• Weight: Medium
• Color: #303030
• Size: 13
• Alignment: Center
• Character Spacing: 2

Jump to the Data panel in Craft, click Type, and select one of the empty panels to add a new item + Add Item.

From the select menu that appears, choose + Add Custom.

In the next window, give your Custom Item a name (i.e. T Shirts), then create a list of item names to use (we’re aiming for 8 items on this screen), and click Save.

Choose your new item from the Data panel (make sure your Text Layer is selected), and boom! You’re text has just been updated with one of the item names you just added.

Insert another Text Layer (T), keep the default wording as it is, and enter the following settings…

• Typeface: Open Sans
• Weight: Bold
• Color: #303030
• Size: 15
• Alignment: Center
• Character Spacing: 2

From the Data panel in Craft, choose Currency. Make sure decimals is checked, and choose 0–99.

Now select all the elements (thumbnail, color choices, title etc…), and use Align Horizontally.

Then (Cmd + G) to group everything together, and rename (Cmd + R) accordingly.

Select the group you just created and jump on over to the Duplicate panel in Craft, and here’s where it gets really juicy!

Enter the following settings…

• Vertical: √
• Item Count: 4
• Gutter: 30
• Horizontal: √
• Item Count: 2
• Gutter: 35

And then click Duplicate Content…

How cool is that? Craft has duplicated your content, but also replaced the T-Shirt image, item name, and price automatically. What a real timesaver that is!

Please Note: The output number may be a little off ($88.00 for a T-Shirt!!), so feel free to tweak until you’re satisfied. Also if you have any duplicate images, or text layers, go ahead and adjust those accordingly. You may think that you have to jump through a few hoops initially with Craft, but once you’ve used it a few times you’ll discover why it really does help speed up your workflow.

Tidy up the Layers List, so it matches up to what you have on your Artboard, and then group (Cmd + G) all the product items together, and rename (Cmd + R) to Content.

And that’s a wrap for this screen. Nice work!

Category (Hoodies)

With this screen, there are a couple of ways we could go about creating it…

We could have created a header Symbol on the Category (Tees) screen, dropped this in, tweaked the Overrides, and then used the Duplicate feature in Craft to create some new products.

Or we could simply duplicate the Category (Tees) screen, and simply tweak what’s already there…

…and guess what? That’s what we’re going to do.

Quick Tip: There’s no right, or wrong way of working with Sketch. There’s no golden rule book that says you have to adhere to a certain method. Some methods, admittedly, increase the speed of your workflow, but it’s all about finding something that works for you. Find your groove, and run with it!

Select the Category (Tees) screen you created in the last part, hold (Alt + Drag) to duplicate, and then rename (Cmd + R) it Category (Hoodies).

Starting with the header, edit the two Text Layers to Hoodies, and Our Hip-Hop Hoodies have arrived respectively…

Then select the background image, click on the Fill option, and browse to the Tutorial Assets/Images/General folder, and choose green_hoodie.jpeg

For the category navigation, adjust the design element so the Hoodies menu item is shown as active. Something like the following…

Quick Tip: To tweak the menu items, use the simple method of (Right-Click) Copy Style/Paste Style to quickly change their styling.

For the products, we’ll only be displaying 6 items on this screen, so delete the bottom two items, and then resize the Artboard accordingly. 1100px in height should be ok.

Let’s replace those T-Shirt images with the finest selection of Hoodies (and Sweatshirts, but hey who’s watching).

From the Layers List, select the first image (just the image), and then (Cmd + Click) to select all the other image layers.

From Craft, open the Data panel, click Photos, and select one of the empty panels to add a new item + Add Item. From the select menu that appears, choose + Add Custom.

Give your new item a name (i.e. Hoodies), choose an icon, and then from the select menu choose Local Folder, and browse to the Tutorial Assets/Images/Hoodies folder, open it, and click Save Action.

Finally, click on your newly created item to replace all the images that you have selected.

Staying in the Data panel, click Type, and select one of the empty panels to add a new item + Add Item. From the select menu that appears, choose + Add Custom.

In the next window, give your Custom Item a name (i.e. Hoodies), choose an icon, then create a list of item names to use (we’re going for 6 items on this screen), and click Save.

From the Layers List, select all the product names with (Cmd + Click).

And then choose Hoodies from the Type option to update the product names.

Feel free to change the price of each item also.

Before we finish up this screen, tidy up the Layers List, and rename some of the groups there, so it matches up to what you have on your Artboard.

And that’s a wrap right there! Hope you enjoyed the Tutorial.

Thanks for reading the article,
Marc

Marc is the founder of Sketch Camp, and Best-Selling Author of Sketch App Essentials