Communication & Multimedia Design
Screen Design Puntgave Pixels
Datum
24 April 2011
Versie
0.6
Auteurs
Harmen van Balen en Jasper Schelling
Modulecode
CMDDES01-10
Inhoudsopgave Algemeen 3
Opdracht 1 — Vodafone Sales Statistics
4
Opdrachtomschrijving 5 Persona’s 6 Scenario’s 7 Inlog scherm 8 Landingscherm dashboard 9 Notificatie dropdown 10 Sales statistieken pagina 11 Toestellen overzicht pagina 12 Samsung toestellen overzicht pagina 13 Detail toestel pagina 14 Detail toestel pagina tooltips 15
Opdracht 2 — Mobiele Site Cinerama
16
Opdrachtomschrijving 17 Persona’s 18 Scenario’s 19 Sitemap Cinerama mobiele website 20 Landingspagina 21 Titel weergave 22 Detail pagina film 23 Film reserveren 24 Prijzen & tijden 25 Route beschrijving 26 Reserveren 27
Opdracht 3 — Vodafone iPad facturen pitch Opdrachtomschrijving Nieuwe Factuur
28 29 30
Werkboek Screen Design — April 2011
2/30
Algemeen
Versie beheer Versie Datum
Auteur
Opmerkingen
0.6 0.5 0.4 0.3 0.2 0.1
Jasper Schelling Harmen van Balen Harmen van Balen Harmen van Balen Jasper Schelling Harmen van Balen
Opdrachtomschrijvingen toegoegd. Scenario’s toegevoegd Persona’s toegevoegd Def. Interactie toegevoegd Documentstructuur aangepast. Interactie ontwerp
23 april 2011 21 april 2011 20 april 2011 19 april 2011 16 April 2011 20 februari 2011
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.
Werkboek Screen Design — April 2011
3/30
Opdracht 1 — Vodafone Sales Statistics
Werkboek Screen Design — April 2011
4/30
Opdrachtomschrijving 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 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 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?
1 Toestellen overzicht pagina vodafone_04_toestellen_overzicht_pagina.png Login Scherm vodafone_01_inlog_scherm.png 2
Landingsscherm Dashboard Notificatie Dropdown
3
Samsung Toestellen Overzicht
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.
vodafone_02A_landingsscherm_dashboard.png vodafone_02B_notificatie_dropdown.png
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_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? Werkboek Screen Design — April 2011
5/30
Persona’s
Annemiek Duits
Peter de Boer
“Een toestel kan niet zomaar uit ons aanbod wordt gehaald, ik moet goed kunnen
“Voor mijn adviezen kijk ik vooral naar, resultaten, de huidige markt, prijs kwali-
onderbouwen waarom het noodzaak is”
teit en trend ontwikkelingen”
Persona kenmerken
Persona kenmerken
• 55 jaar
• 26 jaar
• Getrouwd, 2 kinderen van 20 en 23 jaar.
• Single, geen kinderen.
• Woonachtig in Delft, Nederland
• Woonachtig in Amsterdam, Nederland
• Financial Controller bij Vodafone
• Sales strateeg bij Vodofone
• Heeft veel contact met telefoon producenten
• 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.
Omschrijving Peter is sinds 2,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
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.
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 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.
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.
Werkboek Screen Design — April 2011
6/30
Scenario’s
Scenario 1
Scenario 2
Cijfers zijn cijfers
De Samsung Galaxy moet aantrekkelijker worden
Annemiek Duits
Peter de Boer
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.
De verkopen van de Samsung Galaxy S vallen de laatste 3 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
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.
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
Inlog dashboard
dashboard
inlog gebruiker
bekijkt
toestel
notificaties
Detail pagina
toestellen
dashboard
gebruiker
Detail pagina
Lijst view met
Landingpage
Overzichts
Sales
pagina type
statestieken
toestellen
pagina
toestel
Overzichts pagina type toestellen
Werkboek Screen Design — April 2011
7/30
Inlog scherm 1. Logo van het intranet. Deze is geen link op deze pagina. 2. 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. 3. Invoervelden voor gebruikersnaam en wachtwoord.
1 logo
2
Welkom op het Vodafone intranet,
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:
3
Wachtwoord: wachtwoord onthouden? 4
5
Inloggen
Wachtwoord vergeten?
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
8/30
Landingscherm dashboard
1
2
logo 4
Ingelogd als Jasper Schelling
4
3
uitloggen
1. Logo van Vodafone intranet, deze linked naar de landingspagina (huidige pagina).
Dashboard
Welkom Jasper,
Laaste nieuws
6
Web-mail
Laatste nieuws
5
instellingen aanpassen
7
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do... Lees verder ->
15 februari 2011 - 12:45
Sales statistieken
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...
CMS
Lees verder ->
15 februari 2011 - 12:45
Trainings vaardigheden
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... Lees verder ->
15 februari 2011 - 12:45
instellingen aanpassen
datum
4. Het hoofdmenu van het intranet.
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
5. De gebruiker kan het dashboard geheel aanpassen naar eigen wensen doormiddel van de “widgets aanpassen” knop.
H. van Balen
HTC deal febr 2011
11/04/11
6. Blok met het laatste nieuws
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
7. Blok waarin een deel van de inbox wordt ingeladen van de gebruiker
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
naar overzicht
8
E-commerce
instellingen aanpassen
4.000
/sales
183940
1:10
0,85%
3.000
/blog
54554
0:30
0,85%
/iphone
688225
0:25
0,85%
/pre-paid
687421
0:34
0,85%
/faq
245453
0:25
0,85%
15.01
MA DI WO DO VR ZA ZO 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
30.01
15.02
29.02
15.03
30.03
Webshop verkoop €12.345.3040,95- (2011)
Nieuwe abbonementen 873 (maart 2011)
/contact
445423
0:32
0,85%
/gratis
545452
0:25
0,85%
Gemiddelde verkoop €152,30- (2011)
Verkochte toestellen 1102 (maart 2011)
/buitenland 244523
0:41
0,85%
/internet
0:53
0,85%
Naar sales statics
545522
8. E-commerce blok met statistieken over verkoop cijfers 9. Analytics blok met cijfers over de Vodafone website 10. Agenda welke altijd in beeld is. Met kleuren zal worden aangegeven worden wanneer er iets op een dag gepland staat.
instellingen aanpassen
View %
1.000
View
Website analytics (Maart 2011)
Pagina Views Tijd (min:sec)
2.000
10 Maart 2011
naar web-mail inbox
9
3. Gebruiker gerelateerde knoppen; - Notificaties van het systeem - Instellingen - Profiel instellingen
onderwerp
naam
Nieuwe Windows Phone 7 toestellen Agenda
Web-mail inbox
pagina instellingen
2. Omdat de gebruiker is ingelogd wordt een kleine avatar, de gebruikersnaam weergegeven en een knop om uit te loggen.
Naar analytics
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
9/30
Notificatie dropdown
logo
Ingelogd als Jasper Schelling
4
uitloggen
1
Dashboard
Welkom Jasper,
Laaste nieuws
Web-mail
Laatste nieuws
instellingen aanpassen
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Do...
Agenda
Lees verder ->
15 februari 2011 - 12:45
Sales statistieken
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...
CMS
Lees verder ->
15 februari 2011 - 12:45
Trainings vaardigheden
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... Lees verder ->
15 februari 2011 - 12:45
Web-mail inbox naam
Nieuwe Windows Phone 7 toestellen
Je hebt een bericht van H. van Balen pagina instellingen Nieuwe HTC toestel toegevoegd Je hebt een bericht van instellingen aanpassen P. van Est
onderwerp Je hebt een bericht van H. van Balen
datum
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
HTC deal febr 2011
11/04/11
H. van Balen
naar overzicht
E-commerce
instellingen aanpassen
09:00 - 10:00 Project bespreking 13:00 14:00 Lunch HTC View Maart- 2011 14:30DI - 15:00 Campagne MA WO DO VR ZA cijfers ZO 28 1- 17:30 2 3Project 4 5 6 16:00 bespreking 7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Website analytics (Maart 2011)
instellingen aanpassen
View %
4.000
/sales
183940
1:10
0,85%
3.000
/blog
54554
0:30
0,85%
/iphone
688225
0:25
0,85%
/pre-paid
687421
0:34
0,85%
/faq
245453
0:25
0,85%
2
1.000 15.01
30.01
15.02
29.02
15.03
30.03
Webshop verkoop €12.345.3040,95- (2011)
Nieuwe abbonementen 873 (maart 2011)
/contact
445423
0:32
0,85%
/gratis
545452
0:25
0,85%
Gemiddelde verkoop €152,30- (2011)
Verkochte toestellen 1102 (maart 2011)
/buitenland 244523
0:41
0,85%
/internet
0:53
0,85%
Naar sales statics.
2. 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 web-mail inbox
Pagina Views Tijd (min:sec)
2.000
Donderdag 15 maart 2011
1. Wanneer er op het notificatie icoon geklikt wordt klapt deze open, de notificaties worden dan getoond worden.
545522
Naar analytics
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
10/30
Sales statistieken pagina
logo
Ingelogd als Jasper Schelling
Dashboard > Sales statistieken
Laaste nieuws
uitloggen
1
2. Het Vodafone jaaroverzicht van 2010. (beknopt)
Sales statistieken 2
Web-mail
Jaaroverzicht (2010)
instellingen aanpassen
5.000
5. Blokje met daarin de verhouding van de afgesloten abbonnementen bij Vodafone.
4.000
Sales statistieken
3. In het menu wordt duidelijk aangegeven op welke pagina de gebruiker zich bevind. De onderliggende pagina’s worden in dit stadum ook al getoond. 4. Tevens is deze opengeklapt en worden alle onderliggende items getoond.
6.000
Agenda 3
1. 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.
€2.123.239,30-
3.000
6. Blokje met de telefoon top 10 van Maart 2011.
2.000
4 Abbonementen
1.000
Toestellen
01.01
Sim only
01.02
01.03
01.04
Webshop verkoop €12.345.3040,95- (totaal)
Accessoires
01.05
01.06
01.07
01.08
Omzet abbonementen €8.345.3040,95- (totaal)
01.09
01.10
01.11
01.12
Totale omzet €62.345.3040,95- (totaal)
CMS 5
Trainings vaardigheden
Abbonementen
instellingen aanpassen 150i
Toestel top 10 (Maart 2011)
Model
instellingen aanpassen
Merk
Aantal verkocht
1. iPhone 4G 16GB Apple
1.253
2. Galaxy S
Samsung
1.025
750i
3. Bold 9780
BlackBerry 952
1000i
4. Desire White HTC
overige (i)
5. 6700 Slider Nokia 865
300i 450i
Maart 2011
6
6. iPhone 3G 16GB Apple
View
7. Curve 8520
MA DI WO DO VR ZA ZO
875 798
BlackBerry 725
28
1
2
3
4
5
6
8. Optimus 2X Speed LG
7
8
9
10
11
12
13
9. 7 Trophy HTC 548
14
15
16
17
18
19
20
10. Galaxy Apollo Samsung 535
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Abbonementen overzicht
654
Toestel overzicht
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
11/30
Toestellen overzicht pagina
logo
Ingelogd als Jasper Schelling
1. De overzichtspagina van de toestellen, hier worden de toestellen per merk getoond.
uitloggen
2. De producten bestaat uit een logo, merknaam, aantal toestellen en het aantal verkochte toestellen van het merk in Nederland.
Dashboard > Sales statistieken > Toestellen
Laaste nieuws
Toestellen 2
Web-mail
logo fabrikant
Agenda logo
Sales statistieken
fabrikant
Abbonementen logo
Toestellen
fabrikant
1
Lijst instellingen
iPhone Aantal toestellen Verkochte toestellen (NL)
Top 3 3 1.344.304
Nokia Aantal toestellen Verkochte toestellen (NL)
1. 3Gs 8GB
2. 4G 32GB
3. 4G 16GB
4
Overzicht iPhone
Top 3 4 1.344.304
Sony Ericsson Aantal toestellen Verkochte toestellen (NL)
3
1. C7-00 Silver
2. 6700 silver
3. 6700 Pink
meer toestellen
Overzicht Nokia
3. 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.
Top 3 2 1.344.304
1. Xperia Play
2. Xperia Arc Overzicht Sony
Sim only Accessoires
logo fabrikant
CMS logo
Trainings vaardigheden
fabrikant
logo fabrikant
Maart 2011
View
MA DI WO DO VR ZA ZO 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
logo fabrikant
LG
Top 3
Aantal toestellen
1
Verkochte toestellen (NL)
1.344.304
Samsung Aantal toestellen Verkochte toestellen (NL)
12 13.344.304
1. Galaxy Ace White
2. Galaxy Ace Black
3. Galaxy S White
4. Galaxy S Black
5. S7230 Wave TouchWiz
6. I5800 Galaxy Apollo
7. Star Qwerty B3410
8. S3650 Corby
9. Ultra TOUCH2
10. Star
11. Jet S8000
12. D900i
Overzicht Samsung
Top 3 5 1.344.304
BlackBerry Aantal toestellen Verkochte toestellen (NL)
Overzicht LG
Alle toestellen
HTC Aantal toestellen Verkochte toestellen (NL)
1. Optimus 2X Speed
1. Desire S vanilla 3. Desire White
2. Desire HD meer toestellen
Overzicht HTC
Top 3 3 1.344.304
1. Torch 9800 3. Bold
2. Bold White Overzicht BlackBerry
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
12/30
Samsung toestellen overzicht pagina
logo
Ingelogd als Jasper Schelling
1. De overzichtspagina van de toestellen binnen een merk
uitloggen
2. Doormiddel van het drop-down menu kan er gesorteerd worden.
Dashboard > Sales statistieken > Toestellen > Samsung
Laaste nieuws
Samsung toestellen #
Web-mail
1
Naam toestel
2
Sorteer op:
3. Ook hier weer een indicator. Ranglijst
Start datum verkoop
Verkochte toestellen (nl)
Prijs toestel los
1. 3
Galaxy Ace White
01-01-2009
12.253
€ 543,28-
detailpagina >
2.
Galaxy Ace Black
01-01-2009
12.253
€ 543,28-
detailpagina >
3.
Galaxy S White
01-01-2009
12.253
€ 543,28-
detailpagina >
4.
Galaxy S Black
01-01-2009
12.253
€ 543,28-
detailpagina >
5.
S7230 Wave TouchWiz
01-01-2009
12.253
€ 543,28-
detailpagina >
6.
I5800 Galaxy Apollo 01-01-2009
12.253
€ 543,28-
detailpagina >
7.
Star Qwerty B3410
01-01-2009
12.253
€ 543,28-
detailpagina >
8.
S3650 Corby
01-01-2009
12.253
€ 543,28-
detailpagina >
Sim only
9.
Ultra TOUCH2
01-01-2009
12.253
€ 543,28-
detailpagina >
Accessoires
10.
Star
01-01-2009
12.253
€ 543,28-
detailpagina >
11.
Jet S8000
01-01-2009
12.253
€ 543,28-
detailpagina >
12.
D900i
01-01-2009
12.253
€ 543,28-
detailpagina >
Agenda Sales statistieken
Abbonementen Toestellen
CMS Trainings vaardigheden
Maart 2011
View
MA DI WO DO VR ZA ZO 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
13/30
Detail toestel pagina 1. Naam van het toestel.
logo
Ingelogd als Jasper Schelling
2. Onder deze dropdown zitten verschillende opties die de gebruikers heeft met betrekken tot deze telefoon. (printknop, pdf export & mailen)
uitloggen
Dashboard > Sales statistieken > Toestellen > Samsung > Galaxy S White
Laaste nieuws
Samsung Galaxy S White 3
Web-mail
De Samsung Galaxy S, winnaar van de Eisa Award voor beste smartphone 2010-2011.
4
5. De telefoon kan direct online bekeken worden. safe
cold
Prijs toestel los € 569,00 (geschiedenis)
Abbonementen
Periodieke verkoopcijfers 120
10
Accessoires
Verkoop wereldwijd
CMS
8
7
Maand
Jaar
9
60
20
Abbonement aandeel
Telefoon pagina bezoekers
534 Maart 2011
Vandaag (+20%)
bekeken bezoekers
13
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.
Toestel los Pre paid
12. Analytics van de telefoonpagina op de website.
Totaal
13. In het laatste blokje kan de gebruiker terug vinden hoe qua specificaties deze telefoon zich verhoud tot de overige telefoons in ons aanbod.
5 10 15 20 25 30
12
8. Ook kan er gekozen worden om per jaar te kijken ipv per maand.
11. Een diagram met daarin de meest afgesloten abbonementen icm deze telefoon.
Verkoop per land
11
7. Er kan door de verschillende maanden geklikt worden.
10. Keuze uit verschillende verkoop niveaus. Dit kan per land tot aan de wereldwijde verkoop.
Abbonement
80
40
Verkoop per regio
Nederland Legenda
100
Verkoop per werelddeel
Trainings vaardigheden
Maart 2011
Aantal verkocht laatste 7 dagen 145
Bekijk toestel online >
Toestellen
6
hot
Aantal verkocht laatste maand 663
5
Sim only
6. Verkoopcijfers van deze telefoon over een bepaalde periode, deze gehele grafiek is klikbaar.
Verkochte toestellen (Nederland) 344.304
afbeelding toestel
Sales statistieken
4. Deze indicator geeft de verkoop populariteit van de telefoon aan.
Populariteit telefoon
Start datum verkoop 11-05-2010
Agenda
3. Basis informatie van het toestel; een afbeelding, korte tekst en basis statistieken.
2
1
Hardware specs
Medium
Specificatie leeftijd old
new
Prestaties
View
MA DI WO DO VR ZA ZO 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Beeldscherm Camera 150i
450i
300i
overige (i)
Systeem M D W D V ZA ZO
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
14/30
Detail toestel pagina tooltips 1. De geschiedenis van de prijs van het toestel.
logo
Ingelogd als Jasper Schelling
2. Bij een hover verschijnt in het tooltip het aantal daadwerkelijke procenten.
uitloggen
Dashboard > Sales statistieken > Toestellen > Samsung > Galaxy S White
Laaste nieuws
Samsung Galaxy S White
De Samsung 800 Galaxy S, winnaar van de Eisa Award voor beste smartphone 2010-2011. 600 Start datum verkoop 400 11-05-2010 200 Verkochte toestellen (Nederland) 344.304 1-1-‘10 1-1-‘11
Web-mail
Agenda afbeelding toestel
Sales statistieken
1 Populariteit telefoon safe
cold
Prijs toestel los € 569,00 (geschiedenis)
Aantal verkocht laatste maand 663
Abbonementen
Aantal verkocht laatste 7 dagen 145
Bekijk toestel online >
Toestellen Sim only
Periodieke verkoopcijfers 120
Accessoires
Verkoop wereldwijd
CMS
Maand
Jaar
Nederland Legenda Abbonement
80
Toestel los
60
Pre paid
40
Verkoop per regio
Trainings vaardigheden
Maart 2011
100
Verkoop per werelddeel
hot
Totaal
20 Verkoop per land 5 10 15 20 25 30
2 Abbonement aandeel 18,5 %
Maart 2011
Telefoon pagina bezoekers
Hardware specs
534
Specificatie leeftijd
Vandaag (+20%)
bekeken bezoekers
old
Medium
new
Prestaties
View
MA DI WO DO VR ZA ZO 28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
Beeldscherm Camera 150i
450i
300i
overige (i)
Systeem M D W D V ZA ZO
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
15/30
Opdracht 2 — Mobiele Site Cinerama
Werkboek Screen Design — April 2011
16/30
Opdrachtomschrijving
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 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?
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.
Hoe lever je deze op?
5 Detail Pagina Film cinerama_02_detail_pagina_film.png Film Reserveren cinerama_03_film_reserveren.png Prijzen en Tijden cinerama_04_prijzen_en_tijden.png 6 Landingsscherm Tijden cinerama_01A_landingsscherm_tijden.png Landingsscherm Titels cinerama_01B_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 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? Werkboek Screen Design — April 2011
17/30
Persona’s
David Deutekom
Floortje Pronk
“Ik erger me er vaak aan dat we pas bij de bioscoop moeten kijken welke films er draaien”
“Ik haat het als we niet met z’n 8e naast elkaar kunnen zitten” Persona kenmerken
Persona kenmerken
• 20 jaar
• 22 jaar
• Heeft geen relatie, geen kinderen.
• Heeft een relatie, geen kinderen.
• Woonachtig in Rotterdam, Nederland
• Woonachtig in Rotterdam, Nederland
• Studeert vrijetijdsmanagement op HBO niveau in Utrecht
• Net afgestudeerd en werkend bij een reclame bureau
• Woont bij haar ouders
• Woont nog in een studentenhuis
Omschrijving
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.
Floortje is een 3e 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 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.
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.
Werkboek Screen Design — April 2011
18/30
Scenario’s
Scenario 1 Onderweg de film kiezen is erg relaxed
Scenario 2 Reserveren gaat super makkelijk en snel!
David Deutekom
Floortje Pronk
David is opweg met 3 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.
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
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.
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 krijgt hij meteen een mooi overzicht van alle films die die dag draaien. Hij ziet dat er 3 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.
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 2 van de 3 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
Detail film
Landingspagina
selecteert
selecteert
donderdag
titels view
bekijkt trailer
Reserveren Detail film
bekijkt
pagina
Detail film
trailer
Werkboek Screen Design — April 2011
19/30
Sitemap Cinerama mobiele website
Landingspagina
Prijzen & tijden
Route beschrijving
Reserveren
Detail film
Film reserveren
Werkboek Screen Design — April 2011
20/30
Landingspagina 1 Cinerama Welkom bij cinerama mobiel! Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
2 maandag
dinsdag
woensdag
donderdag
vrijdag
3 Vandaag Tijden
T-Mobile
11:39 PM Cinerama Filmtheather
http://www.m.cineramabios.nl/
Cinerama Welkom bij cinerama mobiel! Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. maandag
dinsdag
woensdag
donderdag
vrijdag
Vandaag Tijden
Titels
13.00
Yogi Beer NL 3D
13.00
Jasper almighty
13.00
Black Swan
13.00
Sonny Boy
13.30
The King’s Speech
13.30
Haar naam was Sarah
13.30
Hereafter
4
Titels
13.00
Yogi Beer NL 3D
13.00
Jasper almighty
13.00
Black Swan
13.00
Sonny Boy
13.30
The King’s Speech
13.30
Haar naam was Sarah
13.30
Hereafter
15.30
Black Swan
15.30
Rango OV
15.30
Gooische Vrouwen
16.00
Hereafter
16.00
The King’s Speech
16.00
Biutiful
16.30
Sonny Boy
19.00
Rango OV
19.00
Black Swan
19.15
Biutiful
19.30
The King’s Speech
19.30
Hereafter
20.00
Sonny Boy
20.00
Gooische Vrouwen
21.30
Black Swan
21.30
Gooische Vrouwen
22.00
The King’s Speech
22.00
True Grit
22.00
127 Hours
Adres Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
1. Logo van Cinerama, deze zal linken naar de landingspagina. 2. Tabs waarbij gekozen kan worden tussen verschillende dagen. (deze zijn afhangelijk van de dag, wanneer het zaterdag is zal de rij met zaterdag beginnen) 3. Overzicht van films van de geselecteerde dag. Er kan gekozen worden tussen een tijden view of een titels view. 4. Adres van Cinerama. 5. Footer menu.
5
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
21/30
Titel weergave
Cinerama
1. Bij titels wordt een film getoond met 1 of 2 afbeelingen en de titel. Evt wordt er nog iets speciaals bij gezet als dit relevant is zoals; premiere.
Welkom bij cinerama mobiel! Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.
maandag
dinsdag
woensdag
donderdag
2. Door op een icoontje te klikken kan er naar de detailpagine gegaan worden van de film.
vrijdag
3. Wanneer er ergens anders binnen en vlak gedrukt wordt zal deze informatie geven over de tijden waarop ze draaien die dag.
Vandaag Tijden
Titels
1 T-Mobile
11:39 PM
premiere
Gooische Vrouwen
Cinerama Filmtheather
http://www.m.cineramabios.nl/
2
Cinerama Welkom bij cinerama mobiel! Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. maandag
dinsdag
woensdag
donderdag
vrijdag
The King’s Speech
Vandaag Tijden
127 Hours
Harmen almighty
3
16.00
Titels
19.00 21.30
premiere
Gooische Vrouwen
Black Swan
laatste week
Sonny Boy
Adres Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
22/30
Detail pagina film
Cinerama
1
3
kids
< vorige pagina
6
yogi beer nl 3d afbeelding
4
genre
Animatie
lengte
83 min
regisseur
Eric Brevig
2
Yogi Beer, de favoriete beer vol met stoute streken, is terug! Yogi is de meest beruchte deugniet van Jellystone Park.
1. Er kan terug gegaan worden naar de vorige pagina doormiddel van deze knop. 2. Basis informatie van de film. 3. Een kleine afbeelding van de film (impressie). 4. Basis informatie over het verhaald van de film. De informatie zal bij veel tekst niet in een keer getoond worden, deze kan de gebruiker dan uitklappen doormiddel van de “Lees meer” knop. 5. Tijden waarop deze film draait.
Yogi Beer, de favoriete beer vol met stoute streken, is terug! Yogi is de meest beruchte deugniet van Jellystone Park. Samen met zijn trouwe vriendje en partner-in-cri... T-Mobile
11:39 PM
5
Cinerama Filmtheather
Lees meer
Tijden & Reserveren
6. Mogelijkheid om te reserveren, wanneer er bij een bepaalde voorstelling op “reserveren” geklikt wordt zal de gebruiker doorgestuurd worden naar de reservatie pagina.
klik op een voorstelling om te reserveren
http://www.m.cineramabios.nl/
maandag
Cinerama
dinsdag
woensdag donderdag
vrijdag
< vorige pagina kids
6
yogi beer nl 3d afbeelding
genre
Animatie
lengte
83 min
regisseur
Eric Brevig
Yogi Beer, de favoriete beer vol met stoute streken, is terug! Yogi is de meest beruchte deugniet van Jellystone Park. Yogi Beer, de favoriete beer vol met stoute streken, is terug! Yogi is de meest beruchte deugniet van Jellystone Park. Samen met zijn trouwe vriendje en partner-in-cri...
6
16:30
reserveren l geboekt vo
20:00
reserveren
22:00
reserveren
Adres Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
Lees meer
Tijden & Reserveren klik op een voorstelling om te reserveren maandag
dinsdag
woensdag donderdag
vrijdag
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
23/30
Film reserveren
Cinerama
< vorige pagina
1 Reseveren: Maandag 13:00: Yogi Beer NL 3D geef uw email en het aantal kaarten.
2
email
1. De reservatie pagina. 2. Als controle de titel van de film + de tijd van de voorstelling. De gebruiker moet zijn of haar email invullen en het aantal plaatsen dat hij of zij wil reserveren.
-- 0 -aantal (maximaal 8)
< terug
T-Mobile
11:39 PM
Adres
Cinerama Filmtheather
http://www.m.cineramabios.nl/
Cinerama
< vorige pagina
Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
Reseveren: Maandag 13:00: Yogi Beer NL 3D geef uw email en het aantal kaarten. email
-- 0 -aantal (maximaal 8)
< terug
Adres Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
Meer informatie Home Prijzen & tijden Route beschrijving
reserveren
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
24/30
Prijzen & tijden
Cinerama 1 Prijzen & tijden
1. Informatie over prijzen en tijden. < vorige pagina
Openingstijden De kassa van Cinerama Filmtheater is dagelijks geopend vanaf 12.30 uur tot een kwartier na aanvang van de laatste avondvoorstelling. Tijdens openingstijden is onze kassa bereikbaar via (010) 411 53 00. U kunt uw vragen met betrekking tot het programma of uw gemaakte reservering ook stellen via
[email protected]. Prijzen Reguliere film: € 9,00 T-Mobile
Korting : € 8,00
11:39 PM
Matineevoorstelling (ma t/m vr, niet tijdens Kerstvakantie): € 7,50
Cinerama Filmtheather
Toeslag lange film €1,00
http://www.m.cineramabios.nl/ Korting
Cinerama Prijzen & tijden
Korting geldt voor studenten op vertoon van OV-jaarkaart, 65 < vorige pagina
Openingstijden De kassa van Cinerama Filmtheater is dagelijks geopend vanaf 12.30 uur tot een kwartier na aanvang van de laatste avondvoorstelling. Tijdens openingstijden is onze kassa bereikbaar via (010) 411 53 00. U kunt uw vragen met betrekking tot het programma of uw gemaakte reservering ook stellen via
[email protected]. Prijzen Reguliere film: € 9,00 Korting : € 8,00
pashouders, CJP en kinderen tot en met 11 jaar (voor kinderfilms). Rotterdampashouders betalen € 5,50 voor filmvoorstellingen uit het reguliere programma van maandag tot en met donderdag en vrijdag tot 18.00 uur. Vanaf vrijdag 18.00 uur t/m zondag en in de kerstvakantie € 1,- korting en kinderen t/m 11 jaar € 2,-.
Adres Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
Matineevoorstelling (ma t/m vr, niet tijdens Kerstvakantie): € 7,50 Toeslag lange film €1,00 Korting
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
25/30
Route beschrijving
Cinerama 1
Route beschrijving
1. Informatie hoe bezoekers bij Cinerama moeten komen. < vorige pagina
Cinerama Filmtheater ligt in het centrum van Rotterdam en is bereikbaar via metro ‘Beurs’, uitgang Westblaak. Tevens bereikbaar met tramlijn 20 vanaf Centraal Station, uitstappen halte ‘Beurs’ op de Coolsingel.
kaartje met locatie
T-Mobile
11:39 PM Cinerama Filmtheather
http://www.m.cineramabios.nl/
Adres
Cinerama Route beschrijving
< vorige pagina
Cinerama Filmtheater ligt in het centrum van Rotterdam en is
Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
bereikbaar via metro ‘Beurs’, uitgang Westblaak. Tevens bereikbaar met tramlijn 20 vanaf Centraal Station, uitstappen halte ‘Beurs’ op de Coolsingel.
kaartje met locatie
Adres Cinerama Filmtheater
Meer informatie Home
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
26/30
Reserveren
Cinerama 1
Reserveren
1. Informatie over hoe gebruikers kunnen reserveren bij Cinerama. < vorige pagina
Voor reserveringen kunt u tussen 13.00 en 22.00 bellen met (010) 411 53 00 of 0900-9363 (belbios). Ook kunt u een gratis reservering maken via onze website www.cineramabios.nl door op de titel van de film te klikken en daarna de aanwijzingen te volgen. Wanneer u vragen heeft over uw gemaakte reservering kunt u contact opnemen met onze kassa via
[email protected]. Zaalverhuur Cinerama Filmtheater is een uitermate geschikte locatie voor uw T-Mobile
bedrijfspresentaties en personeelstrainingen. Het theater heeft 7
11:39 PM
zalen en in totaal meer dan duizend stoelen. Voor meer informa-
Cinerama Filmtheather
tie kunt u contact opnemen met Tijmen Snel via (010) 412 17 81
http://www.m.cineramabios.nl/
of een e-mail sturen naar
[email protected].
Cinerama Reserveren
< vorige pagina
Voor reserveringen kunt u tussen 13.00 en 22.00 bellen met (010) 411 53 00 of 0900-9363 (belbios). Ook kunt u een gratis reservering maken via onze website www.cineramabios.nl door op de titel van de film te klikken en daarna de aanwijzingen te volgen. Wanneer u vragen heeft over uw gemaakte reservering kunt u contact opnemen met onze kassa via
[email protected]. Zaalverhuur Cinerama Filmtheater is een uitermate geschikte locatie voor uw bedrijfspresentaties en personeelstrainingen. Het theater heeft 7 zalen en in totaal meer dan duizend stoelen. Voor meer informatie kunt u contact opnemen met Tijmen Snel via (010) 412 17 81 of een e-mail sturen naar
[email protected].
Adres Cinerama Filmtheater Westblaak 18 3012KL Rotterdam 010 411 5300
[email protected]
Meer informatie Home Prijzen & tijden Route beschrijving Reseveren
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
27/30
Opdracht 3 — Vodafone iPad facturen pitch
Werkboek Screen Design — April 2011
28/30
Opdrachtomschrijving
Opdracht 3 — Vodafone iPad Facturen Pitch
Is je PSD correct opgemaakt?
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.
Wat kun je als je deze opdracht hebt gedaan?
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.
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.
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.
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.
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.
Opleveren Deze opdracht bestaat uit een scherm. Je levert het volgende scherm op: Week Welk Scherm werk je uit?
Hoe lever je deze op?
7
vodafone_ipad_nieuwe_factuur.png
Nieuwe Factuur
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? Werkboek Screen Design — April 2011
29/30
Nieuwe Factuur 1. Menuknop, hier zal met een dropdown-tooltip de inhoud van verschijnen. 2. Basis opties van facturen. 3. Invoervelenden van een nieuwe factuur 4. Menu met belangrijkste elementen
1
menu
Vodafone Facturatie
Facturenoverzicht
Nieuwe factuur
zoeken
Incassofacturen
Bankmutaties inlezen
2
Nieuwe Factuur Algemeen
3
Verzendopties
Omschrijving
Opmerkingen
Algemene gegevens:
Facturatiegegevens:
Status:
Bedrijfsnaam:
Factuurnummer:
Naam:
Debiteur:
Adres:
Datum:
Postcode/plaats:
Betalingstermijn:
Land:
dagen
E-mail adres:
Referentienummer: Kortingspercentage:
Machtiging:
%
Kortingscoupon:
Algemene gegevens: Hieronder kunt u de factuurregels van de factuur toevoegen. Datum 19-04-11
Aantal 1
Product
Prijs
BTW
Periodiek
19%
- - geen product - -
1
eenmalig
Nieuwe regel
Factuur toevoegen
4 Home
Klanten
Producten
Helpdesk
Account
N E GE RP
TWE N O L E VISUE
Werkboek Screen Design — April 2011
30/30