Screen Design Puntgave Pixels

Transcriptie

1 Screen Design Puntgave Pixels Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design Jasper Schelling docent.cmd.hro.nl/scjas

2 Welkom! Dit kwartaal krijgen jullie een spiksplinternieuw designvak, het vak Screen Design! Communication & Multimedia Design Screen Design Jasper Schelling 2

3 Klein geheimpje, 3 e & 4 e jaars zijn jaloers... Communication & Multimedia Design Screen Design Jasper Schelling 3

4 Wat is Screen Design? Tijdens deze module gaan we intensief aan de slag met het maken van de visuele uitwerking van een interactief product / dienst. Op basis van een volledige set Interaction Design deliverables (Persona s, Scenario s, Flowcharts, Wireframes) leer je het visuele ontwerp van een product of dienst uit te werken. Communication & Multimedia Design Screen Design Jasper Schelling 4

5 Kent iedereen deze nog? Communication & Multimedia Design Screen Design Jasper Schelling 5

6 Onze focus voor deze module We focussen ons dus écht op de bovenlaag. Communication & Multimedia Design Screen Design Jasper Schelling 6

7 En verder We werken specifiek aan het visuele ontwerp, de interface die de eindgebruik voorgeschoteld krijgt. Daarnaast leer je omgaan met brand/design guidelines van merken zodat het product wat je maakt binnen het merk past en ook dit product leidt tot een positieve merkbeleving. Communication & Multimedia Design Screen Design Jasper Schelling 7

8 Screen Design is meer dan visueel... Je ontwerpt niet alleen iets wat gezien moet worden, je ontwerpt iets wat gebruikt moet worden. Het omhelst veel meer dan enkel de ordening van inhoud op het scherm. De eerste vraag is dan ook niet Hoe moet het er uit zien?, maar Wat moet de gebruiker ervaren? Communication & Multimedia Design Screen Design Jasper Schelling 8

9 Screen Design is meer dan visueel... Het is belangrijk om je te realiseren dat je niet een boodschap vormgeeft, maar een gesprek. Een gesprek tussen de organisatie van wie de website is, en de gebruiker. Het visuele ontwerp is de stem van de organisatie! Communication & Multimedia Design Screen Design Jasper Schelling 9

10

11

12

13

14

15 Visual Design bestaat uit 2 delen Visuele Organisatie Persoonlijkheid Communication & Multimedia Design Screen Design Jasper Schelling 15

16 Visuele Organisatie Communication & Multimedia Design Screen Design Jasper Schelling 16

17 Visuele Organisatie Communication & Multimedia Design Screen Design Jasper Schelling 17

18 Persoonlijkheid Communication & Multimedia Design Screen Design Jasper Schelling 18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39 De persoonlijkheid van een organisatie De persoonlijkheid van een organisatie wordt meestal vastgelegd in een corporate identity, of een brandbook. Vroeger sprak men ook wel over huisstijl, maar mede omdat identity ook geadopteerd is door marketing, is het veel veelomvattender geworden... Communication & Multimedia Design Screen Design Jasper Schelling 39

40

41

42

43

44

45

46

47

48

49

50 Meer dan een logo Communication & Multimedia Design Screen Design Jasper Schelling 50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66 Niet alles past in een identity... Communication & Multimedia Design Screen Design Jasper Schelling 66

67 Waar begin je? Het visuele ontwerpproces begint meestal met een analyse. Samen met, of vooraf aan jou heeft de interactieontwerper nagedacht over het functionele ontwerp van een product of dienst. Communication & Multimedia Design Screen Design Jasper Schelling 67

68 Waar begin je? Maar nu is het zaak dat jij als visual designer visuele organisatie toe gaat voegen en persoonlijkheid. (de persoonlijkheid van het merk) Zo zorg je ervoor dat het nieuwe product of dienst waargenomen wordt als een goede gesprekspartner. Communication & Multimedia Design Screen Design Jasper Schelling 68

69 Screendesign Proces Communication & Multimedia Design Screen Design Jasper Schelling 69

70 Het Screen Design Proces 1 Oriëntatie Communication & Multimedia Design Screen Design Jasper Schelling 70

71 Stap 1: Oriëntatie Als eerste ga je je oriënteren op het merk en het functionele ontwerp. Download de volgende items: Vodafone Brand Guidelines pdf/vodafone-brand-guidelines.pdf en Werkboek Screendesign pdf/screendesign_werkboek.v0.6.pdf Communication & Multimedia Design Screen Design Jasper Schelling 71

72 Stap 1: Oriëntatie Orienteer je op de guidelines van Vodafone, en het FO dat in het werkboek omschreven staat. Communication & Multimedia Design Screen Design Jasper Schelling 72

73 Het Screen Design Proces 2 Analyse Communication & Multimedia Design Screen Design Jasper Schelling 73

74 Stap 2: Analyse Als je een indruk gekregen hebt van het merk, kom je terug naar het interactieontwerp en ga je dat aan een grondige inspectie onderwerpen; Hoe zien de persona s eruit? Wat staat er in de scenario s? Hoe is de flow van de applicatie? Telkens koppel je je bevinden terug aan wat je weet over de visuele identiteit van het merk. Communication & Multimedia Design Screen Design Jasper Schelling 74

75 Stap 2: Analyse Door verbanden te leggen tussen het visuele merk en het interactieontwerp zorg je ervoor dat er een rijke interactie ontstaat, een combinatie van vorm en functie. Lees eveneens de opdrachtbriefing aandachtig door... wat zijn de technische randvoorwaarden? Communication & Multimedia Design Screen Design Jasper Schelling 75

76 Het Screen Design Proces 3 Structureren en Stroomlijnen Communication & Multimedia Design Screen Design Jasper Schelling 76

77 Stap 3: Structureren & Stroomlijnen Met al deze bevindingen in je achterhoofd, begin je te structureren en te stroomlijnen. Alles wat overbodig is, dubbel is, incosistent is of niet binnen het merk past filter je eruit. Communication & Multimedia Design Screen Design Jasper Schelling 77

78 Het Screen Design Proces 4 Categoriseren Communication & Multimedia Design Screen Design Jasper Schelling 78

79 Stap 4: Categoriseren De volgende fase is het categorizeren van inhoud en de noodzakelijke layout, en deze waar mogelijk op te delen in modules. Modules zorgen ervoor dat vorm en interactie consisten blijven op verschillend plekken in de site, om er zo voor te zorgen dat er een eenduidige (merk)beleving ontstaat. Communication & Multimedia Design Screen Design Jasper Schelling 79

80 Het Screen Design Proces 5 Visualiseren Communication & Multimedia Design Screen Design Jasper Schelling 80

81 Stap 5: Visualiseren Dan begin je aan het visuele ontwerp, wat grofweg op twee niveau s plaatsvind. Het macro-niveau, waar je beslissingen maakt over navigatie, layout en typografie. Het micro-niveau, waar je nadenkt over specifieke onderdelen, interacties en hoedanigheden. Communication & Multimedia Design Screen Design Jasper Schelling 81

82 Stap 5: Visualiseren Om ervoor te zorgen dat de hele klas een gezamelijk vertrekpunt heeft, gaan we nu gezamelijk een van de schermen van de eesrte opdracht uitwerken. dus... Pak je laptop, Stof je muis af, Het is tijd voor Puntgave Pixels! Communication & Multimedia Design Screen Design Jasper Schelling 82

83