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
Well done!
You have completed Design and Development!
You have completed Design and Development!
Preview
In this video, we'll begin wireframing, starting with the index view of the job board. This is the Rails view in which all of the jobs will be listed.
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
[Master Class] [Designer and Developer Workflow] [Wireframing the Index View]
0:00
I just had my meeting with Jim, and he's going to go ahead
0:07
and generate the Rail scaffolding.
0:09
In the meantime, I can go ahead and get started on the wireframes,
0:12
and then get into the CSS once Jim is done with the scaffolding.
0:15
So, let's get into it.
0:19
So, I'm about to start wireframing, but I've just received an email from Jim.
0:21
Let's go ahead and see what that says.
0:26
"Hey Nick, I setup the GitHub Repository for our project."
0:28
"It's at TeamTreehouse/EasyJobs."
0:33
"So, I've added you as a collaborator if you want to go ahead and pull it,
0:35
you can start working on it."
0:39
So, it looks like Jim has set up the repo in GitHub, and he's gone ahead and
0:42
sent me the details about that.
0:46
I'm not really going to worry about that right now because first,
0:49
I do need to do some wireframing.
0:51
So, I'll let him go ahead and get the rest of the scaffolding set up
0:53
and add in SASS and a few other niceties before I dive into the code.
0:58
So, let's go ahead and get started.
1:03
One of the first things that I like to do when wireframing in a program
1:05
like Balsamiq Mockups is I like to design from the inside out.
1:09
So, they do have a browser window somewhere in here.
1:16
There it is.
1:20
And a lot of people will start out by dragging a browser window out just like that,
1:22
and then they'll start adding things inside.
1:27
But I'm not going to do that.
1:30
I want to actually start with the base piece of data that we're going to be working with
1:32
and then work my way out and build the layout around it.
1:38
That way we ensure that we design the most important parts of the layout first,
1:42
and then we design all the other niceties that go with it.
1:46
So, we need to design a couple different things here, and in this Master Class,
1:50
I'm just going to go ahead and focus on 3 different views.
1:55
We're going to create the index view that will list all of the jobs.
1:59
We're going to create a show view that will show individual jobs,
2:04
and then we're going to create a form view which may be for the new
2:10
or edit view to create and edit jobs.
2:15
So, let's go ahead and start out with the index view.
2:19
Right now, a job consists of 2 basic components.
2:23
We have the title of the job, and then we have the description for the job.
2:27
So, let's just go ahead and design that.
2:32
I'm going to drag out some text here, and let's just go ahead and create a few easy jobs.
2:35
The first one is going to be an ice cream tester, and that will be the title of the job.
2:42
And we probably want that text to be a little bit larger,
2:52
so we'll go ahead and increase the size.
2:56
That's probably a little bit too large for a list view.
2:59
That's still a bit too large.
3:02
Maybe we can go down to about 16.
3:05
That looks pretty good.
3:08
That way the job titles will be nice and bold, and then right next to it,
3:10
we'll go ahead and put another string, which will be the description for the job,
3:14
and this can be a little bit smaller.
3:19
And we'll say "Get paid to taste new ice cream all day."
3:23
So, there we go, there's our description for that job.
3:32
And that's about all we need for each item in our index view.
3:36
So, let's go ahead and create a few more of these.
3:40
We'll go ahead and just duplicate this text here and line it up,
3:43
and we'll change this to another job.
3:47
We'll say "Fashion police officer."
3:51
So, we'll put that there.
3:57
I'll just go ahead and duplicate this description here, and let's go ahead and change this,
4:02
and we'll say something like "Police the fashion crimes of the general public."
4:07
And make a few more of these here.
4:22
It looks like I spelled fashion police wrong.
4:27
That's okay, change that.
4:29
And we'll create another easy job.
4:32
Say "Plant Babysitter."
4:35
Create a job called "People Watcher."
4:44
Make one that says "Cinema Patron."
4:49
And we'll create a job called "Sandwich Enthusiast."
4:57
There we go, we have a few descriptions here.
5:05
So, we can just go ahead and duplicate those.
5:07
We don't necessarily need to write descriptions for each one of these,
5:09
but what I should mention is that it is good to try and create some real data like this,
5:14
rather than using Lorem Ipsum text, because what we're already seeing
5:20
is that each one of these jobs is a different length.
5:25
If we had just created some Lorem Ipsum text and used the same title for every job,
5:29
we would see that these would just line up very nicely,
5:35
but here they're sort of staggered.
5:39
So, let's just go ahead and push all of these descriptions so that they're
5:41
right next to the job title, and let's see how that looks.
5:46
Now, this is pretty staggered.
5:52
We might be able to get away with this if the job titles are in bold text
5:54
and then the job descriptions are in weaker text,
5:58
or we could try and make all of these line up.
6:02
These job titles are always going to be variable, and actually, I think this is fine.
6:06
All we really need to do here is just change these job titles so that they're a little bit weaker,
6:11
and to do that, we'll just go ahead and put them in some lighter gray text.
6:19
That's maybe a little bit too light.
6:24
Just like that, and that way when someone is scanning the page,
6:27
they can go ahead and see these bold job titles, and then if they are interested
6:31
in one of the titles, they can go ahead and read onto the description
6:36
and possibly go ahead and click through to the actual job.
6:40
Another problem I'm noticing here is that we have this rag along the right side,
6:44
and that is something I actually would like to line up very neatly
6:51
because we have this nice left justified text, and we are going to be putting this in a column.
6:55
So, we should go ahead and try to cut some of this off.
7:01
Now, these job descriptions are a little bit short, so I'll just go ahead
7:06
and copy and paste these to make them a little bit longer.
7:10
And then we'll go ahead and do it for the other one here.
7:21
And I think something like this is more realistic in terms of the length of a job description,
7:29
and in fact, it's probably going to be much longer, but for the list view,
7:35
this will work just fine.
7:39
So, we need to cut this off, and I think the way we're going to do that is
7:41
with some sort of ellipses.
7:44
So, let's go ahead and add that in.
7:46
We'll cut it off right about there.
7:49
And we'll copy that so we can paste it in more easily.
7:54
We'll cut that off about there.
7:59
That looks good.
8:05
We'll do the same for that one.
8:08
And one more here.
8:15
It's a little bit short.
8:19
There we go.
8:22
So, that's not lining up perfectly, but we can get the general idea
8:24
and make it a little bit more perfect with CSS once we actually get into styling the page.
8:28
So, I think this is looking pretty good.
8:34
I'm going to go ahead and save this out, and I'll go ahead and save it in our projects directory,
8:36
and I'll just call this "Index View."
8:43
Now that we have a pretty good list going, we can start to build some of
8:47
the other things around that list.
8:50
So, let's go ahead and jump over to our containers here,
8:53
and we can assume that we're probably going to have some sort of logo up here at the top.
8:58
It's probably going to say "Easy Jobs," but we can worry about that
9:06
when we get into a little bit more detail with the styling.
9:10
Jim and I did talk about some sort of log in system,
9:14
and we can also assume that there's going to be some sort of navigation
9:19
or maybe search or filtering functionality in the future.
9:23
So, we'll go ahead and add some space over here in the upper right for that.
9:27
Now, I'll go ahead and maybe copy this and create some sort of side bar here.
9:33
So, we're starting to build out the shape of the page here.
9:40
So, we can line a few things up a little bit more confidently,
9:45
and I actually am going to change this container to text just so that we know
9:48
for sure that it is in fact the logo for the site.
9:52
So, I'll delete that container, drag out some text here, and we'll say "Easy Jobs."
9:56
And we'll go ahead and make that text a little bit larger, maybe even bigger,
10:04
have a nice big logo here.
10:11
That's a little bit too large.
10:15
There we go, that's good.
10:17
So, we'll say "Easy Jobs."
10:19
And let's go ahead and copy a few more of these jobs
10:24
just so that we can fill out the page a little bit more.
10:30
We'll duplicate those and then just drag them down like that.
10:35
And so now, we're starting to build out the page a little bit more.
10:43
Move these up to the top so it doesn't go off the page.
10:48
And I think this index view looks pretty good.
10:59
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