tidius - Button System

Great work on the "Tidius - Button System"

Your focus on button hierarchy and accessibility is impressive. It’s great to see how you followed WCAG guidelines to ensure the buttons are easy for everyone to use. The use of colors and clear button types makes the design user-friendly. 

To improve, you could add examples of how the buttons look in the app. This would show how they work in real situations and how they fit with the overall design. 

Overall, a solid and thoughtful design - well done

Feedback on the Tidius Button System

This are thing i really loved:

1. Clear Hierarchy
2. Accessibility Standards
3. Special Buttons
4. Practical Do’s and Don’ts
5. Visual Consistency

Areas to Improve:

Missing Button States

• Showing states like hover, active, focus, and disabled is crucial. These add depth to your system and help developers implement interactions properly.

Interactive Examples

• Static designs are great, but interactive prototypes would elevate this project. A simple Figma or Adobe XD prototype showing button behaviors (e.g., hover effects) would make your system more engaging.

Inclusive Language

• Replace phrases like "his task" with “their task” to ensure gender-neutral language. Small changes like this make a big difference in how your work is perceived.

Expanded Accessibility

• While contrast is addressed, think about touch targets, screen reader labels, and keyboard navigation. These elements improve usability for users with motor disabilities or assistive technologies.

Testing and Validation

• Did you test these buttons with real users? Sharing feedback or test results would validate your design decisions and add credibility to your work.

Rationale for Design Choices

• The lime green and Satoshi font are great, but explain why they suit the app’s audience or brand identity. For example, how does the lime color reflect the app’s values?

Final Thoughts:

Your work shows strong design thinking and attention to detail. The button hierarchy, accessibility compliance, and cohesive branding are all on point. To take it further:

• Add button states and interactive examples.
• Deepen accessibility considerations.
• Share user feedback or testing data.

This project has the potential to be a standout piece in your portfolio with these refinements. 

Hi Max, Fantastic work

What’s working well:

• The distinction between primary, secondary, and tertiary buttons effectively guides users toward the most important actions.
• Designing distinct styles for actions that cause permanent data loss is a smart move to prevent accidental clicks.
• Adhering to WCAG guidelines ensures that everyone uses your buttons, which is commendable (I wonder though which tools were used to ensure this is met)

Suggestions for improvement:

• Hover, active, and other states: I believe that it is important to address these as well, as they can contribute to the component being accessible.

Overall, this is a well-executed button system that balances aesthetics with functionality. Keep up the great work!

Great work!

This UI design showcased on the website stands out for its use of calming colors and a refined, minimalist aesthetic. The color palette is dominated by soft, pastel hues and neutral tones, which immediately evoke a sense of tranquility and ease. It’s clear that the designer has carefully selected colors that don’t overwhelm the user, creating an inviting atmosphere that feels pleasant to look at for extended periods.