DailyUI #042 - To-Do List
Good' afternoon Dribbblers 👋
This is my #042 #DailyUI design.
Design Hint 💻
No design hint today... I assume to design something to do with a to-do list.
The Idea 💡
The idea for today’s UI design is a to-do list / task manager app for Android and iOS. The app will feature a category-type navigation that allows for multiple lists, multiple sub-categories within them lists and multiple tasks within them sub-categories. Above that the app will feature a simple calendar, profile screen and a simple settings screen. The app will have an overall minimalistic design, with clean iconography and typography throughout, along with a dominant Black and White gradient colour palette and some vibrant colour accents.
Final Thoughts 🧠
It's minimal, while being feature-rich and fun to use; it's exactly what I set out to achieve. The focus today was on white-space, since with the right amount of it you can produce really nice user interfaces and is probably one of the most important design principles.
The overall way the app works is intuitive and fun with a category navigation where the user can set up new categories for each of their tasks, and then within them they can set up sub-categories and the actual tasks would lie within them sub-categories; all neat and organised.
With the list view [LEFT] the user can see how many lists they have, what they are called, if they're 'shared' or 'private' lists and to the right of the screen, can see how many sub-categories they have ticked off (coloured, filled-in segments) and how many actual tasks they have left within the entire main category (number inside circle). The way everything is laid out on this screen and the innovative 'category/task circle' to the right really helps with user-to-task acknowledgement.
With the task view [RIGHT] the user can view the category they are in with the help of the category title, see if it is a 'shared' and if so can see each 'taskers' profile picture to the top-right, which they can also invite other 'taskers' to the category by the use of the 'invite' button. The tasks are listed under 'sub-categories' to make each task more legible and organised. Once the user ticks a task off, a line would cut through the task and a check would appear, once they tick off each task in a sub-category, a tick would appear in the 'sub-category' line and would also colour-fill in one segment on the 'category/task circle' located on the category view screen [LEFT]. This screen would also occupy the same colour accent of the main category (in this case, green), to further UI consistency and give the overall UI a splash of colour.
Overall, it's been a really fun day of creating wireframes and designing my final UI for todays DailyUI; To-Do List. I really like what I have to show!
Unsplash photo credits 📷
@xoutcastx, @theokas
Share the love, press "L" or "F" if you ❤️ my work!
As always, I welcome any feedback! 😄
- Elliot