Streaming live at 10am (PST)

Opinions needed: Quick design feedback please


#1

Hi everybody,

I'd love to hear different opinions and feedback on how this design can be improved. It's for product reviews and buying guides. Here is one example: https://www.geekwrapped.com/tech/best-cheap-monitors-for-gaming

Thank you for your help :grinning:

PS: You can see all other reviews here, based on this design.


#2

Hey !
Can only see it on my phone atm but it looks good !
Just one question for now : don't you think it'd be nicer with colored icons?
Best,
Blaise


#3

Well I love the straighforwardness of the page. It's clear and useful!

let's go for possible improvements:

The most important one are on the cards:

  1. put a minimum of 4Opx padding on the cards, the content is too close to the edges at the moment

  2. The paragraph is very wide, too wide to be comfortable to read. You can use the columns option to make 2 or 3 columns and maybe "animate" the ext by adding subtitles, bold parts etc.

  1. The icons are nice but they are all blurry. An icon usually comes in various sizes for xhich they are pixel perfect, very clear. If you alter their size without respecting multiples, they get blurry. That is true even is the icons are made of vectors (svg)

For example this one

is a 200px/200px icon that you display at 29px.

If you put 25, which is a better division, it already looks better, sharper.

But nothing is better than icons you use for their proper sizes.

Look at this pack (I recommend), all the icons are drawn on a 24pixel grid. That's close to your 29 pixels.

http://www.streamlineicons.com/

The second thing is the second section.

The part behing the red line is super great, clear and all, but what's above has the same visual strenght (and a very wide text). Maybe it should be a section on its own. Or you can maybe ditch it ond use the text in the first section under the tile (and vertically center title+text).

That's it, the page already really does the job.


#4

Hi Blaise, thanks for your feedback, you rock :slight_smile:
Colored icons: I thought about it but came to the conclusion that black (#111) works best with all kinds of different products and hero section photos. Mhhh... you have me thinking about it again, though.

Here are previous examples with colors:
https://www.geekwrapped.com/outdoors/best-survival-backpacks
https://www.geekwrapped.com/best-cheap-3d-printers
https://www.geekwrapped.com/outdoors/top-ultra-light-sleeping-bags
https://www.geekwrapped.com/tech/the-best-cheap-1080p-and-4k-tvs-for-sale

What icon colors would you consider nice and versatile for different product reviews? Thank you

PS: I'd love to hear what you think of the desktop versions of the reviews and of the home page https://www.geekwrapped.com/ Merci :slight_smile:


#5

Hi Vincent,

Wow, that is REALLY smart feedback - thank you so much. I will get started on improving this and report back with a shiny new version. Thanks :slight_smile:

PS: Sicne you seem to be very experienced, I'd love to hear your thoughts on the design of the home page: https://www.geekwrapped.com/ Thanks for your help!


#6

Is cool! I digg the little planet :smiley:

OK, one thing you can do to immediately improve both look and SEO, and you already have done half of the job.

On your grid of cards you have the repeating Check it out button. Link button, same text everywhere. It's as bad with SEO (because the text is of a lower importance in HTML, and doesn't carry any meaning) than with design (because you have that repeating object everywhere, sort like a CTA but if you put 20 CTA on your page you're losing the benefit right?)

You already have a hover effect on the whole card : good! That's what's suppose to replace your shiny big orange button. And that should be the unique interaction. No hover on the title for example. And the link should be the whole card. That's an issue with your sharing badges that are on top of the card... They're a bit too showcased if their importance is secondary. If the main goal is to click on the card, don't let them in the way, find another solution toplace them.

The best for SEO would be the link on the title of the card. H1 or H2. So instead of having the link on the title plus the button, put the links on the card itself and the title.

And this should at the minimum be a H2

And if it was me this would be a h1 because it represent a complete content, an Article in the HTML5 book.

You can accentuate the interaction by bringing your orange color to the background of the card when hovering it. This way you will only have 1 card with orange at a time.

And your images don't have a ALT description, it's very bad! :wink: For anything related to sales, think like a google robot. it doesn't see your design, just the code. only the code. Read your site with CSS deactivated you will see :slight_smile: You need to understand the structure and everything, and where all the links go.


#7

Hi Vincent,

All right, I've worked quite a bit on the suggested improvements. Here is the new design: https://www.geekwrapped.com/review-page-template

Changes:

  • Updated hero section design
  • Improve icon resolution
  • Added color gradient to icons
  • Made review cards smaller and places two nex to each other (solves wide text issue)
  • Added padding to review cards
  • Lots of small fixes and improvements
  • Added a big overview box so people can quickly compare all main features of the products

Let me know what you think about this new version and THANKS! :slight_smile:


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.