Button System for Mobile Web Platforms Brief
For this Project I decided that my tech platform would be for a medical company. I chose different shades of blue, grey and white to convey a sense of trust and safety with users.
Button States were created for Primary, Secondary, and Tertiary Colors as well as Text only and Destructive states.
Button States Created were:
-Default
-Hover
-Pressed
-Text Only
-Destructive
Each button state was displayed with and without icons in small medium and large sizes.
Any feedback on how I could improve in neatness or presentation would be appreciated. Thanks!
From brief
Share
Reviews
2 reviews
Very well done! The buttons are well structured. To make them more visually engaging, it might be interesting to explore subtle shadow usage to give them more “life.” There are some great insights from Zander Whitehurst on small adjustments that can make a big difference.
well-structured Button system design. awesome.
Nevertheless, there is consistency issue in the design. Example: secondary and tertiary button hover mode is shadowed with stroked while primary button pressed mode seems to have the same effect.
Keeping the design rule consistent is one of the important aspects in creating design system.
All in all, your button design is clean and the document is easy to read. Thanks.
You might also like
NORTHSIDE - Coworking space Customer Journey Map
Wealthsimple 404 Page
HealthFlow: Designing a Simple and Insightful Wellness Dashboard
Rethinking Content Discovery for Netflix
Accessibile Login & Signup Form for Notion
Improving Dating App Onboarding: A/B Test Design
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
