DEV Community


Discussion on: My Portfolio: Rate and Review

vitality82 profile image

Great Job Katie!
Here's a list of suggestion based on my opinion, you may or may not find useful:

1) I would try this: remove the "About me" subtitle and position your avatar circle to bite off some of that blue above.
2) People usually scan a website, reading long sentences adds a bit of cognitive load - try to use less width for the text block (10% less or so), vertical scanning is easier.
3) instead of going full width for the button size, go with a nice big rounded CTA button (auto width and lots of padding) without capitalization and too much letter spacing (imagine talking to a human). Rounded is often good for one-off CTA's, but I personally do like concrete rectangles myself, and that is good also.
4) remove the redundant horizontal separator lines in the orange stats block. More lines means more work for the brain, more noise to scan...I want to notice "2 Spaniels" before noticing the lines. The number, icon and subtitle for each stat is enough of a separating structure by itself, padding is key here and it's wonders. remove these border lines also from the footer. Pipe characters between links or just some padding is enough.

Hacky example:

And, for the portfolio page I would suggest:

Remove the red button "details", rather the entire card is a link that will navigate to the details - people are used to clicking on cards anyway. If possible make them the same size and a good title in a consistent position on each card (upper right) that will summarize the project or just the project name. The image preview is Ok as long as there is enough padding for each card.

katieadamsdev profile image
Katie Adams Author

Love that first suggestion. I've been wanting to try and make the site feel less linear and I think this is a great way to do it. I'll give that one a try for sure. I'll also take a look at the CTA button too, I think I'm on the same page as you where I like both but can't decide.

As for the stats block, it's sat in a grid element so making those padding changes and removing the lines should be fairly straightforward. I'll see how it turns out! :)

I think you're right about the portfolio details button too. My worry is that users who aren't familiar with clicking on these things might struggle but I'll give it a test drive for sure.

Thank you for all these suggestions, you've really gone into some great detail and I can't thank you enough. I really appreciate it.