Tweet
Tweet

Slide 1

Slide 1 text

in web design composition

Slide 2

Slide 2 text

1. emphasis & focus 2. a/symmetry 3. leading lines 4. rule of thirds composition

Slide 3

Slide 3 text

emphasis & focus design aspects draw attention guide user focus aspect ratio to enhance impact singular element grouping of mutiple elements colour schemes & balance light & contrast use of icons / images typography

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

• foreground • direction • prominence • size • focus

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

• foreground • direction • prominence • size • focus • position • colour • prominence • space • focus

Slide 8

Slide 8 text

the need for focus ~ example: Readability

Slide 9

Slide 9 text

a/symmetry design aspects visual balance between text & images content structure & page layout offset of symmetric/asymmetric form symmetric associated with: simple, familiar, mimic of nature in extremes considered: less natural, clinical/steril, artificial asymmetric associated with: organic, dynamic, engaging in extremes considered: restless, chaotic, confusing

Slide 10

Slide 10 text

M.C.Escher

Slide 11

Slide 11 text

= copies of element re!lected to create a mirror opposite reflection symmetry

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

rotational symmetry = copies of element rotated around a set point

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

translational symmetry = copies of element o!fset while maintaining general orientation/ratio

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

leading lines design aspects size / prominence angle / perspective direction / path line / form colour balance / brightness & contrast influence user focus guide attention sequentially present narrative / tell a story enhance usability

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

rule of thirds design aspects rhythm & alignment grid & scale colour balance / brightness & contrast type setting content placement equal division by 3, vertically & horizontally lines/intersections as reference setting purposeful focal points visual balance & dynamic adding meaning

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

interpretive direction of movement / line, facing le!t: walking away / going backwards / back in time / retropsect

Slide 29

Slide 29 text

interpretive direction of movement/line, facing right: walking on / going forward / into the future / optimism

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

image credits: photo: penguins, Antartica, © David Doubilet, via guardian.co.uk street art (hand), German street artist Tasso, via thisiscolossal.com photos: daffodil, bench © Laura Moreno, lauramoreno.co.uk fashion photo, Mark Shaw for Vanity Fair, 1953, via whodesignedit.net symmetric drawings, M.C.Escher, mcescher.com photo: water snake, via contemporary-art-blog.tumblr.com High Speed Liquid and Bubble Photograph © Heinz Maier, via thisiscolossal.com photo: Chicago's art Institute © John Crouch 2004-2011, crouchphotos.com Corvette ad, 1967, via Gimmebar, sixties.twoday.net Design Chapel, design 2002, Robert Lindström, designchapel.com photo: bobbed hair, 1920, Louise Brooks, via pinterest.com site references Analog - analog.coop A List Apart (alistapart.com) & Readability (readability.com) Simon Collison - colly.com Vlog.it, Marco Rosella - vlog.it Amazee Labs, designed by Mike Kus - amazeelabs.com Square Space, squarespace.com Jason Santa Maria, jasonsantamaria.com Silverback, by ClearLe"t - silverbackapp.com “Inquirer”, design sample by Ethan Marcotte, alistapart.com : responsive web design

Slide 33

Slide 33 text

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