[?Music?][Treehouse™presents][Exercise Your Creative]

In this episode of Exercise Your Creative,

we're going to create a splash page for an iPhone app called Fun Yum.

This app allows you to upload images

and recipes of your favorite baked goods.

Instead of jumping right into the text editor and begin coding,

let's start off with some wire frames and have a little fun with the project.

I'm going to use Adobe Illustrator

and a tablet to sketch out our wire frame.

When we land on the splash page,

I want to show the user three things:

1. The branding of the app;

2. What the app does;

and Three, A powerful call to action to download the app.

With my header in place containing all three of my objectives,

the branding, features and download,

I then want to show the iPhone in frosting

to add the words create, bake and share.

These three power words sum up the app's function.

Beneath that, I want to put a tagline that gives a

user more insight on what the app has to offer.

Below the fold, I feel we need to have a very large stand alone

download button and a list breakdown of all the app's features,

then add a simple footer to the bottom

for any terms and conditions or any additional links.

Lastly, I will add some notes to my layout.

Next, I will create a basic page mockup in Photoshop.

For my basic layout, I want to add the logo,

icons and grid format to the page.

Later on, I'm going to add an illustrative-branded look

from the app to the page,

but, for now, I just want to keep it as placeholders to refer to.

Now that we have our basic page layout complete,

and our content in place, let's begin our next step,

adding in the illustrations.

In the wire frame, I noted to incorporate icing into the page.

We all know what icing looks like,

but have we really looked at it up close?

Before we start illustrating, let's have some fun

and apply some icing to cupcakes to use as our reference.

For this exercise, I want to do one thing,

pay close attention to the detail and texture of the icing.

As we can see, icing has multiple air pockets

and is very inconsistent in depth leaving a blobby outer edge.

Without doing this exercise,

I wouldn't have known about the air pockets.

My illustrations would've looked like blobs

with no depth or texture.

That's why it's always a good idea to get hands on.

I'm simply going to take some snapshots with my phone

and e-mail them to myself, so I can use these images

as a reference when illustrating the page.

In Adobe Illustrator, I want to bring in two things:

1. My basic layout I created in Photoshop

and 2. The images of the frosted cupcakes.

Now, it's time to start the illustrations.

I simply use a pen tool and a width tool

to create the icing effect.

I'm going to start with the words create, bake and share,

then move onto the download button.

Lastly, I want to make a batch of cupcakes for the feature list items.

There we have it, our final layout.

This splash page looks good enough to eat.

As you can see, getting hands on and working with the real materials

allows us to produce a more precise solution.

I wouldn't have known about the air pockets and blobby

texture in the icing if we hadn't used real icing.

As always, have fun and exercise your creative.