1-4 Cocktail App
inleiding
We gaan nog even door met het maken van prototypes, alleen dit keer stellen we je design skills behoorlijk op de proef. Wanneer je een app maakt waarmee je iets uitlegt moet het heel erg duidelijk zijn wat je bedoeld.
In deze module ontwerp je een app die aan de gebruiker uitlegt hoe hij een bepaalde cocktail moet maken. Heel geschikt als geheugensteun voor de beginnende barista, maar ook voor iedereen die thuis cocktails wil maken.
“Een afbeelding zegt meer dan 1000 woorden” die uitspraak ken je misschien wel. Het betekent dat als je wat wilt uitleggen het gemakkelijker gaat met afbeeldingen. Maar soms zeggen afbeeldingen ook weer niet alles, dan moet er tekst bij. Het gaat uiteindelijk om de goede balans tussen die twee.
DESIGN EN UX (USER EXPERIENCE)
Je app moet natuurlijk heel gebruiksvriendelijk zijn en dat kun je bereiken door goed na te denken over navigatie en wat je wel of niet in de app plaatst. We hebben het daar al in les 1 over gehad: De 3 vuistregels van Jakob Nielsen.
Maar je ontwerpkeuzes helpen ook mee om de gebruiker een positieve ervaring te bezorgen. De usability kan nog zo goed zijn, als je een rommelig ontwerp maakt, of een ontwerp wat niet goed aansluit bij de behoefte van de gebruiker, kan dat een gebruiker afschrikken.
Daarom een paar dingen waarmee je rekening moet houden bij deze opdracht:
LESS IS MORE & KLEURGEBRUIK
Als je teveel elementen in je app stopt heb je kans dat de gebruiker er door in verwarring wordt gebracht.
In de afbeeldingen op de vorige pagina kun je een verloop zien door de jaren heen, ondanks dat sommige apps meer functies hebben gekregen kun je zien dat ze nog steeds ‘keep it simple’ hanteren.
Dat geldt ook voor het kleurgebruik. De huidige trend in design neigt sterk naar het gebruik van een beperkt kleurenpalet. Vaak maar 1 basiskleur en enkele donkerder en lichter varianten daarvan.
Als je binnen je app alleen maar de basiskleuren gebruikt is het lastig om elementen eruit te laten springen.
Je hebt dus meer kleuren nodig, maar wees je ervan bewust dat die een speciale functie hebben (opvallen) en beperk je ook hier zoveel mogelijk tot 1 of 2 (actie)kleuren, laat die ook goed aansluiten bij de basiskleuren.
In het geval van coolblue is de basis gemaakt met tinten blauw, maar zijn oranje en groen toegevoegd als eyecatchers. Maar ze worden wel spaarzaam gebruikt.
Er zijn online veel tools te vinden waarmee je een geschikte kleurencombinatie kunt vinden of maken.
http://paletton.com
https://www.colorcombos.com/combolibrary.html
https://color.adobe.com
opdracht: call to action buttons
Behalve kleurgebruik is ook “herkenning” belangrijk.
Bij een interactieve toepassing moet de gebruiker geen enkele twijfel hebben over waar je kunt klikken en wat er dan gebeurt.
Bij interactief design kennen we de zgn “call to action” button.
Een CTA is opvallend in de pagina en heeft vrijwel altijd een tekst die je vraagt om iets te doen. Er mogen op een page slechts 1 of 2 CTA’s voorkomen.
Je gaat nu op vijf websites de call to action buttons benoemen.
STAP 1
Maak een screenshot van de volgende webpagina’s:
http://www.invisocorp.com/
https://www.glr.nl/
https://wetransfer.com/
https://www.ah.nl
https://www.goedkooppakket.nl
STAP 2
Open de screenshots in photoshop en omcirkel de CTA’s er op. Sla ze op als .jpg in je map.
STAP 3
Gebruik nu Indesign om daar je 5 bewerkte screenshots in te plaatsen en de volgende vragen te beantwoorden
- Op welke webpage vond je de CTA’s het duidelijkst?
- Hoe komt dat denk je?
– Call to action button onderzoek als PDF
Theorie: Splashscreen
Een Splash Screen is een scherm dat tevoorschijn komt bij het opstarten van je app op je mobile device. Soms worden deze schermen ook wel Launch Screen of Startup Screen genoemd. Deze schermen komen tevoorschijn wanneer je de app dus opent, en de app tijd nodig heeft om te laden. Wanneer het laden klaar is, kom je in je app terecht waar je de dingen kunt gaan doen waar de app voor is gemaakt. 
Opdracht: Cocktail App
Dé grote dranktrend van nu is toch echt NOLO-alcohol: no of low alcohol. Hierop ga je met het ontwerp van deze app inspelen.In deze opdracht bedenk, ontwerp en maak je met Figma of XD een prototype van een cocktailhelper app.
Doel van deze app: geheugensteun voor het maken van een divers aantal cocktailbereidingen voor de beginnende barista of amateur.
Het is de bedoeling dat je een Splash Screen maakt en dat je de bereiding van tenminste 8 cocktails stap voor stap met afbeeldingen uitlegt.
Deze afbeelding geeft een impressie van de eerste stappen van de app.
Bekijk 4 andere step by step uitleg apps (niet perse over cocktails) en beschrijf welke app je goed vindt en waarom je dat vindt. Zet dit in Indesign met screenshots van de app. Sla dit op als onderzoek_eigennaam.pdf
– Voor iPhone of Android (zelf keuze maken)
– 1 Splash Screen
– 8 recepten voor NOLO cocktails (zoek online).
– Alle graphics bij de stap voor stap uitleg moeten zelf gemaakt worden in Illustrator.
– Er mag een foto gebruikt worden om per cocktail eenmalig het eindproduct te laten zien.
– Er moeten wireframes worden geschetst.
– Er moet een stijlgids worden gemaakt met:
- het kleurenpalet
- fontgebruik
- een voorbeeld van 1 of 2 call to action buttons
- tenminste 3 graphics van ingredienten die je in de app gaat gebruiken. (bijvoorbeeld een muntblad een ijsblokje en een citroenschijfje…)
Voordat je het prototype gaat maken bespreek je je stijlgids + onderzoek met de docent.
– Maak je ontwerp in Illustrator
– Prototype wordt in Figma of XD gemaakt.
– Onderzoek_eigennaam.pdf
– Ontwerp_eigennaam.ai
– Sharelink vanuit XD of Figma