<?xml version="1.0" encoding="utf-8"?>
Open full project

Hey, everyone! Colors play a crucial role in design, significantly influencing user experience, mood, and brand perception. My task was to choose a color system for a productivity tool. For this task, I designed a simple Dashboard and carefully selected the colors to provide the best user experience possible. You can read about my choices in the presentation. Yellow - the accent color - represents progress and energy, making it a great choice for our app.

The chosen color palette includes accent, neutral, and system colors for both light and dark modes, each serving a unique purpose. These colors were selected to create a visually appealing and functional interface that aligns with our brand's principles of reliability, creativity, and user engagement. The targeted emotions include trust, excitement, and calmness, ensuring a well-rounded user experience.

Moreover, all colors have been tested for accessibility and meet at least the AA standards as outlined by the Web Content Accessibility Guidelines (WCAG). This ensures that our platform is inclusive and user-friendly for individuals with visual impairments. In the presentation, you will see how these colors are applied in various UI elements, along with an explanation of my design choices. I look forward to your feedback and thoughts!

Tools used

Figma

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

7 reviews


The color system of your UI interface has a clean and professional appearance. The yellow color used for the highlight is bright and noticeable. It draws attention to the key areas and action items, making it easy to navigate. Good work also on the Status indicators, priority labels, black and grey text and additional colors.

Accessibility: Ensure that the colors meet accessibility standards for contrast ratios. This will make the UI more accessible to users with visual impairments. Also try to provide alternative indicators like icons or patterns alongside colors to convey status and priority, making the tool more accessible to color blind users.

Overall, the current color system is visually appealing and functional. With a few adjustments for accessibility and user comfort, it can offer an even better user experience.


The color system for this productivity tool is thoughtfully designed to enhance user experience, promote brand values, and ensure accessibility. The use of vibrant primary colors like Lemon Yellow effectively keeps users engaged, while neutral tones provide a balanced and professional appearance. The system colors are consistent and intuitive, making the interface user-friendly. Overall, this color system is well-implemented and contributes significantly to the effectiveness of the productivity tool.


As an indiviual who is keen on user friendly intuitive products, i think this is a well delivered project.

I appreciate the context given to why a color is used, color psychology. That 'Lemon' was so inviting and pleasing to look out. Great presentation and good use of white space. The dashboard design is detailed but not overwhelming when looked at. Wicked!


As an enthusiast of user-friendly, intuitive products, I find this project remarkably well-executed. The color system for this productivity tool is meticulously crafted to improve user experience, reinforce brand values, and ensure accessibility. Vibrant primary colors like Lemon Yellow maintain user engagement, while neutral tones provide a balanced and professional appearance. I value the explanation of color choices based on color psychology, making the Lemon Yellow particularly inviting and visually appealing. The presentation is outstanding, with an excellent use of white space, and the dashboard design is detailed yet not overwhelming. The consistent and intuitive color scheme makes the interface easy to navigate. Overall, this expertly implemented color system significantly enhances the productivity tool's effectiveness. Fantastic job!


I love the fact that you explain every single step. I have only one question:

  • Why did you feel the need for 3-color text in dark mode?
Thank you for your feedback, I appreciate it! I decided to add a third color in dark mode because the hierarchy in light mode appeared more distinguishishable. The dark background caused the colors to blend together a bit, so I added an additional color to balance the text hierarchy and visual weights of the cards in both modes.
Great decision! Tip: as you told me, try to point it up for the next project as people would love to know how you see it. You rock!

Hello, I appreciate the clear structure and methodical organisation of this colour system document for a productivity tool. The different sections, from competitor analysis to UI examples, cover all the essential aspects and are well illustrated with relevant visuals. However, some improvements could be made to enhance the impact of the document. For example, improving the contrast between text and background would increase legibility, and ensuring strict visual consistency in the dimensions and alignment of elements would reinforce the perceived professionalism. In addition, adding examples of the application of colours in various UI contexts, such as buttons or error messages, would provide a more concrete understanding of their practical use. Finally, if the document is intended for online use, incorporating interactive elements could make the user experience more engaging and informative.


Your approach to color selection is thoughtful and well-explained! The focus on accessibility and emotional impact makes it strong.


46 Claps
Average 4.2 by 11 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>