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 CSS3 Master Class!
You have completed CSS3 Master Class!
Preview
In this chapter, we design and wireframe a web-based photo gallery. Along the way, we'll walk through some of the design decision making.
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
[Design]
0:02
[Nick Pettit] The best way to start any design
0:05
is by figuring out what the problem is that you're trying to address.
0:08
In this case, we have a pretty common problem,
0:12
which is we just want to create a photo gallery to display some photos.
0:15
So sometimes, I'll start with pen and paper and sort of rough things out,
0:21
but very quickly I'll usually go into a mockup tool--
0:25
like Balsamiq Mockups in this case--
0:28
but really, you can use whatever mockup tool that you want
0:31
or whatever workflow you want.
0:34
It all comes down to personal preference
0:36
and it's really up to you.
0:38
So let's go ahead and get started.
0:40
The first thing I like to do when I get into a mockup tool like Balsamiq Mockups
0:42
is I like to design from the inside out,
0:47
and the main thing that we're going to have in our design is photos,
0:51
so let's start there.
0:54
So we'll go ahead and go to say, Layout,
0:56
and we know that we're going to want to have something to contain our photos--
1:00
actually, let's go to Containers--
1:04
and we'll just make a rectangle canvas.
1:07
IIt doesn't really matter what size--
1:10
that looks good--
1:12
and let's go over to Media and we'll go ahead and drop in an image,
1:14
just like that.
1:21
And we don't need to actually include a placeholder image.
1:23
We can just have an X; that's fine.
1:27
We're going to have eight photos in our gallery,
1:30
so we'll drop in a few more of those--
1:33
actually, let's just duplicate these.
1:35
So we have two there,
1:40
and now we have four,
1:42
and there's our eight photos.
1:45
Now, of course, I've already designed this project
1:50
and we've seen the finished product, but let's go ahead and head down one path
1:53
that I started out with.
1:59
We want to be able to click on our photos and have one of them become larger
2:01
and one way we could do that is by having our eight photos here
2:06
and then enlarging one of these photos
2:11
and then having all the others reflow around it,
2:14
so let's go ahead and sort of mock that up quickly.
2:17
So i'll move these down here real quick,
2:20
and we'll realign them in just a second,
2:22
and we need to make our container larger, of course.
2:25
This would still use CSS3.
2:33
And we'd go ahead and just enlarge our one photo
2:41
and we would have a really nice transition as the photo scaled up
2:44
and all of the other photos reflowed around it.
2:49
However, as you can see, this isn't really practical.
2:52
I was even having a hard time just moving around those photos,
2:55
so a much better approach would be to just keep that large photo on top
3:00
instead of having all of the other photos reflow in the gallery
3:04
because that increases the height of the page
3:07
and just makes it really awkward to interact with.
3:10
So let's go ahead and just delete that
3:13
and we'll go ahead and put all these back,
3:15
and let's actually just delete these and we'll go ahead and duplicate this row,
3:24
and we'll move it down there, and then we can just make our container smaller again.
3:31
So instead of heading down that route, let's go ahead and just take one of these photos
3:37
and we'll duplicate it and just go ahead and enlarge it
3:41
and we'll leave it on top of all the other photos that we already have.
3:47
And when we enlarge photos like that,
3:52
the original photo will be removed, of course, because it will now be the large photo.
3:55
When you're designing, it's important to go ahead and try out a couple of different things,
4:01
and then when you find something you like,
4:06
take that design and iterate on it.
4:08
So now that we have our nice little photo gallery here,
4:11
let's go ahead and create the rest of this site.
4:14
So I'm actually going to get rid of this large photo
4:18
and we'll just put our smaller photo back--just like that--
4:22
and we're just going to need a little bit of text,
4:26
so we want kind of a larger header here--there we go--
4:30
and we're going to call this gallery My Photos.
4:35
And we'll center it on the page there,
4:40
and actually, I think I'd like that to be a little bit larger--
4:43
that's pretty good.
4:46
We'll center it, and then we need to move the rest of our content down.
4:49
There we go.
4:54
It would also be nice to include some information about this gallery,
4:57
so a good place to put that would be right below it.
5:04
So we'll go ahead and grab some paragraph text here,
5:07
and we'll also grab another subtitle.
5:10
We'll say About this Gallery for our subtitle
5:13
and we'll put it down below here.
5:20
Then we'll put some paragraph text here.
5:24
We can just go ahead and copy and paste this text.
5:29
We probably don't need this hyperlink here
5:33
or any special kind of markup,
5:35
so we'll go ahead and delete that.
5:40
And then, we can just copy and paste this to go ahead and generate some texture there.
5:42
We'll have one column of text on the left
5:50
and another column of text on the right,
5:53
so we need to make these a little bit smaller.
5:57
We'll have some nice space in between them;
6:01
I just want to increase that a little bit
6:07
and that looks pretty good.
6:10
Normally, you'd want to use the actual text that you're going to use,
6:13
but when you're mocking up things in a low-fi fashion like this,
6:17
it's okay to just use placeholder or lorem ipsum text like we have here.
6:21
The reason you want to try and always use the real text that you're going to use
6:26
is because it can give you a better idea of how much space it's going to take up on the page.
6:30
So if we scroll up here,
6:36
it looks like we have a header, a gallery, some text about the gallery,
6:38
and that's pretty much it.
6:43
It's a very simple design.
6: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