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:

Left: Desktop view, Right: Mobile view

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store