Button Design System
Buttons & Interactions
Project Overview
Platform: Tech Platform
Objective: To design a cohesive button system that enhances user interaction while maintaining accessibility, usability, and brand consistency.
Problem Statement
In the competitive world of social media platforms, user engagement hinges on intuitive and accessible design. A well-crafted button system is essential to guide users through actions, ensuring that the interface is easy to navigate while meeting accessibility standards.
My Design Goals
Intuitive Design: Ensuring that users can easily identify and use the buttons, facilitating smooth navigation and interaction.
Visual Consistency: Creating a unified visual language across all button types and states, maintaining brand identity.
Accessibility: Designing buttons that comply with WCAG guidelines for color contrast and touch target sizes.
Flexibility: Building a button system that can easily be adapted to future updates and features.
Button Types & Priorities
Primary Buttons: Designed with a solid fill to ensure they are the most visually prominent, emphasizing their importance for key actions.
Secondary Buttons: A lighter fill was chosen to create a balanced visual hierarchy, ensuring these buttons are noticeable while remaining secondary to the primary buttons.
Tertiary Buttons: Outlined to maintain a minimalist and unobtrusive appearance, these buttons are suitable for actions that are less critical but still require visibility.
Text Buttons: Crafted with no fill or outline, these buttons are intentionally subtle, reserved for supplementary actions that should not distract from the primary and secondary options.
Destructive Buttons: These buttons are designed with a bold and cautionary appearance to clearly differentiate them, ensuring they are easily recognizable and prevent accidental activation of potentially harmful actions.
View full Project
Button Design System
Buttons & Interactions
Tools used
From brief
Topics
Share
Reviews
2 reviews
Especially the text variant of the button:
Remove padding, buttons that do not have a different background color than the background of the element they are within, shouldn't have padding, the padding will make them seem misaligned when not hovered.
Contrast is too low for some button states (mostly active, but some hover states could be improved too).
Hi Surbhi!
I think you've done a lot of work on this project, and it definitely shows across your large button system. Some notes - I find your button system to be more applicable to a finance or business system, as it feels very formal for social media. I also found your project hard to browse, as your prototype wasn't set within a presentation, and only showed limited functionality. I think you can very easily improve this project, by just using some of your buttons to create a presentation to showcase all the hard work you've done.
You might also like
GoDaddy Sign-in Page Accessibility Optimization
My Bestie Nessie - Making a game in one day at the Oakland Museum of Art & Digital Entertainment
Web SaaS Sign-Up Flow
Gaming Gear 404 Page
Push notifications
Samyoung Chemical
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
