Rick’s Coffee Moments
Een awareness website met als doel om de gebruiker een donatie te laten doen.
Research ➜ Concepting ➜ Designing ➜ Development
In de eerste fase ben ik mezelf gaan oriënteren. Wat is het concept, wie is de doelgroep en wat moet de look and feel zijn? Aan de hand van deze vragen is er een concept uitgewerkt en een doelgroep omschrijving gecreëerd.
Concept
Een awareness website voor Rick’s Coffee Moments. Student Rick Timmermans is altijd on the go. Soms heeft hij een extra boost nodig en dat komt in de vorm van een lekkere kop koffie. Rick is een echte koffieliefhebber en hij kan niet zonder zijn dagelijkse dosis cafeïne. Het doneren van een kop koffie kan een kleine maar betekenisvolle manier zijn om Rick te ondersteunen.
Doelgroep
De doelgroep zijn oud studenten die nu een baan of eigen onderneming hebben. Zij hebben waarschijnlijk dezelfde struggle als Rick gehad en zullen hier empathie voor hebben. De gemiddelde leeftijd zal tussen de 20 en 30 jaar liggen en zowel mannen als vrouwen die houden van een goede kop koffie.
Look and Feel
Deze website wordt ontworpen in een informele coffee look, waardoor je spontaan zin krijgt in een kop koffie. Verder moet er naar voren komen dat student Rick zijn dagelijkse kop koffie nodig heeft om de dag door te komen en dat het voor studenten een hoop geld is om dagelijks een kop koffie te kopen.
Sitemap
De sitemap is een overzicht van alle pagina’s of onderdelen van de website. Het geeft structuur bij het ontwerpen van de website en helpt zoekmachines bij het indexeren van de website.
Wireframe in Adobe XD
Schetsen, indelen en inkleuren in Adobe XD. Hiermee creeëren we houvast voor als we zometeen gaan coderen.
HTML, CSS & JS induiken
Het is zo ver… We gaan de code in duiken! De gehele website van Rick’s Coffee Moments is opgebouwd uit HTML, CSS en JavaScript. HTML vormt de bouwstenen van de website. Met CSS gaan we deze bouwstenen inkleuren en beter positioneren. Verder gebruiken we JaveScript voor de extra elementen zoals, sliders e.d.
Het eindresultaat
Bekijk hier het resultaat van Rick’s Coffee Moments.
en doe een donatie 😉