Button System Design for Project Management Tool

Choice of platform and design elements

The challenge began with selecting an appropriate platform, which by its nature required a complex button system. A web-based project management tool was chosen due to its rich functionality and the critical nature of its user interactions. To complement the professional and focused atmosphere of project management, Deep Teal was chosen as the brand colour, symbolising reliability and focus. The Roboto typeface was chosen for its modern feel and legibility, ensuring clarity and a professional appearance throughout the platform.

Button priorities and types

The first fundamental step was to define three distinct button types - primary, secondary and tertiary. This classification helps establish a clear visual hierarchy that guides users through their interactions by intuitively prioritising actions based on their importance:

• Primary buttons: Used for the most important actions within the application, ensuring they capture immediate attention.
• Secondary buttons: Used for less critical actions than primary buttons, supporting the main tasks without overshadowing them.
• Tertiary buttons: Designed for less frequently used or less important actions, subtly integrated to provide options without cluttering the interface.

Defining button sizes

Having categorised button types, defining their sizes was crucial. The size of a button often correlates with its importance and frequency of use, improving the user experience by aligning visual importance with function.

Designing button states

To promote an engaging and responsive interface, each button has been designed with different states - Normal, Hover, Active and Disabled. This design choice not only enhances the aesthetic appeal, but also provides clear and immediate visual feedback about the button's state, aiding intuitive navigation and interaction.

Designing different tones

Incorporating different button tones - Brand, Danger and Inverse - ensures the buttons adapt to different scenarios and emotional cues:

• Brand: maintains consistency with the primary colour palette.
• Danger: signals caution for irreversible actions such as 'delete'.
• Inverse: provides high contrast on dark backgrounds to increase visibility.

Accessibility standards

A commitment to accessibility was paramount, with all button designs adhering to WCAG guidelines for sufficient colour contrast. 

Demonstrating use cases

By modelling real-world scenarios, such as those found on platforms such as Monday.com, the practicality and adaptability of the button system was demonstrated. 

Conclusion

The development of this button system illustrates a comprehensive approach to UI design, where every element is considered to improve user interaction and operational efficiency.