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.
Palette generated through Palette Chrome Extension.
Flat pencil illustration
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.