# Design notes

Principals:

1. Content
2. Size & Spacing
3. Colour
4. Type
5. Motion

> Paragraphs in quotes are implementation notes, specific to web.

## Content

Content dictates all other design considerations.

Using semantic markup will allow you to create content first and allow that
to influence subsequent guidelines.

When authoring content it is recommended to break up large sections of text with images.
Even if not directly relevant to the context,
images and illustrations can act as visual guidance to a user who is quickly scrolling through the content.

## Spacing

The use of grids and columns provides uniformity. Invisibile grid lines can help frame and group similar content
without appearing imposing or constrictive (just look at the gist editor - all the elements line up against
an invisible line each side of the screen).

> In Component-based design, 'grid margins' can be specified as padding on the parent element,
> allowing child components to be re-usable.

A basic grid system uses columns & rows, gutters and margins:

- Margins are the spacing to the left and right, top and bottom of a container (e.g. padding)
- Rows and columns contain the actual content. Such content can span many or all of the columns or rows.
- Gutters are the uniform gaps between rows and columns. Gutters provide the spacing between content within a grid.

The size of margins and gutters is dictated by the type of content; similar content can use small gutters
(e.g. a photo gallery), whilst dissimilar content should use larger gutters (e.g. two distinct calls to action).

> `rem` is the font size of the Root Element - typically 16px by default for most browsers.
> Stick to multiples of REM for web content, e.g. `0.5rem`, `1rem`, `2rem`, `4rem`.
> Setting base font size to 62.5% forces `1rem` to equal `16px` on most browsers, whilst retaining accessible scaling.
> Assume that all child elements by default have no margin or padding of their own.

Spacing should compliment the content, not restrict it.

Size should be dictated by the relative importance of the content, but spacing should always be consistent for any logical section.

## Colour

Colour is a language and comes steeped with meaning in various cultures. Less is more; one or two colours makes for a clean design.
Conversely, a "busy" palette can detract from content.

Colours should be available in a variety of hues (variations) to ensure it doesn't over-power the content in any given scenario.
Variations can be employed to delimit sections.

Avoid cutting between themed colours to high-contrast elements if you can avoid it.
For example, on a dark coloured screen, a text input can be seethrough with white text and
a white border instead of the default white background, black text.
This is a good approach for fading less-important features such as a search bar.

## Type

Type should be weighted with concern to both importance and interaction.
Any spacing around text, regardless of size, should conform to the rest of the spacing strategy.

Consider small-caps for buttons and interaction, strong text for key or mutable data, italic for asides and captions.

## Motion

Whilst not mandatory for UX, motion can complement a good design by making it more appealing and hilighting key aspects of a UI.

Motion should be employed if there are events in the UI that would otherwise cause a "snap" or "pop".
For example when a page's content is dynamically rendered a few seconds after the chrome renders, it is
a more pleasing behavior to have it fade in (or slide in) gently instead of exploding instantly onto the screen.

Motion should restrict it's self to only one dimension and be consistent amongst all related elements.

_Motion feels most natural when `ease-in` or `ease-in-out` transition timings_

Hover animations are redundant on touch-screen devices, but can be useful in limited circumstances to attract the attention of a call-to-action.