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 Treehouse Reviews!
You have completed Treehouse Reviews!
Preview
Episode 1: Designing and Planning with Content
18:41 with Allison Grayce Marshall, Dan Gorgone, and Guil HernandezDan, Allison, and Guil provide feedback on two member projects: a website for a nail technician in Scotland, and a portfolio site for a designer/developer.
Websites reviewed in this episode:
- Perfect Ten - http://perfectten.me
- Matthew Stenquist - http://www.dig.ital.me
Responsive Frameworks:
Responsive Sliders:
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 ?] [treeviews]
0:00
Hey, everyone. Welcome to Treeviews, the show where you,
0:04
the Treehouse member, can submit your work, your website,
0:07
your web app or other project, and our panel of Treehouse teachers
0:10
offer some feedback, so let's introduce today's panel.
0:14
[Allison Grayce] [@allisongrayce] I'm Allison Grayce,
0:18
and I am a design teacher here at Treehouse.
0:20
[Guil Hernandez] [@guilh] And I'm Guil Hernandez, the front-end design teacher.
0:22
[Dan Gorgone] [@dangorgone] And I'm Dan Gorgone. I teach marketing and business.
0:24
So first off, we just want to say thank you for submitting your work today.
0:26
Our goal with this show is to offer feedback and highlight
0:31
what we think you're doing well and offer some suggestions
0:34
for improvements if necessary.
0:37
[Guil H.] Our first website is PerfectTen.me from Kevin Esther.
0:39
[Perfect Ten] [www.perfectten.me] Kevin designed this site for his wife.
0:43
She's a local nail technician, and she's hoping to drum up some business
0:45
with a web redesign.
0:49
She's looking to make more of a responsive design, and while he's at it
0:51
he's looking to improve his design and coding skills.
0:54
And the first impression I got from the site was that
0:58
it was something that immediately with the purple color it jumped out.
1:01
I saw the logo, Perfect Ten. Really nice.
1:04
And aside from--if you point right here you see Scotland
1:07
kind of hanging off of the header here.
1:10
We can fix that really easy, but the information
1:13
about the business was what I wanted to know about,
1:16
and so seeing this I see it has something to do with pedicures, manicures,
1:20
so obviously this is about nails and beauty and what-not.
1:24
What I didn't get from looking at this site was that this is where
1:28
Jackie would accept appointments and go out to local businesses,
1:32
and you can see people can book appointments by calling this number.
1:38
That's great, but what I didn't understand was that this was not a salon.
1:43
This was not a physical location.
1:49
When I saw Perfect Ten I thought "Oh, it must be a spa" or whatever,
1:51
so I was looking for an address, a phone number.
1:56
I didn't see that, but once I finally started reading through it
1:58
I better understood the purpose behind the site.
2:01
I feel like that needs to be emphasized a bit more,
2:05
a little better understood by the user so they can look at it and say,
2:08
"Oh, this is something that would interest me."
2:12
"I can call this number or submit something online."
2:14
Yeah, and that's a really unique selling proposition
2:16
to be able to have someone come into your home and do your nails,
2:19
and I think that's something that should really be emphasized,
2:22
and in this main area, this main header, maybe that's a great place
2:25
to feature that kind of unique selling proposition.
2:29
And that could be done with brighter colors, maybe add some interesting textures
2:33
or colors or something like that to really make it pop more
2:37
because right now, the colors, while they're nice,
2:41
because purple is a great color for beauty because it kind of evokes
2:43
a sense of luxury and high end, and so the colors are right,
2:47
but maybe that specific shade of purple could use some work,
2:50
or maybe a pattern or something in the background
2:54
to just make it a little bit more visually interesting.
2:56
Now, we were talking about this area right here in the middle,
2:59
and it looks like there is some wasted space, but if you perhaps
3:02
combine this area with the photos, and I think Kevin said
3:05
that he was going to get some higher quality photos there,
3:11
if you can use some sort of slider or carousel
3:14
then you could match the great visuals with the information about the business
3:16
that people are looking for.
3:20
Sure, and there are also some responsive plugins he can use and downloads,
3:22
so first of all, he can visit the Elastislide.
3:26
[Elastislide] [http://tympanus.net/Development/Elastislide/]
3:29
That's a great responsive plugin with several examples and demos,
3:31
and along with that there's FlexSlider, which you can see
3:33
this one scales beautifully to browser width.
3:35
[Flexslider] [http://www.woothemes.com/flexslider/]
3:38
And of course, if he's feeling brave, he can build his own,
3:40
and that might be a good solution because he can better suit to his website needs.
3:42
[Allison G.] Because one of the problems with the current website,
3:47
this gallery view, is that it shows that when you hover over it
3:49
that it's a clickable area, but when you click on it you kind of expect
3:53
for the photo to get bigger or for something more interactive to happen,
3:57
but instead it takes you to a very different layout,
4:01
and it kind of interrupts the flow of the website,
4:04
and the only way to get back is by clicking on the logo,
4:07
so just a little bit of user flow issues going on right there.
4:10
[Guil H.] Sure, and for being one of the first sites you built,
4:14
Kevin, I think it's pretty impressive.
4:16
It's a nice use of CSS balance and web fonts going on here,
4:18
and for your upcoming design, especially if you're doing more of a
4:22
responsive design, to support your design with a more content-out approach,
4:25
so be sure to have all your content in place before you begin,
4:29
and just design around that.
4:32
To help you get started, there are some frameworks you could start using
4:34
and learn from, so you can check out Foundation 3 by Zurb.
4:37
[Foundation 3] [foundation.zurb.com]
4:41
Another one is 32 and Up by Andy Clark.
4:43
[320 And Up] [stuffandnonsense.co.uk/projects/320andup/]
4:45
But if you're looking for something lighter check out the GoldilocksApproach.com.
4:47
[The Goldilocks Approach] [http://goldilocksapproach.com]
4:49
This is more of a device agnostic approach, which doesn't just conform to
4:51
break points for all the resolutions on the devices out there,
4:53
and instead it attempts to make your site adaptable to
4:56
other resolutions and devices.
4:59
[Dan G.] From a business and marketing standpoint
5:01
one of the important tips that I wanted to communicate here
5:03
is that from an SEO standpoint it could be improved
5:08
by using the title tag, and so right now
5:13
the name of the business is in the title tag, and that's a good start.
5:18
But it's not nearly enough if you want to try to generate more business
5:22
through your search engine.
5:25
What you would want to add is information about location
5:28
as well as key words and phrases that people are going to search for
5:31
regarding the services and products that you provide.
5:34
Right here on the home page you've already got that started.
5:38
You have some great content to start with.
5:40
What I would do is add that to your title tag.
5:42
We're talking about these key words right up top,
5:44
pedicure, manicure, shellac, anything else
5:47
that would be an important service that you want people to know about
5:50
as well as Falkirk.
5:53
I don't think you necessarily need Scotland to be in there as well,
5:55
but Falkirk and any of the other towns or areas
5:58
that Jackie is willing to go to for these appointments,
6:01
get those in the title tag as well, and that should help improve
6:04
your search results, especially the local search results.
6:07
Some great suggestions, yeah.
6:10
I just wanted to scroll down a little bit too and talk about the details
6:12
that he's gone into because you can tell that he put some time and effort
6:17
into thinking beyond this.
6:21
He's got a great layout going, and he went in and added shadows
6:23
throughout the site, but there are some inconsistencies.
6:26
As you can see here with the picture of Jackie,
6:29
it looks like there's a bit more of a realistic looking drop shadow
6:32
versus this Deals This Month where it has
6:36
almost this illustrative kind of drop shadow,
6:38
and then on the one to the left there is no drop shadow at all,
6:41
so just kind of thinking about creating this real environment
6:45
and sticking to it.
6:48
If you want to go with the illustrative style, just carry that throughout,
6:50
and the same thing with the realistic drop shadows.
6:52
They're all great options, just be consistent.
6:55
And while we're here on this section, I want to highlight
6:57
that this is some really great content.
6:59
A lot of people when they're looking for these
7:01
local services they are looking for prices.
7:03
They want to know how much each thing costs.
7:06
This is really great.
7:08
What I really like are the Deals This Month.
7:10
The special offers are going to be the things that can really pull
7:12
new customers in to try your service for the first time.
7:16
The information leads right into a nice call to action for a phone call.
7:20
What I think would make it ideal is if you had
7:25
a call to action button to an email form
7:28
where people could fill out just some simple information,
7:31
just get more information about your service,
7:35
about the booking process,
7:37
and if we could move this stuff--at least the Deals This Month--
7:41
if we could move it above the fold and maybe, again,
7:45
it would be part of a carousel or some kind of slider up here.
7:49
You can highlight those deals in addition to
7:52
the great new images that you're going to be adding to the site
7:55
as well as how to book an appointment in the first place.
7:59
And similarly how he has--you're suggesting that
8:01
maybe he put a button or a call to action.
8:05
You could use a similar thing down here, a similar treatment.
8:08
That way you also have a call to action at the bottom of the page.
8:10
I'm not sure about the icons used here.
8:13
They kind of evoke more of a childish kind of imagery.
8:16
[Dan G.] Right, I thought the same thing.
8:20
[Allison G.] So maybe using more appropriate things like nail polish
8:22
or something like that if you want to include iconography.
8:25
[Dan G.] Well, that's a whole bunch of feedback, and Kevin,
8:28
I hope that's helpful for you and Jackie.
8:31
We wish you the best of luck with the website as you work on your redesign.
8:33
Now, our second website that we want to talk about
8:39
was submitted by Matthew Stenquist.
8:41
He's a designer and developer in Denver and LA.
8:43
[Matthew Stenquist Portfolio] [http://www.dig.ital.me]
8:46
This website that he has, which is Digital Me, or D-I-G dot I-T-A-L dot me
8:48
serves as an online portfolio,
8:53
and as soon as you bring it up it's very visually striking.
8:56
There's a lot to like about it.
8:59
Allison, why don't you talk about the visuals?
9:01
[Allison G.] I thought he did a really awesome job laying out his information.
9:03
There's a clear visual hierarchy going on.
9:06
Right away you know who he is and what he does.
9:09
His work is below, and I'm a big fan of the gridded type of portfolio look.
9:13
But there are some issues that I think maybe he could improve upon
9:18
and make his online presence even stronger.
9:21
He has this kind of hovering effect when you hover over each of his portfolio pieces,
9:24
and it's a little faded out when you first arrive on the page,
9:29
and maybe inverting that inner action with the portfolio pieces
9:35
could draw more attention to his work,
9:38
or maybe just increasing the opacity of these thumbnail images.
9:41
Yeah, you're asking the user to do a little too much
9:45
right off the bat to see the work that they probably came here to see.
9:48
Visually users who visit a portfolio site
9:53
want to see those things, want to have access to it immediately,
9:56
and I know one thing that we discussed was that
9:59
when they click on any of these things, and they all look really interesting,
10:02
but if you click on one, say, this iPhone app,
10:06
you're brought to a portfolio page where
10:10
the first thing you see is the same thing every time.
10:14
It's the same product, and you kind of have to dig around
10:16
and scroll through the different projects in order to find what you were looking for,
10:20
like this one happened to be second on the slider.
10:23
Now, there's a lot of great content down here, a lot of key words
10:26
people are going to be searching for, especially if they're looking for someone
10:29
who can do a specific type of project.
10:32
But it's kind of varied, so if we can find a way
10:34
to bring them directly from what we click on to that project
10:38
and even have a bigger image or a call letter or a link
10:42
to a site or something that would help.
10:46
Because essentially it's the same image.
10:48
Once you click and view more details it's the same image,
10:51
just a little bit larger, so it'd be nice to see some nice detail shots,
10:53
and show all that hard work that you put into your portfolio.
10:57
Yeah, that's some really nice work, and that use of imagery could really help.
11:00
Now on the front end side of things, I think you did a nice job
11:03
of adapting to the screen width and devices,
11:07
so when I viewed it on the iPhone, however, I noticed that you are having
11:11
a bit of a scaling bug, so you need to check
11:13
your viewport meta tag.
11:17
If you perhaps remove the initial scale attribute equal to one
11:19
that might fix some of those zoom bug issues you're having there.
11:22
It might help scale to the device better,
11:25
and I also suggest perhaps be careful and consider
11:27
perhaps using a bolder font because I noticed that what happens,
11:32
especially in the About page, once you view it on a smaller device
11:35
the font starts to get a little bit fuzzy,
11:39
and maybe use bolder font like he's using towards the footer
11:41
down here, which is more legible.
11:45
[Allison G.] And that's a really nice type treatment to try to
11:49
integrate that a little bit more because on the About page
11:51
you have some information about your skills and your contact information.
11:54
Perhaps better organizing that information using
11:59
some of those similar header treatments would be a great type treatment to have.
12:02
One of the things that was nice to see on the About page
12:08
was a clear breakdown of your basic info.
12:11
It's the expertise that you have, location where you are,
12:15
and even your email address, and while we're on it,
12:18
contact information for someone working on
12:22
different technical projects like this, you have to have it.
12:25
You have to have calls to action where people can contact you,
12:28
so I don't know if the portfolio is just for display,
12:32
you just want to show off different projects,
12:36
but if you look up in the navigation and in the header
12:38
there's nothing about contact.
12:41
There's some of the different platforms that you're on, some images and RSS feed.
12:43
Nothing about email or contact me here for more information
12:46
if you want more information about my prices or what's going on now.
12:49
That needs to be in there.
12:57
And it could be as simple as just adding another mail icon or something
12:59
like that or just the phone number or email.
13:02
Something that was really great that really caught my eye
13:04
is this brief about statement that you have right here.
13:08
It's so difficult to kind of boil down who you are and what you do
13:13
in 2 little sentences, and you do it really nicely here,
13:18
and even when you mouse over you see some of the important terms
13:22
that people are going to be searching for.
13:27
And what was interesting is that I moused over,
13:30
and I thought that perhaps if I clicked on these different things
13:34
it would bring me to different places, but it all goes to the same About page,
13:37
so if it was me, I would suggest one of two things.
13:42
Either have a separate link for each one of these areas of expertise
13:45
so if I wanted to learn more about what you covered in mobile development projects
13:51
it would take me to a mobile dev page, have your mobile dev projects,
13:56
your expertise, some of the things you're working on.
13:59
Or you can slice up the About page and have different headers in there.
14:03
I mean, one or the other, but I love this statement.
14:07
What I do wish is that it was consistent as you went to the About page
14:11
because then you get here, and there's another statement, and I was kind of thrown a little bit.
14:15
I saw an image with snow.
14:19
I saw this headline saying something about a snowboarder.
14:21
I wasn't sure what to make of it, but if you can do what Allison mentioned
14:25
and really bring out these areas of expertise in this information about you
14:29
and maybe knock down the amount of content that's on this page--
14:34
it's a little wordy--get right to the focus of who you are, that would help.
14:39
[Allison G.] Speaking of who you are,
14:43
we're going to talk about your personal branding a little bit.
14:45
You have these initials, A.I.L.T., and I don't know if I'm reading out in the right direction,
14:48
but we were trying to figure out what that stood for,
14:54
so maybe just either further explain that
14:58
or maybe using your initials, but the design looks great,
15:01
but it's just making sure that you're conveying what you want to convey.
15:04
Okay, and also with your responsive approach I also suggest you
15:08
consider more break points in your design,
15:11
so I feel that there were areas where certain parts of the site,
15:15
especially in the navigation and in the side bar,
15:18
they were starting to get covered up at certain screen widths,
15:21
so I suggest you take a look at your site in the browser
15:23
and just play with the different resolutions a bit and start taking notes
15:27
when things start to break and when they break and become obscured,
15:30
and then just start a media query to resolve that,
15:34
and you'll find that that will work better.
15:36
I also suggest using an em-based design versus a fixed-width pixel design.
15:39
You will find that your design becomes fluid, and it adapts more
15:44
to devices and screen widths.
15:47
And while we're talking about that, it seems that the thing that's covering up
15:49
your navigation here is a banner
15:53
for being nominated for a CSS award, which is awesome.
15:56
Congratulations on that. That's a really great achievement.
15:59
But the thing is, when you click on that, it takes you out of your website,
16:02
so it's taking people from looking at your work to looking at other people
16:06
who have been submitted for a CSS award,
16:09
so maybe just taking that information--because it's great information
16:12
that you want people to know--and putting it in the About page
16:16
maybe in its own special section once you start to win more awards.
16:19
And if I can offer the same tip I gave to the folks from Scotland
16:23
that would be to make use of your title tag
16:26
so if people are searching for mobile development expertise
16:29
in Denver or Los Angeles, if you're looking for local business,
16:36
then you want to make sure that you really grab those people on search results,
16:39
so in your title tag make sure you include your location information
16:43
if that's relevant to you but especially your areas of expertise,
16:47
mobile development, web, front-end developer,
16:52
and whatever else that you want to focus on.
16:56
That should be in there as well.
16:58
Also, this is more of a personal preference, but the transitions and fades
17:00
between pages and break points might not be necessary
17:04
because you're possibly duplicating some of these transition styles
17:08
and adding some more styles that perhaps slow your page loading time.
17:11
I noticed there was some lag between the break points
17:15
and when you click on a link.
17:17
It took a little time for the page to load and for the content to display,
17:19
and by doing that you're also creating styles
17:23
that your users probably will not notice or see
17:27
because they'll, for example, be viewing it on a mobile device or an iPad
17:30
or just out of one resolution on a browser,
17:33
so they won't necessarily be benefiting from that because they probably won't see it.
17:38
Us designers might notice it because we like to get in there
17:41
and start playing with the width,
17:44
but it might be something that you could perhaps remove.
17:46
I think it was a really nice site.
17:50
I mean, there's so much here visually.
17:52
The visual content is really what's driving this,
17:54
and it's going to be what drives whatever contract
17:58
or freelance work that you might get from a portfolio site like this,
18:02
so again, the visual content is what is king here,
18:07
and I think with some of the suggestions we offered you can
18:11
really put those center stage.
18:14
Yeah, and I think we can all agree the caliber of the entries
18:18
that we received was just top notch, so thank you
18:21
for submitting your work, and each episode of Treeviews
18:25
we will feature different teachers to match up with your projects,
18:29
so if you would like your work to be reviewed on the next episode,
18:32
just drop us a line at treeviews@teamtreehouse.com.
18:35
Thanks for joining us.>>Thanks guys.>>Thanks.
18:39
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