Communication & Multimedia Design Screen Design Puntgave Pixels CMDDES01-10 Aantal studiepunten: 3 Modulehouder: Jasper Schelling Versie: 13 April 2011 Goedgekeurd door: (namens toetscommissie) Datum: Modulewijzer Screen Design 4/23/11! 1
Moduleomschrijving Screen Design Modulenaam Modulecode Aantal studiepunten 3 Studiebelastinguren en looptijd Screen Design (Kennisgestuurd) CMDDES01-10 Dit studieonderdeel levert de student 3 studiepunten op, hetgeen overeenkomt met een studielast van 84 uren verdeeld over 1 kwartaal. De verdeling over deze 84 uren over de collegeweken is als volgt: 20 Uur Begeleide werkcolleges van 8x150 minuten 60 Uur Onbegeleide zelfstudie (8x7,5 uur) 4 Uur Voorbereiding Opleveren werk. Relatie met ander onderwijs Vereiste voorkennis Werkvormen Toetsing In deze module leer je hoe je de visuele uitwerking van een interactief product maakt. Deze kennis pas je toe bij je project, stage en andere ontwerpmodules. CMDDES01-1 Design Basics Werkcollege, practicum en zelfstudie De eindcijfer is opgebouwd uit cijfers voor de volgende opdrachten: 40% Opdracht 1 Vodafone Sales Statistics. 40% Opdracht 2 Mobiele Site Cinerama. 10% Opdracht 3 Vodafone ipad Factuur. 10% Kwartaalopdracht Analyzing the Proʼs. Bij onvoldoende resultaat krijg je de gelegenheid je opdrachten te repareren. Bij het ontbreken van opdrachten dienen deze in zʼn geheel herkanst te worden. Je herkansing lever je in gedurende de herkansingsweek van het zomerkwartaal. Leermiddelen Verplichte leermiddelen Modulewijzer Screen Design Werkboek Screen Design Screen Design Wiki. (http://cmiscreendesign.pbworks.com) Facultatieve leermiddelen: aanbevolen literatuur en resources staan beschreven op de Screen Design Wiki (http://cmiscreendesign.pbworks.com/w/page/37980340/screen-design- Resources) Op de wiki is eveneens een lijst te vinden van aanbevolen materialen. Draagt bij aan competentie Realiseren Ideeën uitwerken naar betekenisvolle interactieve producten, diensten en belevingen. Aandacht hebben voor details, zonder de grote lijnen uit het oog te verliezen. Netjes en gestructureerd kunnen werken en op tijd leveren. Creatief kunnen omgaan met beperkingen, vasthoudend zijn, doorzetten! Verbeelden Exploreren en uitdrukken van ideëen, plannen en visies. Overtuigen en verleiden met inspirerende visualisaties, prototypes, verhalen en presentaties. Modulewijzer Screen Design 4/23/11! 2
Leerdoelen Je kunt de visuele uitwerking van een interactief product precies en effectief uitwerken aan de hand van een volledige set interaction design deliverables (persona, scenario, flows, wireframes) en brand guidelines omtrent visuele en interactieve vormgeving. Je kunt een analyse maken van de aangeleverde input waarbij je alle relevante elementen en restricties in het ontwerp benoemt en de verbanden tussen deze elementen kunt uitleggen. Je kunt ontwerpen; door het toepassen van ontwerpprincipes (grids, typografie, vorm, kleur, layout, visuele elementen, beeld, interactieve elementen) maak je een effectieve visuele uitwerking van een interactief product. Je kunt nauwgezet uitwerken. Door je te houden aan style guidelines, randvoorwaarden en ontwerpbeslissingen realiseer je visuele ontwerpen die volledig voldoen aan de gestelde eisen. Inhoud: Bij deze module staat het uitwerken van het visuele ontwerp van interactieve producten centraal. Gedurende deze module worden onder andere de volgende onderwerpen behandeld: Het Screendesign Proces Schetsen Layout Grids Typografie Werken met beeldmateriaal Visueel ontwerp voor mobile toepassingen Visueel ontwerp voor tablet toepassingen Infographics Opmerkingen In de werkcolleges wordt aan opdrachten gewerkt welke onderdeel uitmaken van de eindbeoordeling. Daarom is het noodzakelijk dat je minimaal 6 van de 8 lessen bijwoont. Gemiste lessen dienen worden ingehaald door zelfstudie en bij collegastudenten te informeren wat er in de les behandeld is. Modulehouder Jasper Schelling Auteur(s) Jasper Schelling Datum 13 April 2011 Modulewijzer Screen Design 4/23/11! 3
1. Algemene Omschrijving! 5 Inleiding! 5 Relatie met andere onderwijseenheden! 5 Leermiddelen! 5 2. Programma! 6 3. Opdrachten! 7 Opdracht 1 Vodafone Sales Statistieken! 7 Opdracht 2 Mobiele Site Cinerama! 9 Opdracht 3 ipad Facturen Vodafone! 11 Kwartaal Opdracht Analyzing the Proʼs! 13 4. Toetsing en Beoordeling! 14 Eindcijfer! 14 Herkansingen! 14 Herkansing! 14 Resultaat Niet Deelgenomen! 14 Herkansingsopdracht! 14 Modulewijzer Screen Design 4/23/11! 4
1. Algemene Omschrijving Inleiding Tijdens deze module gaan we intensief aan de slag met het maken van de visuele uitwerking van een interactief product. Op basis van een volledige set interaction design deliverables (Personaʼs, Scenarioʼs, Flowcharts, Wireframes) leer je het visuele ontwerp van een interactief product en of dienst uitwerken. We werken specifiek aan het visuele ontwerp, de interfaces die de eindgebruiker voorgeschoteld krijgt. Daarnaast leer je omgaan met design guidelines van merken zodat het product wat je maakt exact past binnen het merk en ook dit product leidt tot een positieve merkbeleving. Je past de ontwerpprincipes die je de afgelopen twee jaar hebt geleerd toe om zo tot een effectieve uitwerking van een interactief product te komen. Daarnaast werk je nauwgezet uit en door je te houden aan de gestelde randvoorwaarden Relatie met andere onderwijseenheden Voorafgaand aan deze module heb je in de module Design Basics ervaring opgedaan met het werken met ontwerptools als Illustrator en Photoshop. Bij deze module ligt de nadruk op hoe je met behulp van Photoshop de visuele uitwerking van een interactief product realiseert op basis van een volledige set interaction design deliverables. Je gebruikt de ervaring die je opdoet gedurende deze module bij het vormgeven van interactieve producten en diensten, een onderdeel dat gedurende de studie Communication & Multimedia Design nog vaak terug zal komen. Je past deze skills toe in projecten, opdrachten Leermiddelen Voor deze module zijn de volgende verplichte leermiddelen beschikbaar: Modulewijzer Screen Design Werkboek Screen Design Screen Design Wiki (http://cmiscreendesign.pbworks.com) Eveneens is het geinstalleerd hebben van Photoshop op je laptop een vereiste. Daarnaast is er een lijst van facultatieve leermiddelen opgenomen in de Screen Design Wiki. Deze is te vinden onder: http://cmiscreendesign.pbworks.com/screen-design-resources Modulewijzer Screen Design 4/23/11! 5
2. Programma Week Lesinhoud Activiteiten Opdracht / Huiswerk 1 Introductie van de module Screen Design, overzicht van wat we gaan doen dit kwartaal, uitleg over het Screen Design Proces, presentatie over schetsen. 2 Review van vorige week, Presentaties over Grids & Typografie. Samen met de docent onder begeleiding het eerste scherm van opdracht 1 uitwerken Oefening met het maken van pixelgrids, Zelf aan de slag met opdracht 1, Analyse van Artis.nl, Efteling.nl en Stedelijk.nl Opdracht 1 Vodafone Sales Statistics, ʻToestellen overzichtpaginaʼ en ʻinlogschermʼ Opdracht 1 Vodafone Sales Statistics, ʻLandingsscherm dashboardʼ en ʻNotificatie dropdownʼ. 3 Review van vorige week, presentatie over Interface Elementen, Aanleveren en Documentstructuur 4 Review van vorige week, presentaties over Modules en Infographics. 5 Review van gehele opdracht 1, Presenatie over ontwerpen voor mobile. 6 Review van vorige week, werken met beeldmateriaal 7 ADA (Art Directorʼs Afternoon), gastles met presentatie van alumni CMD, presentatie over ontwerpen voor Tablets 8 Presentatie over Schetsen, Afsluitende presentatie met samenvatting en herhaling. 9 Inleveren opdracht 1,2,3, Analyses 10 Chaosweek Oefening met het maken van Interface Elementen, zelfstandig aan de slag met opdracht 1, Analyse van abnamro.nl, essent.nl en achmea.nl Oefening met het maken van modules, infographics en zelfstandig werken aan opdracht 1. Analyse van Google Analytics, (...) en (...) Zelfstandig werken aan opdracht 2 - Mobiele Website Cinerama. Oefening met het werken met beeldmateriaal, zelfstandig werken aan opdracht 2. Analyse van ipad Photo Cookbook, Epicurious en (...) Review van opdracht 2 en zelfstandig werken aan opdracht 3. Analyse van uitzendingemist.nl,arttube.nl en vimeo. Oefening met Schetsen, Opdrachten afronden en verbeteren. Analyse van Tweetbot, Twitter en Tweetdeck. Opdracht 1 Vodafone Sales Statistics ʻSamsung Toestellen Overzichtʼ Opdracht 1 Vodafone Sales Statistics, ʻDetail Toestel Paginaʼ, ʻDetail Toestel pagina tooltipsʼ, ʻSales statistiekenʼ Opdracht 2 Mobiele Site Cinerama, ʻDetail Pagina Filmʼ, ʻFilm Reserverenʼ,ʻPrijzen en Tijdenʼ. Opdracht 2 Mobiele Site Cinerama, ʻLandingsscherm Tijdenʼ, ʻLandingsscherm Titelsʼ, ʻRoute Beschrijvingʼ, ʻReserveren en Zaalverhuurʼ Opdracht 3 ipad Facturen, ʻFactuur formulierʼ Afronden opdrachten 1,2 en 3 en analyse, bundeling van schetsen. Modulewijzer Screen Design 4/23/11! 6
3. Opdrachten Opdracht 1 Vodafone Sales Statistieken Opdracht Bij deze opdracht werk je aan de hand van de Interaction Design Deliverables die je kunt vinden in het Werkboek Screen Design. Je analyseert de personaʼs, scenarioʼs, flows en wireframes aandachtig, om vervolgens op basis van de brandguidelines van Vodafone de visuele uitwerking te maken van de Sales Statistieken tool. Deze tool draait op het intranet van Vodafone en stelt medewerkers in staat om inzicht te krijgen in de manier waarop verschillende toestellen en abonnementen het op dit moment doen in de markt. Meer informatie vind je in het Werkboek Screen Design. Assests, Beeldmateriaal, huisstijl materialen e.d. vind je op de Screendesign Wiki. Randvoorwaarden Je ontwerp voldoet aan de brand guidelines van Vodafone. Je ontwerp is geoptimaliseerd voor een minimum schermbreedte van 1024 pixels Opleveren Deze opdracht bestaat uit meerdere schermen. Je levert de volgende schermen per week op: Week Welk Scherm werk je uit? 1 Toestellen overzicht pagina Login Scherm 2 Landingsscherm Dashboard Notificatie Dropdown Hoe Lever je deze op? vodafone_04_toestellen_overzicht_pagina.png vodafone_01_inlog_scherm.png vodafone_02a_landingsscherm_dashboard.png vodafone_02b_notificatie_dropdown.png 3 Samsung Toestellen Overzicht vodafone_05_samsung_toestellen_overzicht.png 4 Detail Toestel Pagina Detail Toestel Pagina Tooltips Sales Statistieken vodafone_06a_detail_toestel_pagina.png vodafone_06b_detail_toestel_pagina_tooltips.png vodafone_03_sales_statistieken.png Je levert voor ieder scherm een 24-Bits PNG op. Daarnaast lever je iedere week een PSD op van de schermen die je die week gemaakt hebt. Opleveren doe je door de bestanden te posten op je studentenspace en de bijbehorende link naar je docent te melen. Toetsing Je werk wordt aan de hand van de volgende criteria getoetst: Analyse Heb je op basis van de door jou ontvangen input alle elementen kunnen benoemen die je moet opleveren? Heb je alle elementen juist geïdentificeerd? Heb je alle states van de interactieve elementen juist benoemd en geïdentificeerd? Heb je alle combinaties van elementen juist benoemd? Ontwerp Is je ontwerp op een logische visuele wijze ingedeeld? Heb je correct gebruik gemaakt van het door jou gekozen grid? Heb je de juiste typografie toegepast bij het uitwerken van je ontwerp? Zijn de interactieve elementen zo vormgegeven dat ze uitnodigen tot interactie? Uitwerking Is je ontwerp op de pixel nauwkeurig uitgevoerd? Heb je de brand guidelines juist geïnterpreteerd? Modulewijzer Screen Design 4/23/11! 7
Ben je van de brand guidelines afgeweken op het moment dat je vastgesteld had dat het een betere ontwerpoplossing op zou leveren? Kloppen de bestandsnamen van de documenten die je opgeleverd hebt? Heb je de Z-richting toegepast om de inrichting van je Photoshop Document duidelijk te maken? Is je PSD correct opgemaakt? Wat kun je als je deze opdracht hebt gedaan? Je kunt de visuele uitwerking van een interactief product precies en effectief uitwerken aan de hand van een volledige set interaction design deliverables (persona, scenario, flows, wireframes) en brand guidelines omtrent visuele en interactieve vormgeving. Je kunt een analyse maken van de aangeleverde input waarbij je alle relevante elementen en restricties in het ontwerp benoemt en de verbanden tussen deze elementen kunt uitleggen. Je kunt ontwerpen; door het toepassen van ontwerpprincipes (grids, typografie, vorm, kleur, layout, visuele elementen, beeld, interactieve elementen) maak je een effectieve visuele uitwerking van een interactief product. Je kunt nauwgezet uitwerken. Door je te houden aan style guidelines, randvoorwaarden en ontwerpbeslissingen realiseer je visuele ontwerpen die volledig voldoen aan de gestelde eisen. Modulewijzer Screen Design 4/23/11! 8
Opdracht 2 Mobiele Site Cinerama Opdracht Bij deze opdracht werk je aan de hand van de Interaction Design Deliverables die je kunt vinden in het Werkboek Screen Design. Je analyseert de personaʼs, scenarioʼs, flows en wireframes aandachtig. Je analyseert eveneens de huidige website van Cinerama (www.cineramabios.nl) om de visuele uitwerking te maken van de mobiele site van Cinerama. Cinerama heeft op dit moment geen mobiele site, maar wil gezien het stijgend gebruik van smartphones al hun bezoekers Meer informatie vind je in het Werkboek Screen Design. Randvoorwaarden Je ontwerp is gebaseerd op de huidige visuele stijl van de Cinerama website. Je ontwerp is geoptimaliseerd voor een mobiele telefoon een minimum schermbreedte van 640 pixels en een hoogte van 960 pixels. Opleveren Deze opdracht bestaat uit meerdere schermen. Je levert de volgende schermen per week op: Week Welk Scherm werk je uit? 5 Detail Pagina Film Film Reserveren Prijzen en Tijden 6 Landingsscherm Tijden Landingsscherm Titels Route Beschrijving Reserveren en Zaalverhuur Hoe Lever je deze op? cinerama_02_detail_pagina_film.png cinerama_03_film_reserveren.png cinerama_04_prijzen_en_tijden.png cinerama_01a_landingsscherm_tijden.png cinerama_01b_landingsscherm_titels.png cinerama_05_route_beschrijving.png cinerama_06_reserveren_en_zaalverhuur.png Je levert voor ieder scherm een 24-Bits PNG op. Daarnaast lever je iedere week een PSD op van de schermen die je die week gemaakt hebt. Opleveren doe je door de bestanden te posten op je studentenspace en de bijbehorende link naar je docent te melen. Toetsing Je werk wordt aan de hand van de volgende criteria getoetst: Analyse Heb je op basis van de door jou ontvangen input alle elementen kunnen benoemen die je moet opleveren? Heb je alle elementen juist geïdentificeerd? Heb je alle states van de interactieve elementen juist benoemd en geïdentificeerd? Heb je alle combinaties van elementen juist benoemd? Ontwerp Is je ontwerp op een logische visuele wijze ingedeeld? Heb je correct gebruik gemaakt van het door jou gekozen grid? Heb je de juiste typografie toegepast bij het uitwerken van je ontwerp? Zijn de interactieve elementen zo vormgegeven dat ze uitnodigen tot interactie? Uitwerking Is je ontwerp op de pixel nauwkeurig uitgevoerd? Heb je de brand guidelines juist geïnterpreteerd? Ben je van de brand guidelines afgeweken op het moment dat je vastgesteld had dat het een betere ontwerpoplossing op zou leveren? Kloppen de bestandsnamen van de documenten die je opgeleverd hebt? Heb je de Z-richting toegepast om de inrichting van je Photoshop Document duidelijk te maken? Is je PSD correct opgemaakt? Modulewijzer Screen Design 4/23/11! 9
Wat kun je als je deze opdracht hebt gedaan? Je kunt de visuele uitwerking van een interactief product precies en effectief uitwerken aan de hand van een volledige set interaction design deliverables (persona, scenario, flows, wireframes) en brand guidelines omtrent visuele en interactieve vormgeving. Je kunt een analyse maken van de aangeleverde input waarbij je alle relevante elementen en restricties in het ontwerp benoemt en de verbanden tussen deze elementen kunt uitleggen. Je kunt ontwerpen; door het toepassen van ontwerpprincipes (grids, typografie, vorm, kleur, layout, visuele elementen, beeld, interactieve elementen) maak je een effectieve visuele uitwerking van een interactief product. Je kunt nauwgezet uitwerken. Door je te houden aan style guidelines, randvoorwaarden en ontwerpbeslissingen realiseer je visuele ontwerpen die volledig voldoen aan de gestelde eisen. Modulewijzer Screen Design 4/23/11! 10
Opdracht 3 ipad Facturen Vodafone Opdracht Gefeliciteerd! De Sales Statistieken App is zoʼn succes dat het bureau waar je werkt gevraagd is om te pitchen voor een nieuwe facturatie-tool voor Vodafone medewerkers. Er is nog weinig bekend over hoe de tool gaat werken en wat er precies van verwacht wordt. Morgen moeten jij en je projectmanager een presentatie houden bij Vodafone over jullie visie van wat zoʼn tool in kan houden. Gelukkig heeft de interaction designer in team snel een mock-up in elkaar weten te zetten. Het is aan jou om deze mockup visueel uit te werken, zodat je morgen aan je klant kan laten zien dat jullie ook over de kennis en expertise beschikken om deze klus te klaren. Bij deze opdracht werk je aan de hand van de Interaction Design Deliverables die je kunt vinden in het Werkboek Screen Design. Je analyseert de personaʼs, scenarioʼs, flows en wireframes aandachtig. Meer informatie vind je in het Werkboek Screen Design. Randvoorwaarden Je ontwerp voldoet aan de brand guidelines van Vodafone. Je ontwerp is geoptimaliseerd voor een tablet met een schermbreedte van 768 pixels en een hoogte van 1024 pixels. Opleveren Deze opdracht bestaat uit meerdere schermen. Je levert de volgende schermen per week op: Week Welk Scherm werk je uit? Hoe Lever je deze op? 7 Nieuwe Factuur vodafone_ipad_nieuwe_factuur.png Je levert voor ieder scherm een 24-Bits PNG op. Daarnaast lever je iedere week een PSD op van de schermen die je die week gemaakt hebt. Opleveren doe je door de bestanden te posten op je studentenspace en de bijbehorende link naar je docent te melen. Toetsing Je werk wordt aan de hand van de volgende criteria getoetst: Analyse Heb je op basis van de door jou ontvangen input alle elementen kunnen benoemen die je moet opleveren? Heb je alle elementen juist geïdentificeerd? Heb je alle states van de interactieve elementen juist benoemd en geïdentificeerd? Heb je alle combinaties van elementen juist benoemd? Ontwerp Is je ontwerp op een logische visuele wijze ingedeeld? Heb je correct gebruik gemaakt van het door jou gekozen grid? Heb je de juiste typografie toegepast bij het uitwerken van je ontwerp? Zijn de interactieve elementen zo vormgegeven dat ze uitnodigen tot interactie? Uitwerking Is je ontwerp op de pixel nauwkeurig uitgevoerd? Heb je de brand guidelines juist geïnterpreteerd? Ben je van de brand guidelines afgeweken op het moment dat je vastgesteld had dat het een betere ontwerpoplossing op zou leveren? Kloppen de bestandsnamen van de documenten die je opgeleverd hebt? Heb je de Z-richting toegepast om de inrichting van je Photoshop Document duidelijk te maken? Is je PSD correct opgemaakt? Modulewijzer Screen Design 4/23/11! 11
Wat kun je als je deze opdracht hebt gedaan? Je kunt de visuele uitwerking van een interactief product precies en effectief uitwerken aan de hand van een volledige set interaction design deliverables (persona, scenario, flows, wireframes) en brand guidelines omtrent visuele en interactieve vormgeving. Je kunt een analyse maken van de aangeleverde input waarbij je alle relevante elementen en restricties in het ontwerp benoemt en de verbanden tussen deze elementen kunt uitleggen. Je kunt ontwerpen; door het toepassen van ontwerp-principes (grids, typografie, vorm, kleur, layout, visuele elementen, beeld, interactieve elementen) maak je een effectieve visuele uitwerking van een interactief product. Je kunt nauwgezet uitwerken. Door je te houden aan style guidelines, randvoorwaarden en ontwerp beslissingen realiseer je visuele ontwerpen die volledig voldoen aan de gestelde eisen. Modulewijzer Screen Design 4/23/11! 12
Kwartaal Opdracht Analyzing the Proʼs Inleiding De enige manier om beter te worden in wat je doet, is door iets heel vaak te doen, en te reflecteren op de dingen die je gedaan hebt, zodat je ze de volgende keer anders kunt aanpakken. Gelukkig kun je ook veel ervaring opdoen door te reflecteren op het werk van anderen. Immers, zij staan voor dezelfde problemen als jij als visual designer en hoe lossen zij dingen op? Slimme trucjes, creatieve vondsten en steengoeie oplossingen zijn nodig om tot een goed eindresultaat te komen. Daarom ga je tijdens iedere les professioneel gemaakte interactieve producten uit het veld onderwerpen aan jou kritische blik. Opdracht Tijdens iedere les analyseer je een van de gegeven websites, je benoemt wat goed is, wat beter kan en waarom de dingen die je benoemt goed zijn. Opleveren De 8 verzamelde analysekaarten gebruik je om een korte pdf-presentatie te maken over de sites de je geanalyseerd hebt. Deze lever je aan het eind van het kwartaal in bij je docent. Toetsing Je pdf-presentatie wordt beoordeeld op volledigheid en de kwaliteit van je analyse. Wat kun je als je deze opdracht hebt gedaan? Door goed te kijken en te deconstrueren leer je zien hoe professionals hun werk aanpakken en hoe je hun technieken toe kunt passen in je eigen werk. Modulewijzer Screen Design 4/23/11! 13
4. Toetsing en Beoordeling Eindcijfer Het eindcijfer voor de module wordt gevormd door het gemiddelde van de bovenstaande opdrachten. Herkansingen Het herstellen van ingeleverd werk en de herkansing verlopen als volgt: Herkansing Bij het behalen van een onvoldoende resultaat voor de module (cijfer 1-5) wordt er door je docent vastgesteld of je een reparatie uitvoert op je bestaande opdrachten, of dat je de herkansingsopdracht voor de module moet maken. De reparatie dan wel herkansing wordt ingeleverd gedurende week 10 van de daaropvolgende onderwijsperiode. Herkansingen uit kwartaal 4 worden ingeleverd tijdens de herkansingsweek voor de zomervakantie. Als je deze herkansingsmogelijkheid gedurende dit studiejaar niet benut, dien je in het daaropvolgende studiejaar de module in zijn geheel opnieuw te volgen. Zie ook artikel 10.1.3 uit de examenregeling. Uitzonderingen op deze herkansing zijn alleen mogelijk in overleg met- en overeenstemming van slc/decaan en je betreffende docent. Resultaat Niet Deelgenomen Bij het resultaat ND (Niet Deelgenomen) dien je in het daaropvolgende studiejaar de module in zijn geheel opnieuw te volgen. Herkansingsopdracht De herkansingsopdracht bestaat uit het maken van de 4 opdrachten vermeld in deze modulewijzer. Modulewijzer Screen Design 4/23/11! 14