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
Do you ever find yourself repeating the same style and guidelines no matter what the project is? Would you like to broaden your designs but just don’t know how? In this episode of Exercise Your Creative we will use the power of chance to select our design guidelines for a fictitious Web Conference site. We will use a paper fortune teller to choose our design style, color palette and location of the event. Then we will design and layout the page in a static layout. This is a part one of two series.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[? Music ?] [Treehouse presents]
0:00
[Exercise Your Creative]
0:05
Do you ever find yourself repeating the same style and guidelines
0:10
no matter what the project is?
0:13
Would you like to broaden your designs but just don't know how?
0:15
I'm Mat Helme, and in this episode of Exercise Your Creative
0:19
we're going to use the power of chance to select our design guidelines.
0:22
In this exercise, we will be designing a static web page
0:26
for our dream web conference.
0:29
Since the conference is fictitious, we will need to name it.
0:31
I'm going to call mine Stop Visual Pollution
0:35
or SVP.
0:37
As for the design style, color palette, and location,
0:39
we will leave that up to chance using the paper fortune teller.
0:42
Now, before we start folding paper, let's get a list together
0:46
with the following choices:
0:49
4 favorite designers, 4 pleasing color palettes,
0:51
and 4 possible conference locations.
0:55
Again, this is your dream conference, so have fun with it.
0:58
Let's take a look at what I put together.
1:01
For my favorite designers I have Piet Mondrian, Keith Haring,
1:03
Pablo Picasso, and Saul Bass.
1:08
For my color palette I have chosen the following 4 color combinations:
1:11
yellow, brown, red and white, green, blue, yellow and white,
1:16
black, purple, orange and white, teal, blue, yellow and white.
1:22
For the locations I have chosen Paris, France,
1:27
Tokyo, Japan, New York, New York, and Sydney, Australia.
1:31
Next, we simply want to set up a key for all of our choices,
1:36
add numbers to the designers and locations,
1:40
then use the first color in your combinations.
1:43
This is the data we will need for the paper fortune teller.
1:46
Now it's time to start folding some paper.
1:49
For the following Origami demonstration, I'll be using a paper fortune teller template.
1:52
For the first step, I will take the bottom left corner and fold it to the top right corner.
1:57
Then take the bottom right corner and fold it to the top left corner.
2:03
This will leave us with an upside down triangle.
2:08
After making our creases, open the paper back up and rotate it
2:11
so it's in a diamond shape.
2:16
Then fold each point to the center of the paper.
2:18
You will do this 4 times.
2:21
Next, flip the paper over and place it in a diamond shape.
2:24
Repeat the last step and fold each point to the center.
2:30
After the last fold, we want to make sure the 2 center lines have a good crease.
2:35
Lastly, place your fingers inside of the paper fortune teller
2:41
and make sure we have good folds and creases.
2:45
And that's it. We now have a paper fortune teller to select our design choices.
2:48
Next, let's add in our key data to the paper fortune teller.
2:54
On the outside, we will add 1-4.
2:58
Then inside that the colors.
3:02
Last, add the numbers 1-4 on the final flap.
3:09
Now it's time for our random selection.
3:14
To do this, let's get our new intern Dion to blindly select our design guidelines.
3:16
Hey, Dion. Dion.
3:21
Hey!>>I need your help with something.
3:23
Do you think you can help me out?>>Okay!
3:25
All right, can you pick a number 1-4?
3:27
4.>>4, all right.
3:29
1, 2, 3, 4.
3:31
Can you pick a color next?
3:33
Yellow.
3:35
All right, yellow. What have you got?
3:37
Number 1.>>Oh, yeah.
3:39
Thanks, Dion.>>Okay!
3:41
At this stage, chance has determined our design guidelines.
3:45
To keep the ball rolling, I need to generate a list of fictitious content for our site.
3:48
This will help us distinguish what assets we will need.
3:54
The first thing we need to do is name the event.
3:58
Again, I'm calling mine Stop Visual Pollution, or SVP.
4:00
With that name, we need to create a logo.
4:04
Next we will need a tagline for our event.
4:07
I'm going to use something like "Join the aesthetic revolution in Paris."
4:09
When is the design event happening?
4:14
How about January 19th, 2013?
4:16
Do we want to keep people up to date with social networks?
4:20
Sure. How about linking our Twitter and Facebook?
4:22
We will also need a link to get tickets.
4:26
This will be our call to action or our CTA.
4:28
Every event needs speakers.
4:31
I'm going to make a list of, say, 6 speakers I would like to see
4:33
and topics I would like them to speak upon.
4:37
For the speakers, I have chosen Eric Spiekermann,
4:40
George Lois, Jessica Hische, Aaron James Draplin,
4:43
Shepard Fairy, and Banksy.
4:48
As for the location, Dion selected it for us, Paris, France.
4:52
We will also need a countdown.
4:56
A countdown is always necessary for an event page to display urgency.
4:58
Lastly, we will need to provide our attendees with some basic information
5:01
like travel info, hotel info, and maybe a help button if they have any questions.
5:06
By establishing this list of content, we are able to pinpoint the exact illustration
5:11
we will need for the site.
5:16
This speeds up the process when we move to research and sketching.
5:18
Now that we have our list of content together and know the design style,
5:22
let's gather some inspirational images.
5:26
I want to generate 2 categories of images.
5:29
The first is for the design style we are going to use.
5:31
We will call it Saul Bass.
5:34
The second category will be for the rest of the content
5:36
such as location, items, and speakers.
5:39
We will call this category Paris.
5:42
I'm going to use Pinterest to gather all the images.
5:44
It's a great way to generate a collection of images
5:47
which you can share and collaborate with others.
5:50
I like using the Chrome extension, Pinner, for Pinterest.
5:53
You can simply right click on any image and add it to any board.
5:57
This is a huge time saver.
6:02
We now have all of our inspirational images pinned and ready to be printed.
6:14
Currently we are unable to print through Pinterest.
6:18
The workaround is simple. Let's save all of our images out.
6:22
We can do this by simply saving the web page in complete
6:25
and extracting the images.
6:28
Instead of printing out each image individually I like to use the app
6:31
called CollageIt Pro.
6:35
This allows me to organize, size, and print all of my images.
6:37
We are now ready for the next step, creating our inspirational environment
6:42
with mood boards.
6:45
After we have printed out all of our images using CollageIt Pro,
6:47
let's piece together the 2 mood boards,
6:50
the first with Saul Bass images, and the next with the Paris images.
6:54
I'm using foam board as the surface and spray glue to apply the printouts.
6:58
Perfect. Let's get ready to sketch.
7:04
With pencil and paper, I want to simply start sketching
7:06
with the inspiration pieces in front of me.
7:09
I simply want to make sure I have sketched assets for each one of my content needs.
7:11
I can use the list as a reference, which we created earlier.
7:16
Don't be afraid to create more than you need.
7:19
If you don't feel strong enough about certain assets,
7:22
feel free to create extra assets.
7:24
At this point, I'm feeling pretty confident that I have fulfilled the content needs
7:27
and portrayed the design style of Saul Bass.
7:30
Moving forward, I have to remember to keep my illustrations simple
7:33
and unsymmetrically blocky.
7:37
Let's run down the list to make sure we have everything.
7:40
Logo, check.
7:43
Social icons, check.
7:45
Speaker's portraits, check.
7:47
Location, check.
7:49
Travel icon, check. Hotel icon, check.
7:52
And help icon, check. Perfect.
7:55
Now let's bring the images into Illustrator using our phone's camera.
7:57
I will simply email myself the images.
8:01
Let's import all of the images of the sketches and place them into the Illustrator file.
8:04
Next, set up the swatches panel with the color palette Dion selected for us.
8:08
Because Saul Bass's style is so minimal and blocky,
8:15
I simply want to use the pen tool and trace my sketches.
8:18
The key here is consistency.
8:40
Try to keep the same look and feel for all of your assets.
8:43
Once all of the assets have been established, let's get ready to lay out some wireframes.
8:48
With my content list, let's construct a single page layout
8:53
for our conference site.
8:56
Our first step will be to separate all of the content into sections.
8:58
The sections will be in this order:
9:02
home, speakers, location, and info.
9:04
Next, let's put the content into the appropriate sections.
9:09
For the home section, let's add the logo to the top left.
9:12
We read left to right, top to bottom,
9:16
so that means the top left will most likely be the first place the user will view.
9:18
Since this is a single page, I want to always give the user
9:23
the option to connect socially and sign up for the event.
9:26
This means I want to run the header fixed throughout the page
9:29
and have the social icons and sign up within the header.
9:33
Also, in the home section I want to have the following content:
9:37
tagline, date, a visual indicator of where the event is,
9:40
and an arrow indicating the user to scroll down.
9:44
Since the eye will flow from top left to bottom right,
9:48
I want to put my arrow on the bottom right corner.
9:51
Next, we have the speaker section.
9:54
This will be a list of speakers with the following content for each:
9:56
name, talk title, and portrait of each presenter.
10:00
For the location section, I want to list where the event is
10:04
and have some cool visual assets for the location.
10:09
This should really inspire the user to sign up.
10:12
The last section will be the info section.
10:15
This is where the countdown bar and helpful info goes
10:18
like hotel, travel, and help.
10:21
Lastly, let's block out a footer area, and that's it.
10:24
Our wireframe is complete.
10:27
Let's take a pic and bring it into Illustrator to create a static layout
10:29
with our assets we created.
10:32
To begin, let's open up our assets file we created
10:34
and import our wireframe image.
10:37
Now we have our assets, and we have our color palette.
10:40
The only thing left to do is find the appropriate fonts for our page.
10:42
Since we are basing our design off of Saul Bass,
10:46
it would only make sense to use a font similar to his lettering.
10:50
Hitchcock is that similar font.
10:53
The typeface is nearly identical to Saul Bass's lettering.
10:55
For a secondary font, I'm going to use Peralta from Google Web Fonts.
10:59
It has a fun and playful feel and complements the Hitchcock font very well.
11:05
With the fonts installed, I'm now ready to start the layout.
11:11
First, let's create stacked blocks for each section.
11:15
Then put the appropriate content in each section.
11:29
Lastly, position each piece of content as you feel fit.
12:07
This may take some time as you will tweak and position the size
12:12
of each object.
12:16
Keep reminding yourself to keep the layout simple and blunt.
12:18
There we have it. Our final layout.
12:23
When designing with chance, you're really able to push yourself.
12:58
We took a simple project of creating a web conference page
13:01
and gave it specific design guidelines.
13:04
In our next episode, we're going to take our static layout and bring it to life.
13:07
As always, have fun and exercise your--
13:11
Creative.
13:15
Nice.
13:20
[Exercise Your Creative]
13:22
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up