Dreamgardens Ontwerpdocument Josja Appelo 572915 & Romy Albers 569747 Klas 2A IMEC, Robert Lariccia Content Design 3 november 2016 Communication & MultiMedia Design HogeSchool Arnhem en Nijmegen
1
2
The best thing one can do when it’s raining is to let it rain. - Henry Wadsworth Longfellow
3
Inhoudsopgave 5 Inleiding 6 Highlights / conclusies uit de research 8 Beeldmateriaal naar aanleiding van de research in onderwerp 11 Beeldmateriaal naar aanleiding van de research in vormgeving en stijlen 12 Concept van de applicatie 13 Look and feel Moodboard 15 Schetsen 20 Wireframes 26 Highlights / conclusies uit de designstudie 34 Definitieve schermontwerpen 45 Beschrijving van dynamische onderdelen 46 Bronvermelding 47 Logboek 47 Reflectie
4
Inleiding Wij zijn Josja Appelo en Romy Albers en wij hebben Dreamgardens opgezet. Wij wilden een nieuwe dienst op de markt zetten. Ons concept is een online hoveniersbedrijf. Klanten kunnen online op onze website of mobiele applicatie een digitaal tuinontwerp maken. Dit is voor als ze op een makkelijke en snelle manier hun tuin willen laten ombouwen. Veel mensen hebben een drukke baan en hebben maar weinig tijd om nog na werk veel aan het huis en tuin te doen. Op deze manier wordt de tuin vaak verwaarloosd. Een tuin moet goed worden bijgehouden, anders gaat er onkruid groeien en worden planten te groot en gaan ze dood. Niemand wilt naar een verwaarloosde tuin kijken. Wij geven mensen de kans om hun eigen tuin op hun eigen manier te laten ontwerpen naar hoe ze het zelf willen. Ze hebben een uitgebreide keus in prijsklasse, assortiment in planten maar ook in tuinmeubelen en accessoires. Met onze dienst genaamd Dreamgardens kunnen mensen gemakkelijk hun eigen tuin ontwerpen en laten verbouwen door een goed hoveniersbedrijf.
5
Highlights / conclusies uit de research Opdracht debrief De centrale opdracht luidt als volgt: “ontwerp een website voor fictieve organisatie of bedrijf waarvoor er drie pagina’s moeten worden uitgewerkt. De eerste pagina van de website zal de homepage zijn, de tweede pagina zal een dynamische pagina zijn. Waar de klant de tuin zal kunnen customize en de derde pagina zal een formulier zijn waar de klant de benodigde gegevens kan invullen. De prototype moet dus beschikken over 3 pagina’s. Het belangrijkste is dat het vooral gebruiksvriendelijk is voor de klant en dat het hun weinig moeite kost om door de website te navigeren en hun eigen ontwerp te kunnen maken. Het prototype zal de gebruiker bij de betreffende taken ondersteuning en hulp moeten bieden. Aan de hand van ons onderzoek zijn wij tot de volgende categorieën gekomen voor onze navigatie op de homepage. Dreamgardens (over ons), tuinontwerp (customizen), aanmeldformulier en contact. Op de pagina van het customizen kunnen de klanten een foto van hun voorof achtertuin uploaden. Daar zal een digitale tekening uit komen waar de klant in kan customizen. De klant heeft dan de mogelijkheid om een nieuw ontwerp van de tuin te maken. Ze kunnen vijvers, stoelen, tafels, moestuintjes, planten, potten en nog meerdere objecten in de tekening toevoegen. Bij het aanmeld formulier kan de klant de benodigde gegevens invullen en kunnen wij daarna het ontwerp van de klant realiseren.
Opdrachtgever/onderwerp Op de website van Dreamgardens kunnen bezoekers zelf een digitaal ontwerp maken van hun voor- of achtertuin. Bezoekers hebben keuzes uit verschillende objecten wat zij in de digitale tekening kunnen toevoegen. Nadat de bezoeker het aanmeldformulier heeft ingevuld kunnen wij hun tuinontwerp realiseren. Een eerste mogelijke opdrachtgever van Dreamgardens zou een investeerder kunnen zijn. Een Praxis of Gamma zouden hun producten kunnen aanbieden. Waar de klant tijdens het ontwerpen een keuze uit kan maken.
Programma van eisen Het programma van eisen hebben wij opgesteld met behulp van de MoSCoW methode. De belangrijkste punten van het pva (must haves), dat de prototype tenminste drie pagina’s uitgewerkte pagina’s heeft. Daarbij moeten de pagina’s gebruiksvriendelijk en overzichtelijke navigatie hebben. De pagina’s dienen ook responsive te zijn en de gekozen huisstijl moet helemaal zelf ontworpen zijn. Bij het customize moeten de gebruikers tenminste uit drie keuzes kunnen kiezen. hier moet een tabel komen met de beoordelingscriteria van de producten. Omgevingsanalyse, Ontwerpdocument, test - evaluatierapport en prototype
Plan van aanpak met doelstellingen Wij analyseren, ontwikkelen, ontwerpen, prototypen en testen de website bij de doelgroep. Bij de website moeten er drie pagina’s uitgewerkt zijn. Om dit te bereiken houden wij ons aan de planning die wij hebben opgesteld voor ons zelf en zijn wij aanwezig bij alle lessen van IMEC en bij eventuele workshops over Adobe Animate of html/css. Wat wij opleveren is een demo en kunnen er eventuele sommige dingen niet tot in detail zijn uitgewerkt.
6
SMART doelstelling Binnen acht weken ontwerpen wij een interactieve website, dus vóór 3 november 2016. De website Dreamgardens moet drie uitgewerkte pagina’s hebben: homepage, dynamische pagina met interactieve elementen waar de gebruiker het tuinontwerp kan maken en een pagina voor het aanmelden en financiële afhandeling.
Doelgroep De gebruikers van Dreamgardens zijn tussen de 30 en 70 jaar. Op deze leeftijd wonen namelijk de meeste mensen op zichzelf of samen in een gekocht huis. De gebruikers wonen in Arnhem of omstreken Arnhem, tot een gebied van 10 kilometer afstand. Dit is handig zodat de service tussen de gebruiker en onze dienst snel en goed verloopt. Natuurlijk is het als laatst erg belangrijk dat de gebruiker van Dreamgardens een tuin heeft. Anders heeft de hele dienst geen zin, wij verzorgen namelijk de opmaak van een tuin.
Scenario’s van interactie en/of dynamische onderdelen Op de website komen er een aantal onderdelen voor met een interactie tussen de website en gebruiker. Wanneer de gebruiker op een bepaalde knop klikt of over iets heen veegt met de muis, ontstaat er een actie op de website wat laat zien dat het reageert op de bewegingen van de muis. Deze interactie is belangrijk omdat de gebruiker zo weet dat de website het doet. We willen de interacties wel rustig houden. De site is voor een grote leeftijdscategorie, vooral gericht op volwassenen. Zij zitten niet te wachten op felle kleuren en flikkerende beelden. We hebben Dreamgardens bedacht en de website zo gemaakt dat ze gemakkelijk en snel hun tuin kunnen laten verbouwen. Deze doelgroep heeft geen zin in poespas op de site of moeilijke manieren om bij hun doel te komen. De website komt er rustig en sober uit te zien.
Concurrentie Er zijn zes hoveniersbedrijven gevestigd in omgeving Arnhem die met ons concurreren. Al die zes bedrijven bieden een service en dienst aan en helpen met het tuinontwerp voor de klant. Deze concurrenten zijn allemaal gevestigd in Arnhem. Ze doen alle zes soortgelijk aan wat wij, Dreamgardens, doen. Twee hoveniersbedrijven bestaan al meer dan 30 jaar. Dit is voor hen een erg sterk punt want reclame en naamsbekendheid gaat ook veel via mond-tot-mond reclame. Omdat ze al zo lang bestaan hebben ze een goede kring kunnen samenstellen en hebben ze bijvoorbeeld al vaste klanten. Waar wij uniek in kunnen zijn is dat onze dienst online te ontwerpen is. Wij maken erg veel gebruik met de nieuwe technologie zodat gebruikers vanuit hun beeldscherm hun tuin kunnen ontwerpen.
Inspiratie en trends Veel mensen in Nederland barbecueën in de zomer. Dit is een erg gezellige bezigheid waar veel mensen samenkomen. Hiervoor heb je natuurlijk tuinmeubelen nodig om te zitten. Ook kiezen veel mensen tegenwoordig voor een betegelende tuin. Dit is makkelijker bij te houden, erg handig met een drukke baan, en het ziet er ook strak en modern uit. Grijze grote tegels met witte elementen die voorkomen in geurkaarsjes, stoelen en kussens is een erg grote trend nu. Het zijn rustige en elegante kleuren waar nog veel aan toegevoegd kan worden. Mensen kunnen op deze manier erg gemakkelijk hun eigen stijl kiezen omdat ze zelf nieuwe voorwerpen en kleuren kunnen toevoegen. Ook zijn zelfgemaakte en creatieve onderdelen in de tuin hip en modern. Denk aan bijvoorbeeld een pad gemaakt van ‘plakken’ boomstronk.
Conclusies We kunnen verschillende conclusies trekken over hoe we ons concept gaan realiseren. In dit ontwerpdocument bespreken we verschillende mogelijkheden en ideeën over hoe ons concept het beste kan gaan werken. We maken drie pagina’s op onze website. De eerste pagina is onze homepage.
7
Beeldmateriaal naar aanleiding van de research in onderwerp Dreamgardens staat in het teken van gemakkelijk tuinieren. Het is belangrijk dat de website beschikt over foto’s van eventueel geleverd werk van Dreamgardens of foto’s van het proces. Dat je bijv. mensen op de bank of achter de computer ziet zitten en op hun gemakje een tuinontwerp aan het maken zijn. Bij Dreamgardens bieden wij de mogelijkheid voor de klant om zelfstandig vanaf de bank, stoel of tafel een tuinontwerp te maken. Het doel van Dreamgardens is om mensen zoveel mogelijk gemak te bieden bij het tuinieren. Men heeft keuzes uit verschillende objecten. Denk aan soorten planten, stoelen, tafels, struiken, schuttingen, vijvers en bomen. Het doel is hierbij dat mensen zelf hun tuinontwerpen hoe hij/zij dat graag ziet. Na het opleveren van het tuinontwerp kunnen wij nog evt met suggesties komen voor mooie aansluiting op bijv. de kleur van het huis en na de financiële afronding komen wij het bij de mensen thuis realiseren. Deze afbeeldingen geven een korte impressie over hoe wij van plan te zijn de website/applicatie vorm te geven en hoe de gebruiker zijn tuinontwerp kan maken. Bij de website willen wij er een natuurlijke vrije tint/thema/stijl aan geven. Het is belangrijk dat de bezoeker van de website in één oogopslag door heeft dat het hier om een hoveniersbedrijf gaat. Bij deze stijl zullen wij vooral de kleuren groen, wit, bruin en zwart gebruiken.
8
9
10
Beeldmateriaal naar aanleiding van de research in vormgeving en stijlen De stijl die we gekozen hebben voor onze website en mobiele applicatie is modern en strak, maar met een vrolijke opvulling met groene kleurtinten en bijvoorbeeld afbeeldingen van planten. Onze doelgroep is volwassen en daarom kiezen we voor een iets serieuze uitstraling. De letters zijn bijvoorbeeld recht en zonder schreef. Het plaatje hiernaast is een goed voorbeeld. De pagina is uitgespreid en op de achtergrond is een afbeelding zichtbaar om het thema aan te geven. Er staat in het kort een uitleg over wie wij zijn en wat we doen. Om aan te geven welke opties er in het begin zijn in bijvoorbeeld het ontwerpen van je tuin, een afspraak maken, foto’s uploaden of om contact te zoeken kunnen we het maken zoals het plaatje ernaast. In interactieve drukknoppen waar afbeeldingen in staan om het duidelijker en leuker te maken. We geven de klanten graag inspiratie wanneer ze hun tuin ontwerpen.
11
Concept van de applicatie
Hoe werkt het? De belangrijkste pagina op de website is natuurlijk de customize-pagina. De klanten moeten de volgende stappen doorlopen om succesvol een tuinontwerp te kunnen maken.
DreamGardens Tuinieren: Gemakkelijk en snel Het concept Dreamgardens biedt de klant aan om vanaf hun eigen woonkamer, slaapkamer, achtertuin, huis via een tablet, laptop of computer online een eigen unieke tuinontwerp te maken. Wat wij vragen van de klant is om een foto te uploaden van hun voor- of achtertuin. Zodra dat bij ons binnen is gekomen maken wij er een digitale tekening van. Dit zal ongeveer 1 tot 2 dagen in beslag nemen. De klant krijgt dan via de mail een bericht dat er zijn/haar digitale tekening nu gereed is. De klant kan dan online stoelen, tafels, planten, vijvers, tuinhuisjes enz toevoegen en zijn voor- of achtertuin helemaal tot wens ontwerpen. Zodra zij daar klaar mee zijn en tevreden zijn. Zullen wij evt nog enkele suggesties doen voor kleine verbeteringen wat mensen ook evt op de site kunnen vinden. Tips en trends van nu en vervolgens zullen wij het tuinontwerp van de voor- of achtertuin bij de mensen thuis komen realiseren.
Stap 1: Meld je aan via het aanmeldformulier Stap 2: Kies een foto van de voor- of achtertuin en upload deze op de site Stap 3: Wachten tot je de melding krijgt dat de digitale tekening beschikbaar is Stap 4: Start met het maken van je eigen tuinontwerp Stap 5: Het tuinontwerp uploaden Nadat de klant de tuinontwerp heeft upgeload en geheel tevreden is met het ontwerp komen wij het bij de klant thuis realiseren.
Waarom Dreamgardens? Bij het maken van een tuinontwerp kunnen mensen vanaf hun eigen omgeving rustig een kijkje nemen naar hun eigen tuin en bedenken wat ze daarmee willen doen. Dreamgardens biedt de klant de optie om een eigen tuinontwerp te maken zonder dat daar in de eerste instantie kosten bij komen kijken. Bij het inleveren van het tuinontwerp kunnen wij nog enkele suggesties geven over hoe het eventueel anders kan en komen het vervolgens daarna bij de mensen thuis realiseren. Wij bieden de mensen thuis een optie om via deze wijze hun tuin is een opknapbeurt te geven en zelf niet fysiek aan het werk hoeven om dit te realiseren. Waardoor de drempel voor sommige lager liggen want niet iedereen is in staat om urenlang in de tuin bezig te zijn.
12
Look and feel Moodboard
13
14
Schetsen
15
16
17
18
19
Wireframes M O N I T O R
Homepagina 1.1
20
Aanmelding 2.1 Homepagina 1.2
21
Ontwerpen 3.1 Aanmelding 2.2
22
M O B I E L
Hamburger menu / Drop down menu
Homepage 1.2
Homepage 1.1
23
Homepage 1.3
Aanmelding 2.1
Ontwerpen 3.1
24
25
Highlights / conclusies uit de designstudie Interactie, navigatie en interface gui De inhoud van de navigatie is duidelijk zichtbaar op de homepage en verdeeld in verschillende categorieën. De categorieën hebben logische namen waardoor ze makkelijk herkenbaar zijn voor de bezoekers van de website. De navigatie is opgedeeld in verschillende categorieën, “wij zijn dreamgardens”, “gemak”, “de beste inspiratiebron” en “contact”. Om het de bezoeker gemakkelijk te maken willen wij gebruik maken van breadcrumbs. Daardoor is de bezoeker zich bewust van op welke pagina hij/zij is gekomen en via welke pagina dat is gegaan en hoe hij/zij weer verder kan navigeren. De navigatie van de mobiele versie kunnen bezoekers rechts op de pagina vinden. Daar kunnen bezoekers op een menubalk klikken die vervolgens een verticale dropdown heeft en de bezoeker kan dan een keuze maken naar welke pagina hij/zij wilt gaan. Het is belangrijk dat de pagina mee schaalt met grote van de mobiele en computerschermen. Daarom willen wij ook graag dat de pagina responsief is. Voor de navigatie van de website zie lay-out en grid.
26
Formulier Het is belangrijk dat onze website ook een aanmeldformulier heeft voor de bezoekers. Zodat zij een account bij ons kunnen aanmaken, wij gegevens van onze bezoekers ontvangen en voor de uiteindelijke financiĂŤle betalingen hebben wij informatie van onze bezoeker nodig. Het formulier zou bestaan uit verschillende kolommen waar wij de bezoeker vragen om geslacht, voor- en achternaam, land, straatnaam, huisnummer postcode, plaats, telefoonnummer, welke bank de bezoeker gebruikt voor internetbankieren en een loginnaam en wachtwoord. De lay-out wordt aangepast op het uiterlijk van de website zodat het een mooi geheel wordt en niet een los gedeelte van de website is. Hiernaast is een afbeelding te vinden van het concept formulier. Het is niet de definitieve uitwerking maar er zitten al wel alle elementen in wat wij aan de bezoeker willen vragen. Bij het formulier gaan wij vooral gebruik maken van textfields en radiobuttons.
27
28
Lay-out
Grid We gebruiken drie grids naast elkaar op de hoofdpagina. Dit is om het simpel en overzichtelijk te houden.
29
Kleurschema’s Voor de achtergrond gebruiken we de groentinten. Dit is bijvoorbeeld verwerkt op de achtergrond van de content. De groentinten hebben we gekozen omdat we planten en tuin als onderwerp hebben voor ons concept, en dit goed bij elkaar past. Voor de teksten op de website en mobiele applicatie gebruiken we de grijstinten. Vaak zien donkergrijze teksten er professioneler uit dan zwarte teksten. Hier willen we graag mee combineren. De lichte kleur is voor wanneer de achtergrond erg donker is. De laatste kleurcombinaties in de blauwtinten zijn voor de overige accenten op de site om iets op te laten vallen. Als we alleen groene tinten zouden gebruiken zou het erg eentonig zijn.
30
Typografie Voor de titels hebben we gekozen voor Blenda Script. Dit lettertype lijkt alsof het met de hand geschreven is. Dit is creatiever dan een heel blokkerig computer gemaakt schrift. Hierdoor worden de gebruikers onbewust geprikkeld om creatief te zijn. Dit is handig voor als ze hun tuin ontwerpen en inspiratie opdoen. Geo Sans is een sans serif omdat het modern overkomt. We willen ook laten zien dat we de laatste trends kennen en meegaan met de tijd. Dan komt een schrift met schreef ouderwets over. Geo Sans is goed leesbaar en kan over onze hele site gebruikt worden in de teksten.
31
Logo Het logo maken was een proces. Dreamgardens gaat over tuinen aanleggen en een goed en uniek idee hebben. Het hebben van een idee wordt vaak gesymboliseerd met het gloeilampje, dus hebben we dit gecombineerd. De eerste schetsen werden gemaakt op papier. Dit was het gedeelte waar we snel brainstormde en onze ideeĂŤn beeldend moesten laten zien om elkaar te begrijpen. Snel daarna werd het eerste Photoshop concept gemaakt wat uiteindelijk verbeterd werd in Illustrator. We hebben een modern en nieuw bedrijf. Dit moeten we ook vertalen in ons logo. We hebben gekozen voor koele en simpele kleuren, zodat het rustig blijft en het goed past op de website. Het kleurschema bevat dezelfde kleuren als in het logo.
Zonder achtergrond is de afbeelding erg lastig te zien, dit geldt voor donkere maar ook lichte achtergronden. Deze doen we dus niet.
De lichtblauwe achtergrond maakt het net iets opvallender en ook meer een geheel. Het is nu veel duidelijker dat het om een logo gaat. Hier is het metalen gloeistaafje erg ingewikkeld gemaakt, we wilde voor simpel gaan dus hebben we uiteindelijk voor het logo rechts gekozen.
32
33
Definitieve schermontwerpen Toelichting homepage Het was belangrijk dat wij voor de gebruiker een gebruiksvriendelijke pagina moesten maken en dat het goed te begrijpen is waarvoor de website/applicatie bedoeld is. Ook moest er interactie zijn tussen de gebruiker en de website. Dat is bij ons goed terug te zien op de homepage. Als je met de muis over de afbeeldingen van de vier categorieën gaat verandert de afbeelding van kleur, van grijs naar groen. Onze doelgroep zit niet te wachten op felle kleuren en flikkerende beelden. We hebben de website zo gemaakt dat ze gemakkelijk en snel hun tuin kunnen laten verbouwen. Deze doelgroep heeft geen zin in poespas op de site of moeilijke manieren om bij hun doel te komen. Daarom hebben wij gekozen voor een rustige, modern, strakke uitstraling maar toch met een vrolijke opvulling met mooie afbeeldingen. Wij hebben gekozen om drie grids naast elkaar te zetten op de hoofdpagina. Dit is om het simpel en overzichtelijk te houden voor de gebruiker.
wordt de aanmelding nog niet goedgekeurd en vragen wij de gebruiker om de ontbrekende informatie in te vullen in de juiste textfield. Toelichting customizing page Nadat de gebruiker de eerste stappen is doorlopen kan hij of zij aan de slag met de tuinontwerp. De pagina bevat dezelfde elementen als de homepage en aanmeldingspagina. De navigatie is in de header te vinden en is er een foto geplaatst in de header. Dit om onze gebruiker de optie te geven om weer makkelijk terug te navigeren naar de homepage. Op de pagina zelf kan de klant aan de slag met het ontwerpen. Het gaat hier natuurlijk om een prototype, dus hebben wij dit zelf al grotendeels ingevuld. Maar de gebruiker heeft wel de mogelijkheid om in de prototype te werken via drag and drop enkele objecten te plaatsen en dan toch wel het beeld krijgt over hoe het er eventueel kan uitzien. In de footer kan de gebruiker ook weer navigeren naar de homepage en kan het meerdere links vinden, laatste recensies en blogberichten.
Voordat onze gebruiker aan de slag kan gaan met zijn tuinontwerp moet hij of zij zich eerst bij ons aanmelden via het aanmeldformulier. Voordat wij aan de slag gingen met het maken van het aanmeldformulier gingen wij eerst logisch nadenken over welke informatie wij nodig hebben van de potentiële klant. Daarmee kwamen wij op enkele punten en hebben dat op een logische wijze ingedeelt. Ook hebben wij ervoor gekozen om gebruik te maken van radiobuttons i.p.v. menu’s, om het zo overzichtelijk voor de gebruiker te maken. Op de pagina staat een button om het aanmelden te bevestigen. Mocht de gebruiker een textfield niet hebben ingevuld
34
35
36
37
38
39
40
41
42
43
44
Beschrijving van dynamische onderdelen Zoals hierboven net beschreven bij het kopje de definitieve schermontwerpen hebben wij verschillende interacties met de gebruiker en kan de gebruiker via de navigatie in de header en footer van de website navigeren naar diverse pagina’s. Op de aanmeldingspagina hebben wij ons aanmeldformulier staan en vragen wij de gebruiker om enkele gegevens, via radio buttons kan de gebruiker enkele opties kiezen en via de button send kan de gebruiker de aanmelding bevestigen. Op de customizing page vindt er ook interactie met de gebruiker plaatst. De gebruiker ziet een plattegrond voor zich en heeft de keuze om die op te vullen met verschillende objecten. De gebruiker heeft keuze uit de volgende objecten. Gras, steen, grind, tegel, roos, bloem, struik, bloempot, bank, eettafel, stoel en konijnenhok. Deze kan de gebruiker in zijn ontwerpt toevoegen en slepen waar hij of zij dat graag in de tuin zou hebben willen staan.
Het menu Het menu staat als een balk bovenaan. Wanneer je helemaal naar boven gescrold bent, zie je de volledige versie staan. Het logo staat groot links bovenin met de naam ernaast. De balk is groen gekleurd en half transparant. Rechts staan de knoppen Home, Meld u aan en Start ontwerpen. Wanneer je naar beneden scrollt, gaat het menu mee. Dit is erg handig. Het menu wordt dunner, zwart en de naam Dreamgardens verdwijnt. Zo is het simpeler.
Welcoming Na de header op de eerste pagina staan er vier aparte tekstblokjes. Hierin wordt Dreamgardens kort uitgelegd. Deze vier punten zijn erg belangrijk voor ons. Als je over zo’n plaatje hovered, dan veranderd hij van kleur.
Links De links in teksten op de website veranderen licht van kleur als je eroverheen gaat met de muis. Dit zorgt ervoor dat je weet dat je een link aanklikt. Het stuurt en helpt je wat meer door de pagina’s heen.
45
Bronvermelding Bronvermelding Algemeen Romy Albers Coloring pages. (z.d.). Houses to color [Online afbeelding]. Gedownload op 20-10-2016, van http://www. clubbelmont.com/houses-to-color/coloring-pages-for-kids-online-houses-to-color-fresh-on-decor-free-coloringkids/ Cynthia Briesen (Rabobank Nederland). (2012). Stadsregio Arnhem - Nijmegen: uitdagingen voor de toekomst. Gedownload op 14-9-2016, van https://economie.rabobank.com/PageFiles/1163/Stadsregio%20 Arnhem-Nijmegen%20eindrapport.pdf Gemeente Arnhem. (z.d.). Bestemmingsplan Arnhems buiten. Geraadpleegd op 14-9-2016, van https://www. arnhem.nl/ruimtelijkeplannen/plannen/NL.IMRO.0202.802-/NL.IMRO.0202.802-0201/tN _ L.IMRO.0202.80202014_ .7.html Hartman. (20-3-2016). 15 Terras ideeĂŤn voor de tuin [Online afbeelding]. Geraadpleegd op 14-10-2016, van https://hartman.nl/media/Blogs/Terras%20ideeen/natuurlijke-overkapping.jpg Hovenier.in. (z.d.). Hoveniers in Arnhem. Geraadpleegd op 14-9-2016, van http://www.hovenier.in/arnhem Kiemt. (8-oktober-2015). Innovate: Arnhem toont zich als innovatieve en creatieve kennisstad. Geraadpleegd op 14-9-2016, van http://www.kiemt.nl/innovate-arnhem-toont-zich-als-innovatieve-en-creatieve-kennisstad/ Muilwijk, E. (z.d.). DESTEP Analyse. Geraadpleegd op 14-9-2016, van http://www.intemarketing.nl/marketing/ analyses/destep Regio Arnhem Nijmegen. (2016). Cultuur & Historie. Geraadpleegd op 14-9-2016, van http://www. vvvarnhemnijmegen.nl/cultuur-en-historie Rijksinstituut voor Volksgezondheid en Milieu. (z.d.) Gemeentelijk gezondheidsprofiel Arnhem. Geraadpleegd op 14-9-2016, van http://www.rivm.nl/media/profielen/profile_ 202 A _ rnhem_ demografie.html van Dijk, V. (z.d.). Lerarenopleiding Basisonderwijs. Geraadpleegd op 13-9-2016, van http://www. carrieretijger.nl/opleiding/onderwijs/lerarenopleiding-basisonderwijs Vos, E. (27-9-2013). Kaart Arnhem 1983 [Online afbeelding]. Gedownload op 20-10-2016, van http://www. pbdoetmee.nl/nostalgischnederland/wp-content/uploads/2013/09/2013-09-27-Kaart-Arnhem-1983.jpg
Bronvermelding Algemeen Josja Appelo Websites: Biljoen groen (2015). Homepage. Geraadpleegd op 22 september 2016 van, http://www.biljoengroen.nl/ biljoen-groen-2/over-biljoen-groen.html Cousijnse hoveniers (2016). Homepage. Geraadpleegd op 20 september 2016 van, http://www. cousijnsehoveniers.nl/ De groene vingers (2016). Homepage. Geraadpleegd op 20 september 2016 van, http://www.de-groenevingers.org/ Hoveniersbedrijf H.G. Peters (2016). Homepage. Geraadpleegd op 20 september 2016 van, http://www. hoveniersbedrijfhgpeters.nl/ Fred buurman (2016). Homepage. Geraadpleegd op 22 september van, http://www.fredbuurman.nl/ Hoveniersbedrijf G. Jansen (2016). Homepage. Geraadpleegd op 20 september 2016 van, http://www. hoveniersbedrijfgjansen.nl/index.php?option=comc_ontent&view=featured&Itemid=435 Vondeling groenonderhoud. Homepage. Geraadpleegd op 20 september 2016 van, http://www.vondelinggroenonderhoud.nl/ Studiehandleiding. PDF. Geraadpleegd op 20 september 2016 van, https://onderwijsonline.han.nl/ elearning/content/wQNPVEDL OnderwijsOnline (z.d.) SIM-IMEC 2016-2017. Geraadpleegd op 28 september 2016, van https:// onderwijsonline.han.nl/elearning/content/wQNPVEDL Afbeeldingen: 1.0 homepage. Geraadpleegd op 20 september 2016 van, https://hoveniernederland.nl/ 1.1 sidepage. Geraadpleegd op 20 september 2016 van, https://hoveniernederland. nl/?s=arnhem&type=hovenier 1.0 beeldmateriaal naar aanleiding research. Geraadpleegd op 28 september 2016, van https://www. shootgardening.co.uk/garden/planner/demo
46
Logboek
Reflectie
Logboek Josja Appelo ontwerpdocument
Reflectie Romy Albers
week taak 1 schetsen maken 2 highlights / conclusie uit de research 3 highlights / conclusie uit de research 4 beeldmateriaal n.a.v. research onderwerp 5 concept van de applicatie 6 highlights / conclusie uit designstudie 7 werken aan de prototype, beschrijving dynamische onderdelen 8 prototype, definitieve schermontwerpen, reflectie Logboek Romy Albers Ontwerpdocument Week taak 1 Schetsen maken 2 Schetsen maken 3 Indeling ontwerpdocument maken 4 Lay-out van website, grids, kleurpalet-schema, typografie maken 5 Moodboard maken 6 Concurrentie schrijven, inspiratie en trends schrijven 7 Beeldmateriaal n.a.v research vormgeving en stijlen schrijven 8 Scenario’s van interactie en dynamische onderdelen schrijven, definitieve schermontwerpen
Toen we aan de slag gingen met IMEC heb ik me ingelezen over wat de analyses precies inhielden. Al het materiaal wat we nodig hadden stond op Onderwijsbureau, dat was wel erg handig. De eerste twee weken was vooral nog veel opletten tijdens de les en ons oriënteren op wat het vak nou precies was. Bij IMEC was het vrij snel duidelijk. We hadden tijdens de eerste paar lessen ons bedrijfsnaam, het logo en de slogan al bedacht. Even later wisten we ook ongeveer hoe we de site wilden gaan indelen en hoe we de drag and drop prototype gingen verwerken in de website. We hadden allebei veel goede ideeën. We schreven alles op en focuste ons eerst op het maken van het individuele deel. Dit was het omschrijven van de verschillen tussen GUI en NUI. De eerste paar weken deden we het rustig aan. In de lessen werkten we door maar thuis bleef het werk vaak liggen bij mij. Rond week vijf waren de feedback momenten en realiseerde we dat we echt aan het werk moesten. We schreven iedere dag onze onderdelen van de omgevingsanalyse tot hij zo goed als af was. De omgevingsanalyse maken ging goed. Het was allemaal erg duidelijk wat we moesten beschrijven en hoe we het moesten indelen. De omgevingsanalyse is wanneer je je richt op de omgeving en weet wie je concurrenten en gebruikers zijn. Dit moesten we goed van te voren weten zodat we niet ergens de fout in gingen bij het ontwerpen. Rond week zes begonnen we ook aan het ontwerpdocument. Dit document was meer waar we al onze ontwerpen en processen in bespraken, dus veel inhoud hadden we al. Tijdens de hele periode door heb ik schetsen lopen maken, fonts uit zitten zoeken en plaatjes te zoeken. Al deze dingen werden uiteindelijk in het ontwerpdocument mooi opgesteld. Ook de verschillende hoofdstukken die hierin moesten stonden erg duidelijk aangegeven. We verdeelden de hoofdstukken weer onder elkaar zodat we zelf aan de slag konden. Een aantal onderdelen konden pas beschreven worden wanneer de website en de prototype af waren, dus die lieten we even zitten. Ik begon eind week 6 met de website. Ik koos voor
47
Wordpress omdat ik via Nick Assink een thema kon krijgen waar je eigenlijk voor moest betalen. Wordpress was toch wel lastiger dan ik dacht en goede tutorials waren er bijna niet. Ik raakte in de knoei en pas eind week zeven kreeg ik de hulp die ik nodig had. Dit zorgde ervoor dat ik even in de stress raakte. Gelukkig was de site uiteindelijk op tijd en netjes volgens onze concepten afgekomen. Ik was er tevreden over, hij leek erg veel op wat we in het begin wilde bereiken.
Reflectie Josja Appelo
In week acht, de deadline week, was uiteindelijk nog steeds en altijd weer stress. Elke keer begon ik enthousiast en volgens planning, maar in het midden van de periode zakt die enthousiasme altijd een beetje weg tot ik in de laatste week in de stress raak. Stress is wel gezond en het zorgt voor concentratie, dus iedere keer werk ik ook tien keer harder door. Ik had mijn deel afgekregen en begon in inDesign het verslag netjes te ordenen.
De eerste twee weken van de course was het voornamelijk oriënteren en de eerste lessen stof kregen wij. We waren aan het zoeken wat het vak nou inhield en hoe wij aan de slag moesten gaan. Samen met Romy was waren wij aan het nadenken over een goed concept idee. Deze hadden wij al vrij snel. Wat erg prettig was want daardoor konden we al gauw aan de slag met een bedrijfsnaam, schrijven van het concept idee, met het logo en de slogan. Kort daarna wisten wij ook wat ongeveer de indeling van de website zou zijn en waar we de drag and drop wilde plaatsen. We hadden beide verschillende ideeën dus schreven we alles op en gingen met elkaar de ideeën vergelijken om zo tot de beste optie te komen. We focusten ons natuurlijk ook op het individuele gedeelte van IMEC. In het begin werkte wij rustig door. Voornamelijk in de lessen deden we meer en bleef thuis het werk wat vaker liggen. Toen we een paar weken verder waren realiseerde wij bij het feedbackmoment van week 5 dat de deadline al redelijk dichtbij was gekomen en dat er nog aardig wat moest gebeuren. We maakte een strakke planning over wat er nog moest gebeuren en wie daar verantwoordelijk voor was. We gingen hard aan de slag met de omgevingsanalyse dit verliep goed! Wisten wat er in moest komen te staan dus vulde wij die tot zo ver wij konden en wisten qua informatie in.
De periode ging al met al goed. Ik was enthousiast en vond het leuk om weer een website te kunnen maken. Zelf vind ik verslagen typen vaak ook leuk, vooral als ik mijn creatieve gedachten op papier kan zetten. De lessen waren duidelijk en ik hield de deadlines die ik mezelf stelde een soort van wel goed bij. Het kan iedere keer wel beter en ik leer ook zeker iedere schoolperiode weer wat meer.
Toen de course SIM IMEC begon had ik er erg veel zin in en heb ik de studiehandleiding gelezen wat er precies van ons verwacht wordt en heb ik de checklisten doorgelezen die op Onderwijsbureau stonden, wat erg fijn was.
Week later in week 6 gingen wij aan de slag met het ontwerpdocument. Hier moesten wij ook nog redelijk veel voor doen dus we waren meteen begonnen met het beschrijven en tekenen van onze ontwerpen en objecten. We hadden hiervoor ook weer een mooie planning voor ons tweeën opgesteld wie welk onderdeel deed. Met de kleuren rood werd er aangegeven wat er nog moest gebeuren en zodra je iets af had mocht je het de kleur groen geven. Zodat wij makkelijk en in één oog om slag konden zien wat er nog moest gebeuren. Er waren enkele onderdelen die wij pas konden beschrijven nadat de website en prototype af waren. Dus die lieten wij even voor wat het was. Romy ging druk aan de slag met de website en ikzelf ging aan de slag met het prototype. Wij kregen enkele lessen waar we uitleg kregen over de codering van drag and drop. Dit was prettig en heb ik ook wel wat aan gehad. Echter zul je altijd zien dat het dan bij je eigen prototype anders verloopt omdat je toch net een andere afbeelding of
48
afmeting gebruikt waardoor je toch de codering moet aanpassen. Hier ging meer tijd in dan ik in de eerste instantie had gedacht. Voordat je het wist zat je in week 8, de deadline week. De stress nam aardig toe want ik had de prototype nog niet af en voor het andere vak van de course ICD moest ook nog het nodige gebeuren. Kortom korte nachtjes. Ik ben echt gemotiveerd en wil deze course heel graag halen en wellicht het belangrijkste mijn partner niet teleurstellen. Dus werkte ik hard door maar met de codering van de prototype wilde maar niet mee werken en ik ging op zoek naar andere mogelijkheden. Na een nieuwe code te hebben gevonden en toegepast begon ik al enthousiast te worden. Want het begon erop te lijken wat wij in de eerste instantie hadden bedacht. Maar het was niet geheel perfect en door de tijdsdruk van de deadline en met de gedachten dat het om een prototype gaat heb ik gelaten voor wat het was en ging ik door met de laatste dingen in het ontwerpdocument te zetten en in Indesign verder uit te werken. De periode verliep overal goed. Was in het begin enthousiast over de course en als ik er nu op terugkijk heb ik een leuke tijd gehad. De samenwerking tussen mij en Romy verliep voor mijn gevoel goed. Was prettig om met haar samen te werken en de onderlinge communicatie met elkaar verliep goed. Uiteindelijk niet 100% tevreden met het prototype maarja daarom is het een prototype en niet een betaald eindproduct. Deze periode nieuwe dingen geleerd van verschillende Adobe programma’s waar ik blij mee ben. Merk dat deze course mijn planning alweer wat beter verliep in vergelijking met de vorige periode en wat ook mijn streven om het uiteraard elke periode beter te plannen en mijzelf ook aan die planning te houden. Om op het einde van dit jaar te kunnen zeggen dat ik een keer op tijd klaar was met een verslag, product of prototype en het de dag voor de deadline heb kunnen inleveren.
49
Dreamgardens
50