Screen Design Puntgave Pixels

Transcriptie

1 Communication & Multimedia Design Screen Design Puntgave Pixels Datum 4 April 0 Versie 0.6 Auteurs Harmen van Balen en Jasper Schelling Modulecode CMDDES0-0

2 Inhoudsopgave Algemeen Opdracht Vodafone Sales Statistics 4 Opdrachtomschrijving 5 Persona s 6 Scenario s 7 Inlog scherm 8 Landingscherm dashboard 9 Notificatie dropdown 0 Sales statistieken pagina Toestellen overzicht pagina Samsung toestellen overzicht pagina Detail toestel pagina 4 Detail toestel pagina tooltips 5 Opdracht Mobiele Site Cinerama 6 Opdrachtomschrijving 7 Persona s 8 Scenario s 9 Sitemap Cinerama mobiele website 0 Landingspagina Titel weergave Detail pagina film Film reserveren 4 Prijzen & tijden 5 Route beschrijving 6 Reserveren 7 Opdracht Vodafone ipad facturen pitch 8 Opdrachtomschrijving 9 Nieuwe Factuur 0 /0

3 Algemeen Versie beheer Versie Datum Auteur Opmerkingen 0.6 april 0 Jasper Schelling Opdrachtomschrijvingen toegoegd. 0.5 april 0 Harmen van Balen Scenario s toegevoegd april 0 Harmen van Balen Persona s toegevoegd 0. 9 april 0 Harmen van Balen Def. Interactie toegevoegd 0. 6 April 0 Jasper Schelling Documentstructuur aangepast februari 0 Harmen van Balen Interactie ontwerp Over dit werkboek In dit werkboek voor de module Screen Design vind je alle interaction design deliverables die je nodig hebt om een passende visuele uitwerking te maken van de In het interactie ontwerp wordt de flow en werking van de interactieve producten beschreven. Het gaat hier om de manier waarop gebruikers navigeren, hoe de informatie gestructureerd is en de werking van interactieve componenten. Let op! Het interactie ontwerp is een schematische weergave. Het visueel stijlontwerp is een afgeleide hiervan. Alle gebruikte kopij in het interactie ontwerp is functioneel en tijdelijk. Definitieve teksten worden apart aangeleverd. /0

4 Opdracht Vodafone Sales Statistics 4/0

5 Opdrachtomschrijving Opdracht 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 dit werkboek. 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 04 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? Toestellen overzicht pagina vodafone_04_toestellen_overzicht_pagina.png Login Scherm vodafone_0_inlog_scherm.png Landingsscherm Dashboard vodafone_0a_landingsscherm_dashboard.png Notificatie Dropdown vodafone_0b_notificatie_dropdown.png 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? 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. Samsung Toestellen Overzicht vodafone_05_samsung_toestellen_overzicht.png 4 Detail Toestel Pagina vodafone_06a_detail_toestel_pagina.png Detail Toestel Pagina Tooltips vodafone_06b_detail_toestel_pagina_tooltips.png Sales Statistieken vodafone_0_sales_statistieken.png Je levert voor ieder scherm een 4-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? 5/0

6 Persona s Annemiek Duits Een toestel kan niet zomaar uit ons aanbod wordt gehaald, ik moet goed kunnen onderbouwen waarom het noodzaak is Peter de Boer Voor mijn adviezen kijk ik vooral naar, resultaten, de huidige markt, prijs kwaliteit en trend ontwikkelingen Persona kenmerken 55 jaar Getrouwd, kinderen van 0 en jaar. Woonachtig in Delft, Nederland Financial Controller bij Vodafone Heeft veel contact met telefoon producenten Persona kenmerken 6 jaar Single, geen kinderen. Woonachtig in Amsterdam, Nederland Sales strateeg bij Vodofone Woont samen met een vriend in de binnenstad van Amsterdam Omschrijving Annemiek is een succesvolle carrière vrouw welke toebehoort aan de top van haar vakgebied. Ze heeft in de loop der jaren veel ervaring opgedaan binnen verschillende bedrijven waardoor ze de do s en don t als geen ander kent. Op haar werk heeft ze gaan contact met leveranciers van mobiele toestellen. Haar taak is om ervoor te zorgen dat alle toestellen die Vodafone verkoopt goed scoren en bij tegenvallende verkopen worden vervangen door een nieuw en beter toestel. Technologie profiel Annemiek heeft van de zaak een Sony laptop met Windows xp en een BlackBerry. Thuis heeft ze van het man een ipad gekregen voor haar verjaardag. Technische vaardigheden Annemiek werk vaan met Word en Excel om rapporten uit te werken en gegeven inzichtelijk te maken. Daarnaast heeft ze vaak contact met leveranciers via Skype of via de mail (Outlook). Motivatie Annemiek is steeds vaker te vinden op het Vodafone intranet. Hier kan ze makkelijk en snel een beeld krijgen hoe goed telefoons het nog doen bij hun klanten. Op deze manier kan ze op tijd zorgen voor vervangende toestellen mochten er een aantal niet meer populair zijn. Omschrijving Peter is sinds,5 jaar werkzaam bij Vodafone, hij is actief en heeft een focus op zijn carrière. Hij brengt adviezen uit over alles wat te maken heeft met telefoons. Dit zijn zaken zoals de prijzen van een telefoon, welke abonnementen er met welke telefoon verkocht moeten worden, wanneer er acties gehouden moeten worden, etc. Om ervoor te zorgen dat zijn adviezen realistisch zijn bestudeerd hij de cijfers en toestellen goed. Technologie profiel Peter heeft een mooie HP notebook van de zaak welke hij ook voor privé mag gebruiken, dit geldt ook voor zijn Blackberry welke hij naast bellen gebruikt op te twitteren. Twee weken geleden heeft hij ook een tablet van samsung gekocht om lekker vanuit zijn luie stoel te internetten, deze neemt hij regelmatig mee naar zijn werk om te gebruiken tijdens vergaderingen. Technische vaardigheden Peter gebruikt op zijn computer de basis programma s van office voor zijn documentatie, daarnaast gebruikt hij vaak het intranet van Vodafone. Verder weet hij alle soorten kanalen via zijn telefoon te onderhouden van Hyves tot Twitter. Motivatie Peter is jong en gedreven, hij wil zijn beslissingen daarom onderbouwen met verschillende argumenten zoals bijvoorbeeld cijfers. Van alle kennis die hij opdoet voor een advies probeert hij een zo n goed mogelijk en compleet rapport te maken welke overzichtelijk is voor al zijn collega s. 6/0

7 Scenario s Scenario Cijfers zijn cijfers Annemiek Duits Annemiek gaat vanmiddag een bespreking in met Samsung over nieuwe contracten over telefoon leveringen. Ze heeft gemerkt dat een aantal modellen niet meer zo populair zijn. Om goed de onderhandelingen in te gaan heeft ze cijfers nodig om goed te onderhandelen. Scenario De Samsung Galaxy moet aantrekkelijker worden Peter de Boer De verkopen van de Samsung Galaxy S vallen de laatste maanden erg tegen. Daarom aan Peter de taak om met een voorstel te komen om deze telefoon weer een boost te geven in de verkoop. Scenario Zodra Annemiek op haar werk is start ze haar computer op om een presentatie voor te bereiden. Ze start haar browser op en logt in op het intranet. Ze ziet via de notificaties dat ze een aantal mailtjes heeft gehad. Geen van deze is urgent gemarkeerd dus ze zal deze op een later tijdstip bekijken. Scenario Zodra Peter achter zijn computer zit start hij zijn browser om in te loggen om het intranet. Hij klapt direct het item sales statistieken open en klikt op toestellen. Hij komt op de overzicht pagina van alle telefoon aanbieders. Bij Samsung klikt hij direct op de Samsung Galaxy S Black om naar de detail pagina te gaan. Ze gaat via de sales statistieken naar het toestellen opzicht waar ze klikt op overzicht Samsung. Ze is nu op het toestel overzicht van Samsung. Ze ziet dat de Samsung Galaxy S al erg lang geleverd wordt maar de prijs van het toestel best hoog is voor zijn leeftijd. Ze klikt op Bekijk toestel om naar de detail-pagina te gaan. Op de detail pagina bekijkt hij de verkoop cijfers en met welke abonnementen het toestel het meest verkocht wordt. Duidelijk is al snel dat vaak gegaan wordt voor het goedkoopste abonnement maar dat de prijs van het toestel hoog is waardoor er veel moet worden bij betaald. Hier bekijkt de de populariteit meter van de telefoon en de verkoopcijfers van Nederland. Van beide neemt ze een screenshot om deze toe te voegen in de presentatie. Ze besluit van de verkoopcijfers niet alleen een screenshot van maart erin te doen maar ook een van November toen de telefoon nog beter verkocht werd. Peter neemt een screenshot van de periodieke verkoop cijfers van Nederland van het afgelopen jaar, abonnement aandeel en de bezoekers op de pagina (om aan te tonen hoe populair de telefoon nog is). Als deze screenshots zal hij gebruiken bij zijn advies. Inlog dashboard inlog gebruiker Landingpage dashboard Inlog dashboard inlog gebruiker Landingpage dashboard Detail pagina toestel gebruiker bekijkt notificaties Lijst view met toestellen Overzichts pagina type toestellen Sales statestieken pagina Detail pagina toestel Overzichts pagina type toestellen 7/0

8 Inlog scherm. Logo van het intranet. Deze is geen link op deze pagina.. Avatar van de gebruiker, wanneer een gebruiker nog niks heeft ingevuld dan is deze leeg en zal er een default afbeelding weergeven worden. Zodra er een gebruikersnaam is ingevuld en de gebruiker wordt herkend wordt zijn of haar avatar weergegeven. logo Welkom op het Vodafone intranet,. Invoervelden voor gebruikersnaam en wachtwoord. 4. Er kan pas op de knop inloggen geklikt worden wanneer alle velden zijn ingevuld. Wanneer een of meerdere velden niet zijn ingevuld zijn is deze knop niet klikbaar. 5. Wanneer de gebruiker zijn of haar wachtwoord is vergeten kan hij of zij via deze link hun wachtwoord opvragen. Vul uw gegevens in om in te loggen. Gebruikersnaam: Wachtwoord: wachtwoord onthouden? 4 Inloggen 5 Wachtwoord vergeten? 8/0

9 Landingscherm dashboard 4 logo Ingelogd als Jasper Schelling uitloggen Laaste nieuws Web-mail Agenda Sales statistieken CMS Trainings vaardigheden Dashboard Welkom Jasper, 6 7 Laatste nieuws instellingen aanpassen Web-mail inbox Nieuwe Windows Phone 7 toestellen Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... 5 februari 0 - :45 Lees verder -> Nieuwe Windows Phone 7 toestellen Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... 5 februari 0 - :45 Lees verder -> Nieuwe Windows Phone 7 toestellen Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... 5 februari 0 - :45 Lees verder -> naar overzicht pagina instellingen instellingen aanpassen naam onderwerp datum H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ 5 4 naar web-mail inbox. Logo van Vodafone intranet, deze linked naar de landingspagina (huidige pagina).. Omdat de gebruiker is ingelogd wordt een kleine avatar, de gebruikersnaam weergegeven en een knop om uit te loggen.. Gebruiker gerelateerde knoppen; - Notificaties van het systeem - Instellingen - Profiel instellingen 4. Het hoofdmenu van het intranet. 5. De gebruiker kan het dashboard geheel aanpassen naar eigen wensen doormiddel van de widgets aanpassen knop. 6. Blok met het laatste nieuws 7. Blok waarin een deel van de inbox wordt ingeladen van de gebruiker 8. E-commerce blok met statistieken over verkoop cijfers 9. Analytics blok met cijfers over de Vodafone website 0. Agenda welke altijd in beeld is. Met kleuren zal worden aangegeven worden wanneer er iets op een dag gepland staat. 0 Maart 0 View MA DI WO DO VR ZA ZO E-commerce instellingen aanpassen Website analytics (Maart 0) Webshop verkoop ,95- (0) Gemiddelde verkoop 5,0- (0) Nieuwe abbonementen 87 (maart 0) Verkochte toestellen 0 (maart 0) instellingen aanpassen Pagina Views Tijd (min:sec) View % /sales 8940 :0 0,85% /blog :0 0,85% /iphone :5 0,85% /pre-paid :4 0,85% /faq :5 0,85% /contact : 0,85% /gratis :5 0,85% /buitenland 445 0:4 0,85% /internet :5 0,85% Naar sales statics Naar analytics 9/0

10 Notificatie dropdown logo Ingelogd als Jasper Schelling uitloggen Laaste nieuws Web-mail Agenda Sales statistieken CMS Trainings vaardigheden Dashboard Welkom Jasper, Laatste nieuws Nieuwe Windows Phone 7 toestellen instellingen aanpassen Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... 5 februari 0 - :45 Lees verder -> Nieuwe Windows Phone 7 toestellen Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... 5 februari 0 - :45 Lees verder -> Nieuwe Windows Phone 7 toestellen Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... 5 februari 0 - :45 Lees verder -> Web-mail inbox Je hebt een bericht van H. van Balen Nieuwe HTC toestel toegevoegd pagina instellingen Je hebt een bericht van P. van Est instellingen aanpassen naam Je onderwerp hebt een bericht van datum H. van Balen H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ H. van Balen HTC deal febr 0 /04/ 4. Wanneer er op het notificatie icoon geklikt wordt klapt deze open, de notificaties worden dan getoond worden.. In de agenda zal visueel aangegeven worden wanneer er op een bepaalde datum iets geplanned staat. Wanneer er op een datum geklikt wordt zal de planning van die dag in een pop-up getoond worden. naar overzicht naar web-mail inbox Donderdag 5 maart 0 09:00-0:00 Project bespreking :00 Maart - 0 4:00 Lunch HTC View MA 4:0 DI - 5:00 WO DO Campagne VR ZA cijfers ZO 6:00 8-7:0 Project 4 bespreking E-commerce Webshop verkoop ,95- (0) Gemiddelde verkoop 5,0- (0) instellingen aanpassen Nieuwe abbonementen 87 (maart 0) Verkochte toestellen 0 (maart 0) Website analytics (Maart 0) instellingen aanpassen Pagina Views Tijd (min:sec) View % /sales 8940 :0 0,85% /blog :0 0,85% /iphone :5 0,85% /pre-paid :4 0,85% /faq :5 0,85% /contact : 0,85% /gratis :5 0,85% /buitenland 445 0:4 0,85% /internet :5 0,85% Naar sales statics. Naar analytics 0/0

11 Sales statistieken pagina logo Ingelogd als Jasper Schelling uitloggen Laaste nieuws Web-mail Dashboard > Sales statistieken Sales statistieken Jaaroverzicht (00) instellingen aanpassen. Net onder de header is het kruimelpad, hier kan de gebruiker zien waar hij of zij zich bevind binnen het intranet. Het kruimelpad is klikbaar en kan gebruikt worden om terug te navigeren.. Het Vodafone jaaroverzicht van 00. (beknopt). In het menu wordt duidelijk aangegeven op welke pagina de gebruiker zich bevind. De onderliggende pagina s worden in dit stadum ook al getoond. Agenda Sales statistieken ,0-4. Tevens is deze opengeklapt en worden alle onderliggende items getoond. 5. Blokje met daarin de verhouding van de afgesloten abbonnementen bij Vodafone. 6. Blokje met de telefoon top 0 van Maart 0. 4 Abbonementen Toestellen Sim only Accessoires Webshop verkoop ,95- (totaal) Omzet abbonementen ,95- (totaal) Totale omzet ,95- (totaal) CMS Maart 0 MA DI WO DO VR ZA ZO Trainings vaardigheden View Abbonementen instellingen aanpassen Toestel top 0 (Maart 0) instellingen aanpassen Model Merk Aantal verkocht 50i. iphone 4G 6GB Apple.5 00i 450i. Galaxy S Samsung i. Bold 9780 BlackBerry i 4. Desire White HTC 875 overige (i) Slider Nokia iphone G 6GB Apple Curve 850 BlackBerry Optimus X Speed LG Trophy HTC Galaxy Apollo Samsung Abbonementen overzicht Toestel overzicht /0

12 Toestellen overzicht pagina logo Ingelogd als Jasper Schelling uitloggen Laaste nieuws Web-mail Agenda Sales statistieken Dashboard > Sales statistieken > Toestellen Toestellen logo iphone fabrikant Aantal toestellen Verkochte toestellen (NL) logo Nokia fabrikant Aantal toestellen 4 Verkochte toestellen (NL) Lijst instellingen Top. Gs 8GB. 4G GB 4. 4G 6GB Overzicht iphone Top. C7-00 Silver silver Pink meer toestellen Overzicht Nokia. De overzichtspagina van de toestellen, hier worden de toestellen per merk getoond.. De producten bestaat uit een logo, merknaam, aantal toestellen en het aantal verkochte toestellen van het merk in Nederland.. Daar naast is een lijstje van vinden met beschikbare toestellen van het merk. Deze hebben a;s eerste een statistieken indicator welke de populariteit van de telefoon aangeeft, daarachter staat welk nummer hij heeft binnen het merk, vervolgens de naam van het type toestel welke klikbaar zijn en linken naar de detailpagina. 4. Doormiddel van deze knop kan er naar een overzicht gegaan worden met alle toestellen van dit merk. Abbonementen Toestellen Sim only Accessoires CMS Trainings vaardigheden logo Sony Ericsson fabrikant Aantal toestellen Verkochte toestellen (NL) logo LG fabrikant Aantal toestellen Verkochte toestellen (NL) logo Samsung fabrikant Aantal toestellen Verkochte toestellen (NL) Top. Xperia Play. Xperia Arc Overzicht Sony Top. Optimus X Speed Overzicht LG Alle toestellen. Galaxy Ace White. Galaxy Ace Black. Galaxy S White 4. Galaxy S Black 5. S70 Wave TouchWiz 6. I5800 Galaxy Apollo 7. Star Qwerty B40 8. S650 Corby 9. Ultra TOUCH 0. Star. Jet S8000. D900i Overzicht Samsung Maart 0 View MA DI WO DO VR ZA ZO logo HTC fabrikant Aantal toestellen 5 Verkochte toestellen (NL) logo BlackBerry fabrikant Aantal toestellen Verkochte toestellen (NL) Top. Desire S vanilla. Desire HD. Desire White meer toestellen Overzicht HTC Top. Torch Bold White. Bold Overzicht BlackBerry /0

13 Samsung toestellen overzicht pagina logo Ingelogd als Jasper Schelling uitloggen Dashboard > Sales statistieken > Toestellen > Samsung Laaste nieuws Samsung toestellen Sorteer op: Ranglijst. De overzichtspagina van de toestellen binnen een merk. Doormiddel van het drop-down menu kan er gesorteerd worden.. Ook hier weer een indicator. Web-mail Agenda Sales statistieken Abbonementen Toestellen Sim only Accessoires CMS # Naam toestel Start datum verkoop Verkochte toestellen (nl) Prijs toestel los. Galaxy Ace White ,8- detailpagina >. Galaxy Ace Black ,8- detailpagina >. Galaxy S White ,8- detailpagina > 4. Galaxy S Black ,8- detailpagina > 5. S70 Wave TouchWiz ,8- detailpagina > 6. I5800 Galaxy Apollo ,8- detailpagina > 7. Star Qwerty B ,8- detailpagina > 8. S650 Corby ,8- detailpagina > 9. Ultra TOUCH ,8- detailpagina > 0. Star ,8- detailpagina >. Jet S ,8- detailpagina >. D900i ,8- detailpagina > Trainings vaardigheden Maart 0 View MA DI WO DO VR ZA ZO /0

14 Detail toestel pagina. Naam van het toestel. logo Ingelogd als Jasper Schelling uitloggen Laaste nieuws Dashboard > Sales statistieken > Toestellen > Samsung > Galaxy S White Samsung Galaxy S White. Onder deze dropdown zitten verschillende opties die de gebruikers heeft met betrekken tot deze telefoon. (printknop, pdf export & mailen). Basis informatie van het toestel; een afbeelding, korte tekst en basis statistieken. Web-mail Agenda Sales statistieken Abbonementen Toestellen Sim only Accessoires CMS Trainings vaardigheden De Samsung Galaxy S, winnaar van de Eisa Award voor beste smartphone Start datum verkoop Verkochte toestellen (Nederland) 4 afbeelding toestel Prijs toestel los 569,00 (geschiedenis) Populariteit telefoon safe cold hot Aantal verkocht laatste maand 66 5 Aantal verkocht laatste 7 dagen Bekijk toestel online > Periodieke verkoopcijfers Maart 0 7 Maand Jaar Verkoop wereldwijd Verkoop per werelddeel 60 Verkoop per regio 40 0 Verkoop per land Nederland Legenda Abbonement Toestel los Pre paid Totaal 4. Deze indicator geeft de verkoop populariteit van de telefoon aan. 5. De telefoon kan direct online bekeken worden. 6. Verkoopcijfers van deze telefoon over een bepaalde periode, deze gehele grafiek is klikbaar. 7. Er kan door de verschillende maanden geklikt worden. 8. Ook kan er gekozen worden om per jaar te kijken ipv per maand. 9. Dropdown waarin een selectie gedaan wordt van het land (dit zal veranderen als er bijv per regio gekozen wordt). Onder de dropdown is de legenda te vinden. 0. Keuze uit verschillende verkoop niveaus. Dit kan per land tot aan de wereldwijde verkoop.. Een diagram met daarin de meest afgesloten abbonementen icm deze telefoon.. Analytics van de telefoonpagina op de website.. In het laatste blokje kan de gebruiker terug vinden hoe qua specificaties deze telefoon zich verhoud tot de overige telefoons in ons aanbod. Abbonement aandeel Telefoon pagina bezoekers 54 Vandaag bekeken (+0%) bezoekers Hardware specs Specificatie leeftijd old Medium new Maart 0 View MA DI WO DO VR ZA ZO Prestaties Beeldscherm Camera i 00i 450i overige (i) M D W D V ZA ZO Systeem 4/0

15 Detail toestel pagina tooltips. De geschiedenis van de prijs van het toestel. logo Ingelogd als Jasper Schelling uitloggen. Bij een hover verschijnt in het tooltip het aantal daadwerkelijke procenten. Laaste nieuws Web-mail Agenda Sales statistieken Abbonementen Toestellen Dashboard > Sales statistieken > Toestellen > Samsung > Galaxy S White Samsung Galaxy S White De Samsung 800 Galaxy S, winnaar van de Eisa Award voor beste smartphone Start datum verkoop Verkochte toestellen (Nederland) afbeelding toestel Prijs toestel los 569,00 (geschiedenis) Bekijk toestel online > Populariteit telefoon safe cold hot Aantal verkocht laatste maand 66 Aantal verkocht laatste 7 dagen 45 Sim only Accessoires CMS Trainings vaardigheden Periodieke verkoopcijfers Verkoop wereldwijd Verkoop per werelddeel Verkoop per regio Verkoop per land Maart 0 Maand Jaar Nederland Legenda Abbonement Toestel los Pre paid Totaal Abbonement aandeel 8,5 % Telefoon pagina bezoekers Hardware specs 54 Vandaag bekeken (+0%) bezoekers Specificatie leeftijd old Medium new Maart 0 View MA DI WO DO VR ZA ZO Prestaties Beeldscherm Camera i 00i 450i overige (i) M D W D V ZA ZO Systeem 5/0

16 Opdracht Mobiele Site Cinerama 6/0

17 Opdrachtomschrijving Opdracht 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 ( 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 dit werkboek. 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? Hoe lever je deze op? 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. 5 Detail Pagina Film cinerama_0_detail_pagina_film.png Film Reserveren cinerama_0_film_reserveren.png Prijzen en Tijden cinerama_04_prijzen_en_tijden.png 6 Landingsscherm Tijden cinerama_0a_landingsscherm_tijden.png Landingsscherm Titels cinerama_0b_landingsscherm_titels.png Route Beschrijving cinerama_05_route_beschrijving.png Reserveren en Zaalverhuur cinerama_06_reserveren_en_zaalverhuur.png Je levert voor ieder scherm een 4-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? 7/0

18 Persona s David Deutekom Ik erger me er vaak aan dat we pas bij de bioscoop moeten kijken welke films er draaien Persona kenmerken jaar Heeft een relatie, geen kinderen. Woonachtig in Rotterdam, Nederland Net afgestudeerd en werkend bij een reclame bureau Woont nog in een studentenhuis Floortje Pronk Ik haat het als we niet met z n 8e naast elkaar kunnen zitten Persona kenmerken 0 jaar Heeft geen relatie, geen kinderen. Woonachtig in Rotterdam, Nederland Studeert vrijetijdsmanagement op HBO niveau in Utrecht Woont bij haar ouders Omschrijving Peter is net afgestudeerd en werkt sinds een paar maanden bij een reclame bureau als ontwerper. David houdt enorm van muziek en kan bijna niet zonder tijdens het werk. Omdat hij 5 dagen in de week moet werken is hij vaak druk en heeft hij minder tijd om leuke dingen te doen met zijn huisgenoten die nog wel studeren. Technologie profiel David werkt op zijn werk achter een mooie imac, thuis heeft hij nog een windows computer staan maar hij hard aan het sparen om ook hier een imac te krijgen. Daarnaast heeft hij een iphone en een spiegelreflex camera waarmee hij als hobby-fotograaf goed uit de voeten kan. Technische vaardigheden David is iemand die ieder programma wel eens heeft gebruikt, van Twitter op zijn telefoon tot aan 4d cinema op mijn computer. Motivatie David houdt erg veel van films, en wat is er beter dan na een lange dag werken lekker een filmpje te kijken in de bioscoop. Omschrijving Floortje is een e jaar studente vrijetijdsmanagment. Ze is vrijwel nooit thuis omdat ze graag dingen doet met vriendinnen. Iedere vrijdag avond gaat ze samen met haar vriendinnen naar de film Technologie profiel Floortje heeft zelf mini laptop, een iphone en heeft ondanks een ipad gekregen voor haar verjaardag. Technische vaardigheden Floortje is op haar computer alleen handig met de basis (word, etc), op haar mobiel gaat ze snel vooruit, ze heeft hem nog niet zo lang maar ze vind het heerlijk om hier stukjes te schrijven voor haar blog. Dit is vooral omdat ze vaak aan het reizen in en ze zo haar tijd nuttig gebruikt. Motivatie Floortje houdt altijd goed in de gaten welke films er op vrijdag draaien, dit doet ze vaak als ze onderweg is naar school of haar vriendinnen. 8/0

19 Scenario s Scenario Onderweg de film kiezen is erg relaxed David Deutekom David is opweg met vrienden naar de Cinerama, ze weten nog niet naar welke film te gaan maar om half 9 draaien er vaak meerdere films dus dat komt wel goed. Het openbaar vervoerd werkt alleen niet mee en ze zijn toch al aan de late kant. Scenario Reserveren gaat super makkelijk en snel! Floortje Pronk Floortje heeft met haar vriendinnen afgesproken dat ze over twee dagen (donderdag) naar de bioscoop gaan omdat dan de premiere van Gooische vrouwen is welke ze niet willen missen. Scenario David heeft geen zin om bij de bioscoop zich nog druk moeten maken over naar welke film ze moeten gaan. Hij pakt z n iphone en gaat naar de Cinerama mobiele website. Op de website krijgt hij meteen een mooi overzicht van alle films die die dag draaien. Hij ziet dat er films zijn waar ze uit kunnen kiezen. De namen zeggen ze niks en hij bekijkt de detail-pagina s van de films om te kijken waar ze over gaan. Scenario Floortje heeft erg veel zin in de film omdat ze een groot fan is. Ze is alleen bang dat het erg druk zal zijn en dat er geen plaats meer is. Ze pakt haar telefoon en surft naar de Cinerama website om te kijken of er meer over de film bekend is. Op de website selecteert ze donderdag, ze ziet de film niet meteen in de lijst staan en klikt op titels. Gooische vrouwen staat direct bovenaan met premiere erbij. Ze klikt op het detail icoon om naar de detail pagina te gaan. Na veel discussie gaat het tussen twee films. David bekijkt de trailers van de twee films welke de doorslag geven. Ze gaan naar Justin Bieber! Hier ziet ze dat ze kan reserveren voor de film. al van de films zitten vol, ze klikt snel op de laatste die draait en reserveert voor 8 personen op de reserverings-pagina. Landingspagina bekijkt detail pagina s Detail film Landingspagina selecteert donderdag selecteert titels view Detail film bekijkt trailer Detail film bekijkt trailer Reserveren pagina Detail film 9/0

20 Sitemap Cinerama mobiele website Landingspagina Prijzen & tijden Route beschrijving Reserveren Detail film Film reserveren 0/0