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 wireframe the form views of our job board. These are the Rails view in which a user can create or modify a job.
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 Forms View]
0:00
We've created our index view and our show view,
0:08
but now, we need to create a form that will be for the new view
0:12
and the edit view for our jobs.
0:17
So, let's go ahead and just duplicate this as a new mockup, and we'll go ahead and save it,
0:21
and we'll call this "New View," and once we get into the CSS, we can go ahead and just
0:28
slightly modify our new job view to also be our edit job view.
0:35
So, I'll go ahead and save that out, and we'll keep a fairly consistent styling here.
0:42
So, let's just go ahead and change this page title or job title to say
0:47
"New Job" or maybe something more friendly like "Post a New Job."
0:55
That looks good, and we can delete some of these other things that we don't need.
1:02
And we're actually going to keep this button here because we will need a submit button.
1:09
We'll come back to that in a second.
1:16
So now, we need to create our form fields.
1:19
Now, if you recall, we had a job title, a company name,
1:22
a job description, and a see more link.
1:27
So, I'll go ahead and jump over to text here, and I'll just create my labels.
1:31
So, I'll say "Job Title," duplicate that, and change it to say "Job Description."
1:41
I'll duplicate that, and we'll create our label for company name,
1:55
and then finally, we'll go ahead and call this our details link,
2:06
and in parantheses, we'll say that it's optional.
2:14
And right now, I don't think this link will actually be optional.
2:19
In fact, I don't think we'll have any real serious form validation right now.
2:23
But, we can add that in a future iteration.
2:28
So, we'll go ahead and create our details link there, and now,
2:32
we have all of the labels that we're going to need to create this form.
2:37
So, now we can go ahead and start creating some of the form fields.
2:42
So, I'll go ahead and jump over to our containers here,
2:47
and we'll just grab a rectangle here, and we'll change this into a text box, just like that.
2:53
And we'll put that right under our job title,
3:05
and we'll move our labels down here a little bit, duplicate this text box
3:10
and put it right under company name.
3:15
And we'll need a larger input for our job description,
3:18
and this will probably actually be a text area in the markup.
3:25
So, we'll move some things out of the way and put that down there.
3:35
Maybe we'll move that up a little bit.
3:42
There we go.
3:48
And now, we can go ahead and put the rest of our stuff down here.
3:51
We'll copy another text field, and we'll put it here for our details link.
3:57
And then finally, we have our submit button down here at the bottom,
4:05
and for the submit button I'll just go ahead and change this to say something more friendly
4:13
like "Create New Job" or maybe "Create New Job Posting."
4:19
And again, we can always change this to say something else like "Post New Job"
4:31
or really whatever we want, it doesn't matter.
4:36
We just need to make sure that we create the space for it now
4:39
so that we know it's something we need to include on the page.
4:42
So, this is looking pretty good.
4:46
We could probably tighten up this layout a little bit and maybe put some of these
4:48
form fields adjacent to one another or move a few of these things up and adjust the spacing.
4:52
But so far, I think this looks pretty good.
4:59
So, we have this space over here, and we could go ahead and put in maybe some
5:05
paragraph text that just outlines a few guidelines for how a job posting
5:10
should be structured, but really, I'm just going to leave this space blank right now
5:16
because I have a feeling that we're going to flesh that out in a future iteration.
5:22
For example, we might be able to have tool tips come up on each one of these form fields
5:29
as the person filling it out works their way down the page.
5:35
So, we would want to leave this space open
5:39
just in case we wanted to add a feature like that.
5:42
However, I think we can go ahead and just get away with having
5:45
a fairly simple form to start out with.
5:48
So, I'll go ahead and save that out.
5:51
So, just to review, we have our index view, our show view, and our new or edit view.
5:56
And those are really all the views that we need to get started with for this iteration.
6:05
So now, I think we're ready to go ahead and jump into code.
6:13
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