Screen Design Puntgave Pixels Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design Jasper Schelling j.a.schelling@hr.nl docent.cmd.hro.nl/scjas
Welkom! Dit kwartaal krijgen jullie een spiksplinternieuw designvak, het vak Screen Design! Communication & Multimedia Design Screen Design Jasper Schelling 2
Klein geheimpje, 3 e & 4 e jaars zijn jaloers... Communication & Multimedia Design Screen Design Jasper Schelling 3
Wat is Screen Design? Tijdens deze module gaan we intensief aan de slag met het maken van de visuele uitwerking van een interactief product / dienst. Op basis van een volledige set Interaction Design deliverables (Persona s, Scenario s, Flowcharts, Wireframes) leer je het visuele ontwerp van een product of dienst uit te werken. Communication & Multimedia Design Screen Design Jasper Schelling 4
Kent iedereen deze nog? Communication & Multimedia Design Screen Design Jasper Schelling 5
Onze focus voor deze module We focussen ons dus écht op de bovenlaag. Communication & Multimedia Design Screen Design Jasper Schelling 6
En verder We werken specifiek aan het visuele ontwerp, de interface die de eindgebruik voorgeschoteld krijgt. Daarnaast leer je omgaan met brand/design guidelines van merken zodat het product wat je maakt binnen het merk past en ook dit product leidt tot een positieve merkbeleving. Communication & Multimedia Design Screen Design Jasper Schelling 7
Screen Design is meer dan visueel... Je ontwerpt niet alleen iets wat gezien moet worden, je ontwerpt iets wat gebruikt moet worden. Het omhelst veel meer dan enkel de ordening van inhoud op het scherm. De eerste vraag is dan ook niet Hoe moet het er uit zien?, maar Wat moet de gebruiker ervaren? Communication & Multimedia Design Screen Design Jasper Schelling 8
Screen Design is meer dan visueel... Het is belangrijk om je te realiseren dat je niet een boodschap vormgeeft, maar een gesprek. Een gesprek tussen de organisatie van wie de website is, en de gebruiker. Het visuele ontwerp is de stem van de organisatie! Communication & Multimedia Design Screen Design Jasper Schelling 9
Visual Design bestaat uit 2 delen Visuele Organisatie Persoonlijkheid Communication & Multimedia Design Screen Design Jasper Schelling 15
Visuele Organisatie Communication & Multimedia Design Screen Design Jasper Schelling 16
Visuele Organisatie Communication & Multimedia Design Screen Design Jasper Schelling 17
Persoonlijkheid Communication & Multimedia Design Screen Design Jasper Schelling 18
De persoonlijkheid van een organisatie De persoonlijkheid van een organisatie wordt meestal vastgelegd in een corporate identity, of een brandbook. Vroeger sprak men ook wel over huisstijl, maar mede omdat identity ook geadopteerd is door marketing, is het veel veelomvattender geworden... Communication & Multimedia Design Screen Design Jasper Schelling 39
Meer dan een logo Communication & Multimedia Design Screen Design Jasper Schelling 50
Niet alles past in een identity... Communication & Multimedia Design Screen Design Jasper Schelling 66
Waar begin je? Het visuele ontwerpproces begint meestal met een analyse. Samen met, of vooraf aan jou heeft de interactieontwerper nagedacht over het functionele ontwerp van een product of dienst. Communication & Multimedia Design Screen Design Jasper Schelling 67
Waar begin je? Maar nu is het zaak dat jij als visual designer visuele organisatie toe gaat voegen en persoonlijkheid. (de persoonlijkheid van het merk) Zo zorg je ervoor dat het nieuwe product of dienst waargenomen wordt als een goede gesprekspartner. Communication & Multimedia Design Screen Design Jasper Schelling 68
Screendesign Proces Communication & Multimedia Design Screen Design Jasper Schelling 69
Het Screen Design Proces 1 Oriëntatie Communication & Multimedia Design Screen Design Jasper Schelling 70
Stap 1: Oriëntatie Als eerste ga je je oriënteren op het merk en het functionele ontwerp. Download de volgende items: Vodafone Brand Guidelines http://docent.cmd.hro.nl/scjas/2010_2011/screendesign/ pdf/vodafone-brand-guidelines.pdf en Werkboek Screendesign http://docent.cmd.hro.nl/scjas/2010_2011/screendesign/ pdf/screendesign_werkboek.v0.6.pdf Communication & Multimedia Design Screen Design Jasper Schelling 71
Stap 1: Oriëntatie Orienteer je op de guidelines van Vodafone, en het FO dat in het werkboek omschreven staat. Communication & Multimedia Design Screen Design Jasper Schelling 72
Het Screen Design Proces 2 Analyse Communication & Multimedia Design Screen Design Jasper Schelling 73
Stap 2: Analyse Als je een indruk gekregen hebt van het merk, kom je terug naar het interactieontwerp en ga je dat aan een grondige inspectie onderwerpen; Hoe zien de persona s eruit? Wat staat er in de scenario s? Hoe is de flow van de applicatie? Telkens koppel je je bevinden terug aan wat je weet over de visuele identiteit van het merk. Communication & Multimedia Design Screen Design Jasper Schelling 74
Stap 2: Analyse Door verbanden te leggen tussen het visuele merk en het interactieontwerp zorg je ervoor dat er een rijke interactie ontstaat, een combinatie van vorm en functie. Lees eveneens de opdrachtbriefing aandachtig door... wat zijn de technische randvoorwaarden? Communication & Multimedia Design Screen Design Jasper Schelling 75
Het Screen Design Proces 3 Structureren en Stroomlijnen Communication & Multimedia Design Screen Design Jasper Schelling 76
Stap 3: Structureren & Stroomlijnen Met al deze bevindingen in je achterhoofd, begin je te structureren en te stroomlijnen. Alles wat overbodig is, dubbel is, incosistent is of niet binnen het merk past filter je eruit. Communication & Multimedia Design Screen Design Jasper Schelling 77
Het Screen Design Proces 4 Categoriseren Communication & Multimedia Design Screen Design Jasper Schelling 78
Stap 4: Categoriseren De volgende fase is het categorizeren van inhoud en de noodzakelijke layout, en deze waar mogelijk op te delen in modules. Modules zorgen ervoor dat vorm en interactie consisten blijven op verschillend plekken in de site, om er zo voor te zorgen dat er een eenduidige (merk)beleving ontstaat. Communication & Multimedia Design Screen Design Jasper Schelling 79
Het Screen Design Proces 5 Visualiseren Communication & Multimedia Design Screen Design Jasper Schelling 80
Stap 5: Visualiseren Dan begin je aan het visuele ontwerp, wat grofweg op twee niveau s plaatsvind. Het macro-niveau, waar je beslissingen maakt over navigatie, layout en typografie. Het micro-niveau, waar je nadenkt over specifieke onderdelen, interacties en hoedanigheden. Communication & Multimedia Design Screen Design Jasper Schelling 81
Stap 5: Visualiseren Om ervoor te zorgen dat de hele klas een gezamelijk vertrekpunt heeft, gaan we nu gezamelijk een van de schermen van de eesrte opdracht uitwerken. dus... Pak je laptop, Stof je muis af, Het is tijd voor Puntgave Pixels! Communication & Multimedia Design Screen Design Jasper Schelling 82