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

Design

Sam Lillicrap
Sam Lillicrap
12,127 Points

Opinions 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

That'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

Sam Lillicrap
Sam Lillicrap
12,127 Points

Cheers 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 :-)

Lol just found the git repo for skrollr before you messaged. Cheers again good work.

Sam Lillicrap
Sam Lillicrap
12,127 Points

Haha, yeah it's a great little plugin when used subtly!

7 Answers

Jeff Léveillée
Jeff Léveillée
4,157 Points

The 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
Jeff Léveillée
4,157 Points

Looks pretty good! Good job! How long to code everything? Did you start from scratch?

keep up the good work!

Sam Lillicrap
Sam Lillicrap
12,127 Points

Thanks 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

Looks 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
Sam Lillicrap
12,127 Points

Thanks, I didn't see that! Time to try and dig out the PSDs...

John Wheal
John Wheal
27,969 Points

Here 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
Sam Lillicrap
12,127 Points

Yeah 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
Matt Campbell
9,767 Points

In 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.

I 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
Sam Lillicrap
12,127 Points

I 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

Sam Lillicrap
Sam Lillicrap
12,127 Points

Not 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
Bernardo Bonança
10,773 Points

Wow! 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
Sam Lillicrap
12,127 Points

Thanks for the kind works, I'm glad it's motivated you! It's definitely not perfect but it'll get there.. hahah

James Barnett
James Barnett
39,199 Points

It'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
Sam Lillicrap
12,127 Points

Yeah 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
Matt Campbell
9,767 Points

It's the same text you're thinking about yes.