Mobile Button System
As my first ever ux design attempt, I tried to go with a simplified approach with only a few button types and states. I kept the color pallet monochrome and tried to focus on shadows and making clear distinctions between states. I also tried to maintain consistency within hierarchy, but this is what I struggled with most and would appreciate some feedback on where I can improve.
Button Types:
- Primary
- Secondary
- Icon primary
- Icon secondary
- Text Button
States:
- Default
- Pressed/Active
- Disabled
Mobile Button System Light Mode:
Mobile Button System Dark Mode:
Defining Button Sizes:
I designed the buttons to take up the entirety of the phone screen, with about 30px of margin on the horizontal sides. This is for buttons that go at the bottom of the screen after the user has gone through the material of the page.
I also designed a version of the primary and secondary buttons that is approx. half the size, accounting for gutter so the smaller buttons could be placed next to each other and still stack neatly aligned above or below any of the longer buttons.
For the icon versions, I lowered the vertical padding from 16 to 10 to keep the button from looking to large in height. (the other button's ratios are 32:16)
Designing Different States (where I struggled most):
I ran into some difficulty with the pressed/active states (which I believe can be the same in mobile design, since there's no hover?). Specifically with dark mode, I found that pressed/active state for primary and secondary look quite similar. I found it a bit difficult to make the transition from default to pressed for the secondary/outlined buttons in general. In order to make the transition more obvious, I added a change in text color. However, i'm not sure if this is too inconsistent with the primary buttons (I didn't feel that colored text on a colored background made sense for the primaries).
Lastly, for the default states, I originally had different versions for each button type, but after reading some other breifs, I saw advice to make the default type consistent for all button types so as to stay consistent.
Reviews
0 reviews
You might also like
SiteScope - Progress Tracking App

FlexPay

CJM for Co-Working Space - WeWork

Ubani Design System

Accessible Signup Form for SaaS Platform











