Please critique: Framer UI Motion - Toggle(learnreact.design)

12 months ago from Linton Ye, Founder at jimu Labs

  • , 12 months ago

    Hey DN,

    I'd love some feedback on the design of this page. I'm a developer, not a designer. So although I'm pretty happy about the general look of this page, I'm wondering what you guys pros think? Color selection, fonts, layout, use of whitespace, or anything else. Any feedback is appreciated!

    Some background:

    • This page is primarily designed/implemented in Framer X in a workflow I briefed at this webinar.
    • It's based on GatsbyJS, styled-system and rebass
    • Designing with a design system feels really productive and effective, even for a simple landing page like this.
    0 points
    • Eric Chu, 12 months ago

      Hi, nice work!

      My first question is: What is the purpose of this page? When a design is "good" it feels purposeful. Answer that question first and I think it will help you achieve what you want.

      The details in the toggle are a lot of fun. I'm going to concentrate my feedback on it because I think it can be great.

      Make the toggle the hero!

      You worked a lot on that animation! Looks fun! But, that toggle is TINY! Make it the hero of the page, so we can see all the work that went into it. Like, 2–3 times larger.

      Some of the detailed animations don't make "sense" because nature doesn't work that way!

      • A couple of the stars move left / right when toggled. Stars don't move like that! Consider fading them in instead. I noticed you are making the stars twinkle too; consider randomizing or staggering the twinkles.
      • Same with the cloud. It moves back & forth. Consider fading it in and instead have it move a very small distance in one direction.

      I don't think you need the rest of the page, really :)

      0 points
      • , 12 months ago

        Thanks Eric! At least the cloud is moving slower now. I'll do some more improvements over the next few days. :)

        0 points