BUTTON SYSTEM DESIGN
01 - Laying the Foundation
I chose a mobile financial application for this challenge due to the need for an intuitive and secure button system to support various transaction functions.
Brand Color, I selected Bright Orange, a color that symbolizes energy and trust—essential attributes in a payment application that make users feel comfortable when transacting
Typography, I am using Roboto, known for its simplicity and high readability, ensuring that information is easily accessible to all users.
02 - Defining Button Sizes
After establishing the button types, the next step was to set their sizes large, medium, and small. This ensures that each button is visually distinct and functionally suited to its intended purpose.
03 - Identifying Button Priority
To ensure a clear and effective hierarchy within the interface, I established three distinct button priorities:
Primary, This is the most important button on the screen, used for key actions such as "Submit" or "Save." It stands out with bold colors to guide users' attention.
Secondary, Used for less critical actions, such as "Cancel" or "View Details." It maintains a more subdued design compared to the primary button, but still remains visible and accessible.
Tertiary, This button is for supplementary actions or low-priority tasks. It usually appears in a minimal style, often text-based without a background color, ensuring it doesn't distract from the main actions.
04 - Develop Button States
Button states are crucial for providing feedback to users and enhancing the overall user experience. I created multiple states for each button priority to ensure clarity during different user interactions:
05 - Defining Feedback Button States
Danger, This button uses a red color to signify potentially destructive actions, such as deleting an account or permanently removing data. The color helps warn the user of the serious nature of the action being performed
Success, This button uses a green color to indicate that an operation was successful. For example, after saving data, the button might display a message like "Data saved successfully.
06 - Ensure Accessible Color Contrast
Following Web Content Accessibility Guidelines (WCAG) standards, the button contrast meets the minimum ratio of 4.5:1 for readability. I used a Color Contrast Checker tool to ensure all buttons are accessible to users with visual impairments.
07 - Applying the Button System in the App
08 - Component Overview
Tools used
From brief
Topics
Share
Reviews
3 reviews
Thanks for your sub, Maya!
Your work here is great. I have a few things only that i would want you to think about it:
-there is now swipe to see how it works
-the tertiary button looks more like an inactive button
Great vibes only!
## Visual Deliverables:
My first impression was that I encountered this kawaii character inviting me to review the showcase. This might be highly subjective, but after scrolling through the showcase cover endlessly, I figured out the vibe and the pattern. Yours stands out, and this is the only showcase that communicates a message kindly asking me to review it.
I mean, I've seen the use of illustrations before, mostly from “Humaan” or other similar templates, and none of them (if I remember correctly) face towards me as a user. Additionally, other illustrations are usually from the project itself. Your submission reminds me of Dribbble in its golden era.
I'm probably overanalyzing at this point, but moving on: the way you laid it out makes me assume you'll post this to social media as well? The project title and author's name are on the bottom left, and a bookmark icon on the bottom right serves as a reminder to save the post, which acts as an extra call to action.
I appreciate the difference in how you present the button and supportive elements, which are marked by a specific white card with a subtle drop shadow (foundation, applied button, and overview). This way, you can really distinguish the functional button as if it were taken from a library, making it feel more like a real-use case situation rather than just a mere showcase. I've seen others present it in a less realistic way.
## Functional Deliverables:
The number of button systems showcased is succinctly portrayed in the mobile UI example. Sure, it isn't a full-blown system where every edge case is covered, but it's just enough to see it in action.
I have a tiny doubt about the chosen colors, but since the brand guidelines weren't included, I can't say much about it. Hence, there's always room for improvement.
However, there's a slight hiccup with the descriptions for numbers 07 and 08 on the showcase page. What's the hold-up? Where are they?
Very well laid out and clear button system, which has been well thought through, researched and explained.
The only critique I have is that some interactivity/prototyping to show how the buttons work would take this submission from Very good to Excellent.
You might also like
Sneak
User persona for TikTok
MindNest Color System
Empathy Map - Revolut
![UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]](https://users-content.uxcel.com/451aa544-1b86-419f-9120-5a6ac83f023f/briefs/universaltaxprofessionals-website-revamp-informational-website-thubmnail-8090-1756604786988.jpeg)
UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]
Heuristic Evaluation - Booking.com
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
