Color System
I designed a dashboard for employees of a tech company to easily and quickly log the time spent on tasks. I created two screens: one shows how to log time for a task, while the other displays elements of the calendar settings.
I chose orange as the primary color because it’s vibrant and energetic, helping to make the task of logging time more engaging and less boring. To balance it out, I used blue as the secondary color, which conveys calm and professionalism, giving users a sense of trust as they interact with the app.
Regarding accessibility, I ensured that all colors have the appropriate contrast to improve readability and prevent eye strain, especially for users with visual impairments. I also focused on keeping the language clear and simple, so that anyone, regardless of their comprehension level or language, can use the interface without difficulty.
Reviews
5 reviews
Well done Juan on this color system work.
I like how contrasting and accessible they are.
You also applied them in a subtle manner to the dashboard UI design.
I would love to see a darkmode version as well.
Cheers!
Consider adding a dark mode for easier reading in low light.
Make the success message in the toast more visible. Adding features like "Auto-fill" or "Use template" could make time logging quicker.
Overall, it's a strong design. A few small changes could make it even better.
Good job
Hi Juan! You have chosen secure and accessible colour palette for you project. Well done!
I have two points to think about:
- The toast (banner) component. The green semantic colour is sufficient, but the styling of the success message can be improved. Somehow the component disappears on the screen even though it's purpose actually to be prominent and visible.
- I know that UX isn't a part of this task, but I was thinking about what you've wrote "Logging working hours can be boring". Much unlikely colours can make tasks to be easier for users, but improving the usability - can. One idea for improving the usability can be adding "Auto-fill" or "Use template" functionality on the screen that you showed as an example.
Great work!
/Yuliia
👌🏻
I love that the chosen colors highlight the interface's important elements, which helps the users identify the parts they need to fill in before clicking the primary button.
You might also like
Sojo NFT Marketplace
Heuristic Evaluation of Revolut Mobile App
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
From Idea to Full-Stack Web App
Docto
Fundraising Website
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
