todoos, Kai Arcos

/portfolio

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! 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.

SEE IT IN ACTION

GITHUB REPOSITORY

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 final web app is available to use here.