CRIA - VSD - Smile

Docent:

Semester:

Course:

Inleverdatum:

Auteur:

Student nummer:

Emiel Ruis

CRIA

VSD

19 oktober 2011

Steffen Witvliet

450736

2

Inhoudsopgave

Inhoudsopgave 2Inleiding 3Concept 4Doelgroepen 5

Customizer(s) 5Juryleden 5

Merkwaarden Smile 6Research 7Kleur 8Typografie 9

Analyse 9Titel tekst 9Body tekst 9

Vormgeving 10Proces 10

Vormgeving 11Pagina ontwerpen 11

Vormgeving 12Navigatie 12

Vormgeving 13Interactie 13

Vormgeving 14Formulier 14

Vormgeving 15Iconen 15

Finish with a Smile 16

3

Inleiding

Voor u een groen/blauw welkom in dit tijdschrift. Ik ben Steffen Witvliet, 20 jaar jong, een van de door u aangenomen medewerkers om eens goed te gaan nadenken over de redding van de planeet aarde.

Immers is het al een trend om vaak meerdere auto’s per gezin te hebben. Wat natuurlijk niet de bedoeling is, als je vriendelijk wil zijn voor het Milieu.

Het milieu wil weer lachen! Over enige tijd kan dit ook echt met dank aan de sponsoren van Smile en de milieubewuste trend die zich steeds verder gaat ontwikkelen.

Om alvast iets te verklappen over het concept en mijn oplossing, wil ik alvast vermelden dat ik van mening ben dat Hybride niet totaal duurzaam is. Immers zit er nog steeds een motor in met benzine of dieselver-bruik naast elektriciteit. Toch wordt het vaak verkocht als een milieuvriendelijke auto, terwijl het alleen op korte afstanden werkt.

Ik heb aan de hand van research kunnen concluderen dat er nog innovatieruimte zit in de auto’s die volledig duurzaam zijn.

Denk aan de wedstrijden met zonnewagens, daar moet het uiteindelijk ook naar toe voor de personenauto.

4

ConceptMet mijn concept wil ik de nadruk leggen op de “echte duurzame energie” als de zon en de wind.

Ik wil de bezoekers uitdagen om mee te denken en ontwerpen aan de nieuwe Smile auto. Bijvoorbeeld met ingebouwde windmolens in de achter spoiler, extra luchtinlaten. Zonnepanelen en misschien nog wel veel meer.

Ook is het voor deelnemers toegestaan om nieuwe ideeën op het gebied van energie zuinige concepten in te zenden.

5

Doelgroepen

JuryledenCustomizer(s)

Aan de achterkant van de Applicatie zitten de leden van het Juryteam. Deze worden nadat de applicatie volledig is ontworpen in overleg met de opdrachtgever samengesteld.

Het is hun taak om de ingezonden ontwerpen te beoordelen. Daarbij zullen ze niet alleen letten op de uitstraling, maar ook op demilieuvriendelijke uitstraling. Immers staat milieuvriendelijkheid bij Smile hoog in het vaandel.

De Customizers, de primaire doelgroep van mijn concept. Immers gaat het bij deze opdracht van Smile om een applicatie te ontwerpen waarbij de doelgroep de auto naar wens kan samenstellen. Deze doelgroep is van 17 - 30 jaar. De jong volwassenen. Stuk voor stuk houden ze van de natuur en zijn in voor nieuwe technieken. Ook willen ze allemaal wat anders, een eigen uitstraling.

Deze applicatie zal in de toekomst de gebruikers hun wil geven.

Een milieuvriendelijk auto, welke volledig naar wens en kleur aangepast kan worden.

6

Merkwaarden SmileSmile kan gezien worden als een eigen merkoforganisatie.Nietspecifiekgebonden aan auto’s. Meer zoals Green Peace voor alles wat goed is voor het milieu en wil middels onno-vatieve gedachtes de planeet redden of in elk geval beschermen.

Bij Smile denk ik aan: Innovatie, milieuvriendelijkheid, het geeft mij een hoopvolle verwachting van de toekomst en ook denk ik aan vrolijk (letterlijke vertaling).

7

ResearchInmiddels was mijn onderzoek naar Smile zelf klaar. Maar het concept wat ik op pagina 5 heb beschreven is er niet zomaar gekomen. Voor mijn concept ben ik het internet op gegaan om te zoeken. Hiervoor heb ik Duck Duck Go gebruikt, welke de ge-gevens uit de zoekmachines van Google, Yahoo en Bing combineert.

Later in het proces heb ik een tijdschrift gekocht over klassiek auto’s. Immers wilde ik een auto uitzoeken die goed aansloot bij mijn doelgroep. Omdat ik zelf weinig verstand heb van automerken, leek het mij makkelijker om tijdschriften winkels door te bladeren. Uiteindelijk heb ik deze meegenom-en omdat mijn doelgroep een auto wil met uitstraling en karakter. Naar mijn mening verdwijnt het karakter uit de moderne auto’s door de opkomende automatisering

8

KleurNa het gedane research wordt het tijd om te kijken naar bijpas-sende kleuren. Hiervoor heb gekeken naar de kernwaarden van Smile en daarbij ook naar de kenmerken die de doelgroep typeren. Met behulp van de website www.colorschemdesigner.com hebik een analoog-complementair kleurenpalet uitgekozen.

Omdat de kernwaarden van Smile voornamelijk draaien om duurzaam, milieuvrien-delijk en hoopvol zal ik de groene en blauwe tinten als hoofdkleuren voor de achtergrond gebruiken.

Om wat contract te bieden zal ik de accentjes de oranje/bruine tint meegeven.

Tot slot zal ik voor de tekst kiezen voor Zwart. De zwarte tekst zal op een lichte achtergrondkleur meer contrast krijgen dan bijv. wit en dus beter leesbaar worden.

9

Typografie

Titel tekst

Body tekst

Na wat zoek werk tussen verschillende families en lettertypes ben ik uitgekomen op Maiandra GD. Een lettertype in de categorie Humanist.

AnalyseIk zie Smile als een organisatie welke het milieu weer wil laten lachen. Het straalt dat er hoop is voor de toekomst van milieuvriendelijke auto’s. Het lettertype van Smile wil ik vrolijk eruit laten zien. een beetje speels, anders en toch goed leesbaar als titeltekst.

Om de Body tekst makkelijker te kun-nen onderscheiden van de Titel , heb ik gekozen voor een andere familie van lettertypes. Na een tijdje nadenken en experimenteren heb ik dan toch ge-kozen voor een Transitional letter boven de old style ‘Garamond’ die ik eerst in gedachten had.

10

VormgevingProces

Voordat ik tot mijn uiteindelijke ontwerp ben gekomen heb ik een proces doorlopen. Hierbij is mijn Moleskin erg belangrijk geweest. Wanneer ik een idee had of even kort in de trein wat uit wilde tekenen heb ik mijn Moleskin gepakt.

Ook staan er vaak datums bij van wanneer ik welk idee had en daarbij geschreven hoever ik wasmet de voortgang.

11

VormgevingPagina ontwerpen

In mijn eerste opzet was ik vanuit hetkleurenschema en de eerste schet-sen gelijk aan de slag gegaan. Ik heb vaak de neiging om gelijk aan de slag te gaan, en alles erin te stoppen.

Na een tussentijdsgesprek waarin ik van u ‘Opdrachtgever‘ feedback heb gehad. ben ik gaan experimenteren met het loslaten van vlakken en zorgen dat het er uitziet alsof niet alles is ingesloten. maar meer vrijheid heeft.

Hieronder het resultaat, zoals het is geworden.

12

VormgevingNavigatie

Zoals bij elke applicatie kan de navigatie niet ontbreken. De navigatie van de gehele RIA valt op te splitsen in verschillende categorien.

De hoofdnavigatie, welke op elke pagina aanwezig is. De subnavigatie, welke voor het grootste gedeelte binnen deconfiguratorzit. Hieronder een overzicht van alle navigatie onderdelen.

13

InteractieVormgevingVrijwel alle interactie tussen de gebruiker en het systeem zal middels de muis van de computer plaatsvinden. Elk icoon is klikbaar en zal daarna de betreffende pagina/deel in beeld brengen. Ook wordt er gewerkt met een slidersysteem om de kleur te bepalen. En zal de auto van alle kanten te bekijken zijn. Via de grijze kubus kan je de auto ronddraaien en van alle kanten bekijken. Bijhetklikkenopeenspecifiekzijdevandekubus(F,T,S) zal de auto van de die zijde getoont worden.

14

VormgevingFormulier

Elk formulier op mijn website zal dezelfde stijl en indeling krijgen. Ik heb bewust gekozen voor een indeling waarbij de tekst boven het bijbehorende invulveld staat. Zo creeer je een duidelijke samenhangendaarnaastishetergefficientmetde ruimte. Om de natuurlijke en milieuvriendelijk uitstral-ing niet te laten verdwijnen wil ik elk formulier een plek op de achtergrond van de RIA geven. Express geen aparte pop-up of iets dergelijks,want dan verdwijnt de natuur uit beeld en ik vind dat juist dat in beeld moet blijven opde RIA van Smile.

De accentkleur bruin komt hier naar voren.Elk tekstvakje heeft een oranje bruine rand van 1px. Zo is het duidelijker dat je er iets moet invullen.

FoutafhandelingElk fomulier heeft hetzelfde systeem voor foutafhandeling. Indien er in een specifiekveldeenfoutwordgemaaktzaldezerandvanhetinvoerveldeenrodekleur krijgen en i.p.v. 1pixel, 2 pixels dik zijn. Ook zal er dan een informatie symbool bij verschijnen waarmee de toelichting op te vragen is, middels een klik.

15

VormgevingIconen

Hoofdnavigatie

Configurator

Voor de hoofdnavigatie waarmee je naar de verschillende pagina’s kan navig-eren. heb ik gekozen om te werken met Iconen. en daaronder 1 woord die beschrijft waar je naar toe geleidt gaat worden.

OokvoordeConfiguratorhebiknugekozen voor iconen. Dit omdat ik het idee had dat het mooier zou ogen en beter zou aansluiten bij de stijl van de hoofd naviagtie. Helaas ben ik er niet aan toe gekomen om het uit te werken zoals ik in gedachten had.

16

Finish with a Smile

Uiteindelijkontwerpvandeconfigurator