Put space between your lines.
Put space between your elements.
Put space between your groups of elements.
If you, like me, are used to formatting with CSS, where the default is no whitespace, it’s time to untrain yourself of those bad habits. Start thinking of whitespace as the default— everything starts as whitespace, until you take it away by adding a page element.
Sound zen? I think it’s a big reason people still sketch this stuff.
Starting with a blank page means starting with nothing but whitespace. You think of margins and spacing right from the very beginning. Everything you draw is a conscious whitespace-removing decision.
Starting with a bunch of unstyled HTML means starting with content. Spacing is the afterthought. It has to be explicitly stated.
Steal like an artist
Every artist should be a parrot until they’re good at mimicking the best. Then go find your own style; invent the new trends.
Don't let body copy run on to 100% width. Use measures.
"Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page...the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters."
There are generally 3 to 4 different line-heights you will need when setting type. Line-height affects how easy it is to read a piece of text, so having a well constructed set of values can help make your text a little easier to digest.
Check your letter-spacing
Letter-spacing is the consistent white-space between letters in a piece of text. In typography, letter-spacing is commonly known as tracking. Text that is set to uppercase should be tracked to improve readability.
Lowercase text should never be tracked.
For some larger text, depending on the typeface, a negative tracking might be desirable.
Check your font-weight
It can help call attention to a piece of content, or help to make a smaller font-size a bit more readable. In Elements of Typographic Style, Robert Bringhurst suggests we keep two things in mind when playing with font-weight. Use bold weights sparingly. Font-weight should decrease as font-size increases.
Saturation is just as important. Whenever you’re working with grays, add a bit of color to them and they will feel less dull. The amount of color you can add is proportional to how dark the color is. E.G. for an exmaple app saturation starts at 2% for our lightest gray and steadily increases until it’s at 22% for the darkest gray
Grayscale first
Design grayscale first. Start with the harder problem of making the app beautiful and usable in every way, but without the aid of color. Add color last, and even then, only with purpose.
...this forces you to focus on spacing and laying out elements.
Light comes from the sky
Light comes from the sky so frequently and consistently that for it to come from below actually looks freaky...
Outset elements (Button, Slider button, Dropdown controls, Cards, button part of a selected radio button, Popups) have:
dark bottom edge. Sun don’t shine there, son.
slightly brighter at the top than at the bottom
casts a subtle shadow
Inset elements: (Text input fields, Pressed buttons, Slider tracks, Radio button (unselected) Checkboxes) have
top inset edge casts a small shadow
inset area is concave and the bottom reflects more light (gradient from darker to lighter)
bmordan
commented
7 years ago
Read:
Layout
Double your whitespace
Put space between your lines. Put space between your elements. Put space between your groups of elements.
Black overpowers everything else. It stands out because it’s not natural.
https://ianstormtaylor.com/design-tip-never-use-black
...this forces you to focus on spacing and laying out elements.
Light comes from the sky
Outset elements (Button, Slider button, Dropdown controls, Cards, button part of a selected radio button, Popups) have:
Inset elements: (Text input fields, Pressed buttons, Slider tracks, Radio button (unselected) Checkboxes) have