Issuu on Google+

Sustainable Mobility Innovations; a Learning Experience Jorg van Gerner

1


I n lei d in g Dit Designdocument is een verzameling van alle belangrijke informatie rondom Smile, een project van HAN Automotive.

Jorg van Gerner 480256 CRIA VSD Emiel Ruis

De informatie in dit document is afkomstig van verschillende aangeleverde bronnen, eigen onderzoek en feedback van mensen in mijn omgeving.

Het document is gemaakt voor de course CRIA Visual Screen Design.

2

Hogeschool van Arnhem & Nijmegen Informatie en Communicatie Academie oktober 2011


I n h ou d s opg ave 2 4 5 7 8 9

Inleiding Opdracht Concept Kleur Typografie Schetsen Ontwerp

10 11

Home Configurator

13

Formulier

14 Reflectie 3


Opdrac ht HAN Automotive heeft een nieuwe opleiding in het leven geroepen, genaamd SMILE. SMILE staat voor Sustainable Mobility Innovations; a Learning Experience. Leerlingen leren tijdens dit project hoe ze duurzame mobiele voer tuigen kunnen maken, en hoe deze innovatieve voer tuigen ontstaan.

De leerlingen krijgen tijdens Smile te maken met de volgende vragen: • Hoe kunnen we slimmer gebruik maken van

HAN Automotive wil meer aandacht vestigen op SMILE en heeft daarom een wedstrijd uitgeschreven. Door deze wedstrijd willen ze de SMILE opleiding een ‘duurzame energie’ uitstraling geven.

Deze wedstrijd is een ontwerp wedstrijd op het internet waar bezoekers van de website hun eigen Smile auto kunnen ontwerpen.

auto’s? • Zou je auto’s minder zwaar kunnen bouwen? • Waarom stappen we niet over op een andere brandstof of elektrisch rijden? • Kunnen we geen andere, slimmere voer tuigen bedenken om aan de ver voersvraag te voldoen? • Waarom hebben zuinige ver voersmiddelen zo’n suf imago?

4

Ver volgens kunnen andere bezoekers stemmen op het ontwerp dat zij het leukst vinden, en het ontwerp met de meeste stemmen wint!


C on c ep t Smile is een merk dat staat voor duurzaamheid, innovatie, groene energie, persoonlijkheid en een frisse kijk op het leven.

De doelgroep van Smile zijn ouders met jonge kinderen Jonge ouders zijn op zoek naar een leuke eerste gezinsauto die natuurlijk goed voor het milieu, zodat hun zoon of dochter gezond op kan groeien.

5


Persoonlijk

Jong

6

Mobiliteit

Duurzaa m


K le u r Oranje

R 249 G 159 B 27

opvallend, flitsend

Blauw

R 118 G 136 B 154

zakelijk, kalm

Lichtblauw

zacht, vriendelijk

#B3EAED

R 181 G 226 B 232

Groen

R 109 G 192 B 99

afstekend, natuurlijk

Lichtgroen

R 157 G 206 B 107

#FF9F12 Bij het selecteren van de kleuren voor de Smile Rich Internet Application is gekeken naar de mer kwaarden en de bijbehorende kleuren achter deze woorden.

Daarnaast is er met de kleurkeuze rekening gehouden met de sfeer die de RIA moet gaan uitstralen.

#778899

59D66B

96E373

voor koptitels en andere opvallende functies

voor titels en belangrijke delen

voor accenten

voor omgeving en opmaak

rustig, natuurlijk voor accenten en omgeving 7


Typ o g r a fi e Journal

Smile bevat twee typefaces, ieder met z’n eigen eigenschappen en sfeer.

a b c d e f g h ij k l m n o pqrstuvwxyz ABCDEFGHIJKLMN OPQRSTUVWXYZ 0123456789 ?!#$%&@

Journal Het

lettertype

Journal

is

een

gratis

lettertype wat erg lijkt op een handgeschreven tekst. De letters hebben geen vaste

Gill Sans Light abcdefghijklmn opqrstuvwxyz ABCDEFGHIJKLM N O P Q R ST U V W X YZ 0123456789 ?!#$%&@

x-height, en ook de cap-height staat niet vast. Ik heb voor Journal gekozen omdat het een

persoonlijk

en

speels

lettertype

is,

zonder dat het klassiek of ouderwets oogt.

Koptekst p 1 Koptekst p 2

8

28 21

Koptekst 3

18

Hoofdtekst

12

Links

12

Gill Sans Light Dit humanistische lettertype steekt mooi af bij het ‘handgeschreven’ Journal. Gill Sans Light past door z’n humanistische eigenschappen goed bij Journal, en het is een lettertype dat rustig en duidelijk leest.

Dit is e en voorb eeldtekst! Smile is een automer k wat auto ’s

maakt die op electr iciteit r ijden . Deze auto ’s worden ontwikkeld door een selectiev e groep HAN Automo tive studenten , waarbij zij leren hoe ze ‘groene’ auto’s moeten bouw en en waar ze rekening mee moeten houden .


S c h etsen De homepage van Smile zou een licht vlak zijn, wat over de achtergrond (zie configurator) gelegd is. Het voor vlak geeft informatie over Smile en de wedstrijd.

Het formulier schuift uit het vogelnest, zodat de gebruiker zijn of haar gegevens kan invullen om mee te doen met de Smile wedstrijd. Links zou een kor te begeleidende tekst staan. Dit idee heb ik later veranderd, het formulier heeft de vorm van een blad gekregen.

De configurator speelt zich af boven in een boom, omgeven door takken, bladeren en een vogelnestje. Op het vogelnestje staat de auto, op de bovenste tak het hoofdmenu en onderin de configuratieknoppen. De knoppen geven ieder een andere rij met subknoppen. Rechts in de boom is een knop om het ontwerp op te slaan.

9


O ntw erp - H o me Home Dit is de homepage van Smile. Bezoekers kunnen hier lezen wat Smile is en hoe de ontwerp wedstrijd in z’n werk gaat. In de menubalk kan de bezoeker kiezen of hij wil configureren, de regels van de wedstrijd wil lezen, of de inzendingen bekijken en/of beoordelen. Onderaan staat het inlogscherm. Nadat erop ‘inloggen’ is geklikt groeit het invulblad uit de boom, zodat de bezoeker kan inloggen. Ook is het mogelijk om een nieuw account aan te maken.

Inloggen

nieuw account aanmake n e-mailadres wachtwoord

10

wachtwoord vergeten?

Configurator

Regels

Inzendingen


O ntw erp - C on fig u r a to r Home

Configurator

Regels

Inzendingen

aanzicht 1 2 3 4

Dit is de configurator van Smile. De configurator van Smile bestaat uit 4 onderdelen, namelijk de auto zelf (staande op een vogelnestje), de aanzichts-bladeren, het configuratiemenu en het keuzemenu. De auto zelf veranderd mee met de opties die gekozen worden in het keuzemenu. Zo kan de gebruiker gelijk zien hoe zijn of haar ontwerp er uit komt te zien. De aanzichts-bladeren (1 tot en met 4) bepalen het aanzicht van de auto. Op dit moment zie je aanzicht 2, te zien aan de grootte van het blad. Aanzicht 1 is het vooraanzicht, aanzicht 3 is het achteraanzicht en bij aanzicht 4 zie je de auto schuin van voren.

11


O ntw erp - C on fig u r a to r Home

Configurator

Regels

Inzendingen

aanzicht 1 2 3 4

Configuratiemenu 1

De gebruiker kiest de hoofdkleur van de auto door op de gekleurde eieren te klikken.

Home

Configurator

Regels

Inzendingen

aanzicht 1 2 3 4

Configuratiemenu 2

Met behulp van de tweede configuratieknop kan de gebruiker zelf de accentkleur bepalen.

Opslaan

Home

Configurator

Regels

Inzendingen

aanzicht 1 2 3 4

Het grote blad aan de rechterkant is de opslaan-knop. Zodra de gebruiker hier op klikt verdwijnen de knoppen en de auto, en verschijnt het opslaan-formulier.

Configuratiemenu 3

Configurator

Regels

Inzendingen

aanzicht

Door op de velgen te klikken kan de gebruiker gelijk zien of deze goed bij de auto passen.

Configuratiemenu 4

Via deze knop kan er een print gekozen worden voor de auto. Door op de bladeren links en rechts te klikken verschijnen er nog meer prints.

12

Home

1 2 3 4


C on fig u r a to r - Fo rm ul i er Home

Configurator

Auto insturen

voornaam

achternaam

Regels

Inzendingen Nadat er op het opslaan-blad is geklikt, verdwijnt de configurator en groeit dit blad uit de boom.

geboortedatum dag

maand

jaar

e-mailadres telefoonnummer Ik accepteer de regels van deze actie

versturen

De gebruiker vult deze gegevens in, dient de regels te accepteren en klikt daarna op verzenden. Ik heb gekozen voor een oranje ‘versturen’ knop omdat deze goed opvalt, en het duidelijk is dat er geen verborgen invulvelden zijn die na deze ingevuld moeten worden. Mocht de gebruiker een veld onjuist ingevuld hebben, dan zal dit blauwe veld oranje kleuren om aan te geven dat het fout ingevuld is. Als de gebruiker het formulier succesvol verzonden heeft, wordt hij of zij doorgestuurd naar de inzendingenpagina.

13


Re flec t i e Theorieën

Praktijk

Verbeterpunten

Ik vond de theorielessen die we hebben gehad erg interessant, en sommige waren voor mij een echte eye-opener.

Ik vond de lessen van de course goed opgezet, en er was een logische volgorde in de theorieen die behandeld werden. In de praktijk liepen we echter telkens één week voor tussen theorie en uitvoering, wat bij mij zorgde voor veel verwarring.

Tijdens de eerste weken merkte ik dat ik niet genoeg na had gedacht over mijn doelgroep, waardoor de uitwerking telkens niet helemaal was zoals ik dat wilde. Ik probeerde me teveel aan de theorie te houden in plaats van creatieve concepten te bedenken.

In week 3 tot en met week 5 zat ik erg vast met m’n Designstudie, en heb daardoor in die weken alleen onderdeel A kunnen maken. Ik heb in die weken niet genoeg feedback gevraagd en inspiratie opgedaan om zo verder te komen met de Designstudie, waardoor ik de deadline toen niet gehaald heb.

Omdat ik niet 100% achter mijn concept stond, ben ik vastgelopen bij de Designstudie.

De meest interessante les van Visual Screen Design vond ik typografie. Ik had nog nooit gehoord van families en tijdperiodes waar ze bij horen, en ik vond het erg mooi om te leren dat typografie zo’n exacte wetenschap is. Na de les ben ik gelijk de documentaire “Helvetica, A Documentar y Film” gaan kijken.

Tijdens de course waren er ook een aantal theorieen waar van ik niet wist dat het een specifieke theorie was, ik ging er altijd van uit dat dit gewoon een algemene aanname was en dit normaal gevonden werd binnen de ontwerpwereld.

14

In week 7 en 8 heb ik de Designstudie helemaal afgerond, nadat ik veel feedback en informatie heb gekregen van mensen om mij heen. Omdat ik achter liep op schema, heb ik dit document in zeer korte tijd moeten realiseren.

De volgende keer moet ik eerder feedback vragen en meer uitproberen, zonder bang te zijn dat de tijd die ik er in gestoken heb allemaal verloren tijd is. Ik ben geen voorstander van de ‘trial-and-error’ methode, maar waarschijnlijk kom ik wel verder als ik een hoop concepten gewoon uitprobeer en hier feedback op vraag.


15


Smile

16

Jorg van Gerner


Designdocument CRIA