Button Style

Design Scenario

As a UI designer, my challenge was to craft a button system for a tech platform. I chose to design this button system for a web-based project management tool that can be accessed on both desktop and mobile devices.

Design Task

The button system I developed includes various button priorities and showcases different button types and states. These include primary and secondary buttons in different sizes (small, medium, large), as well as states like default, hover, active, and error. The design parameters are clearly outlined, and all buttons meet accessibility color contrast requirements.

Button Parameters

1. Color Palette:

• Grey: Ranges from grey-50 (#FAFAFA) to grey-900 (#212121).
• Blue: Ranges from blue-50 (#E3F2FD) to blue-900 (#0D47A1).
• Red: Ranges from red-50 (#FFEBEE) to red-900 (#B71C1C).

1. Typography:

• Fonts: Inter and Montserrat
• Sizes and Weights:
• Inter: Light, Italic, Medium, Bold, Semi Bold
• Montserrat: Regular and Bold, with sizes ranging from 12pt to 36pt

1. Button Sizes:

• Small Button:
• Default, Hover, Active, and Error states shown for both primary and secondary buttons.
• Medium Button:
• Default, Hover, Active, and Error states shown for both primary and secondary buttons.
• Large Button:
• Default, Hover, Active, and Error states shown for both primary and secondary buttons.

Accessibility

All buttons are designed to meet WCAG 2.1 color contrast requirements to ensure they are accessible to all users. The color contrasts between the text and background ensure readability for users with visual impairments.

Explanation for Design Choices

1. Device Type and Platform: I chose a web-based project management tool to ensure the button system is intuitive and effective across different devices, enhancing user interaction and experience.
2. Button Priorities: The primary buttons are designed to stand out and indicate the most important actions, while secondary buttons offer less emphasized options. Different sizes cater to various contexts within the platform.
3. Button States: Including different states (default, hover, active, error) helps users understand the button’s current state and provides visual feedback, enhancing the user experience.
4. Accessibility: Ensuring all button colors and contrasts meet accessibility standards is crucial for inclusivity, allowing users with visual impairments to effectively interact with the platform.

In the attached image, I have illustrated the different button states, colors, and typography used in the design. Each element has been carefully chosen to create a cohesive and user-friendly interface.