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.
[?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 up