tidius - Button System

The task

The project kicked off by choosing the right platform, one that required a sophisticated button system. I chose “tidius” a Web Based Quality Management (QM) App due to their need for a complex button system. So far I created the whole CI and brand guidelines.

Brand Colors

This vibrant lime shade (#DBFF73), evokes feelings of growth and harmony. Its fresh, sparkling appearance suggests energy and rejuvenation. I tried to use this color to promote growth and to restore energy of the user.

Typeface

To keep a professional feeling I chose the sans serif font “Satoshi”, it’s a modern, clean, and highly legible typeface which suites the client and the target audience.

Button Anatomy

When designing a button system, the first step is always to consider the structure of the buttons and determine the types needed. Simplicity is key, so the most basic button consists of just a label or an icon. If needed, a icon can be added to a button, either placed before, after, or on both sides of the text. For additional context, a label can also be positioned below an icon when using a single-icon button. This approach ensures flexibility while maintaining a clean and straightforward design.

Button hierarchy and types

It’s important that the user can immediately tell which button is more important or less important than the other one. So here im trying to show the general hierarchy and importance so the user can take action accordingly.

• Primary buttons: Highlight the most important actions that need immediate attention.
• Secondary buttons: Support primary actions, but with less emphasis.
• Tertiary buttons: Mostly used for less important actions or button groups with a lot of buttons present, so we don’t over complicate the interface.

Special Buttons

The App is going to have special buttons, or let’s call them destructive buttons! These buttons trigger actions that cause permanent data loss, which can’t be undone, so it’s necessary to design them to reduce errors while using the App. For the primary color I picked a hue of the main color.

Do’s & Dont’s

Try to only use one primary button at a time, if you need to use a button group pair it with the secondary and tertiary buttons not a second primary button. This way the user is not getting confused by too many options and can finish his task efficiently.

Accessibility

Accessibility is sometimes overlooked, but let’s be honest, it’s one of the most important aspects for modern design. While designing this CI and buttons I followed the WCAG guidelines so everything has adequate color contrast and everyone can use the app without issues. All the buttons easily passed the contrast and color checkers.

Summary

This little project was a really fun exercise for me! I got inspired by Ivan's post right here (https://app.uxcel.com/showcase/993).

I really liked his presentation style so I tried something similar but bring my own twist to it.

Let me know what you think!