Functioneel ontwerp - Logo, kleuren, ontwerp en richtlijnen

• Informatica
• Middelbare school
• vwo
• Leerjaar 5

Kleuren en ontwerp

Functioneel ontwerp

lgg usability

Lesdoelen

• Je weet hoe je kleurgebruik in je ontwerp kan toepassen
• Je kan beginnen aan je ontwerp in Figma
• Je weet hoe je de 4 richtlijnen moet toepassen/verantwoorden

lgg usability

Onderwerpen functioneel ontwerp

1. Opdrachtgever
2. Doelgroep
3. User stories
4. Structuur
5. Logo en kleur
6. Ontwerp
7. Richtlijnen

Vandaag gaan we het hebben over 5 t/m 7

Logo en kleur

Denk na over welke kleuren je wil gebruiken. We gaan er geen studie kleurenpsychologie van maken maar je moet je keuzes wel kunnen verantwoorden.  

http://www.arttherapyblog.com/online/color-psychology-psychologica-effects-of-colors/

Zorg voor kleuren die bij elkaar passen. Gebruik 

daarvoor het kleurenwiel van adobe:

https://color.adobe.com/nl/create/color-wheel

Uit de praktijk:

* Deze beacons zijn relatief duur en onzuinig, waarom gebruiken we geen andere?

* Wat is het doel van de navive camera implementatie? Wegen de kosten wel op tegen de baten

Kleuren van McDonalds

Bron

https://www.indy100.com/article/mcdonalds-brand-signs-yellow-red-psychology-calming-hungry-7944036

Je kiest één basiskleur en één of twee ondersteunende kleuren.

https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/

Todo: toegankelijkheid

https://color.adobe.com/create/color-contrast-analyzer

Schermontwerpen met Figma

figma.com

Maak eerst een frame

En selecteer het formaat dat je wil gebruiken

Een nieuw ontwerp starten

Elementen: afbeeldingen, rondjes en vierkantjes

Test je ontwerp

Eigenschappen van het element dat je aan het bewerken bent

Css code

Css code. Handig voor als je je ontwerp laten echt gaat maken!

Play - Doorklikbaar prototype

Richtlijnen

We hebben in de vorige lessen vier usability richtlijnen  besproken. Zorg dat je elk van deze richtlijnen kan verantwoorden hoe ze terug te zien zijn in je ontwerp.

Richtlijnen - (te kort)voorbeeld

"We bieden eenvoudige toegang doordat onze website op elke pagina gebruikt maakt van dezelfde layout (consistentie); op elke pagina staat het menu bovenaan en contact informatie onderaan. De homepage bevat een grote afbeelding en slechts twee knoppen; dat zorgt voor eenvoud en orde. Voor de achtergrond bij tekst hebben we gebruik gemaakt van een contrast-checker om er zeker van te zijn dat de tekst voor iedereen goed te lezen is. (zichtbaarheid)"

Aan de slag

1. Lees de opdracht
2. Vorm een team
3. Aan de slag met de eerste hoofdstukken.