192
DIGITAL DESIGN POWER-UPS! 20.03.2014 Kim Bjørn Head of Digital Design Ekstra Bladet twitter.com/designchefen

Digital Design Power-ups!

Embed Size (px)

DESCRIPTION

Presentation held at annual Digital Days at Business Academy Aarhus.

Citation preview

Page 1: Digital Design Power-ups!

Digital Design Power-uPs!

20.03.2014

Kim BjørnHead of Digital Design

Ekstra Bladettwitter.com/designchefen

Power-u

Page 2: Digital Design Power-ups!

Curiosity ...

Page 3: Digital Design Power-ups!

not interactionbut reaction ...

Page 4: Digital Design Power-ups!
Page 5: Digital Design Power-ups!

Design is more about observing the world around you, than about personal creativity.

Cam Shaw

Page 6: Digital Design Power-ups!
Page 7: Digital Design Power-ups!
Page 8: Digital Design Power-ups!

Make it easy!Experiencing stuff & finding stuff

Page 9: Digital Design Power-ups!
Page 10: Digital Design Power-ups!
Page 11: Digital Design Power-ups!
Page 12: Digital Design Power-ups!
Page 13: Digital Design Power-ups!
Page 14: Digital Design Power-ups!
Page 15: Digital Design Power-ups!
Page 16: Digital Design Power-ups!
Page 17: Digital Design Power-ups!
Page 18: Digital Design Power-ups!
Page 19: Digital Design Power-ups!
Page 20: Digital Design Power-ups!
Page 21: Digital Design Power-ups!
Page 22: Digital Design Power-ups!
Page 23: Digital Design Power-ups!
Page 24: Digital Design Power-ups!
Page 25: Digital Design Power-ups!
Page 26: Digital Design Power-ups!
Page 27: Digital Design Power-ups!

navigation

ChoicesPurposeMinimalNormality

Page 28: Digital Design Power-ups!
Page 29: Digital Design Power-ups!
Page 30: Digital Design Power-ups!
Page 31: Digital Design Power-ups!
Page 32: Digital Design Power-ups!
Page 33: Digital Design Power-ups!
Page 34: Digital Design Power-ups!
Page 35: Digital Design Power-ups!

radiate thecore essence!

Page 36: Digital Design Power-ups!
Page 37: Digital Design Power-ups!
Page 38: Digital Design Power-ups!
Page 39: Digital Design Power-ups!

Design is thinking made visual.

Soul Bass (1920-1996)

Page 40: Digital Design Power-ups!
Page 41: Digital Design Power-ups!
Page 42: Digital Design Power-ups!
Page 43: Digital Design Power-ups!
Page 44: Digital Design Power-ups!
Page 45: Digital Design Power-ups!
Page 46: Digital Design Power-ups!
Page 47: Digital Design Power-ups!
Page 48: Digital Design Power-ups!
Page 49: Digital Design Power-ups!
Page 50: Digital Design Power-ups!
Page 51: Digital Design Power-ups!
Page 52: Digital Design Power-ups!

85de fire designparametre · smukkere grafisk design

Fotografiet her til højre har jegreduceret til nogle få streger itegningen yderst til højre. Dethar jeg gjort for at vise dig, atdet ændrer grundform frahovedsageligt en firkant til(nedenunder) en firkant meden oval, der fylder kvadratethelt ud. Den runde form blivermed andre ord mere domine-rende i den beskårne udgave.

Det har betydning når duvurderer dine fotos i sammen-hæng med designets andreelementer. Se nogle eksemplerpå næste opslag.

Læg mærke til at formen ændrer sig,når du beskærer et foto

Page 53: Digital Design Power-ups!

tHe Power oF3

Page 54: Digital Design Power-ups!

3

LevelsColorsFontsizesVerticalsHorisontalsOptions

Page 55: Digital Design Power-ups!

Priority

Perceptual layersTimeliningContrastsGestalt

Page 56: Digital Design Power-ups!
Page 57: Digital Design Power-ups!
Page 58: Digital Design Power-ups!
Page 59: Digital Design Power-ups!
Page 60: Digital Design Power-ups!
Page 61: Digital Design Power-ups!
Page 62: Digital Design Power-ups!
Page 63: Digital Design Power-ups!
Page 64: Digital Design Power-ups!
Page 65: Digital Design Power-ups!
Page 66: Digital Design Power-ups!
Page 67: Digital Design Power-ups!
Page 68: Digital Design Power-ups!
Page 69: Digital Design Power-ups!
Page 70: Digital Design Power-ups!
Page 71: Digital Design Power-ups!
Page 72: Digital Design Power-ups!
Page 73: Digital Design Power-ups!
Page 74: Digital Design Power-ups!
Page 75: Digital Design Power-ups!
Page 76: Digital Design Power-ups!
Page 77: Digital Design Power-ups!
Page 78: Digital Design Power-ups!

Colors

HarmonyContrastFunctionalityIdentity

Page 79: Digital Design Power-ups!
Page 80: Digital Design Power-ups!
Page 81: Digital Design Power-ups!
Page 82: Digital Design Power-ups!
Page 83: Digital Design Power-ups!
Page 84: Digital Design Power-ups!
Page 85: Digital Design Power-ups!
Page 86: Digital Design Power-ups!
Page 87: Digital Design Power-ups!
Page 88: Digital Design Power-ups!
Page 89: Digital Design Power-ups!
Page 90: Digital Design Power-ups!
Page 91: Digital Design Power-ups!
Page 92: Digital Design Power-ups!
Page 93: Digital Design Power-ups!
Page 94: Digital Design Power-ups!
Page 95: Digital Design Power-ups!
Page 96: Digital Design Power-ups!
Page 97: Digital Design Power-ups!
Page 98: Digital Design Power-ups!
Page 99: Digital Design Power-ups!
Page 100: Digital Design Power-ups!

Rød

Agression, ophidselse, høj aktivitet, dynamik, vinder, leder, krig, energi, styrke, kærlighed, passion, erotik.

Øger blodtryk og åndedrætsfrekvens.

Bringer elementer til forgrunden.

Til aktive elementer som “Køb!”, “Klik her” ...

Page 101: Digital Design Power-ups!

Orange

Opmuntrende, optimisme, livsglæde, solskin, fascination, entusiasme, succes, stimulation, helse, ungdommelig.

Stimulerer mental aktivitet og appetit.

Øger iltoptagelsen.

Bringer elementer til forgrunden.

Page 102: Digital Design Power-ups!
Page 103: Digital Design Power-ups!

typography

SimplicitySpaceSizes

Page 104: Digital Design Power-ups!
Page 105: Digital Design Power-ups!
Page 106: Digital Design Power-ups!
Page 107: Digital Design Power-ups!
Page 108: Digital Design Power-ups!
Page 109: Digital Design Power-ups!
Page 110: Digital Design Power-ups!
Page 111: Digital Design Power-ups!

Changedemandsattention!

Page 112: Digital Design Power-ups!

Change

Responsive design, breakpointsLandscape vs. portraitParallax scrollingRollover vs. touch (userfeedback or -info: when to know what to do)You as the designer respond to change

Page 113: Digital Design Power-ups!

landscape portrait

Page 114: Digital Design Power-ups!
Page 115: Digital Design Power-ups!
Page 116: Digital Design Power-ups!
Page 117: Digital Design Power-ups!
Page 118: Digital Design Power-ups!
Page 119: Digital Design Power-ups!
Page 120: Digital Design Power-ups!
Page 121: Digital Design Power-ups!
Page 122: Digital Design Power-ups!
Page 123: Digital Design Power-ups!
Page 124: Digital Design Power-ups!

less is more ...

Page 125: Digital Design Power-ups!

less is more

Flat vs. skeumorphic UIMicro-uxCSSFrameworks

Page 126: Digital Design Power-ups!
Page 127: Digital Design Power-ups!
Page 128: Digital Design Power-ups!
Page 129: Digital Design Power-ups!
Page 130: Digital Design Power-ups!
Page 131: Digital Design Power-ups!
Page 132: Digital Design Power-ups!
Page 133: Digital Design Power-ups!
Page 134: Digital Design Power-ups!
Page 135: Digital Design Power-ups!
Page 136: Digital Design Power-ups!

A designer knows she has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

Antoinè De Saint-Exupéry

Page 137: Digital Design Power-ups!
Page 138: Digital Design Power-ups!
Page 139: Digital Design Power-ups!
Page 140: Digital Design Power-ups!
Page 141: Digital Design Power-ups!
Page 142: Digital Design Power-ups!
Page 143: Digital Design Power-ups!
Page 144: Digital Design Power-ups!
Page 145: Digital Design Power-ups!

Making the simple complicatedis commonplace ...... making the complicated simple,awesomely simple, that’s creativity.

Charles Mingus

Page 146: Digital Design Power-ups!
Page 147: Digital Design Power-ups!
Page 148: Digital Design Power-ups!
Page 149: Digital Design Power-ups!
Page 150: Digital Design Power-ups!
Page 151: Digital Design Power-ups!
Page 152: Digital Design Power-ups!
Page 153: Digital Design Power-ups!
Page 154: Digital Design Power-ups!
Page 155: Digital Design Power-ups!

think big,sketch small

Page 156: Digital Design Power-ups!
Page 157: Digital Design Power-ups!

Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep.

Scott Adams · ‘The Dilbert Principle’ US cartoonist (1957-)

Page 158: Digital Design Power-ups!
Page 159: Digital Design Power-ups!

Make it easy for yourself!Tools ...

Page 160: Digital Design Power-ups!
Page 161: Digital Design Power-ups!
Page 162: Digital Design Power-ups!
Page 163: Digital Design Power-ups!
Page 164: Digital Design Power-ups!
Page 165: Digital Design Power-ups!
Page 166: Digital Design Power-ups!
Page 167: Digital Design Power-ups!
Page 168: Digital Design Power-ups!
Page 169: Digital Design Power-ups!
Page 170: Digital Design Power-ups!
Page 171: Digital Design Power-ups!
Page 172: Digital Design Power-ups!
Page 173: Digital Design Power-ups!
Page 174: Digital Design Power-ups!
Page 175: Digital Design Power-ups!
Page 176: Digital Design Power-ups!
Page 177: Digital Design Power-ups!
Page 178: Digital Design Power-ups!
Page 179: Digital Design Power-ups!
Page 180: Digital Design Power-ups!
Page 181: Digital Design Power-ups!
Page 182: Digital Design Power-ups!
Page 183: Digital Design Power-ups!
Page 184: Digital Design Power-ups!
Page 185: Digital Design Power-ups!
Page 186: Digital Design Power-ups!
Page 187: Digital Design Power-ups!
Page 188: Digital Design Power-ups!

it’s not about how.it’s about why and when.

Page 189: Digital Design Power-ups!
Page 190: Digital Design Power-ups!
Page 191: Digital Design Power-ups!
Page 192: Digital Design Power-ups!

Design is making choices

Skill is know-how ...Excellence is making the right choices ...

Why should the user spend time here?Why should they bother?Why choose THOSE colors/fonts/etc?When should you use what?