Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We're going to create a splash page for a mobile app that allows you to upload recipes of your favorite baked goods. Our illustrations will be inspired by real baked goods, which means that we'll be icing cupcakes and looking for details to bring into our page.
[?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
You need to sign up for Treehouse in order to download course files.
Sign up