Visual Design Theory: Magazine

56
Visual Design theory Merel Grim 1576447 VDT klas 3 2012/2013 NR. 01 / OKT ‘12

description

A school project

Transcript of Visual Design Theory: Magazine

Page 1: Visual Design Theory: Magazine

Visual Design theory

Merel Grim

1 5 7 6 4 4 7

VDT klas 3

2012/2013

NR. 01 / OKT ‘12

Page 2: Visual Design Theory: Magazine

02

Cover Foto, bron: Pinterest.com maker: onbekend; Boven Afbeelding, bron: Tumblr.com, maker: onbekend

Page 3: Visual Design Theory: Magazine

03

Afbeelding, bron: Brycewilner.com, maker: Bryce Wilner

Page 4: Visual Design Theory: Magazine

04

editorial

P.26

Voor je heb je de eindopdracht voor het vak

Visual Design Theory gemaakt door Merel

Grim. Het geheel is, zoals je waarschijnlijk

al was opgevallen, in een e-magazinevorm

gegoten. Alle zes de opdrachten en het

interview zijn erin verwerkt.

Om het blad op te vullen én vrolijken

(opvrullijken?) heb ik her en der visuals

toegevoegd. Dit zijn plaatjes die ik

interessant, knap gemaakt, mooi en/ of

inspirerend vind. Beschouw ze als een

aanvulling op de eerste opdracht ‘Eigen

smaak / Ontwerp van nu’ en als een kijkje in

de wereld die ik esthetisch interessant en

aangenaam vind. Ik heb getracht de namen

van de makers erbij te plaatsen, echter deze

waren niet altijd vindbaar. De bron staat wel

vermeld. Ik geef deze informatie trouwens in

het roze balkje.

Deze om precies te zijn.

Dat is ook meteen het object waar je de

opvul-visuals aan kunt herkennen. Verder

wens ik je veel kijk- en leesplezier en bovenal

veel succes met nakijken!

P.06

P.11

Page 5: Visual Design Theory: Magazine

05

inhoudOpdracht 1: Eigen smaak / Ontwerp van nu

Opdracht 2: Eigen werk

Opdracht 3: Open source idee

Opdracht 4: XminY - Poster design

Interview met: Jet van Zwieten

Opdracht 5: Goed ontwerp / Slecht ontwerp

Opdracht 6: Guiding / Flow

06

P.22

“Grafisch design is tegenwoordig niet meer zo afgebakend. Het heeft veel flirts met kunst, mode en zelfs schrijven.”

P.32

P.11

1122

2632

3844

Page 6: Visual Design Theory: Magazine

06

opdracht 1Je eigen smaak

• wat vind jij mooi /

opwindend visual design?

• wat vind jij typisch

ontwerp van nu?

• presenteerbaar formaat

(wat is dat?)

OPDRACHT

Ik houd van strakke lijnen en heldere/ koele kleuren. Ik vind het contrast tussen strak en chaotisch/ druk interessant (zoals o.a. de poster van Metric met de gloeilamp). Ook vind ik een dubbele laag en/of betekenis in een ontwerp heel erg gaaf, zoals bijvoorbeeld de gitaar in mijn collage. Als je goed kijkt zie je dat hij o.a. bestaat uit een schilderkwast en emmer verf. De illustratie is namelijk onderdeel van een poster voor een muziek- en

kunstevenement.

Typisch ontwerp van nu (te zien aan de rechterkant van mijn collage) vind ik: geometrische vormen en het gebruik van ‘retro’-ontwerp en dito typografie.

INTERPRETATIE

Page 7: Visual Design Theory: Magazine

07

Ontwerp

vannu Eigen Smaak

Page 8: Visual Design Theory: Magazine

08

Afbeelding, bron: Yonil.com, maker: Jonathan Lax

Page 9: Visual Design Theory: Magazine

09

Afbeelding, bron: Adsimpson.com, maker: Ad Simpson

Page 10: Visual Design Theory: Magazine

10

Afbeelding, bron: Tumblr.com, maker: Javier Pinon

Page 11: Visual Design Theory: Magazine

opdracht 2 eigenwerk

Je eigen werk

• werk in stage

• werk in opdracht

• werk voor CMD

• vrij werk

• presenteerbaar

OPDRACHT

11

je

Page 12: Visual Design Theory: Magazine

12

01 SCHOOL

02 FREELANCE

03 STAGE

04 OVERIG

INTERPRETATIE

1

2

3Logo design “Sandbox”. In opdracht van Ordina. Sandbox is een ‘proeftuin’ voor innovatieprojecten in de ICT.

Logo design voor projectgroep ‘Meaw’.

Web design voor ‘Second Chance’, een fictief tv-programma.

Infographic over waterzuiveringsproces. In opdracht van BrabantWater.

R2D2 in 3D, gemaakt in Cinema4D.

Logo design voor mijzelf, gemaakt in jaar 1.

2

3

1

4

5

6

Page 13: Visual Design Theory: Magazine

13

4

5

6

Page 14: Visual Design Theory: Magazine

14

01 SCHOOL

02 FREELANCE

03 STAGE

04 OVERIG

Logo design voor Lieneke Derks Communicatie.

Logo design voor Derks Woord & Beeld Communicatie.

4 x Gevelborden voor Kinderopvang de Boterbloem. Wegens geldtekort zijn ze nooit geplaatst en is het bij deze schets gebleven.

Flyer/ uitnodiging voor het ‘senioren toernooi 2010 van Hockeyclub Oirschot.

2 x Logo design voor cabaretgroep ‘Niettemin.’ Leuk detail: ik bedacht ook de naam.

INTERPRETATIE

1

2

33

1

4

5

2

Page 15: Visual Design Theory: Magazine

15

4

5

Page 16: Visual Design Theory: Magazine

16

01 SCHOOL

02 FREELANCE

03 STAGE

04 OVERIG

Promotieplaatjes zoals deze heb ik tijdens mijn stage een hoop gemaakt voor HiPP Bio Babyvoeding.

De Peugeot persnieuwsbrief, die iedere maand naar honderden media wordt verzonden, is door mij ontworpen!

Persbericht voor WaarSchijntDeZonWel.nl. Is in A3-formaat verzonden naar verschillende mediaredacties.

Uitnodiging voor de expositie van het werk van illustrator Will Broome. Ter promotie van autoverzekering ‘Onna-Onna’.

INTERPRETATIE

1

2

2

3

1

4

Page 17: Visual Design Theory: Magazine

17

3

4

Page 18: Visual Design Theory: Magazine

18

01 SCHOOL

02 FREELANCE

03 STAGE

04 OVERIG

Mijn CV, gemaakt om te solliciteren voor stages vorig jaar.

Mijn website, eveneens gemaakt om te solliciteren voor stages vorig jaar.

INTERPRETATIE

1

2

1

Page 19: Visual Design Theory: Magazine

19

2

Page 20: Visual Design Theory: Magazine

20

Afbeelding, bron: Pinterest.com, maker: Mark Weaver

Page 21: Visual Design Theory: Magazine

21

Afbeelding, bron: Humanempireshop.com, maker: Bianca Gomez

Page 22: Visual Design Theory: Magazine

22

opdracht 3OPEN SOURCE

Open Source

• We gaan (in een sessie van twee uur) nadenken / conceptualiseren / ontwerpen aan een methode voor open source visual design werk in opdracht

• uitvoeren per intervisiegroepje

• Bedenk een plan (schetsmatig).

• Ontwerpmethode. hoe wordt er ontworpen? Hoe voegen gebruikers iets toe? wat kun je veranderen, verbeteren, manipuleren, downloaden, openen?

• Hele ontwerpproces? Of een deel ervan?

• Kwaliteitsbewaking. Hoe zorgen we ervoor dat goede verbeteringen doorgevoerd worden? Hoe blijven we verschoond van rommel?

• Verdienmodel. hoe worden we er rijk van? Als beheerders van het concept, maar ook als deelnemend designer.

• Rapporteer jullie concept op de blog

• Visualiseer zelf jullie bevindingen en idee!

• Becommentarieer elkaars visualisatie.

OPDRACHT

Brush vitamin

Tijdens de brainstorm kwamen mijn intervisiegroepje en ik uit op een open source-tool voor Photoshop-brushes. Een online database waar brushes te up- en downloaden zijn. Door de mogelijkheid te bieden aan de gebruikers ontwerpen van anderen te ‘improven’ maken we het geheel 100% open source.

OntwerpmethodeOntwerpers maken zelf een brush, of gebruiken de converter van de website om een brush te maken. De converter biedt de mogelijkheid om van een .eps-bestand een Photoshop-brush te maken.

Gebruikers hebben de mogelijkheid om brush-ontwerpen van anderen te verbeteren. Door te klikken op de ‘improve-knop’ downloaden ze een bewerkbaar bestand, wat later weer (‘improved’) geüpload kan worden. Beide ontwerpen blijven beschikbaar op de site, maar blijven aan elkaar gelinkt.

INTERPRETATIE

KwaliteitswaarborgOm de kwaliteit te waarborgen is er aan elk ontwerp een plus-knop en een min-knop gekoppeld. Gebruikers van de site kunnen op deze manier een goed ontwerp waardering geven en het tegenovergestelde doen met een slecht ontwerp.

Wanneer een upload ver in de min staat, laten we zeggen -25; wordt het ontwerp van de site verwijderd. Een plus heft een min op en andersom; dit om te voorkomen dat een ontwerp hoog in de plus en tegelijk laag in de min komt te staan.

Ook wordt de kwaliteit gemeten aan de hand van het aantal downloads. Wanneer een ontwerp na twee maanden nul keer is gedownload, wordt het van de site verwijderd.

VerdienmodelOm ook nog wat aan het geheel te verdienen leek het ons handig om limieten aan de downloads te hangen. Wanneer een gebruiker zich aanmeldt bij de site krijgt hij maandelijks 5 maal downloadtegoed.

Page 23: Visual Design Theory: Magazine

23

Er is een Goldmembership te koop als er behoefte is aan meer dan 5 downloads per maand. Een Goldmember kan voor een bepaald bedrag per maand onbeperkt downloaden.

Uploaden is in alle gevallen gratis.

Om de site levendig te houden leek het ons slim om gewaardeerde ontwerpers te belonen. Wij bedachten het systeem om ontwerpers

te belonen per 10 keer dat hun ontwerp gedownload wordt. Er wordt dan beloond met eenmalig 1 keer downloadtegoed. Zo verdient de ontwerper ook aan de site.

Er wordt een blog aan de website gekoppeld waar gebruikers hun creaties, gemaakt met de gedownloade brushes, met elkaar kunnen delen. Dit is ook weer een middel om de site levendig te houden.

Het resultaat. Zo zou ‘Brush Vitamin’ eruit kunnen zien. Hier afgebeeld is de productpagina. De muis gaat over een van de brushes; waardoor de improve-functie zichtbaar wordt.

Brushvitamin

Page 24: Visual Design Theory: Magazine

24

Afbeelding, bron: Gelaskins.com, maker: Petit Collage

Page 25: Visual Design Theory: Magazine

25

Afbeelding, bron: Tanyajohnston.com, maker: Tanya Johnston

Page 26: Visual Design Theory: Magazine

26

opdracht 4Poster

designaktiegroep Xminy

x3

Page 27: Visual Design Theory: Magazine

opdracht 4

designaktiegroep Xminy

27

XminY

XminY is dringend op zoek naar donateurs uit een veel bredere doelgroep dan waar ze nu uit putten. Bekijk de nieuwe huisstijl (op sharepoint vind je de handleiding).

Bedenk een visueel concept voor eencampagne om nieuwe donateurs te werven uit de verbrede doelgroep.Presenteer deze in een drietal uitgewerkte schetsvoorstellen, met in ieder geval een duidelijke visuele uitspraak over de vormgeving van zo’n campagne. Bonuspunten zijn te verdienen met een bijzondere, speelse vorm voor de campagne.

Verzamel interessante, inspirerendevoorbeelden; maak schetsen op papier; probeer verschillende keuzes uit; laat je ontwerpstappen zien.

Duur: 3 weken (parallel aan andere, kleinere opdrachten in week 5 en 6). Volgende les eerste bespreking ideeën met je intervisiegroepje en met de docent.

Doelgroep (zoals ik die zie): VPRO, NRC, GroenLinks, SP, PvdA,Wittevrouwen /Vogelenbuurt, midden-tot hogere inkomens.

OPDRACHT

XminY Poster design

XminY zegt dat problemen het beste vanaf ‘onderop’ kunnen worden aangepakt. Ik heb dit willen verbeelden door de Nederlandse samenleving in gebouwen uit te drukken. Onderaan: woonhuis = burger, stadhuis = gemeente, het Binnenhof = Eerste en Tweede Kamer, Madoutoren (Brussel) = Europese Unie.

Ik heb er bewust voor gekozen om weinig informatie te geven. De poster moet prikkelen, de kijker nieuwsgierig maken.

De tekst “Onderaan begint het” heeft twee functies. Ten eerste hoop ik ermee de functie van het beeld te verduidelijken. Ten tweede probeer ik de blik van de kijker naar wat “onderaan” de poster staat te sturen: naar het ‘woonhuis/ de burger’. Het logo van XminY heb ik in de rechterhoek onderin geplaatst, omdat de kijker, die van links naar rechts en van boven naar onder leest, hopelijk bij het logo eindigt.

INTERPRETATIE

Resultaten op volgende pagina's!

Page 28: Visual Design Theory: Magazine

28

Page 29: Visual Design Theory: Magazine

29

Page 30: Visual Design Theory: Magazine

30

Page 31: Visual Design Theory: Magazine

31

Afbeelding, bron: Antonpearson.com, maker: Anton Pearson

Page 32: Visual Design Theory: Magazine

32

In mijn zoektocht naar een leuke visual designer om te interviewen kom ik via mijn huisgenoot uit bij Jet van Zwieten. Na het zien van haar portfolio ben ik direct enthousiast. Een week later spreek ik met haar af op haar werkplek.

interview

Jet van zwietenOntwerpmethoden

Jet vertelt me dat in de praktijk een goede briefing zeldzaam is. Klanten nemen contact met haar op maar weten vaak niet wat ze willen. Jet gaat dan met ze in gesprek en onderzoekt met hen de kern van het ‘probleem’, waarvoor ze naar haar toe zijn gestapt. Het komt dan bijvoorbeeld wel eens voor dat een klant realiseert dat het intern niet schort en er aan de visual identidy niets veranderd hoeft te worden.

Wanneer er uiteindelijk een briefing is gevormd begint Jet met schetsen, op papier. Zo komt ze op ideeën. Ook maakt ze gebruik van een aantal ‘inspiratie-dozen’. In deze dozen heeft Jet over de jaren heen beeld verzameld dat ze interessant vindt. Vervolgens gaat ze met de opdracht in kwestie in haar hoofd door die dozen bladeren en zoekt ze

beelden die erbij passen. Vaak haalt ze onderdelen uit zo’n beeld en gebruikt ze die in haar eigen ontwerp.

Vervolgens stuurt Jet een paar versies door naar de klant, deze kiest een versie, welke door Jet dan wordt uitgewerkt.

aan de klant” stelt Jet. Wanneer een klant een andere richting op wel met het ontwerp dan zij, dan vormen ze een compromis. Echter, Jet probeert altijd met argumenten de klant van haar mening te overtuigen. Het komt wel eens voor dat er iets uitkomt waar ze niet tevreden over is, maar de klant wel. Dan zit ze daar niet mee, maar plaatst ze het werk niet op haar website. “Gelukkig komt dat bijna nooit voor,” zegt Jet.

Goed ontwerp

Om te zorgen dat een werk goed communiceert, en communiceert wat de klant wil dat het communiceert test ze het op mensen in haar omgeving. Maar Jet stelt dat ze zelf de belangrijkste tester is. “Ik ben toch een getrainde kijker,” zegt Jet. Jet doet voorafgaand aan iedere opdracht onderzoek. Wie is de klant, wat doet hij, hoe ziet dat beroepsveld eruit? Ook kijkt ze naar wat de concurrent doet.

Visuele stijl

Jet heeft een duidelijke stijl. Ze maakt veel gebruik van collage’s in haar ontwerpen. Maar hanteert voor de huisstijlen en logo’s die ze ontwerpt een simpele, heldere stijl. Ze vindt het belangrijk dat haar werk mooi is, “iets wat je niet mooi vindt, stuur je ook niet door

“Iets wat je niet mooi vindt, stuur je ook niet door naar

de klant”

Page 33: Visual Design Theory: Magazine

33

Jet van Zwieten (Jetvanzwieten.nl) is een 27-jarige grafisch ontwerpster. Zij begon 10 jaar geleden aan de opleiding ‘man and communication’ Design Academy in Eindhoven. Na 1 jaar vond Jet de opleiding te divers en breed en deed ze toelating voor de grafische opleiding op de Willem de Koningacademie in Rotterdam, ze kon instromen in jaar 2. Na een jaar vond ze daar niet de uitdaging die ze zocht en besloot ze terug te gaan naar de Design Academy in Eindhoven. Hier kon ze weer instromen in jaar 3, waardoor ze geen tijd verloren heeft met haar switch en terugswitch.

In 2007 begon Jet naast haar studie haar eigen bedrijfje, bij wijze van bijbaantje. Na haar studie ging ze werken bij haar oud-stageadres. Ze bleef hiernaast opdrachten doen voor haar eigen bedrijf. Omdat ze steeds meer eigen opdrachten kreeg besloot ze in 2009 helemaal zelfstandig te worden.

Jet van Zwieten

Jet van zwietenRol ontwerper

“Kijk om je heen, alles is ontworpen” zegt Jet. “Natuurlijk heb je impact. Ook al ben je maar een kleine schakel in een geheel, dat wat je doet heeft raakvlakken met het dagelijks leven van mensen.” Daarnaast stelt Jet dat je als ontwerper kunt kiezen welke klanten je

Jet: “Ja, dat is vaak belangrijk maar er zijn veel uitzonderingen. Het vak ontwerp is tegenwoordig niet meer zo afgebakend. Het heeft veel flirts met kunst, mode en zelfs schrijven. Dan gaat het niet meer om verkopen maar meer over onderzoeken en je vakgebied verkennen. Het is dus net iets gecompliceerder dan dat. ”

aanneemt en welke niet. Als Jet niet achter het bedrijf van haar klant staat gaat ze niet met hen in zee. “Een nieuwe corporate identity voor Shell ontwerpen? Zou ik nooit doen omdat ik dat geen sympathiek bedrijf vindt. Je impact is niet groot, maar ook op kleine schaal kun je iets betekenen.”

Daarnaast vindt Jet het belangrijk om haar printwerk duurzaam te laten drukken en probeert ze haar klanten daar ook van te overtuigen.

Op de vraag ‘Moet ontwerp vooral verkopen?’ antwoordt

Toekomst visual design

Het vak is altijd in beweging volgens Jet, “visual design is heel erg onderheven aan mode en trends.” Sinds grafisch ontwerp niet meer intern gebeurt bij bedrijven maar van buitenaf moet komen is er een adviserende rol bijgekomen vindt Jet. “Heel veel ontwerpers nu, vooral van de academie, worden opgeleid tot extreem eigenwijze personen die de opdrachtgever aan de tand voelen. Ik weet niet of dat een goede ontwikkeling is, maar ik denk het wel omdat je met elkaar op zoek gaat naar kwaliteit.” Jet

“Visual design is heel erg onderheven aan mode en trends”

Page 34: Visual Design Theory: Magazine

34

interview

Vervolg

ziet in haar omgeving ook veel ontwerpers die teksten schrijven en fotograferen. “Zoals het vroeger was, dat een design moest verkopen of communiceren dat verandert langzaam. Je merkt ook dat er een scène aan het ontstaan is van ontwerpers die eigenlijk alleen maar werk maken dat andere ontwerpers ook snappen.” Jet vindt dit raar en beschouwt het eigenlijk niet meer als grafisch ontwerp, “het is meer conceptuele kunst”. Echter, ze veroordeelt het niet, “dat zijn wel de mensen die voor vernieuwing zorgen.”

De toekomst van Jet zelf?

“Ik zou het niet weten, en dat vind ik voor mezelf heel prettig dat ik dat niet weet.” Jet doet tegenwoordig ook vaker wat interieurklussen. “Ik doe dan meer de grafische dingen: routing, kleuren bepalen, materialen kiezen. Het helpt dat ik daarover veel geleerd heb op de Design Academy.” Ze redeneert dat als er daar ineens meer werk in is, ze misschien meer die richting in zal gaan.

de stijl van jet

held

er

Page 35: Visual Design Theory: Magazine

35

de stijl van jetco

llag

e

Page 36: Visual Design Theory: Magazine

36

Afbeelding, bron: Pinterest.com, maker: Budi Satria Kwan

Page 37: Visual Design Theory: Magazine

37

Afbeelding, bron: Fleck.bigcartel.com, maker: Fleck

Page 38: Visual Design Theory: Magazine

38

Opdracht 5:

Goed ontwerp/ slecht ontwerp

Verzamel een aantal voorbeelden van visueel ontwerp, zowel online als offline, dat zich zeer goed (minstens 3) of juist niet (minstens 1) aan de richtlijnen uit het college houdt.

Wat zijn de gevolgen? Hoe had de ontwerper het beter kunnen doen?

OPDRACHT

Zoek voorbeelden uit je eigen werk, met name uit stage en huidig ontwerpwerk bij parallelvakken en project, waarin je de richtlijnen zeer goed (minstens 1 voorbeeld) of juist niet goed (minstens 1 voorbeeld) toepast. Stel verbeteringen voor en visualiseer die.

Goed: Ebay logo redesign, less is more

Ebay heeft haar logo aangepast (maar nog niet doorgevoerd). Van veel onnodige poespas, breedte- en hoogteverschillen in de typografie, naar een heel simpel, clean logo. Less is more!

INTERPRETATIE

goed/slechtontwerp ontwerp

Page 39: Visual Design Theory: Magazine

39

Goed: 99Traveltips, duidelijk grid

De designer van de site 99Traveltips heeft wel degelijk met een grid gewerkt toen hij dit ontwerp maakte. Ook heeft hij/ zij goed opgelet tijdens ‘grid-les’, want, volgens het boekje, wordt het grid doorbroken door de titel van de website.

INTERPRETATIE

Slecht: AD.nl, grid gone wrong

AD.nl is een vreselijk lelijke en onduidelijke site. Er wordt een grid gebruikt maar niet op de juiste manier. De hiërarchie en ‘flow’ zijn niet duidelijk aanwezig; alles schreeuwt om aandacht. Op deze manier lijkt het alsof alle onderdelen even

INTERPRETATIE

Goed: Poster, magnetisme

Heel duidelijk waar te nemen op deze poster: de cirkels zijn net ogen.

INTERPRETATIE

goed/slecht

Page 40: Visual Design Theory: Magazine

40

Goed/Slecht

Goed: Geslotenheid in het logo

Als het goed is maakt de kijker in zijn hoofd de letter W, welke deels uit de cirkel valt, af.

INTERPRETATIE

Slecht: Een strak stramien, maar waar is de griddoorbrekende titel?

Nu ik met deze nieuwe inzichten naar deze poster kijk zie ik dat ik best het strakke grid had mogen doorbreken door de titel wat te verbreden.

Op de pagina hiernaast zie je de verbeterde versie.

INTERPRETATIE

eigenwerk

Page 41: Visual Design Theory: Magazine

41

INTERPRETATIE

Kijk, Nu nogBeter!

Page 42: Visual Design Theory: Magazine

42

Afbeelding, bron: Christofferrelander.com, maker: Christoffer Relander

Page 43: Visual Design Theory: Magazine

43

Afbeelding, bron: Sammyslabbinck.bigcartel.com, maker: Sammy Slabbinck

Page 44: Visual Design Theory: Magazine

44

guiding

Verzamel een aantal voorbeelden

van visueel ontwerp dat zich zeer

goed (minstens 4) of juist niet

(minstens 2) aan de richtlijnen

uit de colleges 6 en 7 houdt. Wat

zijn de gevolgen? Hoe had de

ontwerper het beter kunnen doen?

Zoek voorbeelden uit je eigen OP

DR

AC

HT

/flowwerk, met name uit stage en

huidig ontwerpwerk bij

parallelvakken en project, waarin je

de richtlijnen zeer goed (minstens

1 voorbeeld) of juist niet goed

(minstens 1 voorbeeld) toepast.

Stel verbeteringen voor en

visualiseer die.

opdr

acht

6

Page 45: Visual Design Theory: Magazine

45

Goed: Dropbox.com

Guiding/ Call to actionDropbox heeft een duidelijke flow. Eerst het logo, een Video-button, maar vrij direct word je geleid naar de call to action: download Dropbox.

Hou het licht/ Maak het directDie flow is op deze manier aanwezig omdat erverder niets te zien is op de site, behalve het achtergrond plaatje en rechts-bovenin heel klein ‘Sign in’. Dit alles maakt het geheel heel direct. Geen poespas.

HintingHet wordt duidelijk dat het om een download button gaat door (afgezien van het woord ‘download’): de kleur, het kleurverloop en gebruik van schaduw.

Page 46: Visual Design Theory: Magazine

46

guiding/flow

Goed: Poster United Colors of Benneton

GuidingDoor de houding van de baby, wijst het als het ware, als een soort pijl, naar het logo rechts bovenin.

Hou het lichtBenneton heeft een duidelijk stijl, witte achtergrond, mensen, geen onnodige opvullers. Door gebruik te maken van een witte achtergrond blijft de poster ‘licht’.

opdracht 6

Page 47: Visual Design Theory: Magazine

47

Goed: Videolan.com/vlc

Guiding/ Call to actionTen eerste is de hiërarchie heel duidelijk aanwezig. De aandacht wordt allereerst getrokken naar de pion en vervolgens naar de downloadbutton (de call to action).

Hinting/ PilancyDoor de kleur, het kleurverloop in de knop en de schaduw die gecreëerd is zie je direct dat het een button is. Ook verandert de knop van kleur bij wijze van hover-effect.

Icoon/ extra informatieDe button bezit een icoon om zijn functie te benadrukken. Ook bevat het extra informatie “versie 2.0.4 – Mac OS X – 43 MB”.

Page 48: Visual Design Theory: Magazine

48

guiding/flowopdracht 6

Goed: WordPress.org

Guiding/ Call to actionDe hiërarchie van deze pagina wordt aangegeven door het belangrijkste ‘tekstkader’ van een kleur en van een beeld te voorzien. Maar omdat de downloadbutton zo’n opvallende kleur heeft wordt de aandacht ook daarheen geleid (call to action).

AnomalieDe downloadknop valt goed op door de afwijkende rode kleur ten opzichte van het grijze. blauwe, witte en zwarte van de rest van de site.

Page 49: Visual Design Theory: Magazine

49

Goed: Videolan.com/vlc

Guiding/ Call to actionTen eerste is de hiërarchie is heel duidelijk weergegeven. De aandacht wordt allereerst getrokken naar de pion, vervolgens naar de downloadbutton (de call to action).

Hinting/ PilancyDoor de kleur, het kleurverloop in de knop en de schaduw die gecreëerd is zie je direct dat het een button is. Ookverandert de knop van kleur bij wijze van hover-effect.

Icoon/ extra informatieDe button bezit een icoon om zijn functie te benadrukken. Ook bevat het extra informatie “versie 2.0.4 – Mac OS X – 43 MB”.

Goed: Apple.com

Guiding/ Call to actionApple weet heel goed hoe ze de aandacht van de kijker naar de juiste onderdelen moeten trekken. Die zetten ze gewoon knalgroot op de pagina. In dit geval de woorden ‘iPad mini’ en een foto daarvan.

Hou het lichtOok dat kunnen ze erg goed bij Apple. Er wordt geen gebruik gemaakt van kleur, alleen als een onderdeel eruit moet springen.

Page 50: Visual Design Theory: Magazine

50

guiding/flow

Goed: Typhone.nl

Guiding/ Call to actionEvenals de Telegraafsite is Typhone.nl veel te onoverzichtelijk. Het is een druk en chaotisch geheel. Je weet niet waar je moet kijken.

AdviesMijn tip voor de designer: gebruik een grid en gebruik minder kleur. Zorg voor een duidelijke hiërarchie; niet alle elementen op de website zijn namelijk even belangrijk. Op deze manier lijkt dat wel zo.

opdracht 6

Page 51: Visual Design Theory: Magazine

51

SLecht: Telegraaf.nl

Guiding/ Call to actionTelegraaf heeft er digitaal net zo weinig structuur en flow in zitten als op papier. Er is geen overzicht, het is een chaotisch geheel. Er is geen Call to action, gezien alles om aandacht schreeuwt.

AdviesAls de designer zich aan een grid had gehouden zou het al een stuk beter, overzichtelijker en rustiger zijn denk ik.

Page 52: Visual Design Theory: Magazine

52

guiding/flowopdracht 6

Goed: XminY Poster design

Guiding/ Call to actionVoor mijn XminY-bijdrage heb ik erg gelet op de flow en guiding van de poster. Zo begin ik links bovenaan met de tekst “Onderaan begint het”. Mensen zijn gewend om links bovenaan te beginnen met lezen. Daardoor gaat je aandacht hopelijk van de tekst door naar de onderkant van de gebouwen-collage. Bovendien trek ik daar de aandacht naar doordat het onderste gebouw het enige is dat helder is, de rest is (in gradaties) pixelated. Tot slot staat het logo van XminY in de hoek rechts onderin. Ervan uitgaande dat kijkers rechts bovenaan beginnen met kijken betekent dat ze rechts onderaan eindigen.

Page 53: Visual Design Theory: Magazine

53

Kijk, Nu nogBeter!

Slecht: JongerenZorg.nl

Guiding/ Call to actionOver deze website, gemaakt voor een project in jaar 2, ben ik erg ontevreden. Ik had een grid moeten gebruiken, en dat grid moeten doorbreken met de titel. Nu ontstaat er loze ruimte naast het logo. Ik denk ook dat het mooier was geweest als ik een foto had gebruikt inplaats van die grote iconen.

Page 54: Visual Design Theory: Magazine

54

Afbeelding, bron: Pinterest.com, maker: onbekend

Page 55: Visual Design Theory: Magazine

55

Afbeelding, bron: Inspirationlab.files.wordpress.com, maker: Ciara Phelan

Page 56: Visual Design Theory: Magazine