• redacted - Keep your wireframes free of distracting Lorem Ipsum


  • 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.


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.


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

  • wikipedia

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

  1. light comes from the sky
  2. black and white first
  3. double your white space
  4. learn methods of overlaying text on images
  5. make text pop -- and unpop
  6. only use good fonts
  7. 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.

  1. image should be dark
  2. text has to be white
  3. 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.


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.


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.


See Also

results matching ""

    No results matching ""