スレッド

新しいツイートを表示

会話

返信先: さん
1. Use comfortable line heights. What’s important is to not use the same line height for your titles and body texts. - For title, a good range is 1.1 - 1.3x - For body, it’s 1.3 - 1.5x As a rule of thumb, larger texts should have smaller line height.
画像
画像
4
1,568
2. When putting text in a box, there should usually be more horizontal padding than vertical padding. This is because most letters don’t fill the full height, especially with line heights greater than 1. You need more horizontal padding than vertical to make them feel the same.
画像
4
827
3. Text on the same line should be baseline-aligned with each other, and center aligned with other elements. But if the text is in a defined shape, it should be center aligned.
画像
3
656
4. When not sure, left align. - Don’t center align title but left align content. That looks weird. - Don’t center align content if it’s longer than a few lines.
画像
3
502
5. Don’t put more than 20 words on one line. It’s hard to read. This means that with the standard ~16px font size, text blocks shouldn’t span the whole width of your page.
画像
6
543
6. When everything is bold, nothing is bold. Usually regular (400) weight should be used for main content. Contrast makes things look clean. (That’s why most sites using Circular font are not very nice — Circular is thick.)
画像
5
420
7. When laying out texts vertically, ensure there’s comfortable vertical spacing in between. - A good rule of thumb is to use the height of the smaller text as spacing. - If the texts are similar in size, lay them out with the line height of the larger text.
画像
2
437
8. Spacing between text blocks should correspond to their relationship. The more related two blocks are, the closer they should be visually. For example, section titles should have more top padding than bottom padding.
画像
2
400
9. When putting text into a button or textbox, make sure the padding is comfortable. As a rule of thumb, with a ~1.4x line height, the text should take up about half the size of the box. (Don't forget to use more horizontal than vertical padding.)
画像
4
376
10. For marketing pages, experiment with larger texts and more spacing. They often make a page look cleaner and more focused. If you have never used 100px+ text or 200px+ spacing, give it a try. People often don’t realize how large the text / spacing are on popular sites.
画像
7
367
I hope these tips are helpful! Next week, I’ll share some tips for choosing colors. Comment below if there’s anything you are particularly interested in!
50
712
As promised, here's the part 2!
引用ツイート
dan.glow
@danqing_liu
Design is hard (II). A large part of this is choosing colors — *everything* you design needs a color. I’ve realized that while true mastery takes years, there are simple, scientific rules that can make your colors much nicer. Here are 10 practical tips for choosing colors.
このスレッドを表示
3
22
返信先: さん
Nice post! You should write more about this! I checked your blog and no entries about design so far. Also... any resources you would recommend which helped you to grow your design knowledge?
1
4
返信先: さん
I think we are all able to tell good designs from bad ones, more or less. (After all, if not then the good designs are probably not so good) So what it takes is probably figuring out _why_ good designs are good. And hence this thread :)
6
返信を表示
返信先: さん
Rad thread -- codified a ton of what I do intuitively! I'd imagine this is super helpful for designers of all levels; or anyone wearing the design hat currently. Great tips!
6

Twitterを使ってみよう

今すぐ登録して、タイムラインをカスタマイズしましょう。
Appleのアカウントで登録
アカウントを作成
アカウントを登録することにより、利用規約プライバシーポリシーCookieの使用を含む)に同意したとみなされます。

トレンド

いまどうしてる?

テクノロジー · トレンド
ぶいすぽっ
スポーツ · トレンド
ランニングホームラン
トレンドトピック: 確信歩き#swallows
エンターテインメント · トレンド
焼きとうもろこし
エンターテインメント · トレンド
池田秀一さん
トレンドトピック: ダブスタクソ親父#水星の魔女
スポーツ · トレンド
開幕3タテ
1,902件のツイート