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
In this video, we'll get started on our high fidelity mockup by creating a logo for the project. Creating the logo first will help establish the visual design for additional page elements.
This video doesn't have any notes.
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?]
0:00
[Master Class Designer and Developer Workflow: Second Sprint Logo]
0:02
[Nick Pettit] In the previous Sprint, we established some basic CSS
0:06
just to lay out all of these basic page elements that come with Rails Scaffolding.
0:10
Here we have the index view of the Easy Jobs! website
0:16
and if we go ahead and click through to one of these, we can get to the show view
0:21
and really, this is just to make sure that the website works on a very basic level
0:26
and to prototype some of the functionality.
0:32
So in general, there will be a list of jobs.
0:35
We can click on Edit here and maybe edit a job.
0:38
We can go back and create a new job and we see a similar form,
0:42
and as I showed you before, we can go ahead and click on one of these
0:47
and go to the show view for our job.
0:52
However, if we look at some of the mockups that we created previously,
0:54
we actually have a few more page elements here that we didn't really address
1:00
and for now, we are going to keep those somewhat vague
1:04
so that we have space to add elements later on,
1:09
such as elements that might go in a sidebar
1:12
or authentication elements that might go in the upper right-hand corner.
1:15
At this phase of the project, we need to create a high-fidelity mockup.
1:19
A high-fidelity mockup will do two different things for us.
1:24
First, it will allow us to establish some of the more detailed visual design
1:28
beyond a simple wireframe, like we have here,
1:33
and secondly, we want this website to be responsive
1:36
so a high-fidelity mockup will allow us to do precise pixel-based measurements
1:39
that we can later do fluid grid calculations with.
1:46
So let's go ahead and switch over to Photoshop.
1:51
Here, I have a very basic grid layout
1:54
and this is actually just a modified version of the Photoshop document
1:58
that comes with the Blueprint framework.
2:03
You can go ahead and download this Photoshop document from blueprintcss.org.
2:06
So let's get into it.
2:13
First, I want to just go ahead and design an Easy Jobs! logo
2:16
and we'll go ahead and position that a little bit later on.
2:21
First, I want to go ahead and design just a basic Easy Jobs! logo
2:25
and we can go ahead and position it into our layout later on.
2:30
The Easy Jobs! logo will help us to establish some of the visual design
2:35
for the rest of the site.
2:40
So we'll go ahead and adjust a few things here.
2:44
We'll make this font size larger.
2:48
Actually, much larger. There we go.
2:56
And then we can go ahead and pick out a font
3:01
so we'll go ahead and scroll through a few fonts here.
3:09
This doesn't have to be anything terribly fancy.
3:17
There we go--we'll just go with regular old Brush Script there.
3:21
You can always change this later.
3:27
And then we can go ahead and apply a few visual effects to this,
3:30
so let's go ahead and pop into the Layer Style panel
3:35
and I want to put maybe a gradient on this
3:41
and actually, I think we should go ahead and give this a little bit of color.
3:51
So we can just go ahead and freely experiment with a few different colors here;
4:01
we'll maybe try some sort of orange and make it fade into maybe a darker red color.
4:11
And then, let's go ahead and apply some sort of dark color around this,
4:27
maybe even a shadow or a stroke,
4:34
just to go ahead and let the lighter color stand out from the background
4:36
because I think the background is probably going to be white
4:40
or at least some sort of light color.
4:44
So first, let's just go ahead and try a stroke and see what that looks like.
4:47
That looks okay.
4:52
Now let's go ahead and just try a drop-shadow
4:57
and we'll go ahead and try to size this appropriately.
5:06
That actually kind of looks terrible, so maybe we should just try an inner shadow
5:17
and maybe give this like an impressed letter effect.
5:24
That doesn't look too bad.
5:33
And then, maybe if we apply just a light stroke just to be super sure
5:35
that this actually stands out from the background.
5:41
So we can decrease the opacity on this,
5:46
or actually, we can go ahead and just change the color to one of the colors that we're using.
5:50
So maybe like a dark brown color, just to sort of make it pop from the background
5:59
but also match the colors that we're using.
6:05
So we'll go ahead and do that
6:07
and I think that looks okay.
6:10
And again, we can always change any one of these things,
6:14
so we'll just go ahead and keep moving.
6:18
So if we go ahead and open up the Paragraph and Character palettes here,
6:21
we can go ahead and adjust this font even further.
6:27
I think I would like to bring in these letters a little bit closer together.
6:31
That's maybe a little bit too much.
6:39
That looks pretty good.
6:42
And now that we have all of these layer styles applied,
6:45
let's go ahead and cycle through a few more fonts
6:48
just to see what a couple different fonts might look like.
6:52
So instead of a brush script, I think I'm going to go ahead and settle on Courier,
7:03
which has sort of a typewriter look to it.
7:08
And I'll bring in these letters a little bit more.
7:12
That's pretty good.
7:16
Then, I'm actually going to continue to play with these layer styles,
7:19
so let's go ahead and jump back in here
7:24
and for the gradient, I think I'm going to go more red
7:28
so we'll pick a dark red color for our dark side of the gradient
7:35
and we'll carry that over into the lighter side.
7:45
And then, we'll adjust our shadow accordingly,
8:01
maybe put a little bit more distance on there.
8:07
That looks good.
8:14
And again, I'm just going to go ahead and continue to play with this gradient,
8:16
maybe make it a little lighter still and a little bit more red.
8:21
That's looking good.
8:31
And then for the stroke color, we'll go ahead and set that to a nice dark red color
8:33
and let's see what a larger stroke looks like.
8:42
No, I think I am going to keep that at 1 pixel.
8:46
In fact, let's just see what it looks like without a stroke.
8:51
That's a little bit too light.
8:54
We'll go ahead and keep the stroke on there.
8:56
So that looks good
8:59
and the logo is going to go in the upper left,
9:01
so we'll just go ahead and keep it in that general spot for now
9:05
and zoom out a little bit here.
9:08
And I think the logo is pretty huge right now, so let's go ahead and just size that down a bit.
9:14
And we can go ahead and position it there
9:27
and I think that looks pretty good.
9:31
We might be able to add a little bit more flair to this logo
9:34
if we just rotate it slightly.
9:38
There we go.
9:45
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