Vormgeving 2014 - 2015

PORT FOLIO Naam Omar Vasquez Jesus Studentnummer 500704100 Klas Roze Docente C. Muhren Vak Vormgeving Opdracht Vormgeving blok 2 Datum 6 - 1 - 2015

INLEI DING

Mijn naam is Omar Vasquez jesus, ik ben momenteel student aan de Hogeschool van Amsterdam, en volg hier de opleiding Communicatie en multimedia design.

Voor het vak vormgeving van het tweede blok van het propedeuse jaar hebben we een aantal opdrachten gemaakt. Deze opdrachten hebben allemaal betrekking tot vormgeving en het leren van basis principes binnen de vormgeving. Tijdens de lessen krijgen we uitleg over de vormgeving regels en hoe hiermee om te gaan hiernaast oefenen we ook de behandelde stof al in de les, denk hierbij bijvoorbeeld aan onderzoek doen, tekenen en/of schetsen.

De opdrachten die we maken voor het vak zijn natuurlijk allemaal gekoppeld aan de opleiding dus we ontwerpen met name vanaf het perspectief van de doelgroep/gebruiker.

Kleur, vorm, textuur, hiĂŤrarchie en typografie zijn zaken die we veel behandeld hebben tijdens de lessen. De opdrachten die ik gemaakt heb zijn hier dan dus ook op gebaseerd.

Informatie die ik opgedaan heb tijdens het oefenen en de lessen, hebben veel invloed gehad op het eindresultaat van mijn opdrachten. Het zijn in totaal zeven opdrachten allen met hun eigen leerprocessen, doelgroepen/gebruikers en natuurlijk vormgeving.

Mobiele music player ................................................... 5 Big K.R.I.T. ...........................................................................................................................................................8

Visueel research....................................................................................................................................................9

Moodboard/kleurpalet/lettertype................................................................................................................. 10/11

Wireframes (schetsen) Mobile music player................................................................................................... 12/14

Ontwerp mobile music player verticaal.............................................................................................................. 16

Ontwerp mobile music player horizontaal.......................................................................................................... 17

Visuals............................................................................................................................................................18/21

Lijstelement mobiele interface ���������������������������������� 23 Toelichting..........................................................................................................................................................24

Moodboard.........................................................................................................................................................25

Wireframes (schetsen) Lijstelement mobiele interface ��������������������������������������������������������������������������������������26

Ontwerp lijstelement..........................................................................................................................................27

Artikel voor mobiel .................................................... 28 Toelichting..........................................................................................................................................................29

Ontwerp artikel.............................................................................................................................................30/31

One page website ..................................................... 32 Toelichting..........................................................................................................................................................33

Specificaties........................................................................................................................................................34

Style-tile.............................................................................................................................................................36

Schetsen.............................................................................................................................................................37

Wireframes (schetsen) One page website desktop............................................................................................38

Wireframes (schetsen) One page website mobiel..............................................................................................39

Ontwerp one page website Desktop.................................................................................................................40

Ontwerp one page website Mobiel....................................................................................................................41

CMD beeldtaal icoon ................................................. 42 Inspiratie.............................................................................................................................................................43

Ontwerp iconen.............................................................................................................................................44/49

Mobile music player

Big K.R.I.T. De Mobile Music Player is een ontwerp van een digitale muziekspeler voor de Iphone, gebaseerd op de stijl en vormgeving van de albums en mixtapes van een door mij gekozen artiest. Ik heb voor de Amerikaanse Rapper gekozen genaamd Big K.R.I.T. De reden dat ik hem als artiest gekozen heb heeft natuurlijk te maken me het feit dat ik vaak naar zijn muziek luister maar de vormgeving en conceptuele kant van zijn album en mixtape covers spreken mij ook erg aan. Ik beschrijf de stijl als: erg nostalgisch gemengd met funk, disco, old school, spacey en Cadillacs, Big K.R.I.T. houdt erg veel van Cadillacs, deze zie je dan ook regelmatig terug komen op zijn covers. Ik heb al lange tijd iets willen ontwerpen in deze context en zal mijn ideeĂŤn hier zeker op los laten. Kortom, de covers spreken mij erg aan en ik hou erg veel van Big K.R.I.T. als artiest dus is dit mijn keuze geweest voor het ontwerp van de Mobile Music Player.

8

Visueel research Het was voor mij al vrij duidelijk naar wat ik zocht dus ik heb mijn beelden snel gevonden, via Google afbeeldingen en Pinterest. Ik heb vooral gezocht op Cadillacs en dan met name de advertenties hiervan, van de jaren 50 tot de jaren 80. Hiernaast heb ik veel naar ruimte foto’s gezocht en dan met name de kleurrijke varianten knal paar en blauw etc. Deze heb ik uiteindelijk gebruikt als achtergrond afbeelding. De covers van mijn gekozen artiest zijn visueel erg vol met verschilleden lagen en diepe kleuren vooral paars, verder vormen de covers naast elkaar ook één geheel. Dit is een voordeel met het ontwerpen van de muziekspeler. Hierdoor kan ik gaan ontwerpen vanaf de discografie van Big K.R.I.T. inplaats van één album of mixtape.

Zo zijn alle albums en mixtapes visueel gematched aan het ontwerp.

9

Moodboard

Kleurpalet

Lettertype

De sfeer die het mooboard weergeeft is mijn interpretatie van hoe ik de covers zie en mijn gedachtes hier over. Mijn beeld hiervan is erg ruim omdat ik ook door het luisteren naar de artiest en beter beeld kan vormen van zijn stijl etc. Verschillende lagen die samen ĂŠĂŠn harmonie vormen, voornamelijk de kleuren paars, lila, zwart en blauw, Strakke en overzichtelijke vormgeving en zeer kalmerend.

Paars, lila en zwart zijn de drie hoofdkleuren deze komen in de alle elementen van het ontwerp terug. Dit zijn ook de kleuren die het meest terugkomen in de covers. Er zit ook wat wit in, dit in de vorm van een outerglow achter de covers om deze meer naar voren te laten komen en deze uit te lichten.

De gekozen font voor het ontwerp is Raavi, deze font heb ik gebruikt om de album titel en de Songtitel te ontwerpen. Dit is eigenlijk de enige tekst die voorkomt in het ontwerp, voor de display van de tijd heb ik gekozen voor Myriad Pro als font. Dit vind ik een erg aangename font om te lezen maar is ook goed te zien op klein formaat.

De tijd op de music player is erg minimalistisch vormgegeven het moet in het geheel wegvallen maar niet hinderen daarom heb ik gekozen voor Myriad Pro als font.

10

11

Wireframes (shetsen) Mobile music player

12

13

Wireframes (shetsen) Mobile music player

14

Ontwerp verticaal

Ontwerp Return Of 4eva Formaat 960 x 640 pxl

Ontwerp Live from the Underground Formaat 960 x 640 pxl

Ontwerp 4eva N a Day Formaat 960 x 640 pxl

16

Ontwerp horizontaal

Ontwerp King Rememberd In Time Formaat 960 x 640 pxl Ontwerp Cadillactica Formaat 960 x 640 pxl

17

Visuals

18

19

Visuals

20

21

Lijstelement mobiele interface

Visuele hirachie: opdracht restaurantlijst element Ontwerp een lijstelement voor een restaurant (verzin iets). Het ontwerpformaat is ongeveer 120 x 640 pixels (gebaseerd op een lijstelement op een Iphone 4 Retina, dit mag anders).

Specificaties Restaurantnaam Sushi Soort Restaurant Japanse sushi restaurant Slogan Roll by and experience our rolls!

Formaat 940 x 640

Visueel research Ik zelf heb al veel ontwerpen gemaakt in de ‘Japanse stijl’ hierdoor weet ik goed naar wat ik moet zoeken en waar ik het kan vinden.

Op Pinterest heb ik vooraal gezocht naar achtergronden en patronen om dit als achtergrond te gebruiken, de foto’s van de sushi rollen heb ik vooraal via Google afbeeldingen gevonden. De iconen die ik gebruikt heb als button, zijn allemaal te vinden op Flaticon. com

Moodboard Met het moodboard wil ik vooral de nadruk leggen op de presentatie van het ontwerp daarom heb ik gekozen voor simpele vormen, kleuren en font. Je ziet ook een aantal afbeeldingen van het voedsel, dit heb ik gebruikt als uitgangspunt op mijn ontwerp. Het voedsel is het product en deze moet dus gepresenteerd worden, dit is natuurlijk cruciaal voor een restaurantlijst.

Kleur & Font De gekozen kleuren zijn gebaseerd op de kleuren van de Japanse vlag, rood en wit.

Als font heb ik gekozen voor Papyrus, ik vind dit een mooi geschreven lettertype die goed past bij een Aziatische stijl.

24

25

Wireframes (shetsen) Lijstelement mobiele interface

26

Ontwerp lijstelement < 640 >

< 960 > 27

Artikel voor mobiel

TY PO GRA FIE 28

Specificaties Typografie: optimaal leesbaar artikel Ik heb gekeken naar verschillende websites om tot een ontwerp te komen en heb ook inspiratie opgedaan via de links bijgeleverd in de mail zoals: siteinspire.com en ilovetypography.com. Aan de hand hiervan heb ik gekeken naar wat ik zelf bij de doelgroep vind passen en heb onderzoek gedaan naar tijdschriften artikels en websites gerelateerd aan de content.

Woorden die de sfeer van je typografie uitdrukken Helder, Fris, Sportief en duidelijk.

Lettertypes Raleway, Quicksand.

Titels Raleway 24pt (Bold) Ondertitels

Quicksand 11pt (Bold)

Bodytekst

Quicksand 10pt (Regular)

Tussenkopjes

Quicksand 11pt (Bold)

Cap drop

Raleway

Doorverwijzing

Quicksand 11pt (Bold)

Link Pinterest

http://www.pinterest.com/ o m a r j s u s / i n s pi r a t i e - a r tikel-font/

14pt (X light)

QUI CK SAN D 29

Ontwerp artikel

Is het gezonder om buiten te sporten of in de sportschool?

Hap je door buiten te sporten niet veel meer luchtverontreiniging naar binnen dan wanneer je in een geventileerd fitnesscentrum je oefeningen doet?

Dat is wellicht ook om een andere reden een goed idee: hap je door buiten te sporten niet veel meer luchtverontreiniging naar binnen dan wanneer je in een geventileerd fitnesscentrum je oefeningen doet? Wie zich inspant, haalt heel diep adem en ook nog eens door de mond: bij luchtverontreiniging een dubbel nadeel, zegt Frans de Jongh, longfysioloog in het Medisch Spectrum Twente.

Schadelijke stoffen komen zo in grote hoeveelheden en ongefilterd (omdat de neus wordt overgeslagen) in de longen. Australische onderzoekers die marathonlopers onderzochten, ontdekten dat bij hen een lage concentratie verontreiniging evenveel schade aanricht als een hoge concentratie bij mensen in rust.

‘‘In rust ademen we ongeveer een kwart tot een halve liter kooldioxide per minuut uit, en bij inspanning is dat vijf tot tien keer meer’’

DOOR Ellen de Visser 24 november 2014

N

u de kou toeslaat en de avond vroeg valt, wijken hardlopers en wielrenners uit naar de sportschool om daar op loopband en hometrainer aan hun conditie te werken.

Maar de sportschool blijkt het niet op alle fronten beter te doen, zo blijkt uit een nog ongepubliceerd onderzoek in het vakblad Building and Environment. Hoogleraar radiochemie Bert Wolterbeek (TU Delft) bestudeerde daarvoor met Portugese collega’s het binnenklimaat van elf fitnesscentra in Lissabon, van het krachthonk tot de spinningzalen en de pilates-studio’s. De concentraties kooldioxide, formaldehyde en fijnstof bleken boven de vastgestelde norm te liggen, vooral tijdens de drukbezochte aerobiclessen, waar puffende sporters veel kooldioxide uitblazen en stofdeeltjes doen opdwarrelen. Formaldehyde was afkomstig van het ontsmettingsmiddel waarmee vloeren en apparaten werden gereinigd, verduidelijkt Wolterbeek.

30

Over de kooldioxide is longfysioloog De Jongh niet ongerust. In rust ademen we ongeveer een kwart tot een halve liter kooldioxide per minuut uit, en bij inspanning is dat vijf tot tien keer meer. ‘Dat klinkt spectaculair maar lucht bevat 0,03 procent kooldioxide. Vermenigvuldig dat met tien en het is nog steeds weinig.’

Formaldehyde kan meer kwaad: dat is bij langdurige blootstelling kankerverwekkend. Ook fijnstof kan schade aanrichten, hoewel dat afhangt van de grootte en de chemische samenstelling van de deeltjes. Grote stofdeeltjes blijven steken in de bocht van de keel. Slechts 10 procent bereikt de longen waar ze door de trilharen omhoog worden gewerkt. Kleine stofdeeltjes komen dieper in de longen en kunnen zo in de bloedbaan terecht komen. Klachten over luchtwegen, hart en vaten kunnen het gevolg zijn.

dan denk ik dat de sporter het wint. Het positieve effect van beweging op de gezondheid is nog altijd groter dan het nadelige effect van verontreiniging.

MEER IN DEZE SECTIE

‘Ik ben niet graag verliefd’25 oktober 2014 Zwemmen of verzuipen6 september 2014

‘‘De onderzochte fitnesscentra hoeven niet te worden dichtgetimmerd’’

De Jongh ziet geen onmiddellijk gevaar voor de gezondheid. ‘De onderzochte fitnesscentra hoeven niet te worden dichtgetimmerd’, erkent Wolterbeek, ‘maar toch hadden we dit niet verwacht. Je gaat naar een sportschool voor je gezondheid en dan wil je dat daar de luchtventilatie in orde is.’

Toch maar niet binnen sporten? De Jongh: ‘Als je het effect van een zittend leven vergelijkt met hardlopen dwars door Amsterdam,

31

One page website

One page website

Style-tile

Titel: Amstercycles Ondertitel: Your city, Your style, Your cycle Slogan: Amstercycles dé plek om jouw fiets te vinden!

Call for action: like ons op Facebook en win één van de 20 elektrische fietsen

Visueel research

Ik heb een fiets als product gekozen omdat ik dit bij Amsterdam vind passen en het doet mij heel erg aan Amsterdam denken. De doelgroep die ik wil bereiken met het product en de vormgeving zijn hipsters en alles er tussen in, kortom personen die geïnteresseerd zijn in fietsen en fietsen als lifestyle.

Het ontwerpen van een responsive web lay-out was de laatste opdracht voor het vak vormgeving. De responsive web lay-out is uitgewerkt in twee verschillende viewports: mobiel en desktop. Nu we aan het einde van het vak zijn is het de bedoeling je gegaarde kennis en vaardigheden toe te passen op deze opdracht. Doormiddel van andere opdrachten die we gemaakt hebben weet je nu meer over de verschillende facetten van het vormgeven, zoals: vorm, kleur, textuur, lettertype enzovoort. De responsive web lay-out die we eerst hebben ontworpen kunnen we nu opnieuw ontwerpen (verbeteren) vanuit en duidelijker perspectief op de vormgeving. Dit perspectief heb ik gevormd door de nieuwe dingen die ik heb geleerd binnen het vak, bijvoorbeeld doormiddel van de opdrachten over de visuele hiërarchie, lijstelement en artikel voor mobiel.

De responsive web lay-out die ik heb gemaakt heeft als doelgroep fietsers, maar dan met name hippe fietsers (hipsters) uit Amsterdam. Via Pinterest en andere websites heb ik eerst onderzoek gedaan naar vorm, kleur en textuur die bij mijn doelgroep past. De doelgroep en de vormgeving van de responsive web lay-out is ook gekoppeld aan de stad Amsterdam, dit is terug te zien in de vormen, logo en het gebruik van kleur ook is de lettertype van Amsterdamse origine en het laat tegelijkertijd kenmerken zien van de structuur van het frame van fietsen, wat weer erg goed aansluit op het concept.

Voor de hiërarchie en structuur van de responsive web lay-out heb ik artikels op internet gelezen die hier uitgebreid informatie over geven , voorbeelden bekeken en punten verbeterd van het eerste ontwerp op basis van feedback en een nieuwe kijk op de opdracht.

Ik ben erg tevreden met het eindresultaat en vind dat ik er zeer zeker op vooruit ben gegaan qua vormgeven van interfaces en web gerelateerde content.

De research die ik gedaan heb voor de landingspagina was al deels gebaseerd op wat ik al in mijn eerste ontwerp heb gebruikt. Vanaf hier ben ik opzoek gegaan naar nieuwe combinaties van lettertypes, kleur, contrast en textuur. De lettertype voor de sfeer is Amsterdam Superstar ik vind dat deze vond goed past binnen de context van de website, het product en de doelgroep.

Sfeer van de typografie Visueel Origineel Sfeervol Aandachtstrekker Strak

Beste lettertypes uit die hier goed bijpassen Amsterdam Superstar, Avernier LT Std

Lettertype en grootte Titels 48 pt Amsterdam Superstar Ondertitel 24 pt Avenier LT Std (85 Heavy) Bodytekst 14 pt Avenier LT Std (35 Light) Tussenkopjes 30 pt Avenier LT Std (65 Medium)

Links Pinterest

http://www.pinterest.com/omarjsus/typografie-landingspagina/

http://www.pinterest.com/omarjsus/kleuren/ http://www.pinterest.com/omarjsus/responsive-website/

33

Titel: Amstercycles Ondertitel: Your city, Your style, Your cycle Slogan: Amstercycles dé plek om jouw fiets te vinden!

Call for action: like ons op Facebook en win één van de 20 elektrische fietsen Ik heb een fiets als product gekozen omdat ik dit bij Amsterdam vind passen en het doet mij heel erg aan Amsterdam denken. De doelgroep die ik wil bereiken met het product en de vormgeving zijn hipsters en alles er tussen in, kortom personen die geïnteresseerd zijn in fietsen en fietsen als lifestyle.

Kijken - visueel research Ik heb inspiratie opgedaan door naar andere landingspagina’s te kijken op het internet, daarnaast heb ik veel van mijn vormgeving gehaald van de Amsterdamse vlag en elementen er in verwerkt die aansluiten bij de doelgroep.

Schetsen Tijdens het schetsen ben ik snel te werk gegaan, het schetsen van wireframes aan de hand van wat ik gezien had op Pinterest en Google etc. Na een aantal schetsen begon de pagina leven te krijgen.

Maken De landingspagina heb ik gemaakt met behulp van Photoshop en Illustrator, de sfeerafbeelding is afkomstig van Google afbeeldingen. de iconen zijn ook afkomstig van het internet.

Visuele hiërarchie Het gene wat gelijk opvalt is het logo, knalrood met de Andrea’s kruizen op de hoed het is gelijk een eyecatcher als je op de pagina komt. vervolgens de tekst en de slogan waarop de sfeerafbeelding volgt op de achtergrond.

Typografie Voor de typografie heb ik gezocht naar moderne Amsterdamse fonts zo ben ik op de font van het logo gekomen ook past deze font qua vorm bij het product wat verkocht wordt en de bijbehorende doelgroep. De broodtekst is gedaan met de font Avenier ltd light, wat een erg prettig en goed leesbare scherm font is.

Kleur De kleuren zijn gebaseerd op de Amsterdamse vlag dus veel rood, wit, zwart en grijs.

Vorm De vormen zijn erg strak en simpel, voornamelijk rechthoeken, vierkanten en dunne rechte lijnen. Dit is om het geheel wat klasse te geven (chique) dit geeft rust aan het geheel en spreekt de doelgroep goed aan.

Lay-out en balans Beeld/tekst verhouding is goed in balans, de sfeerafbeelding neemt het gehele vlak in beslag maar hindert de rest niet, de logo is duidelijk zichtbaar en is twee keer te zien. De menubalk bevindt zicht boven aan op de pagina dus deze is duidelijk te zien en makkelijk aan te klikken. Beschrijving van het product/pagina staat op het midden aangeven met de sociaal media iconen eronder geplaatst. Het geheel is duidelijk en overzichtelijk en spreekt de doelgroep aan.

34

36

37

Wireframes (shetsen) One page website desktop

38

Wireframes (shetsen) One page website mobiel

39

HOME

CYCLES

SALE

ACCESSOIRES

CONTACT

OVER ONS

AMSTERCYLES YOUR CITY, YOUR STYLE, YOUR CYCLE

voorwaarden

verkooppunten

openingstijden

reviews

workshops 40

AMSTERCYLES YOUR CITY, YOUR STYLE, YOUR CYCLE

voorwaarden

verkooppunten

openingstijden 41

CMD BEELDTAAL ICOON

INSPIRATIE

43

BRIL

44

DRUMSTICK

45

MAIL

46

LIGHTSABER

47

USB-STICK

48

WEKKER

49

WEKKER