余白を取る
余白
を取ることで、窮屈さを減らす
文章がギュッと詰まっていると読む気が失せる
例えば、画面端から文章が始まるのと、一定の余白(padding)が与えられている場合とで、読みやすさが異なる
余白がなくて見づらい例
参考
/mrsekut-book-refactor-ui/055 (Start with too much white space)
#WIP
デザインするときは、
余白がない状態から、余白を足す、のではなく
余白を過剰に取っている状態から、余白を引いていく、
といったアプローチで進めるほうが良い
/mrsekut-book-refactor-ui/056
必要ないのに画面幅いっぱいのレイアウトにしない
padding, marginなどなど
8の倍数の余白を使う
エンジニア向けの余白の基礎 / Spacing - Speaker Deck
余白は正方形で統一する
余白の大きさは要素の短辺以上にする
要素と要素の関係性の強さで余白の大きさを決める
ボタンの余白の取り方
https://speakerdeck.com/yuyaink/spacing?slide=61
高さの1.25倍の余白を上下に取る
buttonのwidth