Stats preview card component

Community feedback

• 

  Shashi Lo•1,345

  @shashilo

  Posted almost 4 years ago

  Don't be discouraged by this, but let it be a way for you to learn. I'm particular with design reviews because you're going to get grind out by the designer for not paying attention to the details. I hope I'm not too harsh, and let me know if none of this makes sense. Cheers!

  Items to improve on:

  The details. You may not have the Sketch file, but if you overlay the design onto your implement or looked at it side by side, you'll see some differences.

  On Desktop View • Border-radius on the container is off • The content title and body should be left justified • Do not use <strong> unless it's made to be bold or stand out. For this instance, it's misleading because the entire title should be prominent. • Check the font sizes. They look a few sizes off on the title. • The stats column should be split into 3 equal parts and aligned to the start and end of the container. • The stats column label font and font size are incorrect. • The image should have an overlay fade. Right now it's way too bright.

  Responsiveness • If you look at your implementation at 900px to 1400px, the image is cut off. Instead, make the two sections equal in size and I'd start the mobile view below 768px.

  On Mobile view • The design should work on the minimum screen size of 375px wide. Why? Because this is the standard iPhone screen size nowadays. • All text should be aligned centered on mobile. • Please check the padding from the title to the body, from the body to the stats columns, and the stats columns to the bottom. It's all inconsistent and doesn't match the design.

  21

  Marked as helpful