How To Design S**t

A quick presentation on some basics of creative graphic design, for hackers.
From your friends at Strikingly.com.


  • Graphic design is a search problem. Think like a hacker.
  • Three fundamentals of web/graphic design: LAYOUT, TYPOGRAPHY, COLOR
  • Limitations: Just talking about visual/graphic design, not UI/UX

Creativity is a search problem.

  • Creative work is just selecting one item out of a big set of possible items. Think in terms of information (bits).
  • QUICK EXAMPLE: A book is just a long string of 500k characters. Each character is ASCII. # of possibilities = 128500000 = 23500000 (3.5 megabits)
  • Most of those combinations don't make sense. Use heuristics to make this number smaller.
  • Let's try words insteads of characters. 100k words total, and each word is from a possible 10000 words. 10000100000 = 21300000 (1.3 megabits)
  • We just reduced the search space from 23500000 to 21300000, a factor of 22200000. Yay!
  • More heuristics for writing a book: Syntax, grammar, logical flow.
  • The creative design process is using heuristics to iteratively reduce the search space until you can identify one combination that satisfies some minimum standard.
  • What are these heuristics?

The basics of web & graphic design

  • Using just LAYOUT, TYPOGRAPHY, COLOR, you can make good design!
  • These three fields are relatively easy to quantify. Great for hackers!
  • More importantly, they are easy to reproduce, without artistic "talent", and with minimal technical skill. Just use the inspector, and write CSS!
  • There are lots of other things that are more difficult to quantify and reproduce: imagery, iconography, animation, texture, etc. Forget that shit for now.

Layout

Concepts

  • How elements are laid out relative to the page and to each other — alignments and spacing between each pair of elements and their containers
  • How big/small elements are, absolutely and relatively
  • How the eye flows over the content (top left to bottom right)

Problems

  • No alignment with anything.
  • Elements too close to the edge! Visual clutter.
  • No visual hierarchy.
  • Eye is not clearly drawn in any path.

Solutions

  • Symmetric & sufficient top/bottom and left/right spacing.
  • All elements are aligned to each other, and to the four edges.

Problems

  • There is no ordering.
  • And there is no emphasis between the different text types.

Solutions

  • Change order of elements.
  • Emphasize title and CTA.

More Structure

  • You can separate different elements into their own containers like this, like a visual tree structure or hierarchy. This adds even more distinction between the elements.
  • Use backgrounds, borders, and/or containers to achieve this.
  • Use a box around the CTA because it's a button and should have a bigger click area.
  • All elements are properly spaced/aligned within their containers.

Heuristics

  • Is each element clearly visible and visually distinct? (Is there enough spacing/padding between elements to prevent clutter?)
  • Do the relative sizes of the elements give proper emphasis?
  • Do the alignments/containers provide a logical visual tree structure, and does this improve the content organization? Aligning elements together helps group them together.
  • Is the eye drawn in a proper path across the page, and are the elements ordered properly along this path?

CSS Properties

  • width
  • height
  • margin
  • padding
  • display
  • position
  • text-align
  • float

Typography

Concepts

  • How readable the content is
  • How typography emphasizes certain elements over others
  • How multiple fonts can pair well with each other to achieve the above
  • How each font brings its own style into the design

Times & Arial

  • Classic fonts! What could go wrong?
  • They're classic because someone picked them/designed them as default fonts for Windows 95.
  • They're also boring and have no character because they're default fonts and everyone recognizes them as default fonts. They say "I just used the default fonts. I didn't even try."

Comic Sans

  • One of few stock fonts in Windows 95 that got really overused since it was the only "fun" font.
  • No. Just no.

More Bad Fonts

  • Informal Roman, Bernard MT Condensed, Parchment, Kunstler Script
  • All of these fonts are bad individually, and they are even worse together.
  • Roman is ugly, in the same way as Comic Sans. Irregular letterforms, far too comical/childish.
  • Bernard has strange dimensions (very high x-height) and can't seem to decide between serious (tall, heavy letters) and fun (rounded shapes). This font *might* be OK in some other context, but I can't think of one.
  • Parchment is just far too ornamental, to the point of unreadability.
  • Kunstler is too fancy/formal, and sets the wrong mood. This isn't a wedding invitation.
  • Another point: Don't use too many drastically different font families! Two is a good number of families, and you can vary params (weight, italics, etc) within a family.

Bodoni and Abraham Lincoln

  • There are two different fonts here. They are both tall, skinny, serif fonts.
  • They're too similar! When trying to pair fonts, use a pairing that is distinct enough so that each style can stand out. Avoid uncanny valley.
  • There are dimensions in which to distinguish fonts: weight, letter width (skinny/fat), serifs, slant (italics), case, size
  • Another issue with skinny fonts is that they can be difficult to read at smaller sizes.

Bookman Old Style & Bebas

  • These two fonts do pair fairly well. We're getting closer. Only subtle problems left.
  • Some serif fonts are harder to read at small sizes on a computer screen due to aliasing. It may be better to have a sans-serif as the smaller text.
  • The top two lines have seemingly equal emphasis, so they compete with each other for attention.
  • The description text ("Come to our New Year's Party...") doesn't have enough line height. Make sure each line of text can breathe!

Brandon Text & Wisdom Script

  • Brandon is the classy, serious, neutral, modern font. It's used three times in three different styles! Neutral fonts can be very flexible like this.
  • Wisdom is the fancy, playful, eye-catching font. It's ornamental but still very readable and with very regular letterforms so it doesn't seem childish.
  • The two fonts at the top pair well with each other by varying weight, size, case, slant, and letter width.
  • CTA is bold for emphasis.
  • Sets the mood as clean, modern, classy, not childish, not overly formal.

Heuristics

  • Is the text clearly readable with minimal effort/eye strain?
  • Is there enough line height? 1.4-1.5 for paragraph text, 1.0-1.2 for headings.
  • Are the fonts good? Consistent and distinct letterforms, clean rendering, etc.
  • If you're trying to pair different fonts/font styles: Are the they sufficiently distinct? Are they different in many parameters (serifs, weight, size, case, slant, and letter width)?
  • Are you properly using bold/italics/caps to create different styles and draw emphasis?

CSS Properties

  • font-family
  • font-size
  • line-height
  • font-weight
  • font-style
  • Others: text-decoration, text-transform, letter-spacing

Color

Concepts

  • How color sets the mood overall
  • How color emphasizes certain elements over others
  • How multiple colors can pair well with each other to achieve the above, using varying hue, saturation, and lightness.

Plain RGB

  • Full saturation/full brightness are usually too harsh, and don't pair well with each other. The red and blue clash especially harshly.
  • Each color is competing for attention equally, and they're all screaming really loudly, and they're only the background colors! So these colors hurt the organization of the content. Backgrounds should be softer.
  • Red background is especially harsh, and this does not match the mood we want.
  • Green does make sense for the button, but this green is too bright.
  • Black text is very hard to read on the blue.

Low Contrast & Monochrome

  • Monochrome (one hue) is usually boring.
  • It also makes low contrasts even worse.

Yellow, Orange, Black

  • Yellow, orange, and black go well together here.
  • Note that "New Year's Party" is in a dark orange color. this pairs very well with the yellow background as well as the black text below it.
  • Also, the white text looks good on the orange and green backgrounds.
  • The green button clashes with the orange background! Their saturation and brightness is too similar.
  • The orange is the harshest color here, and it's drawing unnecessary attention to a plain background with not much content.

Try that again.

  • Switch the orange and the yellow. This looks better! But the yellow is still too strong as the largest container's background.
  • The colors also evoke the wrong mood. These are autumn colors, so this looks like an invitiation for a Halloween party! Or maybe mid-autumn festival?

Green instead?

  • Using softer colors this time, this is much more pleasing. There are no harsh bright colors that strain your eyes.
  • But the green header now reduces the distinction/uniqueness of the green button! This is a problem.

Nice colors!

  • The overall style/mood is clean, lighthearted, and fun. This matches the mood of the typography. The colors in general are not too saturated.
  • Blue is the highlight color. It draws immediate attention to the top, then the eye can move down.
  • The blue text is just a variation of the blue background. "New Year's Party" is lighter to reduce emphasis. "You're invited!" is much darker to add emphasis.
  • The beige is a very nice neutral color here. It pairs well with the blue because it contrasts with the blue in hue, lightness, and saturation!
  • The blue top and beige bottom are separated by a strip of darker blue. This helps reduce any possible clashing, since clashing only affects colors that touch each other.
  • Green is the second highlight color, meant to draw attention to the button. Green meaning "go" is a very common use case for that color. This green matches the blue in saturation and lightness, and stands out sufficiently from the beige background.

Final Touches

  • Some colored borders makes the content pop out more.
  • The border color complements the background colors.
  • A small bottom border for the button creates depth!

Heuristics

  • Do the colors set the right mood?
  • Are adjacent colors distinct? No clashing?
  • Are background colors not too harsh/saturated? Go easy there! (You can always use plain white.)
  • Are you appropriately extending a base hue to create different color variations of that hue?
  • Does the text color look good against the background color? Not too much or too little contrast between text and background?
  • Do the color highlights draw emphasis to the right elements?

CSS Properties

  • color
  • background-color
  • border-color

That's it!

Takeaways

  • Web/graphic design is very quantitative! Almost everything can be broken down into numerical properties that you can run "searches" on using heuristics.
  • The main heuristic: Set one property or element as an "anchor" and figure out other properties from that. (Write a thesis statement and then the supporting statements should come more easily.) This eliminates lots of combinations!
  • Try stuff out and see how it looks. Of every possible creative disciplines, web design has the easiest way to just try stuff out. Just use the inspector!

I'm Teng Bao, a cofounder of Strikingly.
Check out Strikingly.com for an awesomely easy website builder!
:)