Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Sam Lillicrap
12,127 PointsOpinions on my site?
Hi guys,
I've actually managed to land myself my first full web web design/developer job recently - so I won't be needing my portfolio site for a while. But I've recently started redesigning it. It isn't finished (the contact section is missing and so is some interactivity with images), but I'd love the opinion of any design savvy or regular users!
Try the site on mobile (and move it around when you load it!), tablet, and desktop if you can!
http://www.samueljwebdesign.co.uk/final/
Cheers -Sam
Sam Lillicrap
12,127 PointsCheers Adam! It's using the Skrollr.js plugin - The embedded js that you're seeing on the page is just to initialise the plugins, just above that are links to external js files, namely skrollr for the parallax scrolling :-)
Adam Sackfield
Courses Plus Student 19,663 PointsLol just found the git repo for skrollr before you messaged. Cheers again good work.
Sam Lillicrap
12,127 PointsHaha, yeah it's a great little plugin when used subtly!
7 Answers
Jeff Léveillée
4,157 PointsThe only thing i could see is, maybe you could put a transparent navigation bar instead of the button you used. It would help the user experience who's not familiar with these kind of navigation to do not search for the sections... You have to remember that, user who'll visit your site to hire you, are not necessary expert in browsing content. Except that, very good job!
Jeff Léveillée
4,157 PointsLooks pretty good! Good job! How long to code everything? Did you start from scratch?
keep up the good work!
Sam Lillicrap
12,127 PointsThanks man :-) Any improvements you could see though?
And on and off about a week, and I did start from scratch - the only thing that I didn't code was the skrollr.js plugin and a slider used for the 'about' click-through part
Joshua David
4,124 PointsLooks good, very slick and great branding. Minor design detail, your drop shadow in the user interface section cuts off and spoils the effect, otherwise fantastic work.
Sam Lillicrap
12,127 PointsThanks, I didn't see that! Time to try and dig out the PSDs...
John Wheal
27,969 PointsHere are a few things I'd personally improve, otherwise it looks really good:
The background image on the homepage took a long time to load - try optimising it.
I'd add a footer to the bottom of the site or make the "User Interface & User Experience" section touch the bottom. Seeing the keyboard at the bottom of the page behind the content made me think there was more to come.
Maybe make the navigation a bit clearer (you could animate it dropping from the top).
Sam Lillicrap
12,127 PointsYeah I haven't yet properly optimised that image but I'll do that, once it's all been gzip'ed it should load quicker too
The site isn't properly finished yet, I'm actually just working on the footer atm. I'll definitely have a think about the navigation as this seems to be something people aren't too keen on. Cheers!
Matt Campbell
9,767 PointsIn my opinion, these types of sites look best when each horizontal section/row, adapts to the height of the viewport and then you use a jQuery plugin so that when a user gets somewhere close to having the section in line with viewport, it automatically sorts out positioning it so it fills the viewport.
I'm just about develop a site following this style and will be using the aforementioned technique.
Other notes, top section image takes forever to load, change it in css so that when you hover over the button to bring up the menu, it shows the cursor as a pointer denoting to the user that clicking this does something. Last point is the grey text above print design under each portfolio image is too dark. Can't see it.
Really nice site though, great job.
Justin Iezzi
18,199 PointsI have a pretty good idea of what you're speaking of, but do you have any examples you know of? Would like to see it in action. Love the design, Sam!
Sam Lillicrap
12,127 PointsI agree, although I don't really know a way to do this apart from using vh units - I used them for the landing slide with a backup height but I'm wary of using them because of the lack of browser support - do you know any other way of doing this? Thanks man
Matt Campbell
9,767 PointsIt's this - http://nick-jonas.github.io/windows/
I'm looking forward to using it.
Matt Campbell
9,767 PointsUseful too for backup - http://www.dave-woods.co.uk/100-height-layout-using-css/
Sam Lillicrap
12,127 PointsNot sure the css presented there would work for the usage we're talking about - that only makes a container 100% the height of the page, which could be a lot longer than the users viewport? correct me if I'm wrong!
That javascript is perfect though, cheers! :-)
Bernardo Bonança
10,773 PointsWow! That looks really well structured and kept me resizing the browser to see how it responded :P
As a new Treehouse student and an aspiring Web Designer, this was great motivation. Awesome work Sam.
Sam Lillicrap
12,127 PointsThanks for the kind works, I'm glad it's motivated you! It's definitely not perfect but it'll get there.. hahah
James Barnett
39,199 PointsIt's a really nice visual design but the UX needs work.
I'm not sure if you finished with your site yet, as I noticed none of the internal links work except for about. The top, work links hire me & view case study
- At certain sizes your text is hard to read due to low contrast
- Your screenshots of your work break the mental model I expect to be able to click on them and see larger versions
- There are 3 dots below each image, no idea what they do, but they look like they mean something
Sam Lillicrap
12,127 PointsYeah most links are dead just because I haven't got round to linking it all up just yet,
I agree, I'm working on it right now so that the images have overlays when hovered over that give you an option to view a larger image or (in time) a case study.
The dots are to represent key colours used in the design work, so for now I left them all red just for now until I chose the actual projects I want to sit in the spaces
Which text are you talking about in terms of low contrast? I definitely agree if you're talking about the subheadings to the portfolio items!
Cheers for the feedback man :-)
Matt Campbell
9,767 PointsIt's the same text you're thinking about yes.
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsThat's slick bro. Loving the open sans and the colours (really need English dictionary here it wants colors), and motion. Also the mobile experience is great too looks wicked on iPad. Have one question how have you done the initial start when you scroll down where the logo moves down and the div moves up I thought parallax scroll but can't see any scripts for the site apart from the juicyslider.
Props