Episode 1: Designing and Planning with Content18:41 with Allison Grayce Marshall, Dan Gorgone, and Guil Hernandez
Dan, 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.
[? 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 email@example.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 up