CRIA - VSD - Opdracht 5 - Reamon Van Raaij

VSD – Opdracht 5Smile

Docent: Emiel Ruis

Student: Reamon van Raaij 406132

INHOUDSOPGAVE:

Inhoudsopgave:..................................................................................................................................................2

1. Inleiding......................................................................................................................................................4

2. Flowchart....................................................................................................................................................5

3. Analyse / onderzoek...................................................................................................................................6

3.1 mini...........................................................................................................................................................6

3.2 Smart........................................................................................................................................................8

3.3 Nike....................................................................................................................................................10

3.4 Need for speed: most wanted................................................................................................................12

Conclusie..................................................................................................................................................13

4. Paginakeuze..............................................................................................................................................14

3.1 de ontwerppagina..................................................................................................................................14

3.1.1 Eerste schetsen................................................................................................................................14

3.1.3 Uiteindelijke schetsen......................................................................................................................15

3.1.2 Wireframe.......................................................................................................................................17

3.1.3 Uiteindelijk schermontwerp............................................................................................................18

3.1.4 Statussen knoppen en dynamische onderdelen..............................................................................21

3.2 de homepagina.......................................................................................................................................24

3.2.1 schetsen...........................................................................................................................................24

3.2.2 Wireframe.......................................................................................................................................25



3.3 de inzendpagina (formulier)...............................................................................................................31

3.3.1 schets...............................................................................................................................................31

3.3.2 Wireframe.......................................................................................................................................32



4. Stijlenlijst......................................................................................................................................................38

2

4.1 Lettertypen.............................................................................................................................................38

4.1.1 Logo.................................................................................................................................................38

4.1.2 Lettertypen ria.................................................................................................................................39

4.2 kleuren...............................................................................................................................................41

5. REFLECTIE.................................................................................................................................................42

Oude reflectie...............................................................................................................................................42

Reflectie herkansing.....................................................................................................................................42

3

1. INLEIDING

Voor de vijfde en tevens laatste opdracht van Visual Design heb ik een Rich Internet Application ontworpen. Een Rich Internet Application is een interactieve internetapplicatie, die het gevoel geeft van een desktopprogramma. Bij deze RIA is het de bedoeling dat de gebruiker zijn of haar eigen Smile auto kan ontwerpen, inzenden en gemaakte concepten kan bekijken. Daarnaast is er een jurygedeelte waar een jury alle ingezonden ontwerpen kan bekijken en beoordelen. In dit document is te lezen hoe ik deze opdracht uitgewerkt heb. Ik laat zien hoe ik de gemaakte schetsen heb omgezet naar een realistisch schermontwerp m.b.v. een wireframe model. Verder laat ik zien hoe ik de vergaarde kennis uit de visual design course heb weten te verwerken in de opdracht. Als laatste zal ik alle gemaakte keuzes toelichten, verantwoorden en hier naderhand op reflecteren.

4

2. FLOWCHART

Onderstaand is de flowchart te zien van de RIA die ik heb ontworpen. De RIA webstaat uit twee onderdelen. Het ene deel is het ‘publiekelijk gedeelte’. Hier kan de gebruiker, zonder in te loggen, Smile auto’s ontwerpen en inzenden. Tevens bestaat er de mogelijkheid voor de gebruiker om gemaakte concepten te bekijken en hier commentaar op te geven.Daarnaast is er het ‘jury gedeelte’, hiervoor is een inlog nodig. Bij dit gedeelte zal de jury in kunnen loggen om een overzicht te krijgen van alle ingezonden ontwerpen. Tevens kunnen zij de ontwerpen hier beoordelen. Als laatste zal de jury in dit gedeelte kunnen zien wat de voorlopige stand is. De website heb ik ontworpen aan de hand van de flowchart. Na het maken van een flowchart is voor de ontwerper exact duidelijk welke pagina’s een website moet bevatten en hoe deze in elkaar zal steken. Een erg goede basis dus voor het ontwerpen van een website. Hieronder de flowchart die bij deze RIA hoort:

5

3. ANALYSE / ONDERZOEK

Voordat ik aan de opdracht ben begonnen heb ik eerst onderzoek gedaan naar vergelijkbare websites of applicaties. Om een zo goed mogelijk beeld te krijgen van de opdracht en om inspiratie op te doen ben ik op het internet gaan zoeken naar vergelijkbare rich internet applications. Na een aantal ria’s te hebben gevonden ben ik deze uitvoerig gaan doorlopen en alle opties en onderdelen bekeken. Ik heb daarna alle ria’s onderworpen aan een beoordeling en heb daarna de onderdelen ter inspiratie voor mijn ria op een rijtje gezet. Op deze manier is het hierna erg overzichtelijk om bruikbare onderdelen te gebruiken voor je eigen ontwerp. Ik heb de ria’s beoordeeld op de volgende criteria:

Uiterlijk interfaceDynamische onderdelenKleurgebruikLettertypen

3.1 MINI

Een ria die na het lezen van de opdracht meteen in mij opkwam is de applicatie op de website van Mini. Deze applicatie is erg veelzijdig en er zijn talloze manieren om je eigen Mini te ontwerpen. Zo kan niet alleen het exterieur van de auto aangepast worden maar ook het gehele interieur en het motorische gedeelte van de auto. De applicatie geeft zelfs aan dat er meer dan tien miljoen verschillende mini’s ontworpen kunnen worden met deze applicatie. De Smile auto zal niet op alle deze fronten te ontwerpen zijn, maar toch is het erg zinvol om te zien hoe ze dit bij de applicatie van Mini hebben gedaan. De applicatie van mini bevat veel visuele informatie. De auto staat groot aan de rechterkant van de pagina afgebeeld en veranderd telkens wanneer de gebruiker iets veranderd aan de auto. Dat geeft ook aan dat de applicatie zowel seamless als aware is. Daarnaast staan alle onderdelen van het ontwerpen in kaders en is het ontwerpen opgedeeld in vijf stappen, die op hun beurt weer zijn onderverdeeld in deelstappen. Wat ik erg mooi vind aan deze applicatie is dat de website er stijlvol en sjiek uitziet. Grote delen van de applicatie kleuren zwart waardoor de gekleurde visuele beelden en illustraties des te meer opvallen. Al met al vind ik de ontwerpapplicatie van Mini erg goed. Hij heeft de juiste uitstraling dat bij Mini past: stijlvol, trendy, sjiek en enigzins traditioneel. Daarnaast is het ontwerpen in stappen opgedeeld en wordt er veel gebruik gemaakt van visuele beelden en illustraties. Hierdoor zijn de verschillende onderdelen van de applicatie erg goed te onderscheiden en is het voor de gebruiker makkelijk om door de applicatie te navigeren. Hieronder een screenshot van een gedeelte van de ontwerpapplicatie van Mini:

6

Na de ria een aantal maal doorlopen te hebben en een aantal mini’s te hebben ontworpen ben ik de ria gaan beoordelen op een vijftal criteria.

Schermontwerp **** Zoals eerder vermeld vind ik dat de ria erg goed in elkaar zit. Bovendien is hij naar mijn mening ook nog eens erg mooi, maar deze stijl zal niet passen bij een eco design. Alle onderdelen op de website staan goed uitgelijnd en met hulp van wat kaders is het voor de gebruiker makkelijk deze te onderscheiden. Daarnaast is de ria goed focused door de stappen die de gebruiker moet doorlopen.

Dynamische onderdelen ** Er zitten niet veel dynamische onderdelen in deze ria. De ria is erg seamless waardoor alles pagina’s en onderdelen erg soepel en strak in elkaar overgaan wanneer hiertussen genavigeert wordt, zonder wachttijden. Het enige aan deze ria wat dynamisch is zijn de mouse-overs. Wanneer de gebruiker over een clickable gebied beweegt zal deze opgelicht worden en er zal informatie bij komen staan in een kadertje wat het clickable gebied doet wanneer de gebruiker erop zal klikken.

Kleurgebruik *** De kleuren die gebruikt zijn in deze applicatie passen erg goed bij de stijl van Mini. Er wordt met een zwarte achtergrondkleur gewerkt en de content van de website is daarentegen kleurrijk en visueel ingesteld. Dit steekt goed bij elkaar af en geeft de ria een soort van sjieke uitstraling. Het ziet er op deze manier klassiek uit, wat past bij het imago van Mini, maar aan de andere kant ook strak en trendy. Helaas past dit kleurgebruik niet in mijn ontwerp omdat dit niet past bij een eco-design.

Lettertypen ***** Bij deze ria is er gekozen voor een strak en modern lettertype. Het is duidelijk leesbaar en niet te druk. Naar mijn mening een mooi en strak lettertype dat bij veel verschillende stijlen zal passen.

7

3.2 SMART

Na de applicatie van Mini goed te hebben bekeken, inspiratie te hebben opgedaan en alle onderdelen die ik wellicht in mijn applicatie wil verwerken te hebben genoteerd. Ben ik verder gaan zoeken naar andere vergelijkbare applicaties. Een applicatie die mij ook al bekend was is die van Smart, dus ben ik nog eens op deze website gaan kijken. Net zoals bij de ontwerpapplicatie van Mini is die van Smart opgedeeld in stappen. Dit is voor de gebruiker erg duidelijk omdat hij of zij op deze manier weet hoelang het ongeveer nog gaat duren en in welk gedeelte van de applicatie hij of zij zich bevindt. Wat ik minder goed aan deze applicatie vindt is dat er geen mogelijkheid is om terug te keren of iets ongedaan te maken, de enige manier is om boven in de browser op de ‘terugknop’ te drukken. Hierdoor worden alle velden weer gewist. Dit getuigd niet bepaald van een applicatie die connected is. De applicatie bevat verder weinig spannende onderdelen en geeft mij weinig inspiratie voor de Smile applicatie. Het enige wat ik boeiend vond aan deze applicatie is de stijl van de interface. Naar mijn mening past dit erg goed bij de opdracht van Smile; een trendy eco-design maken van een auto ontwerpapplicatie. De kleuren en lettertypen bij deze applicatie passen dus erg goed bij de opdracht die ik moest gaan maken, daarom heb ik een screenshot opgeslagen van de applicatie om hier eventueel later gebruik van te maken vij het ontwikkelen van een stijl en een kleurenschema. Hieronder een screenshot van een gedeelte van de applicatie van Smart:

Na de ria een aantal maal doorlopen te hebben ben ik deze ria gaan beoordelen op een vijftal criteria.

8

Schermontwerp *** Het schermontwerp van deze ria is naar mijn mening erg goed. Alle onderdelen zijn goed van elkaar te onderscheiden en goed over het scherm verspreid.

Dynamische onderdelen * In deze ria zitten alleen een aantal sliders. Dit zijn dan ook de enige dynamische onderdelen.

Kleurgebruik **** De kleuren van deze ria passen erg goed bij het ontwerp dat ik voor ogen heb. De witte achtergrond straalt kalmte en rust uit en de groene accenten passen erg goed bij het eco-design dat ik moet ontwerpen. Deze kleuren ga ik gebruiken als voorbeeld voor mijn ontwerp.

Lettertypen **** Ik vind het lettertype dat bij deze ria gebruikt is erg goed. Het is een combinatie van een strak lettertype samen met een soort typemachine lettertype. De combinatie past erg goed bij elkaar.

9

3.3 NIKE

Naast een tweetal vergelijkbare auto ontwerpapplicaties te hebben onderzocht en hierbij inspiratie te hebben opgedaan ben ik gaan zoeken naar andere wesbites waarbij het idee en doel ongeveer hetzelfde is, maar dan binnen een andere context. Een website die ik al vaker had bezocht en mij erg aansprak is die van Nike. Hier kan de gebruiker een eigen schoen ontwerpen. Als eerste zal hij of zij voor de keuze worden gesteld welk type schoen hij of zij wil gaan ontwerpen. Na de gebruiker voor een type schoen heeft gekozen (running, voetbal of vrijetijd) wordt er gevraagd of er met een standaardmodel of een ‘blank’ model wil worden begonnen. Blank houdt in dat de gebruiker met een witte schoen begint en hem helemaal ‘from scratch’ kan ontwerpen.

Wat ik erg goed vind aan de Nike applicatie is dat er veel rich elementen in de applicatie zitten zoals drag & drop en mouse-overs. Voor de gebruiker is het erg duidelijk om welk deel van de schoen het gaat tijdens het ontwerpen. Ook wordt er wederom veel gebruik gemaakt van beeld. De schoen staat groot bovenin de applicatie waar deze duidelijk te vinden en te bezichtigen is. Daarnaast is de pagina ook erg logisch ingedeeld. Navigatie links, metanavigatie rechts, midden bovenin de pagina de te ontwerpen schoen en daaronder alle informatie over de schoen en het bestellen hiervan. Ook zijn de stappen weer duidelijk weergegeven en kan de gebruiker zien hoeveel stappen het gehele ontwerpproces beslaat en hoeveel onderdelen er op de schoen daadwerkelijk te ontwerpen zijn. De gebruiker heeft ook de mogelijkheid om het ontwerpvenster ergens anders te plaatsen wanneer de schoen bijvoorbeeld hierdoor niet meer goed zichtbaar is. Wanneer de gebruiker met zijn of haar muis over de schoen beweegt zal een venstertje aangeven om welk schoendeel het gaat en welke ontwerpopties hierbij horen. Al met al vind ik de applicatie van Nike erg goed en zij hebben goed gebruik gemaakt van rich-elementen in hun applicatie. Dit heb ik dan ook meegenomen ter inspiratie bij het ontwikkelen van de Smile applicatie. Hieronder een afbeelding van een gedeelte van de Nike ontwerpapplicatie:

10

Na de ria een aantal maal doorlopen te hebben ben ik deze ria wederom gaan beoordelen op een vijftal criteria.

Schermontwerp *** Deze ria heeft naar mijn mening een goed ingedeeld scherm. Al oogt het ontwerpgedeelte wel erg licht bij de rest van de pagina. Het scherm is wel goed ingedeeld, maar ik vind dat de uitlijning van de verschillende onderdelen wat beter had gekund. Het ziet er het en der wat slordig uit. Verder is wel alles duidelijk te onderscheiden.

Dynamische onderdelen **** In deze ria zitten erg veel dynamische onderdelen. Denk aan drag & drop en mouse-overs. Op deze pagina bevinden zich zeker elementen die ik mee wil nemen ter inspiratie voor mijn ontwerp.

Kleurgebruik ** Het kleurgebruik van deze ria vind ik wat minder. De donkere en lichtere onderdelen steken teveel met elkaar af en creeeren een beetje onrust in de pagina. Het is wel zo dat alle onderdelen op deze manier duidelijk te onderscheiden zijn.

Lettertypen *** De lettertypen van deze ria zijn erg strak en duidelijk leesbaar. Ik denk dat dit soort lettertype ook erg goed bij mijn ontwerp zullen passen. Het oogt strak en modern.

11

3.4 NEED FOR SPEED: MOST WANTED

Na dit drietal websites te hebben onderzocht kwam ik ineens op het idee om nog eens goed te gaan kijken naar Need For Speed: Most Wanted. Dit is een computergame waarbij de gebruiker zijn of haar eigen auto kan ontwerpen. Omdat dit in principe ook een applicatie is (alleen dan offline) leek het mij een erg geschikte inspiratiebron. Bij deze applicatie heeft de gebruiker talloze mogelijkheden om verschillende auto’s geheel naar zijn of haar eigen smaak te ontwerpen. De gebruiker kan bijna alles aanpassen, zowel bij het interieur als het exterieur. Deze game is vooral mooi weergegeven, maar bevat weinig rich elementen zoals: sliders, drag & drop en mouse-overs. Toch was het voor mij erg nuttig om te zien hoe de makers van deze game de interface zo ingedeeld hebben dat er telkens veel informatie en ontwerpopties op het scherm te zien zijn, maar het toch overzichtelijk en duidelijk blijft. Eigenlijk wijst alles zich uit zichzelf en kan er een auto ontworpen worden zonder dat de gebruiker echt na moet denken hoe hij of zij naar een bepaalde ontwerpoptie navigeert. Zoals bij de andere onderzochte applicaties is het ook bij deze applicvatie zo dat alle ontwerpopties zijn onderverdeeld in stappen. Bij deze game is het alleen niet genummeerd, maar hebben alle stappen een eigen naam gekregen. Zoals: body, interior en rims. Voor de gebruiker is het zo erg overzichtelijk en weet hij of zij precies wat al is ontworpen aan de auto en wat nog gedaan moet of kan worden. Bij deze interface staat de auto altijd in het midden van het scherm. Het is dus letterlijk het centrale punt van de applicatie. Omdat dit voor mij veruit het duidelijkst en het meest overzichtelijk is, heb ik besloten om dit ook op deze manier te doen in mijn applicatie.

12

Na de ria een aantal maal doorlopen te hebben ben ik deze ria gaan beoordelen op een vijftal criteria.

Schermontwerp **** Het schermontwerp van deze pagina ziet er geweldig uit. Alles is in 3D uitgewerkt en ziet er gelikt uit. Ook zijn alle onderdelen goed van elkaar te onderscheiden terwijl er niet veel gebruik wordt gemaakt van kaders. Helaas past deze stijl niet bij het eco-design van mijn ontwerp.

Dynamische onderdelen * Terwijl het schermontwerp van deze pagina er geweldig uitziet, zitten er weinig tot geen dynamische onderdelen in. Eigenlijk zijn het alleen maar buttons die clickable zijn, waarbij niet eens mouse-overs voorkomen. Wenig inspiratie wat dit betreft bij deze analyse.

Kleurgebruik ** De kleuren bij deze pagina spatten welliswaar van je scherm en ze voegen veel waarde toe aan het onderscheidt maken tussen onderdelen. Maar wederom helaas dat dit niet bij mijn stijl van het eco-design past.

Lettertypen ** De lettertypen op deze pagina passen erg goed bij de context (auto’s tunen). Maar wederom past dit lettertype niet bij mijn ontwerp. Het is een soort graffiti achtig lettertype dat mooi oogt bij het geheel. Het is soms wel wat lastig leesbaar.

CONCLUSIE

Even een opsomming van ideeën / inspiratie die ik uit de onderzoeken heb opgedaan en welke ik ga gebruiken voor mijn ontwerp, op basis van deze opsomming en onderzochte ria’s heb ik mijn ontwerp gebaseerd:

- Niet teveel rich-elementen gebruiken, alleen waar dit handig is (anders worden de functies onoverzichtelijk)- Applicatie opdelen in stappen- Auto centraal in de applicatie- Kaders voor onderscheidt- Strak en trendy uiterlijk (ontwerp)- Groene tinten voor eco-design- Less = more

13

4. PAGINAKEUZE

Ik heb een drietal pagina’s ontworpen van de RIA. In de volgende deelhoofdstukken is te zien welke pagina’s ik gekozen heb, welke schetsen ik hiervoor gemaakt heb, hoe ik het wireframe voor de RIA opgezet heb en hoe ik een uiteindelijk schermontwerp gemaakt heb. Hierbij laat ik ook zien wat de statussen zijn van de knoppen en andere dynamische onderdelen. Tevens verantwoord ik hierbij de keuzes die ik gemaakt om tot het uiteindelijke ontwerp te komen.

3.1 DE ONTWERPPAGINA

3.1.1 EERSTE SCHETSEN

14

3.1.3 UITEINDELIJKE SCHETSEN

Na tientallen schetsen te hebben gemaakt en veel verschillende keuzes af te hebben gewogen, ben ik tot de schetsen op de volgende pagina gekomen. Ik heb natuurlijk niet zomaar gekozen voor deze schets, maar hier hangen een aantal redenen aan vast. Een belangrijke reden tot goedkeuring van deze schets is dat alle content van de ria goed verdeeld is over het scherm en de gebruiker probleemloos kan navigeren. Bovendien kunnen alle onderdelen die ik mee wil nemen vanuit mijn onderzoek perfect worden verwerkt in de applicatie als deze zo ontworpen wordt als deze schets. Nog een aantal redenen om deze schets uit te werken:

Overzichtelijk (alle onderdelen hebben genoeg ruimte)Duidelijke stappenKern van applicatie (auto) in het midden van het beeld en erg goed (groot) zichtbaarAanzichten veranderen (views) op een logische en duidelijke plaatsMenubalk boven (waar gebruikers hem verwachten)

Nadat ik dus een uiteindelijke schets had gemaakt waarbij bovenstaande onderdelen naar mijn mening goed geïntegreerd waren ben ik vanuit hier verder gaan ontwerpen. Ik heb alle onderdelen duidelijk op papier gezet, zodat voor mij precies duidelijk was wat er in de applicatie zou komen en hoe dit er ongeveer uit zou moeten zien. Op deze en de volgende pagina zijn twee van de uiteindelijke schetsen te zien. De schets op deze pagina is

15

een schets van de gehele ontwerppagina, de schets op de volgende pagina is een schets van het ontwerponderdeel onderin deze pagina.

16

Na alle ideeen vanuit de analyse en alle content uit de opdracht verwerkt te hebben in een schets, kon ik beginnen met het maken van de schermontwerpen. Hierbij heb ik de schetsen vaak gebruikt om ervoor te zorgen dat alle content op de juiste plek kwam te staan en dat ik niets zou vergeten.

17

3.1.2 WIREFRAME

Op dit moment had ik dus een uiteindelijk ontwerp in mijn hoofd en uitgewerkt in een schets. De volgende stap was om deze schets te gaan vertalen naar een wireframe. In dit wireframe is de RIA opgedeelt in onderdelen. Bij elk onderdeel van de RIA is precies te zien hoe groot elk onderdeel moet zijn en wat deze voorstellen. Onderstaand de wireframe voor de ontwerppagina:

18

3.1.3 UITEINDELIJK SCHERMONTWERP

Toen ik het wireframe had gemaakt was ik klaar om te beginnen met het ontwerpen van de RIA. Ik heb ervoor gekozen om dit in het programma: Adobe Illustrator te doen. In de volgende hoofdstukken is te zien hoe ik de RIA opgebouwd heb. Ik heb gekozen voor strakke en trendy stijl. Door veel met afgeronde hoeken te werken oogt het ontwerp toch rustig en zijn alle onderdelen goed te onderscheiden van elkaar. Ik had er ook voor kunnen kiezen om zonder kaders te werken. Maar op deze manier is het voor de gebruiker duidelijker dat het om drie stappen gaat en het geeft de pagina bovendien een veel frisser uiterlijk. Hieronder een screenshot van het uiteindelijke ontwerp:

GESTALT

Similarity

Bij het ontwerp heb ik ervoor gezorgt dat alle onderdelen op elkaar lijken en tegelijkertijd toch heel goed te onderscheiden zijn. Ik heb veel gebruik gemaakt van afgeronde hoeken, dit oogt wat rustiger en past wat beter bij het ‘eco-thema’. Harde hoeken zouden beter passen bij een wat ruiger thema. De groene menubalken boven en onder zijn duidelijk te onderscheiden van het middenstuk, waar de auto te bekijken is in een soort witte kamer.

Proximity

Daarnaast heb ik alle bij elkaar horende onderdelen bij elkaar gezet in kaders. Zie als voorbeeld de verschillende ‘views’ en het ‘zoomgedeelte’. Ook bij de menubalk bovenin staan de links naar de andere pagina’s bij elkaar aan de rechterkant van de pagina uitgelijnd.

19

Alignment

Zoals ook in het wireframe te zien is van deze pagina, zijn alle onderdelen van de pagina uitgelijnd. De pagina is in onderdelen opgedeeld, zodat ik alle onderdelen uit heb kunnen lijnen op de pagina.

RIA (SEAMLESS, FOCUSED, CONNECTED, AWARE)

Seamless

Een goed voorbeeld van dat de RIA seamless is, is het ontwerpgedeelte onderin de pagina. Als de gebruiker hier een bepaalde kleur, design of velg aanklikt, dan zal deze zonder enige vertraging op de auto geplaatst worden. Ook zullen slechts onderdelen van de pagina geladen worden wanneer de gebruiker naar een andere pagina van de RIA zal gaan. Zo zal de bovenste groene menubalk altijd in beeld blijven en bij de onderste groene menubalk zal alleen de content binnenin veranderen. Ook heb ik ervoor gezorgt dat alles als één geheel overkomt door gebruik te maken van dezelfde soort lettertypen en kleuren.

Focused

De pagina heb ik zo focused mogelijk ingericht door slechts één taak aan de gebruiker aan te bieden; het ontwerpen van een concept. Alle onderdelen op deze pagina hebben te maken met het ontwerpen van een concept. Onderin kunnen de kleuren, het design en de velgen worden gekozen. En in het middenstuk kan de auto op verschillende manieren bekeken worden.

Connected

De RIA zal ten alle tijden op het scherm getoond worden. Ook wanneer de internetverbinding verbroken wordt. Dit komt doordat de RIA alle onderdelen van de pagina al geladen heeft wanneer de applicatie gestart is.

Aware

Wanneer de gebruiker op de ontwerppagina komt zal hij of zij beginnen bij stap 1, linksonderin. De applicatie weet dat de gebruiker in dit gebied bezig is omdat de andere stappen donker gekleurd zijn. Wanneer hij of zij daarna de kleuren heeft aangepast en naar stap 2; design gaat, dan zal het gebied van stap 1 donker gekleurd worden en het gebied van stap 2 niet. Later in dit hoofdstuk meet duidelijkheid hierover.

INFORMATION SCENT

De aandacht van de gebruiker wordt vanzelf naar beneden geleid doordat zich hier de grootste groene balk bevindt. De gebruiker linkt dit automatisch met een belangrijk onderdeel van de website omdat het een verlengde lijkt van de primaire groene menubalk bovenin. In de onderste groene balk, waar de auto ontworpen wordt, zijn de onderdelen verdeeld in stappen. Hierdoor is het voor de gebruiker duidelijk dat hij bij stap 1 moet beginnen en dat hij of zij drie stappen uit zal moeten werken. Hierdoor wordt het geheel duidelijker voor de gebruiker en krijgt hij of zij meer duidelijkheid over hoe de applicatie doorlopen moet worden.

20

NAVIGATION DESIGN

De gebruiker kan ten alle tijden zien op welke pagina hij of zij zich bevindt door naar de bovenste groene menubalk te kijken. Deze zal zowel een wit kader aangeven rond de pagina waar deze zich bevindt als een groen pijltje onder deze pagina weergeven. Ook zal de gebruiker onderin de pagina bij het ontwerpen van de auto zien bij welke stap hij of zij is doordat de overige gebieden donkergekleurd zijn. Ook kan de gebruiker boven de auto zien bij welke stap hij of zij zich bevindt en aan de linkerkant is aan het bolletje te zien welke ‘view’ de gebruiker ingesteld heeft.

ICONEN

De iconen die ik heb ontworpen voor deze pagina zijn universeel en worden internationaal begrepen. Daarnaast zijn de iconen voor de verschillende ‘views’ ook voor iedereen bekend omdat hiervoor de Smile auto is gebruikt. Ik heb voor deze iconen gebruik gemaakt van blueprints van de Smart ForTwo. Daarnaast Heb ik nog een aantal icoon gemaakt voor het ‘zoomgedeelte’ met een plus en een min. Erboven staat een loep, dat internationaal bekend is voor ‘zoomen’. Eronder staan de procenten waarin ingezoomd is.

CREDIBILITY

Betrouwbaarheid

De RIA oogt professioneel en daardoor zal de gebruiker de RIA vanaf het eerste ogenblik betrouwbaar vinden. Ook door de plaatsing van het officiële logo en de link met de hogeschool zal de gebruiker de website serieus nemen.

Expertise

Doordat de gebruiker kan lezen en zien dat alle concepten beoordeeld worden door een vakkundige jury die is aangesteld door een hogeschool op het gebied van autotechniek, is voor hem of haar duidelijk dat er enige expertise in het spel is. De gebruiker krijgt zeker niet het gevoel dat hij of zij het voor niets zal doen.

21

3.1.4 STATUSSEN KNOPPEN EN DYNAMISCHE ONDERDELEN

Hieronder een aantal afbeeldingen waarin een uitwerking te zien is van alle dynamische onderdelen op deze pagina:

22

3.2 DE HOMEPAGINA

Na een eerste pagina te hebben ontworpen ben ik nog een tweetal pagina’s gaan ontwerpen voor mijn RIA. Ik heb de pagina’s in dezelfde stijl ontworpen en ze passen goed bij de andere pagina’s. Als eerste ben ik wederom gaan schetsen om een goede indeling te maken van alle onderdelen op de homepagina.

3.2.1 SCHETSEN

Na een aantal schetsen te hebben gemaakt ben ik tot onderstaande uiteindelijke schets gekomen:

Ik heb ervoor gekozen om deze schets uit te werken omdat deze het meest overzichtelijk was en hetzelfde ingedeeld als de ontwerppagina. Ik heb deze pagina dan ook gebaseerd op de ontwerppagina. In grote lijnen is hij ook hetzelfde, alleen de content binnen de kaders en in het midden is veranderd. Ik heb voor deze schets gekozen omdat het belangrijkste van de pagina in het midden staat, hier zal het oog van de gebruiker als eerste op vallen. En onderin zijn gemaakte ontwerpen te bekijken en te beoordelen. Deze passen op deze manier mooi in de onderste groene balk die er tevens voor zorgt dat dit ook opvalt voor de gebruiker. De pagina’s worden eigenlijk telkens in drieen gedeeld. Bovenin bevindt zich de navigatiebalk, daaronder de hoofdcontent van de pagina en daaronder de secundaire content van de pagina. Op deze manier is de gehele ria hetzelfde voor de gebruiker en hoeft hij of zij niet telkens na te denken over waar hij of zij beplaade elementen of onderdelen kan vinden. De belangrijkste reden waarom ik voor deze schets heb gekozen is dus dat deze in

25

dezelfde stijl is als de ontwerppagina, alles duidelijk ingedeeld staat en herkenbaar is en de gebruiker meteen weet waar hij moet kijken en moet zijn.

26

3.2.2 WIREFRAME

Nadat ik ook tot een uiteindelijke schets was gekomen voor de homepagina, ben ik ook voor deze pagina de RIA in gaan delen m.b.v. een wireframe. Om alle pagina’s van de RIA op dezelfde grootte te ontwerpen heb ik de wireframe van de ontwerppagina bewerkt, zodat ook de homepagina exact dezelfde afmetingen heeft. Dit geldt natuurlijk niet voor afwijkende onderdelen van deze pagina. Hieronder een screenshot deze wireframe:

27


GESTALT

Similarity

Bij het ontwerp heb ik ervoor gezorgt dat alle onderdelen op elkaar lijken en tegelijkertijd toch heel goed te onderscheiden zijn. Ik heb veel gebruik gemaakt van afgeronde hoeken, dit oogt wat rustiger en past wat beter bij het ‘eco-thema’. Harde hoeken zouden beter passen bij een wat ruiger thema. De groene menubalken boven en onder zijn duidelijk te onderscheiden van het middenstuk, waar de auto te bekijken is in een soort witte kamer. Ook zijn de concepten die onder in de pagina te bekijken zijn duidelijk te onderscheiden, maar tegelijkertijd zijn zij ook met elkaar verbonden en weet de gebruiker dat zij bij elkaar horen.

Proximity

Daarnaast heb ik alle bij elkaar horende onderdelen bij elkaar gezet in kaders. Zie als voorbeeld de verschillende het ‘uitleggedeelte’ en het onderste gedeelte van de pagina. Ook bij de menubalk bovenin staan de links naar de andere pagina’s bij elkaar aan de rechterkant van de pagina uitgelijnd.

Alignment


28


Seamless

Slechts onderdelen van de pagina hoeven geladen worden wanneer de gebruiker naar een andere pagina van de RIA zal gaan. Dit maakt de RIA gelijk seamless. Zo zal de bovenste groene menubalk altijd in beeld blijven en bij de onderste groene menubalk zal alleen de content binnenin veranderen. De concepten zullen random verschijnen waardoor er telkens verschillende concepten getoond worden. Ook heb ik ervoor gezorgt dat alles als één geheel overkomt door gebruik te maken van dezelfde soort lettertypen en kleuren.

Focused

De pagina heb ik zo focused mogelijk ingericht door slechts één taak aan de gebruiker aan te bieden; informatie geven over de actie en de gebruiker overhalen om te beginnen met ontwerpen. Het onderste onderdeel vand e pagina maakt het iets minder focused, maar omdat dit onderdeel wel gewoon over de concepten van een Smile auto gaat kan het door de vingers worden gezien.

Connected

De RIA zal ten alle tijden op het scherm getoond worden. Ook wanneer de internetverbinding verbroken wordt. Dit komt doordat de RIA alle onderdelen van de pagina al geladen heeft wanneer de applicatie gestart is.

Aware

Doordat de pagina telkens recente concepten toont die al door andere gebruikers ontworpen zijn krijgt de gebruiker het gevoel dat de website aware is. Doordat deze telkens nieuwe concepten laat verschijnen krijgt de gebruiker het gevoel dat hij niet wordt vergeten en dat de pagina hem nieuwe informatie wil laten zien.

INFORMATION SCENT

De aandacht van de gebruiker wordt vanzelf naar het midden geleid omdat het lichtere gedeelte er uit springt. Daardoor is duidelijk dat de informatie die in dit onderdeel van de pagina bij elkaar hoort en de kern vormt van de pagina. De informatie waar het om gaat staat ook weer in een kader binnen dit onderdeel zodat de gebruiker meteen weet waar hij of zij moet zijn. De informatie staat gegroepeerd en valt op.

NAVIGATION DESIGN

De gebruiker kan ten alle tijden zien op welke pagina hij of zij zich bevindt door naar de bovenste groene menubalk te kijken. Deze zal zowel een wit kader aangeven rond de pagina waar deze zich bevindt als een groen pijltje onder deze pagina weergeven.

29

CREDIBILITY

Betrouwbaarheid


Expertise


30


Hieronder een aantal afbeeldingen waarin uitwerkingen te zien zijn van alle dynamische onderdelen op deze pagina:

31

3.3 DE INZENDPAGINA (FORMULIER)

De derde pagina die ik heb ontworpen is de inzendpagina. Nadat de gebruiker een ontwerp heeft gemaakt kan hij of zij deze inzenden om kans te maken op de auto. Hiervoor moet de gebruiker een naam en motivatie opgeven voor het concept. Daarnaast moet de gebruiker zijn of haar gegevens achter kunnen laten, zodat de jury ook weet om welk persoon het gaat. Als eerste ben ik weer begonnen met schetsen totdat ik een goede indeling had gemaakt voor de inzendpagina.

3.3.1 SCHETS

Ik heb voor onderstaande schets gekozen omdat deze erg duidelijk en overzichtelijk is voor de gebruiker. Het formulier begint aan de linkerkant en loopt zoals de gebruiker verwacht naar rechts. De verzendbutton staat onderin, waar hij erg goed te zien is en duidelijk een onderdeel is van deze pagina. Ik vond het maken van een schets voor deze pagina minder moeilijk omdat er minder content in verwerkt hoeft te worden en omdat formulieren meestal hetzelfde opgebouwd zijn. Het opstellen van een formulier gaat aan de hand van regels en dat is de reden dat formulieren er altijd in grote lijnen hetzelfde uitzien.

33

3.3.2 WIREFRAME

Om ervoor te zorgen dat de onderdelen van deze pagina ook goed ingedeeld zijn en uiteindelijk uitgelijnd worden met de rest van de RIA heb ik wederom een wireframe ontworpen. Voor deze pagina heb ik een nieuwe wireframe moeten ontwerpen omdat deze niet meer lijkt op de wireframes van de andere pagina’s. De gehele grootte van deze pagina is namelijk stukken kleiner dan die van de ontwerpen homepagina. Hieronder een screenshot van deze wireframe:

34


Aan de hand van deze laatste wireframe ben ik tot een schermontwerp gekomen. Ook deze pagina heb ik in dezelfde stijl (kleur, lettertypen, vorm) ontworpen als de andere pagina’s, ondanks deze kleiner is en een andere indeling heeft. Ik heb ervoor gekozen om deze pagina binnen de ontwerppagina te maken, zodat het voor de gebruiker voelt alsof hij nog op de ontwerppagina zit en op elk moment terug kan keren zonder dat zijn ontwerp verloren gaat. Een screenshot van het schermontwerp:

GESTALT

Similarity

Bij het ontwerp heb ik ervoor gezorgt dat alle onderdelen op elkaar lijken en tegelijkertijd toch heel goed te onderscheiden zijn. Ik heb gekozen voor een blauwe achtergrond met witte tekstvakken daarop zodat deze duidelijk te onderscheiden zijn. Daarnaast lijken alle tekstvakken precies op elkaar zodat het duidelijk is wat deze zijn en dat deze bij elkaar horen en allen ingevuld dienen te worden.

Proximity

De gehele pagina staat in één kader, zodat duidelijk is om welk onderdeel van de pagina het gaat. Ook staat de informatie van de tekstvakken linksboven de tesktvakken uitgelijnt. Dit is de beste manier om ervoor te zorgen dat de gebruiker weet wat hij of zij in moet vullen bij een dergelijk formulier.

Alignment


35


Seamless

Er zijn geen wachttijden, de gebruiker kan zelf bepalen in welke snelheid of wat hij invoert en ook heb ik ervoor gezorgt dat alles als één geheel overkomt door gebruik te maken van dezelfde soort lettertypen en kleuren. Een goed voorbeeld van een pagina die seamless is.

Focused

De pagina heb ik zo focused mogelijk ingericht door slechts één taak aan de gebruiker aan te bieden; het invullen van een formulier. Alle onderdelen op deze pagina hebben te maken invullen van het formulier. De gebruiker voert te tekst in, in de witte tekstvelden, zodat hij of zij dit gedaan heeft klikt de gebruiker op de button: ‘concept inzenden’.

Connected

De RIA zal ten alle tijden op het scherm getoond worden. Ook wanneer de internetverbinding verbroken wordt. Dit komt doordat de RIA alle onderdelen van de pagina al geladen heeft wanneer de applicatie gestart is. Als de gebruiker besluit om het ontwerp toch nog aan te passen, zullen de velden die al ingevuld waren, ingevuld blijven wanneer de gebruiker daarna terug zal keren.

Aware

Deze pagina is aware in de zin van dat deze de gegevens van de gebruiker onthoudt wanneer hij of zij besluit terug te gaan naar de ontwerppagina.

INFORMATION SCENT

De gebruiker zal meteen herkennen dat dit een formulier is en van links naar rechts en van boven naar beneden het formulier invullen. De button voor het formulier in te zenden staat ook duidelijk onder het laatste vak.

ICONEN

Het icoon dat ik voor deze pagina ontworpen heb is het rode kruis rechtsboven in de pagina. Dit icoon is internationaal bekend doordat zowel Microsoft als Apple dit icoon gebruikt om iets af te sluiten. De gebruiker zal dus terugkeren naar de ontwerppagina wanneer hij of zij op het rode icoon klikt.

36

CREDIBILITY

Betrouwbaarheid


Expertise


37


Hieronder een aantal afbeeldingen waarin uitwerkingen te zien zijn van alle dynamische onderdelen op deze pagina:

38

DYNAMISCH MENU

39

In de volgende afbeelding is te zien hoe de dynamiek in het bovenste navigatiemenu zit. Dit is voor de gehele applicatie hetzelfde, dus laat ik dit ook maar in 1 uitwerking zien. Hieronder de uitwerking van de dynamiek in het menu:

40

4. STIJLENLIJST

4.1 LETTERTYPEN

4.1.1 LOGO

Het logo heb ik als eerste uitgeknipt om er daarna een vectorbestand van te maken. Nadat ik dit had gedaan ben ik het logo gaan restylen om het binnen het concept te laten passen.

Het oude logo:

Het nieuwe logo:

41

4.1.2 LETTERTYPEN RIA

Om tot een geschikt lettertype te komen voor deze applicatie ben ik als eerste gaan bedenken welk soort lettertype ik bij deze applicatie vind passen. Naar mijn mening moet dit een lettertype zonder schreef zijn, want hierdoor wordt de applicatie te druk en vaak zien deze lettertypen er wat oudbollig uit. Daarom moest het een strak en trendy lettertype zijn dat bij het imago van Smile past.

Een aantal websites die ik vaak gebruik voor het zoeken naar lettertypen zijn de volgende twee: 1001fonts en dafont. Op deze websites zijn alle soorten lettertypen erg overzichtelijk verdeeld in verschillende categoriën. Omdat ik van tevoren al had bepaald welk soort lettertypen het zou moeten worden, was het voor mij relatief makkelijk om een geschikt lettertype te vinden op één van deze websites. De categoriën waar ik bij heb gezocht zijn: modern, sci-fi en techno. Dit zijn over het algemeen trendy, strakke en modern ogende lettertypen. Deze websites bevatten een erg handige functie. Bij elk lettertype kan de gebruiker een woord of zin typen om er daarna een preview van te zien. Zo kan de gebruiker elk elk lettertype bekijken zonder dat het hem of haar verplicht wordt gemaakt om deze eerst te downloaden.

Na een aantal lettertypen op een rij te hebben gezet, ben ik tot de conclusie gekomen dat het lettertype: N.O. Movement het beste bij de applicatie past. Dit lettertype oogt erg trendy en strak, maar straalt aan de andere kant ook enige tijdloosheid uit en is hij erg goed te lezen. Hieronder een lijstje met de mogelijke lettertypen die ik voor ogen had:

Na wat testen in de applicatie ben ik tot de conclusie gekomen dat het onderste lettertype het beste bij de interface van de applicatie past en het beste leesbaar is op alle verschillende grootten. Daarnaast oogt dit lettertype modern, maar ook niet té, zoals veel van de andere onderzochte lettertypen dat naar mijn mening wel zijn. Tevens past het gekozen lettertype goed bij het logo van Smile. De uiteindelijke keuze is voor dit lettertype gevallen:

- N.O. Movement

42

Omdat het lettertype in kapitalen het mooist oogt en de website misschien html onderdelen zal bevatten met teskt heb ik ervoor gekozen om ook nog een lettertype hiervoor uit te zoeken en te gebruiken. Dit moest een lettertype zijn die op elke mac of pc geïnstalleerd is en perfect past bij het vorige lettertypen. Ik heb een aantal maal door mijn fontbook gebladerd en heb een geschikt lettertype gevonden. Dit lettertype oogt in grote lijnen hetzelfde als het gedownloade lettertype. Hieronder het gekozen secundaire lettertype:

- Myriad Pro

43

4.2 KLEUREN

Voor het kleurgebruik heb ik mij laten inspireren door een aangeleverd logo van Smile. Deze kleuren vond ik erg goed bij het eco en toch trendy design passen dat ik zou gaan ontwerpen. Naast het logo van Smile dat ik heb gebruikt ter inspiratie van het kleurenschema heb ik ook de onderzochte applicatie van Smart gebruikt. Ik vind dat deze website goed uitstraalt wat er bij deze opdracht wordt verwacht; een trendy eco-design maken. Ook de kleuren grijs en groen, die het logo van Smile ook bevat, zijn verwerkt in deze applicatie. Dat is de grootste reden om met deze kleuren te gaan werken. Daarnaast zal elk willekeurig persoon die je de volgende vraag stelt: Welke kleur vindt u het beste passen bij eco? Antwoorden met: groen. Daarom stond het voor mij als een paal boven water dat deze kleur de boventoon zou moeten voeren bij de applicatie. De kleur groen is vaak fel en daarom is de kleur grijs een erg goede tegenhanger die weer wat meer rust en eenheid creëert in het ontwerp.

Na deze twee basiskleuren te hebben gekozen, ben ik naar de applicatie Kuler van Adobe gegaan. Dit is een erg handige applicatie waarbij de gebruiker gemakkelijk kleurenschema’s in elkaar kan zetten. Ik ben als eerste met de kleur groen gaan spelen als basis (primaire) kleur. Toen ik naar mijn mening een geschikte kleur groen had gevonden ben ik op zoek gegaan naar zij tegenhanger in dit ontwerp; de kleur grijs. Dit moest naar mijn mening echt ‘olifantgrijs’worden. Hiermee bedoel ik zegmaar de standaard grijze kleur zoals je hem voor je ziet als je aan grijs denkt. Na tot deze twee geschikte kleuren te zijn gekomen ben ik de rest van het kleurenschema in gaan delen. De kleur die tussen het grijs en groen zit loopt mooi over in deze twee en van de kleur groen heb ik nog twee andere soorten groen gemaakt. Het kleurenschema bevat nu in totaal drie verschillende kleuren groen, een grijstint en een grijze kleur met een groen tintje. Vanuit deze basiskleuren ben ik gaan ontwerpen.

44

5. REFLECTIE

OUDE REFLECTIE

Bij deze laatste opdracht vond ik het erg goed dat alle vergaarde kennis toegepast kon worden in één opdracht. Ik vind persoonlijk dergelijke opdrachten geweldig omdat je echt alle kanten op kunt, maar toch binnen een bepaalde context moet werken. Ook bij deze opdracht was dat het geval. De bedoeling was om een hip en trendy ontwerp te maken van de Smile RIA. Maar toch moest het een eco design zijn. Na eco eens te hebben ingevoerd bij Google had ik al meteen erg veel inspiratie opgedaan. Daarna was het voor mij duidelijk welke stijl ik wilde gebruiken. Modern en strak met een natuurlijk en eco tintje.

Daarnaast was het bij deze opdracht erg goed dat alle behandelde onderdelen nog eens onder de loep werden genomen. Ik heb mijn zo goed mogelijk aan alle regels en wetten gehouden om tot een zo mooi mogelijk en user centered design te komen. Ik heb in deze uitvoering van VSD geleerd dat er erg veel aspecten zijn waar men rekening mee dient te houden wanneer men een website gaat ontwerpen. Voordat ik aan dit semester begon zag ik natuurlijk wel het verschil tussen een slechte of goede website. Maar ik heb nooit geweten dat men ook rekening dient te houden met aspecten als gestaltwetten, credibility en information scent.

Wat voor mij ook erg belangrijk is dat ik heb geleerd is dat je het maken van een ontwerp van een website in de juiste stappen moet doen. Je begint vooral met heel erg veel schetsen, mits de opdracht duidelijk is. Anders dient men deze eerst te verduidelijken. Daarna gaat met zoeken voor inspiratie, je zoekt plaatjes of maakt een moodboard. Na dit te hebben gedaan kan er gekozen worden voor stijlen, lettertypes en kleuren. Daarna kunnen de wireframes opgezet worden zodat alle onderdelen in de website zijn uitgelijnd goed ingedeeld. Daarna kan de ontwerper het schermontwerp gaan maken.Ik merk vaak in mij omgeving dat mensen niet genoeg schetsen en voorbereidingswerk doen. Ik heb nu echt geleerd dat dit het uiteindelijke product stukken beter maakt dan dat je meteen in het wildeweg begint te werken. Door alle stappen nauwkeurig te doorlopen wordt de opdracht tot een goed einde gebracht. Ik denk dat ik erg veel heb geleerd deze course en dat ik hier aan de toekomst nog erg veel aan zal hebben. Ik heb dan ook alweer zin om aan het project te beginnen en iets nieuws moois te maken.

REFLECTIE HERKANSING

Nadat ik te horen had gekregen ik deze opdracht in eerste instantie niet had gehaald ben ik na gaan denken hoe ik alles aan zou gaan passen. In de feedback stond niet veel over de schermontwerpen, deze waren dus over het algemeen goed. Vooral de uitwerking van de dynamische onderdelen en het analyseren van andere ria’s en onderzoek bleek niet goed te zijn. Hier heb ik als eerste al mijn aandacht op bevestigd. In mijn ria zitten niet erg veel dynamische onderdelen. Maar een aantal veel voorkomende: drag & drop, mouse-overs en sliders zijn er wel in verwerkt. Dit had ik in eerste instantie niet goed uitgewerkt. Deze heb ik als eerste uitgewerkt. Op deze manier zou het voor diegene die de website zou ‘ bouwen’ helemaal duidelijk zijn hoe alle dynamische onderdelen in de ria zouden moeten werken en hoe ze eruit zouden moeten zien.Nu lijkt het raar om onderzoek te doen voor een ria die je al hebt ontworpen. Maar dit onderzoek had ik de vorige keer ook al gedaan, maar niet op deze manier gedocumenteerd. Ik heb alle bevindingen dus nogmaals uit mijn aantekeningen gehaald en deze uitgewerkt op de juiste manier. Nu is het ook duidelijk op welke manier ik aan mijn ideeen ben gekomen en waarop ik mijn ontwerp heb gebaseerd. Daarnaast heb ik ook nog uitgelegd hoe ik mijn schetsen heb gemaakt en waarom ik voor de uiteindelijke schetsen heb gekozen. Daarnaast heb ik ook mijn onderzoek naar kleuren en lettertypen uitgebreid. Natuurlijk had ik dit ook al gedaan, maar niet gedocumenteerd in mijn portfolio gezet. Dat heb ik dus bij deze alsnog gedaan.De punten waarop ik kritiek had gekregen waren volkomen juist en ik snap ook eigenlijk niet dat ik dit niet

45

meteen de eerste keer zo heb gedaan. Ik heb er zeker weer wat van op gestoken en heb met veel plezier aan deze opdracht gewerkt en ik hoop dat het nu wel een voldoende waard is.

46

CRIA - VSD - Opdracht 5 - Reamon Van Raaij

Documents

Transcript of CRIA - VSD - Opdracht 5 - Reamon Van Raaij