Team Communication Desktop Website - Button System

For those viewing this project, thank you! I am a recent December 2023 college graduate who majored in New Media and Design and minored in Computer Science. I recently joined this community with a hope of gaining more experience and knowledge across several areas of UX. I start my career in July, where I plan on working across several areas including Web Design and Development, as well as prototyping and UX Design. I thought I would start with the beginner design briefs, and then I hope to work my way through a selection of them while I am here. I hope you will enjoy this presentation, and I look forward to your feedback soon!

What's Included:

The link will take you to the Figma project. Feel free to press the play button and view it as a presentation as well.

Primary:

Small, Medium, Large, Normal State, Hover State, Focused State, Pressed State, Icon-Only, With Icon, Gradient, With Shadows

Secondary:

Small, Medium, Large, Normal State, Hover State, Focused State, Pressed State, Icon-Only, With Icon

Tertiary:

Small, Medium, Large, Normal State, Hover State, Focused State, Pressed State

Danger, Success, Warning:

Small, Medium, Large, Normal State, Hover State, Focused State, Pressed State, Icon-Only, With Icon, With Shadows

Notes On Each of the Criteria:

Hierarchy:

In this project, I created three sizes of buttons, as well as a primary, secondary, and tertiary button style, allowing for several types of hierarchy through contrast. Primary buttons use the brand color, secondary buttons used a muted tone of the brand color, and tertiary buttons are outlines. As an additional form of hierarchy, there is also an option for adding an icon, as well as icon-only buttons.

Visually Appealing/Accessibility:

I aimed to created strong contrast, while also using colors which are pleasing to the eye. Color was one of my top priorities in the design process, and took several attempts before I made the final decisions. Attempts included creating several tones of each color, and running them through a WCAG accessibility test for contrast. Alongside passing contrast tests, I also checked each of the button sizes for accessible margins and sizes, and have included the checks within the final presentation. The typeface I chose is a sans-serif typeface, which is accessible on multiple device types and operating systems.

Explanations:

I have included explanations throughout the presentation, including for color choices, borders, and the typeface choice. I have also included three example screens in order to visualize their potential uses.

Effective Presentation:

I ordered the slides in a logical order, starting with design notes and colors, then checks, then all of the buttons, and finally the example screens.