To-Do App UI – Wireframe to Mockup

Design Process:

1. Using “Ink wireframe” create a wireframe of To-Do-List
2. Selecting appropriate components that can present the layout of core features
3. Creating another mockup prototyping – with the first draft of appearance, text, font, and what features look like
4. Applied with colorful sorting to support priority notification, notifying in enjoyment and positivity without stress
5. 3 sections for relevant stage: all things need to know, important has been marked, and when it is completed
6. Design the display mode when under a different scenario and use

Reference

A practice project inspired by “100 Ways to Design with Figma” (UI/UX course by Riven).