Daily UI: Intro and Challenge 001

Yesterday, I started working on a Daily UI Challenge. Despite the difficulties that it would present, I wanted to do the challenge on codepen instead of in a graphics editor. I want to practice UI design, but with the constraints of real CSS.

Challenge 001: Sign Up

The first challenge is to design a sign up form. So, naturally, I went to Dribbble and looked at what other people have done. You know. For inspiration.

Then I jumped straight to codepen and started coding & designing in the browser.


Design Assets

Palette generated through Palette Chrome Extension.

Flat pencil illustration

To the code!

See the Pen Daily UI 001 - Sign Up by Amy Carrigan (@amy_e_carrigan) on CodePen.0

What I learned

  • I jumped straight into the design & implementation of this challenge without backing up to explore the problem. As a result, I forgot a couple of interaction states that would have been really nice to have. (A hover & active state on the button, and a submitting animation, for example.)
  • One of the things I want to work on learning with this experiment is CSS Grid. So I started a grid layout for this design, even though it's only a 1-dimensional layout (row or column, depending on screen size) and I forgot to code a fallback. After I discovered that, I quickly abandoned Grid in favor of Flexbox. I wish I had taken the time to code a proper flex fallback instead of abandoning Grid altogether.
  • I realized that doing one of these a day and actually learning from them is probably unrealistic. So I am giving myself permission to slow down and design better solutions, rather than trying to crank out pretty screenshots.