Skip to content
OverviewSolutions
0
Comments
7
Mosaab Emam
@Mosaab-Emam

All comments

  • Mosaab Emam•120
    @Mosaab-EmamPosted over 3 years ago

    I think it's very good, nice work, Stas.

    With every design you learn a new lesson. See how the original design enforces visual hierarchy. The title (important text) sticks out because it is bigger in size and bolder, and the body text (and any less important texts) are smller and have a lighter color.

    If the concept of visual hierarchy is new to you, spend a few minutes looking into it, it will make your designs visually better and boost your design skills by a notch.

    I wish you best of luck Stas, keep getting better.

    0
  • JK•345
    @JakubKepakSubmitted almost 4 years ago

    If you have any advice on how to structure the code better I would really appreciate it.

    Todo | React Styled-Components

    2
    Mosaab Emam•120
    @Mosaab-EmamPosted almost 4 years ago

    Love it, but I noticed that the check circle is hard to see in light mode when unchecked, I suggest to give it a darker border and it will be perfect.

    1
  • Mosaab Emam•120
    @Mosaab-EmamPosted almost 4 years ago

    I will say the main thing off with this design is contrast & readability.

    Review the section to the right (why us), the body text doesn't contrast well with the background, you can fix this is either a darker background or a darker text, I see that the original design uses the former.

    Also, the phrase "per month" in the left section is a bit hard to read.

    The sign up button can use a subtler box shadow, and maybe a bolder weight for text.

    I hope my feedback helps. Best of luck Omar.

    0
  • Mosaab Emam•120
    @Mosaab-EmamPosted almost 4 years ago

    I love it, though it can really use a box-shadow.

    2
  • Mosaab Emam•120
    @Mosaab-EmamPosted almost 4 years ago

    This is so good, you got too much things right. Respect.

    I noticed that for the photos some of them have a purple ring (border) around them while others don't, I see that you have copied the design perfectly, but maybe add a border around the other photos for the sake of consistency.

    Also, I feel like the box-shadow is a bit much, but maybe that's just me.

    You are so skilled Omar, keep getting better.

    0
  • Omar Ahmed•200
    @OmarIsmail277Submitted almost 4 years ago

    Any Suggestions? Is the hover effect on the Card component good? Thank you in advance.

    Profile Card Component

    2
    Mosaab Emam•120
    @Mosaab-EmamPosted almost 4 years ago

    Very nice Omar.

    I think the animation can be smoother, that's all I can say.

    I wish you the best of luck.

    1
  • Mosaab Emam•120
    @Mosaab-EmamPosted almost 4 years ago

    I like it, you almost got it perfect. Respect.

    I have a few words about it to share, I hope that my feedback helps.

    • The first issue I noticed is that I cannot scroll. I tried with both my laptop and phone, so I guess you have a stray "overflow: hidden" in your code, on the body, maybe, so check that out.

    • The second design issue is that the white space between the cards is not equal. It is obvious that the white space separating the cards horizontally is significantly larger than that separating them vertically.

    • I noticed that on two cards you have a purple-ish ring around the people's photos, but the rest of the cards don't have that, so there is an issue of consistency.

    • Also, you need to pay more attention to contrasts, look at the phrase "Verified Graduate" on each of the cards. On some cards, the phrase is readable, a bit harder to read on others, and very hard to read on the white ones.

    • And finally, a minor issue, also related to white spacing, the person's name on each card is a little crammed to the subtitle below it "Verified Graduate" when there is a decent amount of spacing between the title and the main body text. So improve your design even more by giving the person's name a little bit of "padding-bottom".

    That will be all, I wish you lots of luck.

    4