Aesthetic principles

Get Started. It's Free
or sign up with your email address
Rocket clouds
Aesthetic principles by Mind Map: Aesthetic principles

1. Structure

1.1. Grid systems

1.1.1. Ratio, # columns, gutters, margins, horizontal/vertical.

1.1.2. Create hierarchy, build a foundation for order.

1.1.3. Organization: grids as a framework for content, allowing easy and consistent access. (-> usability!)

1.1.4. Movement: alignments and spacing choices to create a sense of time or direction, to link between information sets, and to engage.

1.1.5. Grouping: placement, proximity, and similarity to create a context for content.

1.2. Hierarchy

1.2.1. Ordering of information sets to make relative importance evident.

1.2.2. 1) Overview, 2) Detailed consumption

1.2.3. Color, position, spacing, etc

1.2.4. Alleviates map shock and information overload.

1.2.5. Turns streams of data into positive experiences.

2. Legibility

2.1. Color

2.1.1. RGB, HSV

2.1.1.1. http://vanderlee.github.io/colorpicker/

2.1.1.2. http://edutechwiki.unige.ch/en/Computer_colors_tutorial

2.1.1.3. http://paletton.com

2.1.2. Color matching game

2.1.3. Color contrast check online

2.2. Contrast

2.2.1. Orientation, position, shape, size, texture, weight

2.2.2. Tips: Try grayscale, use one (or few) types of contrast at a time, use also stability (as a contrast to contrast)

2.3. Typography

2.3.1. Readers recognize shapes of words.

2.3.1.1. http://type.method.ac/

2.3.2. Display fonts vs. text fonts

2.3.3. Font weight: form vs. counterform ratio

2.3.4. x-height to cap-height ratio

3. Design genres/languages

3.1. Skeuomorphic design

3.2. Flat design

3.3. Material design