Button System for Mobile and Web Systems

Overview:

The goal for this project was to create a basic set of buttons and interactions that I can refer back to if I ever need buttons for a personal project. I wanted to keep the design of the buttons simple so they could be implemented seamlessly across multiple projects. As such I made sure to include a variety of different button types and states to cover the basic requirements.

Button Types:

To fit a wide variety of roles and tasks 2 sets of buttons were designed; plain text and Icon styled buttons. With each having a light and dark mode version for extra redundancy.

Hierarchy:

For the Hierarchy of the system I designed and included 5 different buttons to cover most of the roles that might be required for a button.

• Primary: The main style using a purple hued color to stand out against both light and dark screens.

• Secondary: A lighter version of primary designed to stand out from the primary but still be used for actions of importance that don't require a primary.

• Tertiary: Featuring an outline instead of a color fill, this button is designed for unimportant interactions that don't need to draw user attention

• Text: Basic text block featuring the same touch targets as the other buttons. Can be used in place of Tertiary buttons

• Destructive: Designed for any undoable action the user might take, uses a bright red to stand out from the rest of the buttons.

Button States:

6 States were designed for each of the button styles; Default, Hover, Focused, Pressed, Disabled, and Loading. The loading state is a simple loading circle and when and is used in place of either Text or a button specific Icon.

Thank You!

Thank you for taking the time to look over my project! It's my first design brief on uxcel and I am very excited to share it with you all! I look forward to your feedback.