I've just finished a relaunch of my portfolio. I realize there are a few creaky parts that still need working out, but overall I was pleased with the way this turned out. I always trust the DN community, so I'm pleased to share it here.
Hey! I am digging the site! I have a few notes, but I will preface them by saying I love the site, but just went through a portfolio redesign myself and understand how valuable feedback is :)
The images aren't retina ready, so on my macbook everything is blurry which takes away from the portfolio to me. If I scale down the browser it looks fine, but at fullscreen it becomes really distracting. Also even when scaled down, your headshot image is always blurry.
The H5 under you headshot is barely readable to me in fullscreen, because of the color. I would recommend #7c7c7c, or #6c6c6c. Both of those colors made it much more readable, but still gray.
Add something to the images to make me want to click them. whether thats a hover animation, or something as simple as wrapping them in tags. right now, i have no way to know that clicking does anything.
Inside the case study windows, I would make the Nav background color white. leave the bottom border, increase the padding a bit (of the nav). and Add the image inside the window. I only say this because I don't think the window matches the style of your site that well. primarily because the gray nav wasn't used anywhere else on the site. And I would love to see an image within this window, because I had forgotten what I clicked.
At the bottom, where you have dribbble work, I would make the images reach the edge of the text. It looks like the image container has a bigger left/right margin than the text that says "More work". So match the grid up, i think it would look a bit better.
Increase the padding between the "more work" section and the footer, just by a tad.
Anyway! Love the site, the blending of the image at the top is great. Keep it up! hopefully this stuff helps!
This is excellent feedback. Thank you! Some of these I was aware of, but others I think I was too close to see. Thanks again for checking it out.
I think this is one of the best constructive criticism on designernews.co. Great to see things like this.
Yep, I totally agree. This is why I'm really glad to have found this community. It's hard out there for a designer :)
Application error :(
Thank to both of you and sorry you caught an error. Looks like this app went to sleep at some point early this morning. I'm going to throw more dynos at it today, since I've been experiencing more traffic than I'd anticipated.
Most things I noticed have been said but adding.
- I would add "cursor: pointer" CSS to your images so I know they are clickable
- When I click on a portfolio item and read to the bottom, I have to scroll back to the top to close it and go back. Would love a fixed header on the nav element (i.e. position: fixed; top: 0;), so it's always there.
- Just personal taste but I recommend making the images smaller w/details that would help me understand what I am looking at. For example smaller image, description, and link. I did a similar thing on my portfolio. you can check out my homepage for reference (anthonyjones.me)
- The most important part, your projects are great....Keep up the good work!
Viewing on mobile and haven't seen on desktop. With that in mind I have a few comments:
Line height of copy needs to increase, quite difficult to read.
White text gets a bit lost on images (selected projects). Might be worth addressing that with a background or a drop shadow (please don't mock) to increase contrast.
All solid otherwise. Good job!
To add to Connor Norvell's notes:
- I personally don't like how the images are huge. Aside from not knowing that I can click (I was like "it's only this??") they are too big and on my laptop, I lose my place because I can't see both top and bottom of the images. I think it's a tad confusing.
- The socialicons fade to white, which renders them almost invisible
On a more technical note:
You're using your projects' images as a background in CSS. Images are content (the only times they are not content is when you're using them to help or aid visual navigation, like icons). This should have the image tag, with the image there with proper
alt, not sure, read a bit on it) for accessibility. Also, the
atag indicating a link or, in this case, a
buttonbecause it won't jump to a different page, just open a modal, again, for accessibility :)
To piggyback off this, I also thought that the images were a little too big to digest. And it took me awhile to find the text in the bottom corner to know what it was. It would probably also help to have a short description under each title there or at least have the services you did for each one.
Also agree on the social icons.