New UI approach and reveal!
Initially I was more concentrated on how to get the JavaScript right and making sure everything worked. Being in a place now where I feel comfortable with my capabilities and better understand the limitations of HTML, CSS, and JS, I am more comfortable focusing on the design.
Original design:
Redesign 1.0
Based on my mockup, I created the first design, introducing a logo illustration I created in Illustrator.
I wasn’t totally satisfied with the design elements (logo, color choice) at this point. It was a little basic and lacked character. However, everything was where it should be and worked as it should for the most part.
From here, I really honed in on the logo. I wanted it to be bolder and kind of fun/funky. At least as fun as a to do list logo can be. So I picked one color to go with, green, as that felt the most familiar, friendly, and already has the “complete” connotation in a context like this, and made it appear only in the check mark. Then I found a sans-serif font that suited that tone I was going for and designed it into a fun wordmark.
From there, I used elements from my new logo design (thick lines and typeface) and brought them into the rest of the page’s design for a sense of cohesiveness.
New design:
With a more concrete identity (fun, funky, and bold) and an improved visual hierarchy, this redesign feels more complete and ready to be used! I had so much fun with this redesign, and I’m much more satisfied with it now than I was with my initial attempt.