[?music?]

[Master Class Designer and Developer Workflow: Second Sprint Logo]

[Nick Pettit] In the previous Sprint, we established some basic CSS

just to lay out all of these basic page elements that come with Rails Scaffolding.

Here we have the index view of the Easy Jobs! website

and if we go ahead and click through to one of these, we can get to the show view

and really, this is just to make sure that the website works on a very basic level

and to prototype some of the functionality.

So in general, there will be a list of jobs.

We can click on Edit here and maybe edit a job.

We can go back and create a new job and we see a similar form,

and as I showed you before, we can go ahead and click on one of these

and go to the show view for our job.

However, if we look at some of the mockups that we created previously,

we actually have a few more page elements here that we didn't really address

and for now, we are going to keep those somewhat vague

so that we have space to add elements later on,

such as elements that might go in a sidebar

or authentication elements that might go in the upper right-hand corner.

At this phase of the project, we need to create a high-fidelity mockup.

A high-fidelity mockup will do two different things for us.

First, it will allow us to establish some of the more detailed visual design

beyond a simple wireframe, like we have here,

and secondly, we want this website to be responsive

so a high-fidelity mockup will allow us to do precise pixel-based measurements

that we can later do fluid grid calculations with.

So let's go ahead and switch over to Photoshop.

Here, I have a very basic grid layout

and this is actually just a modified version of the Photoshop document

that comes with the Blueprint framework.

You can go ahead and download this Photoshop document from blueprintcss.org.

So let's get into it.

First, I want to just go ahead and design an Easy Jobs! logo

and we'll go ahead and position that a little bit later on.

First, I want to go ahead and design just a basic Easy Jobs! logo

and we can go ahead and position it into our layout later on.

The Easy Jobs! logo will help us to establish some of the visual design

for the rest of the site.

So we'll go ahead and adjust a few things here.

We'll make this font size larger.

Actually, much larger. There we go.

And then we can go ahead and pick out a font

so we'll go ahead and scroll through a few fonts here.

This doesn't have to be anything terribly fancy.

There we go--we'll just go with regular old Brush Script there.

You can always change this later.

And then we can go ahead and apply a few visual effects to this,

so let's go ahead and pop into the Layer Style panel

and I want to put maybe a gradient on this

and actually, I think we should go ahead and give this a little bit of color.

So we can just go ahead and freely experiment with a few different colors here;

we'll maybe try some sort of orange and make it fade into maybe a darker red color.

And then, let's go ahead and apply some sort of dark color around this,

maybe even a shadow or a stroke,

just to go ahead and let the lighter color stand out from the background

because I think the background is probably going to be white

or at least some sort of light color.

So first, let's just go ahead and try a stroke and see what that looks like.

That looks okay.

Now let's go ahead and just try a drop-shadow

and we'll go ahead and try to size this appropriately.

That actually kind of looks terrible, so maybe we should just try an inner shadow

and maybe give this like an impressed letter effect.

That doesn't look too bad.

And then, maybe if we apply just a light stroke just to be super sure

that this actually stands out from the background.

So we can decrease the opacity on this,

or actually, we can go ahead and just change the color to one of the colors that we're using.

So maybe like a dark brown color, just to sort of make it pop from the background

but also match the colors that we're using.

So we'll go ahead and do that

and I think that looks okay.

And again, we can always change any one of these things,

so we'll just go ahead and keep moving.

So if we go ahead and open up the Paragraph and Character palettes here,

we can go ahead and adjust this font even further.

I think I would like to bring in these letters a little bit closer together.

That's maybe a little bit too much.

That looks pretty good.

And now that we have all of these layer styles applied,

let's go ahead and cycle through a few more fonts

just to see what a couple different fonts might look like.

So instead of a brush script, I think I'm going to go ahead and settle on Courier,

which has sort of a typewriter look to it.

And I'll bring in these letters a little bit more.

That's pretty good.

Then, I'm actually going to continue to play with these layer styles,

so let's go ahead and jump back in here

and for the gradient, I think I'm going to go more red

so we'll pick a dark red color for our dark side of the gradient

and we'll carry that over into the lighter side.

And then, we'll adjust our shadow accordingly,

maybe put a little bit more distance on there.

That looks good.

And again, I'm just going to go ahead and continue to play with this gradient,

maybe make it a little lighter still and a little bit more red.

That's looking good.

And then for the stroke color, we'll go ahead and set that to a nice dark red color

and let's see what a larger stroke looks like.

No, I think I am going to keep that at 1 pixel.

In fact, let's just see what it looks like without a stroke.

That's a little bit too light.

We'll go ahead and keep the stroke on there.

So that looks good

and the logo is going to go in the upper left,

so we'll just go ahead and keep it in that general spot for now

and zoom out a little bit here.

And I think the logo is pretty huge right now, so let's go ahead and just size that down a bit.

And we can go ahead and position it there

and I think that looks pretty good.

We might be able to add a little bit more flair to this logo

if we just rotate it slightly.

There we go.