Button System Design for Music-Tech Platform

Choice of platform and visual elements

The main concept was to design a button system for a web-based app, and its landing page. Bright colors were chosen to target a younger audience and communicate the modernity of the app. The main feature of the button system is the hover state of the buttons, as they transform into gradients to ensure positive user feedback.

Button selections

The buttons include five priority types, three sub-types and three sizes.

• Five priority types: Primary buttons, secondary buttons, outlined buttons, danger buttons, success buttons.

• Three sub-types: Text buttons, Icon+Text buttons, Icon buttons.

• Small: 32 px in height
• Medium: 42 px in height
• Large: 60 px in height

Button States

The buttons include four different states:

• Normal: How the button appears on the screen without any interactions.
• Hover: When the user hovers over buttons with their cursor, they change colors. Primary, danger and success buttons transition into a gradient while secondary and outlined buttons change to a slightly darker color to not overdue the effect.
• Selected: When a button is selected, it has a stroke on the outside. For outlined buttons, their stroke color changes.
• Disabled: When a button cannot be interacted with, it appears as a shade of gray. The shades of gray change depending on the button priority.

Accessibility standards

WCAG guidelines for sufficient color contrast were followed when creating the color palette and designing the buttons.

Prototyping

The buttons were placed on low-fidality wireframes and prototyped to show the transition into hover states.