SMILEDesigndocument

Student: Michel DecanijeStudentnummer: 424791

Docent: Emiel RuisVak: CRIA VSDDatum: 20-10-2011

Inhoudsopgave

2

Inhoudsopgave 2Inleiding 3Research 4Concept 6Moodboard 7Programma van Eisen 8Assets 9Navigatie 10Kleur 11Typografie 12Grid 13Schetsen 14Designs 15Reflectie 20

InleidingGedurende de afgelopen weken ben ik bezig geweest een ontwerp te maken voor het SMILE-project. Het ontwerp betrefend een screen design van de rich internet application voor SMILE.

Dit document is een verzameldocument van de stappen die ik ondernomen heb om tot een ontwerp te komen. Allereest heb ik een onderzoek gedaan, waarna ik een concept opgesteld hebt. Aan de hand van dit concept ben ik op onderzoek gegaan voor een kleurenpallet en typografie voor het ontwerp. Tevens heb ik een grid opgesteld en een aantal schetsen gemaakt.

Al deze stappen hebben uiteindelijk geleid tot een ontwerp van een aantal pagina’s van de SMILE applicatie. De pagina’s die uitgewerkt zijn in een ontwerp zijn de homepage, de onwerppagina en het formulier voor inzending.

3

ResearchDe opdracht SMILE is begonnen met een research. Allereerst moest de opdracht volledig in kaart gebracht worden. Han Automotive wil door middel van het SMILE-project het suffe imago van ecoloigsche auto’s verbeteren. Daarom wordt er een wedstrijd opgesteld waarbij er een auto gedesigned kan worden. Het betreft een wedstrijd, waarmee leuke prijzen te winnen zijn.

Met betrekking tot deze wedstrijd wil HAN Automotive graag een Rich Internet Application waarop de gebruiker een auto volledig kan customizen. Alle ontwerpen worden tentoongesteld op deze website en de jury zal ieder ontwerp beoordelen.

De opdrachtgever

De opdrachtgever voor het ontwerpen van deze Rich Internet Application is HAN Automotive, onderdeel van de Hogeschool van Arnhem en Nijmegen. Bij deze faculteit aan de HAN kunnen studenten zich specialiseren op het gebied van ecologische auto’s. Door middel van deze wedstrijd wil HAN Automotive proberen nieuwe toekomstige studenten te werven.

Behalve het werven van studenten wil HAN Automotive bekendheid genereren voor de opleiding autotechniek, het suffe imago van SMILE verbeteren, het SMILE-project onder de aandacht brengen en een online applicatie met ontwerp mogelijkheden aanbieden.

De Doelgroep

Het SMILE-project richt zich op twee categorieën, namelijk 12 t/m 17 jaar en 18 jaar en ouder. Er zijn diverse soorten gebruikers te onderscheiden, zoals mensen die alleen een kijkje komen nemen, mensen die op zoek zijn naar informatie of mensen die actief iets willen ondernemen op de applicatie.

Om de gebruikers bij het ontwerp te betrekken heb ik naar mensen die binnen de doelgroep vallen een vragenlijst gestuurd. Daarbij heb ik gevraagd naar hun wensen en ideeën op het gebied van kleur en functionaliteit. Als uitkomst kwamen een aantal interessante punten naar voren, namelijk:

- Rustig, modern en strak design - Duidelijk menu - Help functie - Goede informatievoorziening - Sleepmethode (drag and drop)

4

ResearchOm tijdens mijn ontwerp altijd de beoogde eindgebruiker in gedachte te houden heb ik een zogenaamde persona opgesteld. Hiermee beschrijf ik een persoon die binnen de doelgroep valt. Door middel van een persona houd je altijd de gedachte en het doen en laten van iemand uit de doelgroep in zicht.

Mark Peters, leerling vwo 5e jaar

Mark is 17 jaar en zit in het één na laatste jaar van het vwo op het Ulenhofcollege in Doetinchem. Mark komt uit het nabijgelegen dorp Zelhem en gaat iedere dag met de brommer naar school. Op school is hij erg gedreven in de vakken natuurkunde en wiskunde. Mark heeft een passie voor techniek. Al lang en breed voor dat hij 16 was, had hij al een brommer waaraan hij bijna dagelijks wel even sleutelde. Op het erf van hun huis mocht hij dan af en toe een rondje rijden. Inmiddels heeft hij alweer een tijdje zijn brommerrijbewijs en Mark kijkt al uit als hij 18 wordt, want dan kan hij gaan beginnen aan zijn autorijbewijs. En auto’s daar heeft Mark een nog veel grotere passie voor.

Mark weet ook al dat hij naar zijn opleiding vwo de opleiding HBO autotechniek wil gaan volgen. Hij is zich al aan het oriënteren op het internet om een school te vinden waar hij wil gaan studeren. Behalve het zoeken van opleidingen bekijkt Mark ook veel internetsites op het gebied van auto’s en techniek. Zijn favoriete website is die van Nissan Nederland. Mark is fan van de Nissan GT (Skyline). Op de website van Nissan heeft Mark al regelmatig zijn droom Nissan GT ontworpen.

De concurrentie

Behalve de doelgroep heb ik ook een analyse gedaan naar concurrenten met een soort gelijke applicatie. Zo heb ik naar NIKE gekeken, waarbij gebruikers eigen schoenen kunnen designen. Tevens heb ik de applicatie van Citroen bekeken. Daarbij kwam voornamelijk naar voren dat het object vanuit verschillende oogpunten bekeken kan worden. Verder konden er veel items aangepast worden en tevens in een kleur naar wens.

Behalve deze pluspunten waren er ook een aantal minpunten. Bijvoorbeeld de taal, de gebruiker heeft niet de keuze om de taal naar wens in te stellen. En het laden van de applicatie neemt vaak ook erg veel tijd in beslag.

5

ConceptDe rich internet application zal een maximaal resolutie van 1024 x 768 pixels hebben. Er zal een statisch menu zijn, die op iedere pagina aanwezig is. Er is dus een basis vormgeving die standaard hetzelfde is. Als een gebruiker er eenmaal voor kiest om een auto te gaan designen, dan wordt de applicatie geopend. De gebruiker heeft dan de optie om een type auto te kiezen. Behalve het ontwerpen van een auto, heeft de gebruiker ook de mogelijkheid om de ontwerpen van anderen te bekijken. Op de homepage worden er telkens een aantal weergegeven die zullen wisselen. Als een gebruiker alle ontwerpen wil bekijken, dan dient deze op een knop te klikken en komt op de betreffende pagina.De sfeer die de applicatie weergeeft is rustig, strak en modern. Met een groene tint wordt hier het duurzame karakter aan toegevoegd.

Eigen Smile OntwerpenAls de gebruiker kiest om een eigen SMILE te gaan ontwerpen, dan is er eerst de keuze voor een model. De gebruiker heeft de keuze uit een kleine boodschappenwagen,personenauto, American muscle car, sportwagen of een busje. Door middel van Mouse-over effecten ziet de gebruiker welke onderdelen er te wijzigen zijn. De volgende elementen zijn te wijzigen:

• Voorbumper• Achterbumper• Side-skirts• Dak• Spoiler• Velgen• Spiegels• Uitlaat• Design/Kleur

Tevens is bijna ieder onderdeel apart van kleur te veranderen, door middel van een kleuren-pallet. Tevens kan de gebruiker kiezen uit een aantal prints/designs om aan de auto toe te voegen. (Optioneel wordt nog de mogelijkheid om een eigen design/print te kunnen uploaden). Tijdens het hele ontwerpproces kan de gebruiker onderdelen ongedaan maken of aanpassen. Tevens heeft de gebruiker de mogelijkheid het ontwerp op te slaan en later verder te gaan. Ook is er de optie om het ontwerp in te zenden naar de jury.

Andere Smile Ontwerpen Bekijken De gebruiker kan er ook voor kiezen om andere SMILE ontwerpen te bekijken. Dit zijn de ontwerpen die al ingezonden zijn naar de jury. De gebruiker komt in een showroom en kan per categorie auto de ontwerpen bekijken. Ook is er de mogelijkheid een ontwerp van commentaar te voorzien.

6

Moodboard

7

Programma van EisenDe SMILE-ontwerp applicatie moet aan een aantal eisen voldoen. Deze eisen zijn als volgt:

- Er moeten verschillende aangezichten zijn- Er moet een kleurenschema zijn- Er moeten verschillende designs zijn- Er moeten verschillende accessoires zijn- De gebruiker moet met tekst zijn/haar ontwerp kunnen toelichten- Het ontwerp moet door middel van een formulier kunnen worden verzonden naar de jury- Ontwerpen van anderen moeten bekeken kunnen worden- De gebruiker moet kunnen kiezen uit een aantal diverse basismodellen- Diverse elementen die aangepast kunnen worden, moeten lichtgevend worden door middel van een Mouse-over- Een auto moet in 360 graden kunnen worden bekeken- Er moet een button aanwezig zijn om een actie ongedaan te maken- Er moet een hulp menu aanwezig zijn, voor als een gebruiker er niet uit komt

8

AssetsVoorbumper: Om de auto goed te designen zijn er een aantal diverse voorbumpers aanwezig. Doormiddel van een kleurenpallet is het ook mogelijk dit onderdeel van een kleur te voorzien.

Achterbumper: Net als de voorbumper, moet het ook mogelijk zijn om de achterbumper aan te passen. Hiervoor zullen er ook een aantal diverse achterbumpers kiesbaar moeten zijn. Ook deze is in kleur aan te passen.

Side-skirts: Ook zal er een pakket met side-skirts aanwezig zijn, zodat gebruikers hun auto optimaal naar wens kunnen pimpen. Ook deze is in kleur aan te passen.

Dak: Voor het dak kan met het kleurenpallet een kleur gekozen worden. Ook zullen er een aan-tal prints aanwezig zijn, om het dak een print mee te geven.

Spoiler: Er zullen een aantal diverse spoilers aanwezig zijn, zodat gebruikers kunnen kiezen om een spoiler toe te voegen. Ook deze kan ik kleur gewijzigd worden.

Ramen: De ramen kunnen door middel van een kleurenpallet een bepaalde tint gegeven worden.

Spiegels: Er zullen een aantal diverse vormen spiegels te kiezen zijn. Ook de spiegels kunnen van kleur gewijzigd worden.

Velgen: De gebruiker kan kiezen uit een aantal velgen om onder de auto te monteren.

Prints / Stickers: Er zullen een aantal prints en stickers aanwezig zijn, waarmee de gebruiker zijn auto kan pimpen.

Uitlaat: Voor de ultieme liefhebber van auto’s is het ook mogelijk om uit een aantal uitlaten te kiezen voor onder je eigen favoriete design!

9

NavigatieDe gebruiker kan door middel van verschillende manier navigeren door de applicatie. De gebruiker komt op een homepage vanaf waar hij diverse opties heeft. Hij kan er voor kiezen om een eigen SMILE te ontwerpen of de ingezonden ontwerpen bekijken. Tevens heeft hij de mogelijkheid om wat informatie te verkrijgen over het SMILE project en HAN Automotive. Het navigeren zal gebeuren door een menu en door middel van breadcrums kan de gebruiker altijd zien waar hij zich bevind.

Binnen de ontwerp applicatie doorloopt de gebruiker ook een aantal stappen, dit zal ook aangegeven worden, zodat de gebruiker gemakkelijk stappen over kan slaan of weer terug kan keren. Aan het einde van het ontwerp traject zal er een button staan ‘ontwerp inzen-den’. Door middel van het klikken op deze button komt de gebruiker terecht bij het formu-lier om het ontwerp in te zenden.

Als de gebruiker er voor kiest om een overzicht te zien van alle ingezonden ontwerpen komt hij op een pagina. De ontwerpen zullen per categorie (soort auto) weergegeven worden, zodat het redelijk overzichtelijk blijft. Door middel van breadcrums kan de gebruiker ge-makkelijk weer terugkeren naar de pagina waar de categorie gekozen kan worden. Een-maal een categorie gekozen staat er een lijst met ontwerpen, wanneer een gebruiker op een ontwerp klikt wordt deze vergroot, door middel van pijlen (links en rechts) kan de gebruiker door de ontwerpen navigeren.

Indien de gebruiker commentaar wil geven op een ontwerp kan dat door middel van de commentbox. Hierin kan de gebruiker zijn commentaar typen en indien hij/zij klaar is ver-zenden door middel van de ‘verzendbutton’.

10

KleurenNa een uitgebreide studie op het gebied van kleuren heb ik een kleurenpallet gekozen. Daarbij heb ik rekening gehouden met een aantal items, namelijk:

- eisen en wensen van de doelgroep- kleurtheorie- kleurpsychologie

Voor het opstellen van een kleurenpallet wilde ik gebruik maken van kleuren die rustig en stijvol zijn en die het ecologische aspect aantonen. Voor het ecologische kom je dan al snel op de kleur groen. Deze kleur heb ik dan ook als basis genomen. Daarna ben ik opzoek gegaan naar een stijlvolle kleur uit. Ik heb gekozen voor een iets donker getinten kleur paars. Paars is een kleur die erg stijvol en luxe uitstraalt. Volgens de kleurtheorie kwam ik hiermee op een complementair kleurenschema.

11

TypografieVoor mijn ontwerp wil ik een lettertype dat goed bij het moderne karakter past, maar te-vens niet te druk over komt. Een lettertype met ronde lijnen lijkt mij daarvoor zeer geschikt. Ik heb gekeken naar de verschillende font families.

Naar aanleiding van mijn designstudie wil ik voor een lettertype san-serif kiezen. De families modern en slab serif vallen hierbij dus af. Ik denk dat de families ‘geomteric’ en ‘humanist’ het beste bij mijn concept passen.

GeometricDe letters hebben strokes die ongeveer even breed zijn. Geometric lettertypes hebben stralen een moderne en universele uitstraling uit. Geometric lettertypes zijn sans-serif, hi-erdoor zijn deze lettertypes beter leesbaar op een beeldscherm. Aangezien mijn ontwerp voor het internet is, is dit een positief punt.

HumanistDe letters hebben veel weg van de geometric-familie. Toch straalt de humanist-familie meer detail en menselijkheid uit. Humanist lettertypes zijn modern maar persoonlijk. Met het oog op de toekomst en mijn concept is dit een zeer geschikt lettertype familie.

12

GridTegenwoordig is iedere designer op zoek naar eenheid en structuur. Webdesigners gebruiken een grid om controle te houden over de structuur van hun websites.Een grid is een framework voor de lay-out van een pagina. Het verdeelt de pagina als het ware in verticale en horizontale rijen en kolommen. In deze rijen en kolommen worden de tekst en de afbeeldingen zorgvuldig geplaatst. De lijnen van de rijen en kolommen zijn niet zichtbaar, hoewel ze wel degelijk door de designer gebruikt worden om een duidelijke, overzichtelijke en uitgelijnde pagina te ontwerpen.

Een grid kan zowel behulpzaam zijn voor de designer als voor de bezoeker van de website. Voor de designer helpt een grid om de balans te handhaven, de ruimte en de gegevens in te delen. Een grid is ook goed voor in de toekomst, indien er updates moeten worden uit-gevoerd. Door middel van een grid kan een designer componenten gemakkelijker plaatsen binnen een pagina.

Voor de bezoeker is een grid ook behulpzaam. Door middel van een goede grid heeft de bezoeker een overzichtelijk binnenkomen op een pagina. Hierdoor heeft hij/zij een goed overzicht van de verschillende componenten die op de betreffende pagina aanwezig zijn.

Ik heb tijdens het ontwerpen gebruik gemaakt van de volgende grid:

13

SchetsenNa het onderzoek, het opstellen van een concept, het bepalen van de kleur en typografie en het opstellen van een grid ben ik begonnen met het uitwerken van een aantal schetsen. Ik heb diverse voorbeelden geschets om zo tot een definitief design te komen.

14

DesignsHomepage

De homepage is het centrum van de applicatie. Vanuit hier kan de gebruiker diverse kanten op. Zo kan hij via het menu naar de ontwerppagina, de showroom om ontwerpen te bekijken of informatie verkrijgen over SMILE en HAN Automotive.

Door middel van het menu kan de gebruiker zien dat hij/zij op de homepage is. De tekst in het menu kleurt op door middel van een mouse-over effect als de gebruiker er met de muis overheen gaat. Wanneer de gebruiker geklikt heeft blijft de tekst deze kleur en is onderstreept.

Verder staat er op de pagina een inleidende tekst en zijn er drie ontwerpen van anderen te zien. Deze ontwerpen zullen telkens afwisselen.

15

DesignsOntwerp pagina stap 1

Als een gebruiker in het menu op ‘ontwerp‘ klikt komt hij/zij op de ontwerppagina. Het ontwerpen van een auto bestaat uit een aantal stappen. Dit staat als inleidende tekst uitgelegd. Teven staat er wat over prijzen met een link naar een pagina over de prijzen.

Rechts naast het tekstblok staan blokken met de auto’s die de gebruiker kan customizen. De gebruiker kan kiezen uit een kleine boodschappen auto, personen auto, american muiscle car, sportwagen of een busje. Het idee is dat al deze varianten als ecologische auto op de markt komen. De auto’s worden opgelicht door middel van een mouse-over effect wanneer een gebruiker erover heen gaat met de muis. Tevens zijn de auto klikbaar, wanneer een gebruiker op een auto klikt wordt automatisch stap 2 getoond op het scherm.

16

DesignsOntwerp pagina stap 2

Bij stap 2 van de ontwerp applicatie, welke automatisch geladen en getoond wordt, krijgt de gebruiker zijn gekozen auto in het groot te zien. Hier kan de gebruiker door middel van pijlen kiezen om verder te gaan naar het ontwerpen of terug te keren naar het kiezen van een auto.

17

DesignsOntwerp pagina stap 3

Als de gebruiker op het pijltje verder geklikt heeft komt deze in de ontwerp applicatie. Hier kan de gebruiker zijn gekozen auto volledig customizen. Zo is het mogelijk onderdelen, zoals de velgen of de bumpers te veranderen. Of je kan er voor kiezen een spoiler te monteren. Als deze onderdelen kunnen door middel van een drag and drop systeem naar de auto gesleept worden en worden automatisch gemonteerd. Tevens kan de gebruiker van ieder onderdeel door middel van de kleurenbalk de kleuren aanpassen. Tevens kan de gebruiker de auto draaien, inzoomen of fullscreen bekijken. Wanneer een gebruiker klaar is kan deze op de verzendbutton klikken en komt bij een formulier.

18

DesignsOntwerp pagina stap 4

Als een gebruiker eenmaal klaar is met het ontwerpen en op verzend heeft geklikt, dan komt deze automatisch op een pagina met een formulier. Dit formulier dient ingevuld te worden, zodat het ontwerp verzonden wordt naar de jury. In de invoervelden staat al aangegeven wat een gebruiker in moet vullen, zodat er vrij weinig mis kan gaan. Mocht een gebruiker toch nog wat willen aanpassen aan het ontwerp, dan is er ook een button om terug te keren.

19

ReflectieIk ben dit semester gaan volgen om bepaalde kennis op te doen op het gebied van ontwer-pen. Ik ben een DC-student en mijn interesse gebied licht meer op het adviseren op het gebied van digitale communicatie. Tevens wilde ik ook wel bepaalde kennis op doen over ontwerpen, omdat ik hier waarschijnlijk ook mee in aanraking kom. Tijdens de courses heb ik heel veel kennis opgedaan, die ik tijdens deze opdracht tot ontwikkeling heb kunnen brengen.

Analyse

Om de opdracht voldoende in kaart te brengen ben ik begonnen met een analyse. Ik heb onderzoek gedaan naar de opdrachtgever en de opdracht zelf. Tevens heb ik de doelgroep voor SMILE in kaart gebracht. Om deze bij het ontwerp te betrekken heb ik ook door mid-del van een vragenlijst de eisen en wensen van de doelgroep aan een dergelijke applicatie in kaart gebracht. Ik vind dat mijn analyse voor de SMILE-opdracht goed gelukt is. Wel ben ik van mening dat ik misschien nog een aantal extra persona’s had kunnen toevoegen. Nog een puntje van verbetering vind ik dat ik nog een aantal soort gelijke applicaties onder de loep had kunnen nemen.

Concept

Op basis van de analyse heb ik een concept opgesteld. Ik vond dit een vrij lastige opgave, omdat ik het creatieve proces nogal lastig vind. Op basis van mijn onderzoek heb ik beslo-ten om een simpele applicatie in de vorm van een website te gaan ontwerpen. Dit is mede gebaseerd op mijn skills als ontwerper. In het beschrijven van mijn concept moet ik zorgen dat ik een volgende keer meer het idee beschrijf dan de functionaliteiten.

Ontwerp

Het ontwerp vond ik ook een lastige opgave. Mede door ziekte en famillie omstandigheden (oma ernstig ziek) heeft het mij veel tijd en moeite gekost. Vooral het tijdsaspect was een groot probleem. Ik wil in het vervolg een beter planning maken, zodat ik mijn tijd functio-neler kan indelen. Tijdens het ontwerpen heb ik geprobeerd zoveel mogelijk rekening te houden met de ontwerpprincipes en de stof uit de colleges. Vooral de principes van gestallt heb ik goed proberen te gebruiken in mijn ontwerpen. Ik heb voornamelijk de aandacht gelegd op de uitlijning en strakke vormgeving, tevens heb ik het ontwerp simpel gehouden. Als ik terug kijk naar mijn ontwerpen vind ik dat ik gezien de omstandigheden een degelijk ontwerp neergezet heb. Wel ben ik van mening dat ik de skills met de diverse ontwerpprogramma’s moet blijven uitbreiden, zodat ook mijn vaardigheden als ontwerper verbeteren.

20