This is a concise guide on the basics of designing by Jarrod Drysdale. It's not meant for learning design theory or learning how to become a designer. It's aimed for bootstrappers and hackers who want to be decent in their designs. Get the book at http://bootstrappingdesign.com.
Why is learning design important?
- affects business
- strengthens communication
- supports content/ideas
- delivers clarity
- hiring designer is expensive, may be an option later down the road
Drysdale warns us not to be creative. It reminds me of that scene in Hitch, where Hitch teaches his customer how to dance. Just sway side to side, that's your safe zone. That's the same advice from the author, stay in the safe zone!
Organize elements into related groups, then work each group into the layout. Use convention. A ton of sites use the standard main column with sidebar layout, use it too! Users are already used to it.
Alignment is important. Elements on a page can be left, centered, or right aligned. Whether the elements are consecutive or 100 elements apart, they still need to be aligned.
Consider using a grid like 960.gs. Basic grids are best, don't over do it with too many columns. Don't stick to the grid if it looks bad, feel free to break free once in a while.
You want to maintain an order of importance amongst elements of a design. You're basically the reader's tour guide. Start the path with a few important elements, end with a Call To Action.
To create prominence amongst elements, use variations of:
- size (bigger font size for important headers, bigger button, etc...)
- color (contrast)
- space (copious white-space around important elements)
- location
- typography
Contrast is your friend for establishing hierarchy. Either make it stand out a lot, or don't differ it at all.
Proximity and space affects the design's professionalism. Elements that are close together are related in:
- content
- function
- appearance
Proximity and space also affects the "pacing" of a design. Similar to how long sentences/paragraphs can be difficult to read, designs without enough space can be difficult to take in.
Drysdale gives an example where a blog post header, byline, date, and body are all evenly spaced out. This is bad. The header/byline/date should be close to each other because they're meta-data. The body should be further away.
There's a ton of theory/foundation on typography. Ignore it for now, you just need to know the basics for a good design.
There are two categories for choosing fonts: display and text. Display is for headers, logos, big splashes. Text is for readability (think long paragraphs or lists).
Some important terms:
- font - file that stores shapes of letters like Arial and Arial Bold
- typeface - design of shapes of letters, Arial is the typeface
- font weights - line thickness of letters
- font styles - variations on shapes like italics and weights
- font family - a group of font files with similar design, like the Arial family which contains Arial and Arial Bold
- serif - typefaces with short lines at ends of strokes (like Times New Roman)
- sans serif - typefaces without those short lines (like Helvetica)
- slab serif - typefaces with thick serifs
- script - typefaces that look like cursive
- italic/oblique - slanted letters
Drysdale recommends using custom fonts. Check out Typekit or Fontdeck.
Picking multiple fonts is like pairing food and wine. It's difficult to do for beginners. So instead, stick with these two general rules:
- pick two fonts: one for display and one for text font
- pick one extremely versatile font and use it for everything
If you go with option 1, a popular guideline is to use serif for one and sans-serif for the other. An even safe choicer is to use a serif/sans-serif from the same family. Since it's from the same family, the style will match perfectly.
DO NOT pick two fonts that are closely related but don't offer enough contrast! This is equivalent to wearing a plaid shirt and different plaid pants. Like in Design for Non-Designers, either have a lot of contrast or have zero contrast at all.
Some other rules to follow:
- readability is important, use 16px font size or greater
- line-height should be around 125% or 1.25em
- color contrast is important (no gray on light gray background)
- use fewest text styles/fonts as possible
Some fonts that the author recommends:
- Calluna and Calluna Sans
- FF Meta and FF Meta Serif
- Proxima Nova
- Skolar
- Adelle
Color is relative to its surroundings. A shade of blue will look blue-er when it's surrounded by a contrasting green as opposed to a different shade of blue.
Low contrast is difficult to recognize, so try to use high amounts of contrast to make elements stick out (like call to actions).
Warm colors invoke energy, passion, happiness, and comfort. These are your yellows, reds, and oranges.
Cool colors invoke calmness, relaxation, professionalism, and depth. These are your blues, purples, and greens.
The http://bootstrappingdesign.com website is a great example. He uses warm colors mostly, but call to actions stand out because of the contrasted blues.
Gradients actually use the same hue, but with differing brightness. You can do this in Photoshop by using a single color and applying a gradient blend mode from white to black. Then adjust the opacity.
Your new process:
- Gather research about your targeted users/customers/visitors
- Use this data to edit/sketch out your initial designs
- Mock up in Photoshop/GIMP or HTML, whichever you prefer
- Build it
- Test out the design with live users/customers/visitors and correct it with recorded data (analytics, AB tests, and user interviews)
- Repeat as necessary
Drysdale recommends copying one characteristic from multiple sites/apps you like. Get inspiration for fonts on one site, colors on another, layout on a third site. The sum of the parts will make up your site.
The parts are:
- color schemes
- layout
- fonts
But be warned! Never copy:
- more than one element
- trademarks
- graphics (don't steal them, if license is ambiguous then ask)
- fonts (don't steal them, license them)
For logos, just try writing your brand in multiple fonts and different colors. Try a lot of variations until one clicks.
Be realistic with your lighting. All gradients and drop shadows should go the same direction on a page/app. Gradients should always stick to the same hue, just use different shades.
Make sure your icons match. Don't use realistic icons in one place and vector icons in another.
Some easy wins:
- use screenshots for graphics, graphics break up the page and help with pacing
- use icon sets, customize them a bit
- use stock photos that aren't cheesy
- clickable elements should look clickable, add some depth
- show feedback on user action
- use visual cues to indicate action (red for bad, green for good)
When you look over your design, make sure it passes these tests:
- readability
- visual hierarchy
- balance
- alignment
- compare it against another design you like