Ontw document vsd

Ontwerp -document CRIA VSD

B.Y.O.B Build your own bear

CRIA -project Research_analysis report VSD Maker: Anno Alli, Rodney van Stijn, Jelle Lugten Groep 4: BYOB - Ferdi Postma - Sasja Gillissen - Rodney van Stijn - Anno Alli - Jelle Lugten Datum: 16/11/2013

INHOUD Inleiding ............................................................................................................................................................................................................... 4 t/m 5 Onderdeel 1 Navigatie ........................................................................................................................................................................................................... 6 t/m 13 Layout ................................................................................................................................................................................................................ 14 t/m 25 Formulieren ....................................................................................................................................................................................................... 26 t/m 35 Onderdeel 2 Kleur .................................................................................................................................................................................................................. 36 t/m 43 Typografie .........................................................................................................................................................................................................44 t/m 57 Onderdeel 3 Gestalt .............................................................................................................................................................................................................. 58 t/m 63 Beeld ................................................................................................................................................................................................................. 64 t/m 71 Iconen................................................................................................................................................................................................................ 72 t/m 79 Feedback .......................................................................................................................................................................................................... 80 Reflectie ............................................................................................................................................................................................................. 81 Bronnen .............................................................................................................................................................................................................. 82

2

3

4

INLEIDING Dit document gaat over de designstudy voor Byob.

Onderdelen voor de website en de RIA (Rich internet application) die wij als projectgroep gaan ontwerpen zullen bekeken worden. Dit zal in dit document worden gedaan door het tonen van inspiratiebronnen van alternatieve bronnen.

Wanneer een inspiratiebron zodanig is dat deze intresse wekt voor eingen toepassing zal er op de pagina ernaast een eigen uitwerking geplaatst worden.

- De website en de Rich internet apllication bevatten: Onderdeel 1: navigatie, layout en formulieren.

Onderdeel 2: kleur en typografie Onderdeel 3: Gestalt, beeld en iconen -

5

Ontwerp document 6

Navigatie 7

Inspiratie navigatie 1: Bearville Application

8

Bearville mobile application In deze mobiele applicatie wordt genavigeerd d.m.v. horizontaal scrollen. Met schuif de schermen zijdelinks en hierdoor krijgt de gebruiker elke keer een andere wereld /menu -item voorgeschoteld. De gebruiker kan het gebouw dat wordt getoond betreden en hierin worden de verdere opties getoond. Ik vind deze manier van navigatie erg gemakkelijk en dit geeft de ruimte om per header een complete pagina te gebruiken. Dit heeft een goede invloed op de kindvriendelijkheid van de website.

Navigatie Deze applicatie vind ik erg handig vanwege de horizontale navigatie. Bij tablet en Smartphone sweept de gebruiker simpelweg over het scherm waarna er een nieuwe menu -item wordt getoond. Wij zullen in totaal 3 hoofdmenu -items hebben. Dit maakt het overzichtelijk voor het navigeren. Wanneer de gebruiker weer terug moet naar een scherm is die snel gedaan.

9

Inspiratie navigatie 2: http://www.buildinternet.com/project/supersized/

http://www.buildinternet.com/project/supersized/

10

Deze website heeft een grote afbeelding het het beeld gebruikt. De afbeeldingen worden om de paar seconden gewisseld door een slider. Elke foto bevat koppelingen naar andere menu items binnen de website. Nu is het niet zo dat je moet wachten tot jouw gewenst slide weer voorbij komt. Het is namelijk ook mogelijk te navigeren met de pijl iconen die link en rechts in de afbeelding staan. In het midden onderaan in de afbeelding staan rondjes op gelijke afstand naast elkaar, dit is het icoon voor weergave van pagina’s waar de slider zich in bevind, dit rondje krijg namelijk een andere kleur. Hoe kan op geklikt worden zodat de gebruiker direct kan navigeren binnen de pagina’s.

Navigatie De simpele iconen worden gebruikt voor de navigatie binnen de website. Het gebruik van het KISS -principe spreekt mij erg aan binnen het gebruik van de RIA die wij zullen gaan maken.

Er bestaan ook gecompliceerde iconen die wel generaal geaccepteerd zijn maar die voornamlijk door volwassenen worden begrepen. Omdat de doelgroep erg breedt is in deze branche moet het voor iedereen duidelijk blijven dus een zo duidelijk mogelijk navigatie is een vereiste.

Eigen verwerking optie 1

Hieronder mijn verwerking van de pijltjes en pagina indicatie. Ik heb de felle kleur lichtblauw toegepast om de merkwaarde kindertijd te benaderen. Om de uitgewerkte blauwe pijl duidelijk naar voren te laten komen is er een zwarte cirkel hieromheen geplaatst, dit zorgt voor een duidelijk contrast waardoor de mogelijkheid tot navigatie overduidelijk is. De pagina indicatie bar is ook lichtblauw, dit om de gebruiker te laten begrijpen dat deze kleur tot de navigerende functie behoord. Op de pagina waar de gebruiker zich bevindt kleurt het rondje licht grijs. Dit om de rust binnen de navigatie te behouden qua kleur.

11

Inspiratie Navigatie 3: Spel, Super Mario Bros

12 Super Mario Bros Met dit spel wordt er door een poppetje door een spel gelopen. Dit gebeurt in horizontale lijn. Waar het poppetje “Mario� heen beweegt daar past de wereld om hem heen zich ook op aan. Er zijn lichte en volle kleuren gebruikt binnen dit spel. De vormgeving van iconen en typografie is erg speels op een digitale kinderlijkheid gedaan.

Navigatie De horizontale navigatie binnen dit spel spreekt mij erg aan. Het is mogelijk van links naar rechts binnen de wereld te bewegen en de wereld veranderd hier ook door. In het gebruik van een kinderlijke website zal dit erg bruikzaam zijn. Per menuitem zal namelijk ook compleet beeld kunnen worden benut i.p.v. slechts een selectief kader binnen een dropdown -menu.

13

Ontwerp document 14

Layout 15

Inspiratie Layout: www.proto.io

16

Deze website biedt een online programma aan om werkende prototypes te maken van apllicaties voor smartfone en/of tablet. Op de homepage is een lichtblauw maar toch volle kleur gebruikt. Hierin staan in monochromatische kleurverhouding figuren afgebeeld. Voor de typografie is er gekozen voor variatie maar niet te veel. Er is overal gebruik gemaakt van een humanistische typografie, Het contrast bij de achtergrond en typografie is groot. Dit zorgt ervoor dat de tekst duidelijk aanwezig is. Verder zijn de afbeeldingen en het logo op de homepage betrekkelijk groot.

Uitgelicht item De gebruiker kan worden begeleidt door de website door teksten en vormen. Deze zijn allen in een eigen gele kleur weergegeven.

Hierdoor zal de gebruiker deze gele kleur associeren met de hulpfunctie. De teksten en vormen zijn in een nog meer humanistische stijl neergezet. Hierdoor zal de gebruiker zich meer geholpen voelen door een mens dan door een digitaal programma. Het item waar de tekstuele hulp voor dient wordt opgelicht door korte speelse streepjes rondom het item.

17

Inspiratie Layout 1: http://ozeldikim.vakko.com/tr/#2

http://ozeldikim.vakko.com/tr/#2 Deze website biedt de mogelijkheid jouw eigen kleding te designen in een 3D vorm. Het betreffende kledingstuk kan in zijn 3D vorm ook gedraait worden. Deze draaimogelijkheid is aanwezig maar niet vloeiend en daardoor minder interactief. Er wordt namelijk op een icoon gedrukt die de vorm van een draaipijl weergeeft. Wanneer er op dit icoon geklikt is laadt de pagina een andere foto. Rechts en links van het te designen kledingstuk staan optievensters. Hierin kunnen kleuren vormen en contrasten worden gekozen. Bij de selectie van werk type shirt iemand wilt is er gekozen voor de navigatie door middel van een scrolbalk horizontaal te schuiven. Daarnaast is het kleurgebruik licht en is er in hoofdlijn gekozen voor monochromatisch kleurgebruik.

18

Navigatie

In dit optieskader staan duidelijk opties weergeven. Wat mij aanspreekt is dat de gebruiker in eerste instantie alleen kernwoorden te zien krijgt en een beperkt aantal opties. Om meer te kunnen zien worden dropdown -boxes toegpast en scroll functionaliteit. Daarnaast is er als eerste gekozen voor navigatie binnen dit kader d.m.v. een balk horizontaal te kunnen schuiven. Al deze opties tot navigeren binnen dit optieskader zijn op zichzelf erg leuk en goed hanteerbaar, maar nu vindt ik dit er teveel vormen van navigatie worden gebruikt binnen 1 kader. Dit maakt het gebruik van de RIA minder consistent.

19

Inspiratie Layout 2: http://www.roomthebook.com/inside/

http://www.roomthebook.com/inside/ Op deze website is er een 3D weergave gekozen van een slaapkamer. Bij een mouse over van een object wordt deze ingekleurd en verschijnt er een pop up tekstballonnetje wat dit object inhoudt. Wat er verder mee gedaan kan worden wordt vertel door een kinderstem. Deze stem legt rustig uit wat de bedoeling is dat je doet. Wanneer er op een object geklikt wordt opent er een nieuw venster met verdere uitleg m.b.t. het object. Dit kan tekst zijn, maar ook filmpjes en verdere koppelingen naar externe pagina’s worden getoond. Het venster dat na klikken op een object geopend wordt is expliciet kleiner dan het hoofdscherm. Dit maakt het wel duidelijker wat de subpagina is.

20

Layout De objecten waar je muis zich op bevindt krijgen de invulling van hun kleur/patroon. Daarbuiten komt er een pop -up tevoorschijn waarin tekst staat. Wanneer de gebruiker zijn of haar geluid aan heeft staan komt er ook een vertellende kinderstem door de speakers.. Deze stem vertelt informatie.

21

Inspiratie layout 3: http://makeyourmoneymatter.org/

http://makeyourmoneymatter.org/ Deze website verteld een verhaal. Dit verhaal wordt verteld door het scrollen door de pagina. Het navigeren gaat door het scrollen. Naar onder of naar boven, de pagina gaat verder bij het scrollen. Het is dus niet direct mogelijk weer terug te scrollen naar het vorige stuk. De website is vormgegeven in een leuke en duidelijk geanimeerde 2D stijl. Er zijn matte en voornamelijk monochromatische kleuren gebruikt. Het hoofdmenu onderaan de pagina is in schreefloze witte letters geschreven. De uitleggende teksten in elk kader zijn echter aangepast in de Slab Serif typografie. Dit geeft de uitleg een verder nostalgische stijl.

22

Navigatie Onderaan de pagina staan altijd 3 menu -items waar op geklikt kan worden. Deze staan in een witte humanistische typografie. Bij een mouse -over komt er een witte lijn onder het betreffende menu -item te staan. Dit geeft de gebruiker duidelijkheid over waar zijn muis zich bevint op de menu -items.

23

Inspiratie layout 4: http://archive.revolutionsinsound.com/

24

http://archive.revolutionsinsound.com/ Deze website toont verschillende Clubnights die gehouden zullen worden. Bovenaan de pagina staat in het groot de kernzin en de slogan van de website staat eronder. Door de zwarte achtergrond is het mogelijk een groot contrast te gebruiken. Dit hebben zij goed gedaan d.m.v. het gebruik van de volle kleur roze en wit. De kernzin staat in een dikgedrukt lettertype, dit geeft kracht aan deze kernzin. De slogan is een wat slanker lettertype dat duidelijk en betrouwbaar overkomt op mij.. Onder deze expliciete zoekfunctie staat een rijtje uitgelichte Clubnights. Deze hebben allemaal andere kleuren en iconen gebruikt, maar door het consistente gebruik van vormen blijft het een rustig geheel.

Layout Verschillende Clubnights worden weergeven. Ondanks het gebruik van verschillende iconen en kleuren blijft de consistentie binnen dit kader goed aanwezig. Dit is zo omdat de vormen die eromheen staan hetzelfde blijven. Hierdoor is het mogelijk alle een eigen karakter te geven en toch consistent te blijven. Hieronder staat de titel van de clubnight plus een korte uitleg. Elke uitleg met vorm staat in een rechthoek.

Deze rechthoek is in monochromatische kleur toegepast tot de zwarte achtergrond. Hierdoor blijft de pagina ondanks de felle kleuren toch rustig en overzichtelijk.

25

Ontwerp document 26

Formulieren 27

Inspiratie formulier 1: http://shop.build-a-bear.de/

28 http://shop.build-a-bear.de/ , Aanschafformulier Dit is het aanschafformulier zoals die getoond wordt op de Duitse Build-a-Bear website. Wat mij als eerste opvalt is dat er bovenaan dit formulier een navigatie -balk staat. De gebruiker kan zien in welke stap van het aanschafproces hij of zij zich bevindt.

Deze kleurt als enige de tekst op binnen het punt in een donkerblauwe volle kleur. Er wordt een miniatuurafbeelding getoond aan de linkerkant van het formulier van de gekozen producten. Aan de rechterkant van het formulier volgen de hoeveelheden en prijzen. Vervolgens is het mogelijk de verzendskosten te berekenen door het land in te voeren waar de beer moet worden heengestuurd. Vervolgens staan er vinkjes met voordelen van Build-a-Bear bestellingen en een koppeling om verder te gaan naar de kassa. Naast deze knop staat ook nog een keuringsemblame die duidt op betrouwbaarheid van de toepassing.

Formulieren Verschillende Clubnights worden weergeven. Ondanks het gebruik van verschillende iconen en kleuren blijft de consistentie binnen dit kader goed aanwezig. Dit is zo omdat de vormen die eromheen staan hetzelfde blijven. Hierdoor is het mogelijk alle een eigen karakter te geven en toch consistent te blijven. Hieronder staat de titel van de clubnight plus een korte uitleg. Elke uitleg met vorm staat in een rechthoek.

Deze rechthoek is in monochromatische kleur toegepast tot de zwarte achtergrond. Hierdoor blijft de pagina ondanks de

Eigen uitwerking formulier 1: http://shop.build-a-bear.de/

29

Inspiratie formulier 2: https://www.buildabear.com/shopping/checkout/basket.jsp?selected=

http://build-a-bear.com/ , Aanschafformulier Dit is het aanschafformulier zoals die getoond wordt op de Amerikaanse (.com) Build-a-Bear website. Wat mij als eerste opvalt is dat er bovenaan dit formulier een handeling wordt omschreven die een positief gevolg zullen opleveren voor de gebruiker. Dit

30

kan in fysieke of digitale vorm gedaan worden want het gaat om een Giftcard.

Boven de items in het winkelmandje staat een checkbox om alle items in het mandje te selecteren. Rechts van deze checkbox staan opties die je verder kan uitvoeren met de geselecteerde items. Onder de items is het mogelijk 1 dollar aan een goed doel te doneren die ook gerelateerd is aan speelgoed. Daaronder staan verdere populaire producten die relevant zijn aan de producten die zich reeds in het winkelmadje bevinden

Formulieren Op dit formulier staan koppelingen die de linken naar pagina’s die aanzetten tot meer aanschaf van producten. Dit is erg leuk en relevant. Voor het bedrijf zelf zal dit een gunstige invloed hebben op de omzet van het bedrijf.

31

Inspiratie formulier 3: http://www.intertoys.nl/

http://www.intertoys.nl/ , Aanschafformulier Dit is het aanschafformulier zoals die getoond wordt op de Nederlandse website van Intertoys. Wanneer de koppeling naar het winkelmandje wordt aangeklikt verschijnt dit in een pop -up kader. Wanneer er op afrekenen wordt geklikt wordt er wel

32

genavigeerd naar een nieuwe pagina. Dit is dus niet “Seamless” zoals wordt omschreven voor een RIA. Verder valt de felle volle kleur geel op die de achtergrond is van deze pop -up. Dit geeft mij, net als de website, een druk gevoel. Er wordt goed gebruik gemaakt van contrasten maar in sommige geval weer totaal niet. Zie “artikel, prijs, aantal, totaal”. Om deze pop - up te sluiten kan op “verder winkelen” rechts bovenaan de pagina worden geklikt. Ook is het mogelijk naast het kader te klikken waarna deze sluit.

Formulieren Het gebruik van een pop -up bij het afrekenen zorgt voor een makkelijke navigatie binnen de website. Ook is dit een naleving van het kenmerk ‘Seamless’ die een RIA dient te hebben. Bij de intertoys website wordt echter naar een andere pagina genavigeerd wanneer er op afrekenen is geklikt. Hier is het kenmerk ‘Seamless’ verloren gegaan.

Eigen uitwerking: Inspiratie formulier 3: http://www.intertoys.nl/

De kleuren geel en rood zijn in deze eigen uitwerking aanwezig. Deze twee kleuren behoren tot één van de drie primaire kleuren van Builda-Bear. De broadtekst is het fonttype Arial. Dit is in dit geval erg passend bij de groep die bij deze laatste stap betrokken zijn. Vaak zijn het de ouderen die de betaling verrichten en de beer aanschaffen voor hun kinderen. Wanneer de klant al een ouder is en de beer voor zichzelf koopt is het geen probleem om op het gebied van aanschaf een zakelijke en duidelijk typografie te gebruiken. Ook het contrast binnen dit formulier is aanwezig met de kleuren zwar, geel en rood. De gebruiker kan aantallen en opties selecteren door het gebruik van een drop -down menu. Een items kan verwijderd worden door op het rode kruisje rechts van het item te klikken. Dit kruisje is echter wel weer geanimeerd en dit geeft het formulier weer een niet “te” zakelijke stijl.

33

Inspiratie formulier 4: Geboortecertificaat winkel Build-a-Bear

In de Build-a-Bear winkel wordt deze lay out getoond voor het invullen van het geboortecertificaat. De content die voornamelijk wit is staat afgebeeld op een relatief donkerblauwe volle kleur als achtergrond. Het contrast is daardoor goed, de content is duidelijk zichtbaar/leesbaar.

34

Wat verder opvalt is dat de input -velden afgeronde hoeken hebben. Dit geeft het formulier een veel minder zakelijk uiterlijk en hierdoor zullen kinderen zich meer vertrouwt voelen met het invullen van dit formulier. De primaire kleuren geel en blauw worden ook in dit formulier goed gebruikt.

Dit is het geboortecertificaat zoals de klant deze zal meekrijgen in fysieke vorm. Dit zal gebeuren wanneer de aankoop van de beer is verricht en de klant in de laatste stap ook een geboortecertificaat voor de teddybeer heeft gemaakt. Op dit certificaat zijn ook de ronde vormen weer aanwezig. De lijntjes om de concent van dit certificaat zijn niet kaarsrecht maar licht gebogen. De typografie is niet zoals het digitale formulier. Op dit formulier is de typografie van Build-a-Bear zelf gebruikt. Dit geeft dit formulier naar mijn mening wel veel meer een eigen karakter.

35

Ontwerp document 36

Kleur 37

Inspiratie kleur 1 http://www.dashag.com/

http://www.dashag.com/ Dashag.com is een website die een applicatie uitlegt en promoot. Door middel van een horizontale slideshow worden er afbeeldingen van de app op de mobiel getoond. Per wisseling van foto wordt een andere onderdeel van de applicatie uitgelegd. Deze dia gaat echter te snel om de bijbehorende tekst te lezen en een stopknop is niet expliciet aanwezig. De kleuren lichtblauw en wit zijn de primaire kleuren binnen deze website. Blauw staat voor Sterk, betrouwbaar, gezaghebbend en wit staat voor Rein, onschuldig, puur. (Bron: http://office.microsoft. com/nl-nl/frontpage-help/effectieve-kleuren-hoe-kleuren-van-invloed-zijn-op-gebruikers-HA001042937.aspx). Deze twee kleuren onder-

38

bouwen de merkwaarden van Build-a-Bear. Doordat er “slechts� twee primaire kleuren gebruikt zijn blijft de website een betrouwbaar rustige uitstraling uitoefenen op de gebruiker.

Kleurenpalet Monochromatisch kleurgebruik. Vele kleurwisselingen zijn dus niet aanwezig binnen deze website. De kleurwisseling die worden gebruikt zijn voor de social media koppelingen op een monochromatische manier kleur gegeven. Dit zorgt ervoor dat, ondanks dat er naar een externe pagina wordt gelinkt, de website zijn eigen stijl behoudt en daardoor kalm en betrouwbaar overkomt.

Eigen verwerking optie 1

39

Inspiratie kleurenpalet 2:

http://www.teamgeek.co.za/#awards Teamgeek is een organisatie van digitale experts die met hun technieken het publiek verliefd wil laten worden op het merk van een klant. De website is sterk in het gebruik van vele kleuren. Door een relatief lage tint, intensiteit en helderheid blijft de website echter wel betrouwbaarheid en overzicht uitstralen. Typografie die wordt gebruikt op de pagina is slank en schreefloos. Ik vind dit een mooie typografie en ook de witte kleur hiervan spreekt mij aan, echter het contrast met de achtergrond is niet optimaal. Wel is het contrast voldoende en wordt door het behoudt van de achtergrond de consistentie op de website behouden. Er wordt veel gebruik gemaakt van iconen binnen de website. Deze

40

iconen zijn simpel en dus snel te begrijpen. Bij een mouse -over bij een icoon verschijnt er i.p.v. het iconen een tekstje waar deze koppeling de gebruiker naartoe zal leiden. Dit wordt uitgelegd met een korte kernzin.

Kleurenpalet Een overzichtelijk gebruik van iconen spreekt mij erg aan. Een verdere uitleg bij een mouse -over is ook erg bruikzaam. Zeker wanneer men voor het eerst op de website komt. Doordat deze uitleg alleen verschijnt in hetzelfde kader als het icoon bij een mouse -over wordt er veel ruimte bespraart binnen de pagina.

Verder is de overzichtelijke rechthoekige plaatsing bovenaan een pagina altijd erg effectief naar mijn mening. Uit onderzoek blijkt dat de kleuren binnen een website van grote invloed zijn voor de gebruikers. Zo zijn de kleuren wit, geel, groen en blauw de kleuren die de merkwaarden van Build-a-Bear onderbouwen. Deze kleuren komen in deze website allen naar voren.

(Bron: http://office.microsoft.com/nl-nl/frontpage-help/ effectieve-kleuren-hoe-kleuren-van-invloed-zijn-op-gebruikersHA001042937.aspx)

41

Inspiratie kleur 3: http://artemjuliawedding.com/en

h http://artemjuliawedding.com/en Artemjuliawedding.com is een website die een verhaal vertelt over hoe een huidig echtpaar elkaar heeft ontmoeten en de vermelding eind het eind dat zij gaan trouwen. Dit verhaal wordt op een manier verteld waarbij de gebruiker door de pagina navigeerd door te scrollen. De achtergrondkleur blijft altijd dezelfde kleur lichtblauw met een gemiddelde intensiteit. Bij het scrollen komen er verschillende objecten op de achtergrond voorbij die het verhaal ondersteunen. Op de voorgrond blijft altijd het echtpaar aanwezig in een luchtballon. Deze deinst langzaam op en neer. Dit geef naar mijn mening een kalme levendigheid aan de website.

42

Kleurenpalet Weer komen de kleuren wit, geel en groen/blauw, die de merkwaarden van Build-a-Bear onderbouwen, naar voren in deze website. De kleur rood is echter niet storend omdat deze dezelfde intensiteit aan heeft genomen van de omliggende kleuren.

43

Ontwerp document 44

Typografie 45

Inspiratie Typografie 1: Build-a-Bear winkel, Oberhausen (Duitsland)

46

Geluid implementatie Build - a - Bear winkel. Typografie

Uitgelicht Typografie De typografie op de objecten in de Build-a-Bear winkel zijn van kinderlijke stijl in humanistische vormgeving. De vormen van de letters variereren door de continue variatie is het toch consistent.

De stroke van de letters varieren. De letters zijn ondanks hun variatie wel schreefloos en dit maakt het gemakkelijker te lezen voor kinderen. De keuze van het lettertype ‘Brady Bunch’ is hierop gebaseert.

(Bron: http://metz-opleidingen.nl/index/Typografie_-_ Schreeflozen_kinderen.html)

Inspiratie Typografie 1.1 : http://www.dafont.com/brady-bunch.font

Brady Bunch Deze typografie is ook schreefloos. Net als het ‘Funbear’ font varieert het lettertype in de strokes. Deze doet dat echter veel minder dan ‘Funbear’. Dit geeft voor mij een rustigere/betrouwbare uitstraling aan deze typografie. Dit lettertype is ‘Bold’ maar door het gebruik van voldoende ruimte in de letters blijft deze typografie erg duidelijk. Omdat deze typografie erg lijkt op de typografie van Build-a-Bear zelf hebben wij in groepsverband uiteindelijk voor deze typografie gekozen.

(Bron: http://metz-opleidingen.nl/index/Typografie_-_Schreeflozen_kinderen.html)

47

Inspiratie Typografie 2: http://shop.build-a-bear.de/products/buildabear_home. asp?mid=40&store=1&sid=1&wid=1

48

Inspiratie Typografie 2: http://www.dafont.com/funbear.font

Deze typografie zal gebruikt worden in de subheaders binnen de menu -tems. Wanneer er op een huisje binnen de homepagina geklikt is zal de klant verder navigeren naar een menu met verdere opties. Deze opties zullen in deze FF Nexus typografie getoond worden.

Dit omdat deze typografie schreefloos is en bold is waardoor de ronde vormen in deze typografie nog duidelijker zichtbaar zijn en een betrouwbaar uiterlijk scheppen in de weergave van teksten. Ook kopteksten in formulieren zullen dit lettertype aannemen.

49

Inspiratie Typografie 3: Standaard lettertypen

Calibri Calibri Deze typografie zal goed gebruikt kunnen worden in de extra informatieve teksten die in kleine letters worden afbeeld. Bijvoorbeeld voordelen of weetjes die een klant moet zien maar die niet teveel ruimte in beslag mogen nemen. De typografie Calibri is hier zeer geschikt voor omdat deze ook in een klein .pt -formaat nog goed leesbaar zijn. Het lettertype is slank maar niet te slank zodat deze in een kleiner lettertype niet meer te lezen zou zijn. Daarnaast is het schreefloos en bevat het zulke vormen dat het onder de humanistische lettertypen valt.

50

Inspiratie Typografie 3.1: Standaard lettertypen

Arial Broad Arial Deze typografie zal gebruikt worden voor de broadteksten in onze website en de RIA (rich internet application). Wij kiezen voor de regular vorm wat voor ons het meest overeenkomt met een broadtekst. Arial is een humanistisch lettertype en omdat de meeste servers dit lettertype kunnen lezen zal er geen keuze hoeven te worden gemaakt uit secundaire lettertypen die in een keer totaal niet aan zou sluiten bij de rest van de pagina.

51

Inspiratie Typografie 4: http://www.hermanshomepage.com/flash5/player.htm

52 http://www.hermanshomepage.com/flash5/player.htm Na het bekijken voor vele websites die voor een product zijn gemaakt die met kindertijd te maken hebben kan ik het volgende concluderen.

Schreefloosheid is een meest voorkomende vorm van typgrafie.

De typografie is vaak in een ‘Bold’ vorm weergeven.

De vaak witte lettertypen worden omgeven door een kleurrijk object. Dit om het contrast te optimaliseren.

Uitgelicht Typografie Wat opvalt is dat er vaak gekozen wordt voor een typografie die relatief ‘Bold’ is. Het komt ook zelfde voor dat een website waar kindertijd wordt uitgestraald een lettertype heeft met schreven. Het meest wordt er gekozen voor een witte kleur in de typografie met een daar omheen kleurrijke omgeving om het contrast optimaal te krijgen.

Inspiratie Typografie 4.1 : http://www.dafont.com/funbear.font

Funbear Font Deze typografie heeft net als de Build-a-Bear typografie een constante variatie in strokes van de letters. Dit geeft het kenmerk “Kindertijd� een versterking. Wat opvalt is dat de letters uit lijnen bestaan. De letters zelf zijn niet met kleur gevuld en dit geeft de typografie wel een herkenbare stijl. Associaties kunnen hierdoor sneller worden gemaakt. Uit onderzoek blijkt ook dat kinderen schreefloze letters beter kunnen verwerken dan lettertypen die wel schreven hebben.

(Bron: http://metz-opleidingen.nl/index/Typografie_-_Schreeflozen_kinderen.html)

53

Inspiratie: http://99designs.com/designer-blog/2013/10/04/make-killer-email-designs/?utm_ source=feedburner&utm_medium=email&utm_campaign=Feed:+99designsDesignerBlog+(D esigner+Blog)

“

Ah, that feeling when you pick the right font and your design just “clicks”.

Unfortunately, you’re not going to have a lot of these moments designing emails. As mentioned before, emails are HTML coded content that has to work with different browsers, email clients, desktop and mobile devices.

This means all of your text will be rendered using fonts from client’s computer — if the system cannot find the font you specified, it’s going to replace it with the closest match (which is, more often than not, something very ugly).

The challenge is to stick with web-safe fonts like Arial, Times New Roman, Courier New, Tahoma and Verdana. Almost all Mac and Windows machines have them installed. ”

Eigen uitwerking Typografie

l a i r A B-a-B a i g r o e G B a

B-

a n a d r e V B B-a r e i r u o C B B-a-

De typografie van Build-a-Bear is een eigen lettertype van deze organisatie zelf. In deze typografie is de merkwaarde “kindertijd” goed benadrukt (zie: Inspiratie Typografie 2: Build-a-Bear winkel). Dit lettertype kunnen wij in eerste instantie niet exact overnemen omdat het gepatenteerd is. Daarentegen kunnen wij wel een eigen typografie opzoeken die naar onze mening overeenkomt met de typografie van Build-a-Bear. De kans hierbij is echter groot dat andere computers niet compatibel zijn met deze typografie. Wanneer dit via het web het geval is kiest jouw computer een eigen typografie waar die wel compatibel mee is. Hoe kunnen wij echter ook invloedt op uitoefenen. In de html -code zal een tweede en zelfs derde typografie worden neergezet waar de site dan gebruik van zal maken. Niet compatibele computers met mijn eigen gekozen lettertypes krijgen dus een “second opinion”. Hierdoor zal het systeem niet zelf een, wellicht lelijk, lettertype kiezen.

Over de keuzes van lettertypes in de second opinion zal ik terugkomen in het ontwerpdocument.

Inspiratie: http://99designs.com/designer-blog/2013/09/09/what-is-your-type/

Op de website van 99designs is er een vragenlijst opgesteld die uiteindelijk leiden naar het, volgens deze site, beste lettertype dat je kunt gebruiken. Enkele van deze voorstellen heb ik op de volgende pagina uitgewerkt.

Ontwerp document

Gestalt

Inspiratie Gestalt 1: Bearville Application

Bearville mobile application In deze mobiele applicatie wordt gebruik gemaakt van het Gestalt -principe “Continuity�. De weg op de voorgrond geeft een horizontale lijn aan. Dit is voor de gebruiker een gegeven dat de website in horizontale lijn vormgegeven is. Wanneer de scrollt of op de smartphone sweept dan wordt er ook daadwerkelijk in horizontale lijn door de website gegaan. Per menu -item is een volledig scherm beschikbaar en ook de rechthoekige menubalk bovenaan de pagina schuift mee en veranderd dus ook van woord.

Uitgelicht Gestalt Boven de huizen die verder naar de opties binnen dit menu -item navigeren staat een afgronde vierkant maar daarbinnen het gebruik van een icoon. Dit vierkant wordt omgegeven door een witte balk die aan de onderkant een puntvorm vertoond, Deze wijst naar het huis.

Wanneer de gebruiker de lijn van de pijl naar beneden volgt komt diegene bij het huis en associeerd dus het vierkant met de icoon met het huis.

Eigen uitwerking Gestalt 1: Bearville Application

In deze eigen uitwerking is de basis gelegd voor onze website. Deze zal ook uit een horizontal wereld bestaan waar doorheen genavigeerd kan worden. Omdat deze afbeelding een groot horizontaal gedeelte beslaat op de website zou er een grote afbeelding nodig zijn en dit zou waarschijnlijk langer duren om te laden. Ik heb in overleg met de groep dit risico vermeden door één afbeelding te gebruiken voor dit complete horizontale oppervlak. Deze afbeelding kan constant naast elkaar geplaatst worden. Het begin en het einde sluiten exact op elkaar aan waardoor het lijkt dat het één afbeelding is. Omdat deze afbeelding veel kleiner van formaat dus is zal het laden veel vlotter gaan.

Inspiratie Gestalt 2: http://www.awwwards.com/

Deze website toont ontwerpen van websites. Dit doen ze op basis van originaliteit en moderne vormgeving. Deze website is erg handig in gebruik voor inspiratie voor eigen uitwerkingen. De wireframe van deze website is erg simpel en dit maakt hem dan ook handig in gebruik.

De achtergrond is van een lichte grijstint. Rechts bovenaan staat het filter menu dat gebruikt kan worden in de zoektocht naar het juiste type website. De drie onderdelen waarop gefilterd kan worden zijn: Category, Tag, Colour.

Uitgelicht Gestalt Deze drie filter -items hebben allen dezelfde vormgeving. Het onderwerp van filtering staat in een woord uitgedrukt en daarnaast staat een icoon die een drop -down menu symboliseert. Hierin komt het gestalt principe “Similarity” goed naar voren.

Deze figuren omcirkelen een cijfer die een website behaald heeft op verschillende punten. Door de consistentie in gebruik van dezelfde vorm treedt het gestalt principe “Similarty” op. Doordat de vormen hetzelfde zijn kunnen er verschillende kleuren en vullingen worden toegepast binnen de vorm zonder de similarity te verliezen.

Ontwerp document

Beeld

Inspiratie Beeld 1: http://pixologic.com/zbrush/features/overview/

Pixologic is een website die het programma Z-Brush aanbiedt. Dit programma stelt de gebruiker in staat om sculpture te maken van zeer hoge resoluties die omgezet kunnen worden in bijna foto -realistische objecten. De gebruiker kan in dit programma zowel objecten bouwen als texturen en photoshoppen tegelijk.

Uitgelicht Beeld Door de realistische 3D weergave kan het beeld van de teddybeer realistisch weergeven worden. Dit zal optimaal zijn om het gevoel die een fictieve teddybeer losbrengt zo icht mogelijk te benaderen in een digitale vertoning.

Eigen uitwerking Beeld 1: Rodney uitwerking teddybeer Z-Brush

In de afbeelding hierboven is een uitwerking van een teddybeer zoals die getoond zal worden aan de gebruiker binnen onze RIA. Deze beer zal ook op verticale as draaibaar zijn met de muis of vinger op een computer, tablet of smartphone. Doordat de beren in goede resolutie kunnen worden weergeven en de realistische weergave op de browser zullen de merkwaarden van Build-a-Bear goed opgewekt kunnen worden bij de gebruikers.

Inspiratie Beeld 2: http://www.speedkids.com.br/

Dit is een website die speelgebieden voor kinderen toont. Er zijn foto’s te vinden en op een kleurvolle en vrolijke manier wordt de pagina afgebeeld. Het gebruik van ronde vormen is veel aanwezig binnen de website. Dit geeft een betrouwbare kinderlijke uitstraling aan de website.

Van verschillende kleurenpaletten is gebruik gemaakt binnen de website. Omdat de kleuren die het meeste ruimte in beslag nemen echter geen hoge intensiteit hebben en transparant zijn, heeft de website toch nog een overzichtelijke, kalme uitstraling. Het hoofdmenu staat in een .ronde gebogen vorm onderaan de pagina. Boven dit hoofdmenu staan verschillende merken in een cirkel aan de menubalk vastgeplakt.

Uitgelicht Beeld Op een toepasselijke en toch opvallende stijl worden iconen weergeven. Dit icoon geeft geluid weer. Binnen deze website kan de gebruiker dit aan of uit klikken. Binnen onze RIA willen wij ook opties op deze kinderlijke en leuke manier aanbieden.

Door slechts een simpele klik gaat een functie aan of uit. Deze afbeelding toont de weergave wanneer deze optie aan is.

Wanneer deze optie op uit wordt gezet neemt de intensiteit binnen het icoon erg veel af en krijgt het een grijze tint in zich.

Hierdoor is er een veel minder hoog contrast met de vorm eromheen en wordt er snel begrepen dat dit ‘uit’ betekent.

Eigen uitwerking Beeld 2: http://www.speedkids.com.br/

De sun -rays in een element op de website geeft een vrolijke frisse uitstraling. Wanneer de kleuren op de monochromatische manier worden gebruikt zal er niet snel onrust ontstaan op de website en een variatie in kleuren wordt hierdoor toch gedaan. Dit geeft kinderen een veilig en vertrouwd gevoel omdat deze in hun omgevingen vaak ook kleurrijke elementen hebben. De oudere klanten zullen door deze sun -rays eerder het gevoel terug krijgen van het vertrouwen dat zij als kind herkende. In de bovenstaande uitwerking toon ik het element die boven de menu -items (huizen) getoond zal worden. Hierdoor zal de klant door middel van simpele iconen zien wat een huis (menu -item) inhoudt.

De vormen in dit element bevat alleen afgeronde hoeken. De geeft een vriendelijk en minder statisch uiterlijk als in bijvoorbeeld een echt zakelijk “saai� document.

Inspiratie Beeld 3: http://fixate.it/

Dit is een website die graphic desgin & branding aanbiedt. De complete website bestaat uit een witte achtergrond met daarop de complete layout van de pagina in zwarte lijnen. Door het gebruik van deze twee primaire kleuren is er geen onrust door teveel kleurgebruik. Alle subpagina’s beginnen met hetzelfde beeld als in de afbeelding hierdoven. Onder deze geillustreerde ‘header’ bevinden zich in de subpagina’s wel meerdere items met daarin ook kleuren en foto’s. Bij een roll over op een afbeelding verschijnt de informatie m.b.t. de foto. In het centrum van de afbeelding staat een hoofd getekend. Hierin zijn ogen aanwezig waarmee er geknipperd wordt. Verder is er geen beweging of interactiemogelijkheid binnen deze illustratie. De typografie is slank en schreefloos. Deze is ook zwart en heeft daardoor een optimaal contrast met de witte achtergrond.

Uitgelicht Beeld

Eigen uitwerking Beeld 3: http://fixate.it/

In deze eigen uitwerking heb ik de menu -items aangepast naar die wij zullen hebben in ons Build-a-Bear ontwerp. Verder heb ik het zwart/ wit gebruik aangehouden. De illustratie die eerst in het middel van de lijnentekening stond heb ik verwijderd. Dit omdat dit geen beer was maar een ander dier. Ik heb een eigen 3D beer ervoor in de plaats gezet. Deze heb ik ontdaan van zijn kleuren om het kleurgebruik binnen de pagina consistent te houden. Voor het gebruik binnen onze eigen website denken wij dat dit niet geschikt is om de merkwaarden van Build-a-Bear optimaal over te dragen. Dit blijkt ook uit de volgende bron die ik doorgelezen heb.

Bron: http://office.microsoft.com/nl-nl/frontpage-help/effectieve-kleuren-hoe-kleuren-van-invloed-zijn-op-gebruikers-HA001042937.aspx

Ontwerp document

Iconen

Inspiratie Beeld 2: http://www.speedkids.com.br/

Dit is een website die speelgebieden voor kinderen toont. Er zijn foto’s te vinden en op een kleurvolle en vrolijke manier wordt de pagina afgebeeld. Het gebruik van ronde vormen is veel aanwezig binnen de website. Dit geeft een betrouwbare kinderlijke uitstraling aan de website.

Van verschillende kleurenpaletten is gebruik gemaakt binnen de website. Omdat de kleuren die het meeste ruimte in beslag nemen echter geen hoge intensiteit hebben en transparant zijn, heeft de website toch nog een overzichtelijke, kalme uitstraling. Het hoofdmenu staat in een .ronde gebogen vorm onderaan de pagina. Boven dit hoofdmenu staan verschillende merken in een cirkel aan de menubalk vastgeplakt.

Uitgelicht Iconen Op een toepasselijke en toch opvallende stijl worden iconen weergeven. Dit icoon geeft geluid weer. Binnen deze website kan de gebruiker dit aan of uit klikken. Binnen onze RIA willen wij ook opties op deze kinderlijke en leuke manier aanbieden.

Door slechts een simpele klik gaat een functie aan of uit. Deze afbeelding toont de weergave wanneer deze optie aan is.

Wanneer deze optie op uit wordt gezet neemt de intensiteit binnen het icoon erg veel af en krijgt het een grijze tint in zich.

Hierdoor is er een veel minder hoog contrast met de vorm eromheen en wordt er snel begrepen dat dit ‘uit’ betekent.

Eigen uitwerking Beeld 2: http://www.speedkids.com.br/

de drie primaire kleuren die worden gebruikt binnen het merk van Build-a-Bear zijn; rood, blauw en geel. Deze drie kleuren laten wij dan ook terug komen in de elementen op de website. Het icoon voor geluid is links bovenaan de pagina geplaatst.Dit is gedaan omdat uit onderzoek blijkt dat de gebruikers het eerst naar deze hoek kijken binnen een website. In dit geval ziet de gebruiker dus direct dat het geluid van de website aan of uit kan. Wanneer deze aan wordt gezet hoort de gebruiker een stem die zich eerst voorsteld als jouw hulp binnen de website.

Bron: http://www.allesovermarktonderzoek.nl/onderzoeksmethoden/eye-tracking

Iconen 1 Iconen inspiratie: http://www.travelison.com/

http://www.travelison.com/ De website gebruikt ronde vormen in een horizontale lijn al hoofdmenu binnen de pagina. De gekleurde cirkels bevatten allemaal iconen de erg simpel zijn en dus relatief makkelijk te begrijpen. Wanneer een gebruiker nog niet bekend is met het gebruik van deze website staan er ook nog kernwoorden onder de iconen.

76

Uitgelicht Iconen Het icoon gebruik in deze vormgeving spreekt mij erg aan. Dit komt vanwege de ronde vormen die in de iconen gebruikt worden maar ook in de vormen om de iconen heen. Uit onderzoek blijkt ook dat websites die het kenmerk ‘kindertijd’ met zich meedragen eigenlijk allemaal ronde vormen hebben.

(Bron: http://www.smashingmagazine.com/2009/11/27/designingwebsites-for-kids-trends-and-best-practices/)

Eigen uitwerking: Iconen 1 Iconen inspiratie: http://www.travelison.com/

In deze uitwerking zijn alle menu -items wel altijd aanwezig in de header van de website. In eerste instantie is de navigatie horizontaal door de wereld scrollend waarbij ook de menu -items per deel individueel te zien zijn. Dit was eerst gedaan met gebruik van woorden in een grote en duidelijke typografie. Dit nam veel ruimte in beslag in de header. Dit was echter geen probleem omdat elk woord de complete header als ruimte had. Vanwege het gebruik van iconen wordt er weinig ruimte in beslag genomen in de header en is het heel goed mogelijk deze altijd aanwezig te laten zijn in een visueel beeld.

77

Iconen 2 inspiratie: http://www.peppapig.com/

http://www.peppapig.com/ Weer worden er ronde vormen om de gebruikte iconen in het hoofdmenu geplaatst. Het complete hoofdmenu bestaat hieruit. De iconen zijn in een illustrerende vorm weergegeven. Alle elementen binnen de website vertalen dat zij in een andere wereld zitten. In hun doelstellingen heeft Build-a-Bear dit ook als doel vermeldt. Door het illustreren van de iconen geeft dit een herkenbare getekende stijl weer aan de gebruiker.

Uitgelicht Iconen Door de ronde geillustreerde vormen in het gebruik van de iconen wordt een vertrouwde sfeer voor de gebruiker gecreeerd. Bij een rol over verschijnt er een kernwoord waar deze koppeling naartoe zal leiden. Dit kernwoord is ook in een schreefloze, ronde typografie geschreven.

Feedback Eric de Haan

Feedback design panel

Eric gaf mij aan dat ik niet meer elke inspiratiebron een

Ik moest 2 weken naar het ziekenhuis, ik heb 1 designpanel

eigen uitwerking hoefde te geven. Veel daarvan zou toch

hierdoor niet kunnen bijwonen. Ik heb van die week als nog

niet gebruikt worden. Pas wanneer een inspiratiebron echt

feedback gevraagd bij een leerling.

potentie krijgt om toegepast te worden dan konden er

De feedback die ik kreeg tijdens de designpanels waren erg

schetsen van worden gemaakt. Eric hoopte hiermee dat er

handig. Ik kreeg veel tips over hoe ik de website van Travellu

dieper in kan worden gegaan op inspiratiebronnen die echt

moest visualiseren.

potentie hebben voor gebruik binnen onze RIA.

De eerste week had ik goede ideeĂŤn over content segmentatie en hoe ik dat in mijn designs kon verwerken. Echter kon ik hiervan niet veel laten zien in photoshop, ik had het meeste

80

in mijn hoofd of op papier uitgeschreven. De meeste vonden het goede ideeĂŤn, ik kreeg van hun als tip een aantal websites aangeboden zoals: www.typeform.com en www.colorschemdesigner.com. Ik kon zo goed bepalen hoe de designs eruit zouden te komen zien. En ik kon mijn onderzoek naar content delivery op de website voort zetten.

Als tip kreeg ik dat ik iets meer moest kijken naar hoe het bij andere websites uitgebeeld was. Ik had erg veel aan deze tip en ik heb meteen veel websites bezocht die bijv: verticaal scrollende of horizontaal scrollende websites. Hierdoor kon ik mijn designs nog verder uitwerken.

REFLECTIE Reflecteren

zouden toepassen binnen onze RIA.

Volgens de randvoorwaarde van abc reflecteren •

Aan de hand: beschrijving van de situatie

In de uitwerking van dit document is het belangrijk de inspiratie-

•

Belangrijk: wat is belangrijk in de situatie?

bronnen die de potentie hebben om in gebruik te worden genomen

•

Conclusie: welke conclusies trek ik daaruit en welke acties

verder uit te werken. Inspiratiebronnen die verder niet toegepast

ga ik ondernemen?

zullen worden hoeven geen eigen uitwerking te krijgen (zie feedback Eric van de Haan) De communicatie tussen de groepsleden is

Ik kreeg de verantwoording het VSD Ontwerp -document te

hierin erg belangrijk. Welke inspiratiebronnen hebben de potentie

maken. De opdracht was om op verschillende vlakken (zie hoofd-

om in gebruik te worden genomen en welke niet?

stukken in dit document) inspiratie te vinden en uit te lichten voor eventueel gebruik binnen onze Website en RIA. Voor ik aan dit

Na het maken van dit document kan ik concluderen dat het veel

document begon was er al een beeld gecreerd voor de website en

fijner is om alleen de potentiele inspiratiebronnen verder uit te

RIA door goed vergaderingen en overleg. Ook het bezoek aan de

werken. Hierdoor ga je er veel dieper op in en worden en geen on-

winkel van Build-a-Bear zorgde al voor discussie wat wij wel en niet

nodige eigen uitwerkingen gemaakt.

81

BRONNEN NAVIGEREN

TYPOGRAFIE

Bearville Application

http://99designs.com/designer-blog/2013/09/09/what-is-your-type/

http://www.buildinternet.com/project/supersized/

http://metz-opleidingen.nl/index/Typografie_-_Schreeflozen_kinderen.html

Spel, Super Mario Bros http://www.dafont.com/funbear.font LAYOUT ‘Build-a-Bear’ winkel. Oberhausen. http://ozeldikim.vakko.com/tr/#2 Online.han.nl. CRIA.

82

http://www.roomthebook.com/inside/

VSD_Typografy_EN.pptx

http://makeyourmoneymatter.org/

http://www.hermanshomepage.com/flash5/player.htm

http://archive.revolutionsinsound.com/

GESTALT

http://www.smashingmagazine.com/2009/11/27/designing-websites-

Online.han.nl. CRIA.

for-kids-trends-and-best-practices/

VSD_Gestalt_EN.pptx

FORMULIEREN

Bearville Application

http://shop.build-a-bear.de/

http://www.awwwards.com/

https://www.buildabear.com/shopping/checkout/basket.

BEELD

jsp?selected= http://www.speedkids.com.br/ https://www.intertoys.nl http://pixologic.com/zbrush/features/overview/ KLEUR ICONEN http://www.dashag.com/ http://www.smashingmagazine.com/2009/11/27/designinghttp://www.teamgeek.co.za/#awards

websites-for-kids-trends-and-best-practices/

http://office.microsoft.com/nl-nl/frontpage-help/effectieve-

http://www.peppapig.com/

kleuren-hoe-kleuren-van-invloed-zijn-op-gebruikers-HA001042937. aspx

http://www.travelison.com/ http://www.speedkids.com.br/

83