Michal Malewicz @michalmalewicz:
Today let's talk about Button size progression.
Many online tutorials give you some 3 random height numbers and call it a day.
When building complex products it's often NOT enough.
A thread 
Michal Malewicz @michalmalewicz:
Sure, it's great to have a large, medium, small buttons (and some other components) in your design.
But there also needs to be a logical reason for them being a specific size.
Michal Malewicz @michalmalewicz:
First:
Define a grid (8 point)
We almost always go for an 8 point progression for spacings and heights.
It's easy - each value is different by 8 here.
That allows extreme consistency with OTHER ui elements you create.
Define a grid (8 point)
We almost always go for an 8 point progression for spacings and heights.
It's easy - each value is different by 8 here.
That allows extreme consistency with OTHER ui elements you create.
Michal Malewicz @michalmalewicz:
For fonts it's a little bit different.
Buttons work best when they're a Sans Serif typeface.
But because they render differently, sometimes the proper values can be ODD numbers.
If your font renders well on EVEN numbers, a 2+ point progression like this works great.
Buttons work best when they're a Sans Serif typeface.
But because they render differently, sometimes the proper values can be ODD numbers.
If your font renders well on EVEN numbers, a 2+ point progression like this works great.
Michal Malewicz @michalmalewicz:
Here's a full cheat-sheet of the sizes and fonts and how it all works together.
The blue line shows that the actual button width in this case depends on the amount of text.
Michal Malewicz @michalmalewicz:
If you want to explore fixed-width buttons check out this thread:
twitter.com/michalmalewiczโฆ
Michal Malewicz @michalmalewicz:
Buttons are by far the most important UI element out there!
They help you accomplish the desired action while helping the business make money.
There's one type of button that doesn't get enough love and explanation though.
A thread ...
Michal Malewicz @michalmalewicz:
Buttons are THE most important UI element so make sure to check the contrast between the text and the button background.
Using a slightly thicker (Medium instead of Regular) font is also a good idea.
Michal Malewicz @michalmalewicz:
You can find even more on buttons in the FREE chapters of Designing Users Interfaces.
Get it 100% FREE here:
hype4academy.gumroad.com/l/freeui
Michal Malewicz @michalmalewicz:
Want to be an awesome designer?
โบ Follow me - @michalmalewicz for ORIGINAL content (not recycled many others do)
โบ Share the thread so more people can see it
โบ Have a beautiful day
many others do)
โบ Share the thread so more people can see it
โบ Have a beautiful day