Screen Design Puntgave Pixels
Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design
Jasper Schelling
[email protected] 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,
Communication & Multimedia Design — Screen Design
e 3
&
e 4
jaars zijn jaloers...
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
Communication & Multimedia Design — Screen Design
Persoonlijkheid
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
