design
Fonts
- redacted - Keep your wireframes free of distracting Lorem Ipsum
Simplicity
- complexity is a constant
- complexity is objective
- simplicity is subjective
- complexity is how many operations need to be performed before achieving the goal.
- Tesler's law of conservation of simplicity: Every application has an inherent amount of irreducible complexity. The only question is who will have to deal with it.
Icons
UI patterns
Easing functions
in / out
On the web ease-in is slower at the start. On the web ease-out is slower
at the end. ease-in-out combines both eases.
acceleration
sine 1 Sine acceleration
quad 2 Quad acceleration
cubic 3 Cubic acceleration
quart 4 Quart acceleration
quint 5 Quint acceleration
expo 6 Exponential acceleration
12 principles of animation
- Squash and stretch
- Anticipation
- Staging
- Straight Ahead Action and Pose to Pose
- Follow Through and Overlapping Action
- Slow In and Slow Out
- Arcs
- Secondary Action
- Timing
- Exaggeration
- Solid Drawing
Appeal
reasons to learn design
- bad design reflects poorly on your work
- clients will prefer pretty over bland, even if they're not designing
- being versatile will allow you to fill positions that demand versatility
the krav maga of design
- light comes from the sky
- black and white first
- double your white space
- learn methods of overlaying text on images
- make text pop -- and unpop
- only use good fonts
- steal like an artist
light comes from the sky
Non obvious, very important. Elements higher on the screen should be lighter than those lower on the screen.
black and white first
It allows you to worry about less, initially. Analogous to 'mobile-first' it constrains your decisions, allowing you to focus on the harder problem first.
double your white space
White space is the default. Taking away the white space is a conscious decision. Be zen about it.
- put space between your lines
- put space between your elements
- put space between groups of elements
Analyze what works
learn the methods of overlaying text on images
There are 5 + 1 methods of overlaying text on images:
apply text directly to images
Should generally not do this.
- image should be dark
- text has to be white
- test it at every screen / size to make sure it's legible
overlay the whole image
Plop in a color and make the image darker. Shades of gray generally work well.
text-in-a-box
Whip up a mildly-transparent black rectangle and lather on some white text. If the overlay is opaque enough, you can have just about any image underneath and the text will still be totally legible.
blur the image
Blurring a part of the underlying image is relatively effective.
You can also use the out-of-focus area of a photo as the blur. But beware— this method is not as dynamic. If your image ever changes, make sure the text is always over the blurry bits.
floor fade
Subtly fade to gray at the bottom part of the image. 500px is a great example of this technique.
scrim
Gradient opacity box around text. Super subtle.
Make text pop -- and unpop
Styling text to look beautiful is often a matter of styling it in contrasting ways.
Ways to call for attention:
- Size (bigger or smaller)
- Color (greater contrast or lesser; bright colors draw the eye)
- Font weight (bolder or thinner)
- Capitalization (lowercase, UPPERCASE, and Title Case)
- Italicization
- Letter spacing (or— fancy term alert— tracking!)
- Margins (technically not a property of the text itself, but can be used to draw attention, so it makes the list)
Up-pop and down-pop
Aka visual weight
- up-pop: styles that increase the visibility of the text
- down-pop: styles that decrease the visibility of the text
Page titles are the only element to style all-out up-pop. For everything else, you need up- and down-pop.
Also: styling text is hard. Try to balance things. If it doesn't look quite right, keep trying until it does.
Use good fonts
Some fonts are good. Use them.
Mobile first
Allows you to tackle the hard problem first, what information matters, before making it fit on a bazillion pixel screen.
Steal like an artist
Unless you're inventing a new element see how others do it and cherry pick from the best.