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

In this 3 Part Tutorial we’ll be creating designs for a fictional E-Commerce iOS App


We will make our way through the app, from the splash screen to the categories, putting the best parts of Sketch into practice. If you are a more experienced Sketch user there’s still an abundance of detailed tips and practices that you may have missed before, and will hopefully give you a few of those “Ah I didn’t know you could do that” moments.

As well as the standard Sketch tools, and features available to us, we’ll be putting the Craft plugin by InVision to good use also.

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 One, make sure you have the following applications, and assets installed…

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

Please Note: Throughout this chapter I will be showing you how to navigate to specific menu items, insert Symbols, create Text Styles, all done the default Sketch way. If this is your first time out using Sketch it pays to know your way around the application. If you’re a more seasoned Sketch user (or just love saving time) you may want to use the Runner plugin I mentioned in an earlier chapter. It really is a wonderful tool that will speed up your workflow greatly. Still unsure? Check out this handy demo.

Applications, and assets all installed? Great stuff! Let’s go ahead and create some awesome in Sketch.

Splash

We’ll kick of proceedings with a simple Splash screen for our app.

So press (A) to bring up the Artboard selection in the Inspector panel on the right, and choose the iPhone 6 option.

Quick tip: You can quickly rename your Page, Artboard, or any Layer by selecting it in the Layers List and using (Cmd + R), or by simply double-clicking on the name.

Go ahead and do just that. Change the page name to Artboards, and the Artboard name to Splash.

Check the Background Color option also. Leaving it at the default of White #FFFFFF.

Let’s add a background image to our screen. Draw out a Rectangle (R) 375 x 667px to cover the Artboard.

Quick tip: You may have missed this tip in an earlier chapter, so I’ll show you here. With the shape layer selected, remove the Border, and then from the Menu bar choose Edit > Set Style as Default. This just saves you from the mundane task of removing the Border of each Rectangle shape you insert, which will be quite a lot throughout this chapter.

Rename the Layer (Cmd + R) to something suitable like Background Image.

From the Inspector panel, 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 man_red_check.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%.

Now let’s start inviting some icons to this party.

Open up Iconjar, and click the plus (+) symbol at the top of the application to begin creating a new icon set.

Give the set a name. Something along the lines of Store — Icon Set would be perfect.

Then browse to the Tutorial Assets/Icons folder.

Open that folder, click Create New Set, and your icon set is now ready to party like it’s 1999!

Select the Building icon and drag this onto the screen we created in Sketch.

Now select the Shape Layers of the icon and change their Fill Color to #FFFFFF. Leave the icon size as it is.

Insert a Text Layer (T). Change the wording to Store, set the text to Uppercase via Type > Uppercase, then enter the following settings in the Inspector panel…

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

Insert another Text Layer (T). Change the wording to The home of fashion, then enter the following settings in the Inspector panel…

  • Typeface: Open Sans
  • Weight: Light Italic
  • Color: #FFFFFF
  • Size: 18
  • Alignment: Center
  • Character Spacing: 3

Quick Tip: You may find that when inserting a Text Layer, and setting its Alignment to Center, that you will still have spacing to the right of the last letter. Which you of course don’t want with centered text.

To fix this pesky little issue, quickly jump to the Inspector panel, and change the Character Spacing by a small increment (i.e. 4 to 4.1), and then back to its original setting (i.e. 4). Frustration avoided!

Quick Tip: If you haven’t already, check out the Sometimes it’s the little things that get missed… chapter, and look at setting up your own Keyboard Shortcuts. Two of my favourites are for setting text to Uppercase, and Lowercase, and will come in very handy throughout this chapter.

With one of the Layers selected, use the Measure guides (Alt) to set appropriate spacing between the two Text Layers.

Then, with the both Text Layers selected, and using the Alignment Tools in the Inspector panel, choose the Align Horizontally option.

Group the two Text Layers (Cmd + G), and then rename the group (Cmd + R) to Title + Subtitle.

Select the icon, and text group you just created, and use the Align Horizontally option again.

With both groups selected, hit (Cmd + G), and then rename that new group (Cmd + R) to Logo.

To finish up this screen, select both the Logo group you created, and the background image layer, then choose the Align Horizontally, and Align Vertically options to center the logo on the screen.

Just a little warm up there with the Splash screen. Let’s move onto our Home screen and dive a little deeper into Sketch.

Home

Like before, press (A) to bring up the Artboard selection, choose the iPhone 6 option, and then rename the Artboard (Cmd + R) to Home.

Don’t forget to check the Background Color option also (make sure you do this for all your screens). Leaving it at the default of White #FFFFFF.

All set? Cool. Now let’s make a start on the Header for our screen.

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

We’ll be using the same background image (with color overlay) from the Splash screen, so right-click on the background image layer from that screen, and choose Copy Style. Then select the Rectangle we just created, right-click, and choose Paste Style. Saves us a little time don’t you think?

Now we need to add in the Status Bar to appear at the top of our screen. So navigate to File > New From Template > iOS UI Design.

From this page choose one of the white Status Bars…

…and copy & paste this across to our Home Artboard. Placing it at 0 0 on the X and Y position.

Improved Symbols at the ready!

Now let’s take a look at the improved Symbols feature available to us with the latest version of Sketch.

In earlier versions of Sketch you were constrained a little when using Symbols. You couldn’t have nested Symbols (Oh the frustration that caused). You had to create multiple versions if you were using an image inside of your Symbol, the list goes on… Let’s just say it wasn’t always the most practical of features.

Now they are much more versatile, and will definitely improve your efficiency when working on a large scale project.

So back to the Symbol in our document…

You will see that the Status Bar Symbol we just inserted has a purple icon next to it in the Layers List. “But where are the Layers inside of that Symbol? Why is the Layer flattened?” may be the cries of many. Let me show you what has changed in this recent update.

In the latest version of Sketch, Symbols are now placed on their own page Symbols. Yes you need to edit them ‘out of context’, and yes this has made quite a few long-term users of Sketch unhappy, but that is the way it is currently. The folks over at Bohemian Coding (the creators of Sketch) have mentioned that the new Symbols feature is a ‘work in progress’, so they may look at further improvements in a later release, to keep both sides of the fence happy.

Please Note: You may be wondering where the Symbols Page is that I mentioned just now? If you have a Symbol that you have copied across from another document, in our case the Status Bar, you will need to click on the Create Symbol button in the Toolbar for your document to register it, and in turn create a Symbols Page.

Go ahead and do that. Give the Symbol a more manageable name in the window that appears, and then press OK.

You will see the Symbols Page appear in the Layers List, where you can click through and edit your Symbols from there. Any changes that you make here, will be replicated across any instances of the Symbol you are using within your document.

Please Note: If you changed the name of your Symbol, but have a duplicate on the Symbols Page (i.e. Status Bar/White/100%) just go ahead and delete it.

Quick Tip: You may be thinking ‘But I can’t actually see my white Symbol against a white background?’. Yes that is a bit of pain, but don’t worry, all you need to do is set a dark Background Color, and make sure Include in Instances is unchecked. This enables you to see your Symbol when editing, but keeps the background color hidden on any instances of the Symbol throughout your design.

Another great feature of the updated Symbols is the ability to use Overrides. In previous versions, you could use Exclude Text Value from Symbol, but with this latest version, as well as overriding text layers, you can override images too, and we’ll touch on that handy feature later in this chapter.

Ok, after that brief, but informative interlude on the new Symbols feature, let’s get back to the Home screen for our app.

Let’s start by getting our Navigation bar into place, and giving it the Symbol treatment at the end.

From Iconjar, select the Menu icon, and drag this onto the Home screen. Do the same for the Search icon also.

Like we did with the Building icon on the Splash screen, select the Shape Layers of each icon and change their Fill Color to #FFFFFF, leaving the icons at the same size.

Please Note: Each one of the icons that you will use throughout this guide have already been sized accordingly. It’s only the color that will need adjusting. I thought I’d save you some time. I’m a nice guy like that.

Selecting each one of the icons in turn, hold (Alt) to bring up the Measure Guides and position them 15px from the left, and right edges of the screen.

Then select both icons and use the Align Vertically option to snap them into line.

Group the icons together (Cmd + G), rename (Cmd + R) to Navigation (Standard), and then (using the handy (Alt) key again) align the group 15px below the Status Bar.

Click on the Create Symbol button in the Toolbar, keep the name as it is (or change it, it’s entirely up to you), and click OK.

Jump to the Symbols page, and like we did for the Status Bar Symbol, give it a dark Background Color, making sure Include in Instances is unchecked.

Hop on back to Iconjar, select the Present icon and drag this onto the Home screen. Change the icon Fill Color to #FFFFFF.

Insert two Text Layers (T). For the first one change the wording to Holiday Special, set the text to Uppercase via Type > Uppercase, and enter the following settings in the Inspector panel…

  • Typeface: Raleway
  • Weight: Bold
  • Color: #FFFFFF
  • Size: 24
  • Alignment: Center
  • Character Spacing: 6

…and for second Text Layer change the wording to 25% off all marked items, set the text to Uppercase via Type > Uppercase, and enter the following settings…

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

Select both Text Layers, and icon, and click Align Horizontally. Then use (Alt) to measure the distance between the elements, giving each one a little breathing space.

Group all 3 elements together (Cmd + G), and rename (Cmd + R) to something like Offer Description. Select this group, and the background image, and click Align Horizontally. Then use (Alt) to align the group correctly between the Navigation and the bottom of the image.

Now go ahead and select all the Layers you’ve created this far, and group them together (Cmd + G), and rename (Cmd + R) to Header.

Quick Tip: Make sure to keep your Artboards in order whilst working through this tutorial, and for any time you’re working on a project in Sketch. I like to rename Layers, and Groups, and group elements together as often as possible. As you work through sections of an Artboard, be it for an App, or Web project, just do a little spring cleaning as you work your way through it. It keeps your document organised, and sanity in check.

It’s now time to get some categories into position.

Firstly, draw out a Rectangle (R) 375 x 413px, give it a Fill Color of #FFFFFF and place this directly below the Header.

Then draw out another Rectangle (R) 187 x 187 px, and place this 1px below the Header, and 0px from the left edge of the Artboard.

From the Inspector panel, 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/Categories folder, and choose white_t_shirt.jpeg

Create a new Text Layer (T), change the wording to Tees, set the text to Uppercase, and enter the following settings…

  • Typeface: Raleway
  • Weight: Bold
  • Color: #FFFFFF
  • Size: 20
  • Alignment: Center
  • Character Spacing: 5

Let’s go ahead and create a Text Style for this element, so we can easily re-use these settings later in our project.

With the Text Layer selected choose Create New Text Style from the select menu in the Inspector panel…

…and then give it a suitable name like Category Title.

Please Note: In this tutorial we will be duplicating many elements, so you could say there is no requirement for Text Styles in many places. Why bother, when you’re duplicating elements with their styles intact. But if you decide to create Style Guides at a later date, having Text Styles with more meaningful titles to reference avoids confusion. A Style Guide that is H1 this, and H2 that, is confusing to look at, and not cool!

With the Shape, and Text Layer selected, click Align Horizontally, and Align Vertically so everything is lined up correctly.

Group the Shape, and Text Layers (Cmd + G), and rename (Cmd + R) to Category.

With the group selected, click Create Symbol. Keep the Symbol name as it is, and press OK.

Now it’s time to take a look into the Craft plugin. The one that all the cool kids are raving about, and for good reason as you’ll find out throughout this chapter.

With your newly created Symbol selected, jump across to the Craft panel (at the left of the Inspector panel). Can’t see the Craft panel? Use the shortcut (Cmd + P) to toggle its visibility.

Select the Duplicate option, and then enter the following settings…

  • Vertical:
  • Item Count: 3
  • Gutter: 1
  • Horizontal:
  • Item Count: 2
  • Gutter: 1

Not a fan of Craft? No problem, you can easily use Sketch’s own Make Grid feature…

Click Make Grid, and enter the following settings…

  • Rows: 3 Margin: 1px
  • Columns 2 Margin: 1px

Cool. Now we have our Symbols laid out, with those very handy Overrides at the ready (both for Text Layers, and images). But quickly, before we start tweaking away at them, let’s jump on over to our Symbols page, and add a subtle gradient to our Category Symbol.

With the background image Layer selected, add a new Fill Color, select the Linear Gradient option, and go from #FFFFFF at 0% Opacity, to #5E5E5E at 60% Opacity.

Back to the Artboards. We’re going to have 6 different Categories to display (starting from the top left)…

  • Tees
  • Hoodies
  • Jackets
  • Shoes
  • Watches
  • Bags

And this is where the Overrides will come into play. So select the second Symbol in the grid, and then from the Overrides panel, change the text to HOODIES, and click on Choose Image to select green_hoodie.jpeg from the Tutorial Assets/Images/Categories folder.

Make your way down through the grid, overriding the text, and images until you have something like the following…

Before we finish up this screen, you may be looking at the Layers List, and going “What the fudge!”. Yes, it does look a little messy (Category Copy 2, Category Copy 3 etc…). Even though we are using a Symbol called Category, when used in the context of our Artboard it really doesn’t give us the clearest of names to reference. So go through the Layers and rename (Cmd + R) to match the categories on the screen (i.e. Tees, Hoodies, Jackets etc…) You’ll feel much better for it, I promise.

Group the category Layers (Cmd + G), and rename (Cmd + R) to Product Categories.

Then group the Product Categories group, and background layer (Cmd + G), and rename (Cmd + R) to Content. Job well done!

Thanks for reading the article,
Marc

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

Jump to Part Two of the Tutorial here…