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.

From Then to Now

Digital Oil Painting Technique – August 2013

Finished marigold. #digitalart #painting

A photo posted by Amy King Carrigan (@amybeth_carrigan) on

Digital Sketch and Collage – May 2014

"Girl with a song" self portrait #painting #digitalart

A photo posted by Amy King Carrigan (@amybeth_carrigan) on

Digital Painting and Vector – June 2014

Moving to Pen and Ink – August 2014

Celtic knot zendala

A photo posted by Amy King Carrigan (@amybeth_carrigan) on

My First Commission – June 2016

Delivered my first commission today. #art #watercolor #ink #brushlettering

A photo posted by Amy King Carrigan (@amybeth_carrigan) on

Finally Starting to get the hang of this watercolor thing – June 2016

Practicing negative painting today #watercolor #flower #hydrangea

A photo posted by Amy King Carrigan (@amybeth_carrigan) on

Loosening up – August 2016

Giving some Joseph's Coat roses a try #sketchbook #watercolor #roses

A photo posted by Amy King Carrigan (@amybeth_carrigan) on

Happy Progress – August 2016

Working from reference... #watercolor #sketchbook #flowers

A photo posted by Amy King Carrigan (@amybeth_carrigan) on