Tweet
Tweet

Slide 1

Slide 1 text

design principles II

Slide 2

Slide 2 text

1. dominance 2. unity & continuation 3. proportion design principles

Slide 3

Slide 3 text

dominance

Slide 4

Slide 4 text

dominance emphasis / visual weight

Slide 5

Slide 5 text

dominance emphasis and focus created via layout of content blocks and visual elements assignment of importance levels underpinning visual hierarchy and focusing user attention dominant sub-dominant subordinate stages of dominance element/s with strongest visual emphasis, focal point element/s with second strongest visual emphasis element/s given least visual focus/weight elements in the foreground will have more dominance than elements positioned in the middle or background size and weight of elements will contribute to dominance and visual emphasis desaturated colour / light shades will appear less dominant than satured and rich tones textures will influence the dominance of each element via their perceived visual weight lines and direction can create perspective / dominance while leading the eye and focus attention POSITION SIZE COLOUR / SHADE TEXTURE LINE

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

unity & continuation

Slide 14

Slide 14 text

unity & continuation wholeness/variety

Slide 15

Slide 15 text

unity & continuation sense of order / wholeness by consistency clarity and structure for harmonious and meaningful visual appeal underpinning visual hierarchy and focusing user attention continuance closure similarity/proximity methods presentation of elements to guide user’s eye suggested meaning by grouping of elements via line/shape/form connection of element/s via similarity or vicinity of position elements spaced / aligned / positioned consistently within layout, with or without variety size and weight of elements distributed to create a sense of completeness grouping of elements by colour / tone / shade for easy recognition of linked meaning / purpose / function POSITION SIZE COLOUR / SHADE

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

proportion

Slide 20

Slide 20 text

proportion relation in scale

Slide 21

Slide 21 text

proportion sense of emphasis / importance via comparison of scale supports definition of layout / symmetry / visual weight underpinning visual hierarchy and focusing user attention position / direction / angle to guide user eye size and comparative scale to enhance emphasis / focus enhancement of proportion via saturation POSITION SIZE COLOUR / SHADE

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

image credits feature image: “Dot”, A4 Paper Festival, © biancachang.com photo: staircase, Portugal © Eke Miedaner via Flickr photo: Olivetti Complex, Tokyo, Japan, 1972 (Kenzo Tange) via fuckyeahbrutalism.tumblr.com photo: giant chair, Natsworthy, Dartmoor, via fotothing.com site references nest.com unfold.no nickyandcookie.com griplimited.com mailchimp.com carsonified.com teamtreehouse.com

Slide 26

Slide 26 text

Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea