Deze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn?
Vormgeving in relatie tot verschillende doelgroepen Hoe kun je mensen groeperen?
oefening [ met z’n twee-en] [ tijdsduur 15-30 min] Maak 3 visuele groeperingen van je klas Je mag zelf bedenken waar je op groepeert. (bv leeftijd, sexe, ras, kleding type, haarkleur, schoenmaat) >> bij voorkeur niet voor de hand liggend. ( dus niet aplle <> windows gebruikers ) >> zorg dat het er visueel aantrekkelijk uitziet Upload je resultaat hier:….
Vormgeving in relatie tot verschillende doelgroepen Hoe kun je mensen groeperen?
h#p://www.youtube.com/watch?v=RQdVobiO5vk
Face
Hannibal
Murdock
BA
Charlotte
Carrie
Miranda
Samantha
De Competitieve bezoeker ( snel en rationeel) What’s in it for me?’
- Beslist snel en direct op basis van feiten - Waarom is dit de juiste site voor mij? Wil overtuigd worden dat hij hier op de beste plek is - Is de site geloofwaardig? - Hoe kan ik mijn doel bereiken? - Gevaar: je bent deze bezoeker snel kwijt Ø mindere geneigd tot lezen Ø Liever geen onnodige informatie Ø informatie bieden zonder dat ze hoeven te scrollen Ø actie buttons!!! Start here Ø slogan die samenvat wat de kern van de zaak is Ø testimonials Ø pers voorlichting Ø bewijsmateriaal!!
De Spontane bezoeker ( snel en emotioneel) Dat is handig
- Beslist snel op basis van emotie in seconden! - Impuls aankoper - laat zich niet leiden door feiten maar door gevoel - wil graag een product/site naar eigen wensen kunnen aanpassen - vindt goede service belangrijk - Gevoelig voor aanbiedingen en acties Gevaar: je bent deze bezoeker snel kwijt > minder geneigd tot lezen Ø informatie bieden zonder dat ze hoeven te scrollen Ø Gevoelig voor woorden als FREE - GRATIS – PROBEER NU Ø Duidelijke buttons Ø Korte opsomming van voordelen! Ø Zorg dat ze zichzelf herkennen door mensen die op hun lijken te tonen Ø Snel en eenvoudige interface
De humanistische bezoeker ( langzaam en emotioneel) doen anderen het ook? - Beslist langzaam op basis van emotie - Ervaringen van anderen zijn belangrijk - Kan ik je vertrouwen? - Wie gebruiken dit product allemaal? - Wil weten wie het bedrijf achter een website is Ø wel scrollen Ø wel teksten lezen Ø is gevoelig voor visuele elementen (logo, stijl, sfeer, video) Ø houdt van menselijke kant (gezichten!) Ø Een verhaal met emotie spreekt hem aan Ø testimonials!
De methodische bezoeker ( langzaam en rationeel)
wat doen jullie dan allemaal? - beslist langzaam op basis van feiten - is benieuwd naar de achtergronden - gaat niet over één nacht ijs! - Maakt bewuste , weloverwogen keuzes - Wil graag bewijzen zien - Wil graag garanties - Haalt het onderste uit de kan ( leest zelfs de algemene voorwaarden) - Feiten feiten feiten liefst met bronvermelding Ø wel scrollen Ø wel teksten lezen met veel feiten en info Ø Deze bezoeker moet je gerust stellen en achtergrondinformatie geven Ø Veel voorbeelden geven Ø Leg het traject of proces uit
Bekijk: http://www.zkho.nl/mbti/
Spontane bezoeker: Competitieve bezoeker: Humanistische bezoeker : Methodische bezoeker:
Spontane bezoeker: Competitieve bezoeker: Humanistische bezoeker : Methodische bezoeker:
grote buttons, eenvoudige interface actie buttons ontwerp het zelf , grote aandachttrekkende animatie, menselijke figuren de sitemap onderaan, bekijk de folder
Spontane bezoeker: Competitieve bezoeker: Humanistische bezoeker : Methodische bezoeker:
Spontane bezoeker: Competitieve bezoeker: Humanistische bezoeker : Methodische bezoeker:
grote buttons, eenvoudige interface koop nu uw ticket! Bezoek het museum korte tekst grote detail van schilderij/gezicht lees meer buttons
Spontane bezoeker: Competitieve bezoeker: Humanistische bezoeker : Methodische bezoeker:
Spontane bezoeker: Competitieve bezoeker: Humanistische bezoeker : Methodische bezoeker:
Banner vlugge flappen duidelijke koppen – korte inleidende teksten uitstraling: serieus , betrouwbaar veelgestelde vragen, sitemap, lees verder
oefening • in groepjes van 5 • Tijdsduur: 10 min Elke groep gaat van een bepaalde site de elementen benoemen die je herkent voor de 4 MBTI types
MBTI The Meyer Briggs Type Indicator Indeling van mensen in 4 types naar voorkeuren De originele test kent 16 verschillende types. Door psycholoog David Keirsey vereenvoudigd in 4 types. h#p://www.123test.nl/jung-‐persoonlijkheidstest/ h#p://www.impact-‐ontwikkeling.nl/pagina/mbG-‐test/ Artikel: http://www.karelgeenen.nl/26/persuasionarchitecture-4-type-mensen/
Voor volgende week : Stap 2. Kies een responsive design opmaak Maak een keuze uit onderstaande sites (die allemaal een grote visual op home hebben) om je responsive design op te baseren. http://bradfrostweb.com/ http://trentwalton.com/ http://yiibu.com/ http://www.cacaotour.com/index.php/en/home www.barackobama.com/?source=primary-nav http://www.gravitatedesign.com/ http://foodsense.is/
Jouw ontwerp moet je uiteindelijk laten zien op de volgende formaten I phone 320 x 480 i pad 1024 x 768 i mac 1920 – 1080
Voor volgende week: - maak functioneel ontwerp (en hou daarbij rekening met de MBTI) Kies een stramien ( zie opdracht ppt) Teken (!) een functioneel ontwerp (dus nog geen design maar puur functioneel) met de elementen er allemaal op jouw website moeten komen en geef daarop aan welke MBTypes je daarmee bedient! Elementen die in ieder geval op de homepage moeten komen zijn: • logo • navigatie menu ( met 6 elementen) • een call to action button ( tekst bedenk zelf!!!) • grote visual • slogan • footer • stukje tekst ( mag lorem ipsum zijn maar let wel op dat je een inleiding kan onderscheiden van broodtekst enz) • Background
Elementen die in ieder geval op de vervolg pagina moeten komen zijn: • • • • •
logo navigatie menu ( met 4 – 8 elementen) subnavigatie ( met 3- 8 elementen) footer content : tekst / foto / video
Maak het ontwerp op 3 groottes ! Hou rekening met wat je ziet boven de paginavouw! http://www.jungleminds.nl/blog-en-boeken/blog/artikel/tips-optimaalomgaan-met-de-paginavouw/
+ ook nog: Maak een start met het huisstijl ontwerp Oa Logo Kleuren Font Bekijk en lees: http://www.lancelots.nl/marketing/huisstijl/tips http://sixrevisions.com/graphics-design/70-excellent-logo-designtutorials-and-resources/ http://fww.few.vu.nl/hci/interactive/fitts/ http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/
