How to Design an iPhone App Splash Page with Frosting

[?Music?][Treehouse™presents][Exercise Your Creative] 0:00 In this episode of Exercise Your Creative, 0:11 we're going to create a splash page for an iPhone app called Fun Yum. 0:13 This app allows you to upload images 0:16 and recipes of your favorite baked goods. 0:19 Instead of jumping right into the text editor and begin coding, 0:21 let's start off with some wire frames and have a little fun with the project. 0:25 I'm going to use Adobe Illustrator 0:28 and a tablet to sketch out our wire frame. 0:30 When we land on the splash page, 0:32 I want to show the user three things: 0:34 1. The branding of the app; 0:36 2. What the app does; 0:38 and Three, A powerful call to action to download the app. 0:40 With my header in place containing all three of my objectives, 0:44 the branding, features and download, 0:47 I then want to show the iPhone in frosting 0:50 to add the words create, bake and share. 0:53 These three power words sum up the app's function. 0:56 Beneath that, I want to put a tagline that gives a 0:59 user more insight on what the app has to offer. 1:02 Below the fold, I feel we need to have a very large stand alone 1:06 download button and a list breakdown of all the app's features, 1:10 then add a simple footer to the bottom 1:14 for any terms and conditions or any additional links. 1:17 Lastly, I will add some notes to my layout. 1:20 Next, I will create a basic page mockup in Photoshop. 1:24 For my basic layout, I want to add the logo, 1:27 icons and grid format to the page. 1:31 Later on, I'm going to add an illustrative-branded look 1:34 from the app to the page, 1:37 but, for now, I just want to keep it as placeholders to refer to. 1:39 Now that we have our basic page layout complete, 1:43 and our content in place, let's begin our next step, 1:46 adding in the illustrations. 1:49 In the wire frame, I noted to incorporate icing into the page. 1:52 We all know what icing looks like, 1:56 but have we really looked at it up close? 1:58 Before we start illustrating, let's have some fun 2:01 and apply some icing to cupcakes to use as our reference. 2:04 For this exercise, I want to do one thing, 2:07 pay close attention to the detail and texture of the icing. 2:11 As we can see, icing has multiple air pockets 2:14 and is very inconsistent in depth leaving a blobby outer edge. 2:17 Without doing this exercise, 2:20 I wouldn't have known about the air pockets. 2:23 My illustrations would've looked like blobs 2:25 with no depth or texture. 2:28 That's why it's always a good idea to get hands on. 2:30 I'm simply going to take some snapshots with my phone 2:33 and e-mail them to myself, so I can use these images 2:36 as a reference when illustrating the page. 2:39 In Adobe Illustrator, I want to bring in two things: 2:43 1. My basic layout I created in Photoshop 2:46 and 2. The images of the frosted cupcakes. 2:50 Now, it's time to start the illustrations. 2:53 I simply use a pen tool and a width tool 2:56 to create the icing effect. 2:59 I'm going to start with the words create, bake and share, 3:01 then move onto the download button. 3:04 Lastly, I want to make a batch of cupcakes for the feature list items. 3:08 There we have it, our final layout. 3:11 This splash page looks good enough to eat. 3:14 As you can see, getting hands on and working with the real materials 3:16 allows us to produce a more precise solution. 3:20 I wouldn't have known about the air pockets and blobby 3:22 texture in the icing if we hadn't used real icing. 3:26 As always, have fun and exercise your creative. 3:29