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 Two, 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 2nd part of the Tutorial…

Sidebar Menu

With the following screen, we’ll be designing the active state of a slide-in menu. So instead of creating a new Artboard, and because our menu will be presented in the context of the Home screen we designed previously, select the Home Artboard, hold (Alt + Drag) to duplicate it, and then rename the duplicated Artboard (Cmd + R) to Sidebar Menu.

Draw out a Rectangle (R) 375 x 667px to cover the Artboard, and give it a Fill Color of #303030 with 60% Opacity.

With the Layer still selected, choose Create New Shared Style from the Inspector panel, and call it ‘Full Screen Overlay’. We’ll be using this again later in the project, so it pays to create a Shared Style.

Now Group (Cmd + G) both groups (Header, Content), and rename (Cmd + R) to Home Screen, leaving the overlay you just created on a Layer of its own.

Now for the menu itself. Draw a Rectangle (R) 280 x 667px, give it a Fill Color of #303030, and a Shadow with the following settings…

• Color: #000000
• Opacity: 50%
• X: 0
• Y: 2
• Blur: 30
• Spread: 0

Quick Tip: The Fill Color we set for the menu background (#303030) will be used quite a few times throughout the design, so it would make sense to be able to reference it easily. Let’s do that now. Select the Fill Color, and then in the pop-out window, click the plus (+) icon in the Document Colors section. Done!

Time to go a little icon crazy in this next part, and get Iconjar putting in some extra hours. We’re going to be dragging across a Close icon, and icons for each of our menu items. Like I mentioned previously, the only adjustments we need to make to them is the Fill Color, nothing more.

So jump back to Iconjar, and one by one, drag across the following icons to your screen…

• Close
• Home
• T Shirt
• Hoodie
• Jacket
• Shoe
• Watch
• Bag
• Settings

Change the Fill Color for each of the icons to #FFFFFF. Remember to target the Shape Layers inside the icon, not the group.

It would also be a good idea to rename the groups (Cmd + R), to make them easier to reference in the Layers List (i.e. Home Icon, Watch Icon, Shoe Icon etc…).

Then position the Close icon towards the top left of the menu panel.

For the Home icon change its Fill Color to #86B2E6 as we are currently on the Home screen (Yes I have won many awards for stating the obvious from time, to time). And then insert a new Text Layer (T), change the wording to Home (You realise why I won so many awards right?’), and apply the following settings…

• Typeface: Raleway
• Weight: Regular
• Color: #FFFFFF
• Size: 18
• Alignment: Left
• Character Spacing: 3.6

Reach for the trusty (Alt) key, and measure up a reasonable distance between the icon, and Text Layer. We’ll refine this once we have all of our Menu items in place.

Select both the icon, and Text Layer and click Align Vertically.

Group the icon, and Text Layer (Cmd + G), and rename (Cmd + R) to Home.

Following the steps above, move down through the Menu items…

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

Then select all the icon groups, click Align Left, and position them from the left edge of the screen.

Do the same for the Text Layers. Select them all, click Align Left, and then position them around 30px to the right of the icons.

Group each icon with its matching Text Layer (Cmd + G), and rename (Cmd + R) accordingly (i.e. Home, Tees, Hoodies etc…).

Space each of the Menu items 40px vertically apart. Yes, we could have selected all the Menu items and used Distribute Vertically from the Alignment options, but doing it manually on occasion allows you to set exact measurements as required.

Before we finish up this screen, and if you haven’t already, arrange the Menu items in the Layers List as they appear on the Artboard…

• Home
• Tees
• Hoodies
• Jackets
• Shoes
• Watches
• Bags
• Settings

Then group them (Cmd + G), and rename (Cmd + R) the group to Menu Items.

And finally, select your Close icon, menu items, and background layer, group them (Cmd + G), and rename (Cmd + R) to Menu.

All done, and dusted for this screen!

Product Search

Like we did with the previous screen, and because we are again showing another state of our Home screen, we’ll go ahead and duplicate the Sidebar Menu screen by selecting it, and then holding (Alt + Drag).

Rename (Cmd + R) the screen to Product Search, and delete the Menu group.

Increase the height of the Artboard to 1095px to accommodate the Modal window that will appear on the screen.

Draw out a Rectangle (R) 375 x 60px, give it a Fill Color of #303030, and position it 200px from the top of the Artboard.

From Iconjar, drag in the Close icon, change the Fill Color to #FFFFFF, and position it 15px from the left edge of the Artboard.

Insert a Text Layer (T), change the wording to Search Products, set the text to Uppercase, and enter the following settings…

• Typeface: Raleway
• Weight: Medium
• Color: #FFFFFF
• Size: 15
• Alignment: Center

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

Use the Alignment tools to align the Text Layer with the Shape Layer you just created.

Group the 3 elements together (Cmd + G), rename the group (Cmd + R) to Title Bar, and then convert to a Symbol.

Directly below the Title Bar draw out a Rectangle (R) 375 x 835px, giving it a Fill Color of #FFFFFF.

Let’s add a few search options to this Modal of ours shall we.

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

• Typeface: Raleway
• Weight: Bold
• Color: #303030
• Size: 16
• Alignment: Left

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

Now for some sliders for our Price options.

Draw out a Rectangle (R) 345 x 4px, give it a Radius of 20, and a Fill Color of #D8D8D8.

Press (Cmd + D) to duplicate this Layer in place. Reduce the width to around 100px, and change the Fill Color to #FAC560.

Draw out a Circle (O) 50 x 50px, and give it a Fill Color of #FAC560. Then add a Text Layer (T), change the wording to $20, and enter the following settings…

• Typeface: Raleway
• Weight: Bold
• Color: #FFFFFF
• Size: 12
• Alignment: Center

Use the Alignment options to position the Shape Layer (circle), and Text Layer, then group them (Cmd + G), and rename (Cmd + R) to Handle.

Select the Handle group, and Rectangles you created, and use Align Vertically to snap them into line.

Group (Cmd + G) the title, and slider, and rename accordingly.

With the new group selected hold (Alt + Drag) to duplicate it, change the wording, and tweak the slider elements to something like the following…

Please Note: Don’t forget to update the Layer/Group names in the Layers List.

Time to add some color options to our Search Modal.

Insert a new Text Layer (T), change the wording to Color, set it to Uppercase, and apply the Search Title Text Style.

Draw a Rectangle (R) 40 x 40px, give it a Radius of 4, with a Fill Color of #FFFFFF, and a 1px Border of #303030.

From Iconjar, drop in the Check icon, and then use the Alignment options to align the elements correctly.

Group the Shape Layer, and icon (Cmd + G), and rename (Cmd + R) to White Swatch.

Jump on over to the Craft panel, select the Duplicate option, and enter the following settings…

• Horizontal: √
• Item Count: 5
• Gutter: 25

Edit the duplicates so you have something resembling the following…

Remember to edit the group names in the Layers List to match the changes you may have made.

Let’s add in some categories for our Search Modal.

Insert a new Text Layer (T), change the wording to Category, set it to Uppercase, and apply the Search Title Text Style.

For our first category, insert a new Text Layer (T), change the wording to something like Tees (62), and enter the following settings…

• Typeface: Open Sans
• Weight: Regular
• Color: #303030
• Size: 14
• Alignment: Left

Choose Create New Text Style, and name it List Item.

To the right of the Text Layer, draw a Rectangle (R) 24 x 24px, give it a Radius of 2, with a Fill Color, and 1px Border of #FAC560.

From Iconjar, drop in the Check icon, and then use the Alignment options to align the elements correctly.

With the checkbox, and Text Layer selected, choose Align Bottom.

Position the Text Layer, and checkbox you just created 15px from the edges of the screen.

Group the two elements (Cmd + G), and rename (Cmd + R) to Tees (or whatever name you may have chosen for this category).

From the Craft panel, select the Duplicate option, and enter the following settings…

• Vertical: √
• Item Count: 6
• Gutter: 20

Now I’ll let you have free reign again. Go ahead and create something like the following…

Please Note: Once again, remember to tidy up your Layers List as you go along. Rename elements, and re-arrange so they match what is on the screen. (Cmd + R) and (Tab) through elements, renaming as you go. Keep that Layer List tidy folks!

Let’s finish up this Artboard (screen), with a simple Search button.

Draw a Rectangle (R) 375 x 60px, and give it a Fill Color of #FAC560.

Insert a new Text Layer (T), change the wording to Search Now, set to Uppercase, and apply the following settings…

• Typeface: Raleway
• Weight: Bold
• Color: #303030
• Size: 20
• Alignment: Center
• Character Spacing: 3

Group (Cmd + G) the two elements together, and rename (Cmd + R) to Button Bar.

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

And finally, select all the Search Modal elements (Title Bar, Categories, and Button Bar), group them together (Cmd + G), and rename (Cmd + R) to Search Modal.

Stay tuned for Part 3 of this Tutorial, coming very soon (a couple of days if I’m being completely honest)…

Thanks for reading the article,
Marc

Marc is the Best-Selling Author of Sketch App Essentials

Jump to Part Three of the Tutorial here

Oh. Before you go, don’t miss out on this amazing offer for Sketch users…

Want to rapidly improve your design workflow?

Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…

Use the offer code MEDIUM20 to receive 20% OFF Cabana here.