les 5 IxD - Vormgeving

• Informatica
• Middelbare school
• vwo
• Leerjaar 5

Interaction Design

Vormgeving

Waar staan we nu?

1. Probleemstelling                   Wat is het nut van de app?
   
2. Programma van Eisen         Wat moet de app kunnen?
   
3. Use case diagram                 Welke functies zitten er in?
   
4. Navigatiemodel                      Via welke schermen werk je?
   
5. Vormgeving                              Passende look & feel
   
6. Gebruikerservaring               Prettig in gebruik
   
7. Klikmodel (powerpoint)      Simulatie van de app

de stap van vandaag

Grafische vormgeving

Bewustwording effect stijlkenmerken

• Kleur, beeld, tekst.....
• Metaforen (icoontjes)
• Heuristieken van Nielsen

Leerdoelen​

Je maakt kennis met algemene wetmatigheden binnen vormgeving en de stijlkenmerken die je kunt gebruiken in je app-ontwerp:​

• Lettertypen ​

• Kleuren​

• Beeld en fotografie​

• Beeld / tekst-verhouding​

• Vlakverdeling​

Letters

• Waarmee associeer jij deze lettertypen?​
• Voor welke stijl of sfeer zou je dit gebruiken?​
• Welke zou jij gebruiken voor jouw app en waarom?

kijk op https://www.dafont.com voor gratis fonts

Kleuren

Kleuren hebben gevoelswaarde.

Warme-koude kleuren

Heldere - Vuile kleuren

Zachte - Harde kleuren

• Welke kleuren zou je waarvoor kunnen gebruiken?

• Voor welke sfeer zou je welke kleuren gebruiken?

• Welke kleuren zou jij voor je app gebruiken en waarom?

Beeld en fotografie

Kleur- ZwartWit

Felle - Schrale kleuren

Zachte - Harde contrasten

• Welke fotografie, illustratie of animatie zou je waarvoor gebruiken?

• Wat is de sfeer die je hiermee oproept?

• Welke stijl zou je voor jouw app gebruiken?

Oefening Vormanalyse (1)

Oefening Vormanalyse (2)

Vóór je gaat ontwerpen: Benchmark (onderzoek)

Ga kijken.....

• Wat is er al op de markt in jouw segment? 
• Wat is hier goed aan?
  
• Wat kan beter?
  
• Bedenk wat jouw Unique Selling Point is: wat kan je doen om hiertussen op te vallen? 
• Wat maakt jouw product juist onderscheidend?
  

Je moet dus proberen erachter te komen wat voor jouw gebruiker werkt. Hiervoor ga je een benchmark doen: 

Tot slot tips voor je app-ontwerp

• Wat is je doelstelling? Zorg dat deze helder is.
• Neem je gebruiker mee aan de hand: 

 -> zorg dat het duidelijk is waar je moet zijn 
-> maak dus een gebruiksvriendelijke tool;

• Hou het simpel. De kracht ligt in de eenvoud;
  
• Zorg voor korte, duidelijke pakkende teksten;
  
• Details van foto’s werken goed: maak uitsneden.

Experimenteer en leer. Veel succes

Regels (Heuristieken) van Nielsen

Regel 1: laat zien wat er gebeurt

Regel 2: Overeenkomst systeem en echte wereld

Regel 3: Gebruiker heeft keuze en vrijheid

Regel 4: Wees consistent

Regel 6: Zorg dat de gebruiker niks hoeft te onthouden

Regel 7: Flexibiliteit en efficiency

Regel 8: Hou het minimaal en verfijnd

Regel 10: Bied een helpende hand
(help en documentatie)

Alleen als het nodig is

Regel 5 en 9 lastig voor klikmodel

Metaforen

Een metafoor is een vorm van beeldspraak: je gebruikt een woord of beeld voor iets anders, waarmee het een overeenkomst vertoont

• In je verslag staat een hoofdstuk vormgeving. Hierin geef je de volgende zaken aan met toelichting waarom je dit hebt gekozen.

   

Aan de slag

1. Kleurgebruik. Keuze voor pallet
2. Unique Selling Point
3. Gebruikte metaforen
4. Vijf voorbeelden van toepassen heuristieken van Nielsen