TODOOS - A CUTE AND SIMPLE TO-DO LIST WEB APP

As a way to test and improve my front-end development skills, I set out to create a simple to-do list web app. The objective was to add basic functionalities: adding tasks, filtering them by status, and deleting them. I also wanted it to be responsive, and for the user to be able to edit tasks.

Since there are many similar projects out there, I wanted to differentiate mine from the rest by focusing on the UI design. So I made a cute and colourful app, so that checking off those tasks feels a bit more fun! I also aimed to stick to the WCAG in terms of typography and colour contrast.

I used Figma for the prototype and mock-ups. The web app was made using JavaScript, HTML, and CSS. I also used Git for version control.

PROJECT TYPE

Personal

SKILLS

UI/UX Design, Figma

JavaScript, HTML, CSS, Git

FIELDS

UI/UX Design, Graphic Design

Front End Development

STATUS

Finished

2021

THE DESIGN PROCESS

Below is a brief look at the interface design process. As usual, I began by collecting inspiration from existing projects, such as this one. This gave me an idea of what features a simple to-do list app is expected to have. I then translated this inspiration into a ‘paper’ prototype, followed by a digital one. I wanted to keep the layout straightforward and simple, and aimed for a design that was fairly simple to adapt to a larger screen size. For the styles, I made a UI component library on Figma, which allowed me to make changes to repeating components and colours a lot faster. After figuring out the design, all that was left was the code!

The UI library containing colour and typography styles, components, etc
Initial 'paper' prototype
Digital prototype with styles

The final web app is available to use here.

That's not allowed, sorry!