Creating an E-Commerce App in Sketch (Chapter Excerpt)

Transcription

1 Creating an E-Commerce App in Sketch (Chapter Excerpt) 1

2 In this chapter we'll be creating the design for a fictional E-Commerce ios App called Store. 12 screens in total will be lovingly created inside of Sketch. We will make our way through the app, from the splash screen to the checkout. 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. 2

3 If you haven t already (and skipped over the Good evening Mr Sketch, we ve been expecting you chapter), make sure you have the following applications, and assets installed - Sketch - Craft - Iconjar - Raleway and Open Sans fonts* * You can find these in the Sketch Chapter/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. 3

4 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. 4

5 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. 5

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

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

8 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. 8

9 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 9

10 Browse to the Sketch Chapter/Images/General folder, and choose man_red_check.jpeg 10

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

12 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. 12

13 Then browse to the Sketch Chapter/Icons folder. 13

14 Click Add, 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. 14

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

16 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:

17 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 17

18 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. 18

19 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. 19

20 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. 20

21 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. 21

22 22

23 Prototyping an E-Commerce App in Flinto (Chapter Excerpt) 23

24 Now that we have our 'So good, your mama would love it' design created in Sketch, it's time to breathe some life into it, and that s where a good dose of Flinto medicine will come in very handy. Let s make this happen Opening up Flinto After opening up Flinto, you ll be presented with the splash screen, where you can go ahead and click on New Document. This, in turn opens up the New Document window (Yes, I know, the obvious has well, and truly been stated there). Set the Device Type to iphone 6 (the same as the Artboards in the previous chapter), and click Create. 24

25 Quick Tip: Once you have your New Screen displayed, you can use the same Keyboard Shortcuts you ve become accustomed to in Sketch - Zoom In Cmd + (+) - Zoom Out Cmd + (-) You can also click on the screen to have it center on the canvas when you zoom. Always handy that one. You will find there are a lot of similar actions, and keyboard shortcuts to those that you re used to in Sketch. Flinto does make the transition between the two applications feel very familiar, which is great. 25

26 We of course, won t be needing the screen that has just been created, as we re importing in the screens from Sketch. So delete it either by pressing the (Delete) key, or right-clicking on the screen, and choosing Delete. From the Inspector Panel, leave the Document settings as they are, apart from the Background Color, change that to White #FFFFFF. 26

27 Remember to quickly save the new document, and give it a name for the Sketch plugin to reference very shortly. Something like Store - Ecommerce App would be perfect. Jump back to Sketch, and make sure the Sketch file we created in the last chapter is open, and ready to rock! Choose Plugins > Send to Flinto from the Menu Bar, or use the Keyboard Shortcut (Shift + Ctrl + Cmd + F). 27

28 From the popup window, set the Scale to 200% (as we designed at 1x in Sketch, but want Flinto to scale our design up to 2x for the iphone 6 Retina screen), and click Send. 28

29 Give it a moment, as we do have quite a few screens for Flinto to process and then in the next window, check that the Flinto file you saved earlier is selected, and click Merge. 29

30 Back in Flinto, you will see all your screens have been imported into the application, and from the Layers Panel you will see that the Layer/Group hierarchy has been preserved from your Sketch file. Choose the menu item Center Canvas, and use the shortcut Cmd + (+), and Cmd + (-) so all of your screens are visible, and centered on the Canvas. 30

31 Please Note: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly. 31

32 Splash With the Splash screen being the Home screen of our app, we need to let Flinto know that. So with that screen selected, check the Home Screen option from Screen Properties in the Inspector Panel. You will now see a small Home icon appear on both your screen, and in the Layers Panel. Now, we re going to add a timed transition from the Splash screen, to the Home screen. So select Timer Link in the Inspector, and enter the following settings - Timeout: Target: Home - Transition: Fade In 32

33 You will now see the Splash screen with a blue border around it, and the Home screen with a red border around it. This shows you that there is now a transition in place between those screens. Think of blue as the Start screen, and red as the End screen. Simple as that. 33

34 Quick Tip: Now would be a good time to fire up the Preview window. I know there s not much to see just yet, but from here on in you have the ability to view your changes as they happen. Click on the Preview icon in the Toolbar, or use the simple shortcut (Cmd + P). 34

35 If you haven t already, you can also grab the Flinto App from the ios App Store. Always test on a real-world device when you can that s my motto. I like to use the Preview (Cmd + P) function for my initial run-through, and then switch to the ios App after that. It s entirely up to you. 35

36 Home With this screen, we will be creating some simple links, a scrollable area, and also putting the mighty Transition Designer to the test. We ll start with the links first, and create a Link through to our Sidebar Menu screen. And I ll show you a couple of ways to achieve this. You can select an element on the screen, and simply use Create Link (F), then drag the Noodle to the screen you want to link to. Or, you can use Draw Link (D), which enables you to create a freeform link which you can create at any size you require, and is perfect for when you want to create links on smaller UI elements such as a Search icon, where you need the tap area to be a little bigger when using it on your ios device. This is the method that we ll stick with for most of this chapter. 36

37 Please Note: You may be saying What the heck is a Noodle?. A Noodle is that orange line (with the dots at each end) that connects the screens together in Flinto. I ve heard it referred to as a Pick Whip, Connector, and Outlet Thread. But we ll go with Noodle because, well, it sounds cooler. Ok. Back to it. Use Draw Link (D), to create a link hotspot around the Menu icon on our Home screen, and drag the Noodle to the Sidebar Menu screen. Then click to bring up the Gesture/Transition window. Select the Tap gesture, and click New Transition. 37

38 38

39 and boom! We re into the Transition Designer, where the really cool stuff happens. 39