De belangrijkste doelgroep van Dream Organization zijn mensen tussen de 20 en 35 jaar, met een focus op stellen die hun bruiloft plannen. Daarnaast richt het bedrijf zich op mensen die een ander type feest willen organiseren of een eigen zaak openen. De gemiddelde leeftijd van de doelgroep is 30 jaar, en de volgersbasis bestaat voornamelijk uit vrouwen tussen de 25 en 45 jaar.

Voor onderzoek is een poll geplaatst op de Instagram van Dream, dat gemiddeld 300 views per verhaal ontvangt. De poll vroeg volgers hoe ze Dream Organization hebben gevonden. Ik kreeg feedback van de klant over de achtergrondafbeelding, die heb ik dus eerst aangepast voordat het werd geplaatst op hun Instagramverhaal.

Bij het ontwerpen van de website moet rekening worden gehouden met de technische vaardigheden van de relatief jonge doelgroep. Dit betekent dat de website aantrekkelijk en gebruiksvriendelijk kan zijn, zonder overdreven simplistisch te worden.

Ik heb een 26 jarige vrouw geïnterviewd. Zij iemand iemand uit de doelgroep. Ik heb haar gevraagd of zij ooit een feest heeft laten organiseren en hoe het bij haar allemaal is gegaan. Hieruit bleek dat ze vooral zoekt een wedding planner die haar ontzorgt, goed communiceert en professioneel is. Ze kiest een planner via aanbevelingen en beoordeelt hen op Instagram-professionaliteit, reviews en behind-the-scenes video's. Eerdere ervaringen via Instagram en WhatsApp waren positief. Ze hecht veel waarde aan begrip voor culturele tradities, zoals bij Turkse bruiloften, en ziet decoratie als een belangrijke eerste indruk. Een goede planner stelt haar gerust, kent haar familie en vrienden voor snelle actie op de grote dag, en voelt meer als een vriend dan een formele zakenpartner.

Ik heb ook gekeken naar de concurrerende bedrijven en hun websites. Baris Events heeft een vrij eenvoudige website. Op de homepagina is een slideshow te zien met op elke afbeelding een call-to-action (CTA) die naar een ander deel van de website leidt, zoals catering, decoratie, offertes, etc. Dit ziet er mooi uit, maar het maakt de website wel druk. In de mobiele versie is deze slideshow niet aanwezig en begint de website direct met de welkomsttekst. Het lettertype is erg onduidelijk, vooral op kleinere schermen.

Daarna volgt een sectie met alle diensten, voorzien van afbeeldingen. De website laadt echter erg traag, waardoor de afbeeldingen soms heel licht worden weergegeven of zelfs alleen als een grijs vak verschijnen. In de desktopversie hebben ze drie grote afbeeldingen geplaatst met daaronder kleinere afbeeldingen. In de mobiele versie zijn alle afbeeldingen echter even groot. Ze hebben echter een afbeelding niet goed aangepast, waardoor deze iets kleiner is dan de rest.

Na deze dienstensectie hebben ze een formulier geplaatst met de tekst: “Deel uw vragen en gedachten met ons.” In de footer staan een kaart, een e-mailadres en een telefoonnummer. In de mobiele versie is er een hamburgermenu. In dit menu staat “Diensten” met een erg klein pijltje ernaast. Als je op de tekst klikt, scrollt de pagina naar de dienstensectie op de homepagina. Pas wanneer je op het kleine pijltje klikt, verschijnen alle diensten in het menu. Klik om te bekijken.

Een aantal weken geleden heeft mijn developmentdocent iets gezegd over mobile-first design. Hier heb ik meer onderzoek naar gedaan. Tegenwoordig gebruiken mensen vaker hun mobiel dan hun laptop of desktop. Toch beginnen veel mensen tijdens het ontwerpen met een desktopversie. Een desktopscherm is veel groter dan een mobiel scherm. Hierdoor past er op een desktop veel meer informatie. Als je daarna probeert het ontwerp aan te passen voor een kleiner scherm, raken veel mensen in de war. Veel informatie gaat verloren of alle elementen worden te dicht op elkaar geplaatst.

Als je eerst voor een mobiel ontwerpt, moet je hier al vanaf het begin over nadenken. Je moet een lijst maken van de belangrijkste dingen die je op het scherm wilt hebben. Deze kun je later makkelijker uitbreiden voor grotere schermen.

Een ander belangrijk aspect om rekening mee te houden zijn de touch targets. Vingers zijn namelijk niet zo precies als een muiscursor op een desktop. Daarom moeten knoppen groter worden gemaakt voor een mobiel. Je kunt ook geen gebruik maken van hovereffecten of andere interacties die afhankelijk zijn van een muis.

Het gebruik van grote landscape-afbeeldingen is ook niet handig. Deze worden namelijk te veel verkleind, waardoor ze niet meer duidelijk zichtbaar zijn op een klein scherm. Dit zijn allemaal elementen waar je rekening mee moet houden tijdens het ontwerpen van een mobiele website. (UXPin & UXPin, 2024)

Ik begon met het maken van wireframes voor mobiel, eerst op papier en daarna in Figma. Na een low-fidelity wireframe heb ik een gedetailleerder prototype gemaakt. Vervolgens heb ik de desktopversie ontworpen, waarbij ik rekening hield met de plaatsing van elementen. Ik heb afbeeldingen van de Instagram pagina van Dream gebruikt samen met grijze vakken. De klant was enthousiast over het prototype, maar vond de achtergrondkleur wat saai. Ik heb ze uitgelegd dat het zo lijkt door de grijze vakken voor de afbeeldingen.

Na de homepagina ben ik direct begonnen met coderen. Ik heb de Figma prototypes van de andere afbeeldingen snel kunnen maken omdat ze eigenlijk allemaal foto galerijen zijn. De website focust op foto's, met slideshows en galerijen als centrale elementen. Ik heb een offerteformulier toegevoegd aan de contactpagina. Zoals de klant had gevraagd, om samenwerking eenvoudiger te maken.

De footer bevat klikbare afbeeldingen die naar Instagram linken om de sociale media van Dream Organization te promoten. Hoewel ik eerst tevreden was, zag ik later dat het niet helemaal klopte. Ik heb usertest gedaan waaruit bleek dat gebruikers het niet door hadden dat de foto's klikbaar zijn. Ik heb hier een paar iteraties van gemaakt. Ik ben tevreden met hoe de footer er momenteel uitziet.

Als eerste heb ik de homepagina gecodeerd. Ik ben begonnen met de navbar. Dit is een heel simpel design: het logo staat in het midden, met knoppen aan de linker- en rechterkant. De navbar heeft een donkere achtergrond en is vrij groot. Daarom heb ik het zo gemaakt dat de achtergrond verdwijnt wanneer de bezoeker naar beneden scrollt.

Ik kreeg als feedback dat de tekst in de navbar dan nog steeds moeilijk te lezen was. Daarom heb ik de navbar iets kleiner gemaakt. Dit ziet er nu veel beter uit.

Daarna heb ik de eerste sectie gemaakt, namelijk de slideshow. In semester 1 heb ik een website gemaakt waarin ik ook een slideshow had toegevoegd. Ik heb naar die code gekeken en deze nagemaakt. In eerste instantie had ik een functie toegevoegd waardoor de afbeeldingen automatisch veranderen. Echter, hierbij scrolt de hele pagina terug naar boven, wat niet de bedoeling is. Voor nu heb ik die functie verwijderd. Later kan ik hier meer tijd aan besteden om dit probleem op te lossen en de functie te verbeteren.

De tweede sectie op de homepage is een promotionele videoclip. Ook voor de code hiervan heb ik naar mijn eerder gemaakte opdrachten gekeken. Omdat ik nog niet wist wat mijn klant precies wilde, heb ik tijdelijke plaats aanduidende tekst toegevoegd

Daarna heb ik een sectie gemaakt met informatie over de planner zelf. Hier heb ik een afbeelding toegevoegd. Eigenlijk zijn dit twee afbeeldingen, maar om het mezelf makkelijker te maken, heb ik deze als één geheel toegevoegd. Bij deze sectie zit een knop die verwijst naar de “About”-pagina. Op die pagina is informatie te vinden over zowel de planner als de rest van het team.

Onderin heb ik een slider toegevoegd met leuke foto's van het team. Deze slider is vormgegeven als een filmrol. Er zijn twee rijen met afbeeldingen die over het scherm glijden, vergelijkbaar met hoe het werkt op platforms zoals Netflix, Videoland of YouTube. Om dit te maken, heb ik een YouTube-tutorial bekeken.

In eerste instantie werkte het niet zoals het hoorde. Daarom heb ik de code in een leeg HTML-bestand geplakt om te testen. Toen het nog steeds niet werkte, heb ik ChatGPT om hulp gevraagd. Het bleek een heel simpele fout te zijn: ik had 'stroll' getypt in plaats van 'scroll', waardoor de hele CSS niet meer functioneerde. Nadat ik dit had aangepast, werkte alles perfect.

Ik heb een sectie gemaakt waarin twee afbeeldingen als achtergrond zijn geplaatst met de teksten 'Weddings' en 'Events', omdat dit de twee belangrijkste categorieën zijn. In eerste instantie had ik de afbeeldingen inclusief tekst toegevoegd (dus de tekst stond al op de afbeelding), zodat ik de afbeeldingen goed kon positioneren en een algemeen beeld kon krijgen. Later heb ik de afbeeldingen en de tekst los van elkaar toegevoegd.

Om gebruikersfeedback te geven en duidelijk te maken dat deze elementen klikbaar zijn, heb ik een hover-effect met een filter toegevoegd. De Catalog-knop in de navbar navigeert direct naar deze sectie.

Wanneer je op 'Weddings' klikt, word je doorgestuurd naar een pagina met informatie over bruiloften, hennafeesten en verlovingsfeesten. Onder deze tekst bevindt zich een slideshow met highlights en daaronder een galerij met alle producten en diensten. Voor de Events-pagina geldt hetzelfde principe, maar dan met informatie en visuals die specifiek gericht zijn op andere soorten evenementen.

Terug op de homepage, na de sectie over het werk, komt de portfolio-sectie. Hier zijn drie afbeeldingen te zien van verschillende feesten die door Dream zijn georganiseerd. Wanneer de gebruiker over een afbeelding hovert, komt deze naar voren. Als je op een afbeelding klikt, word je doorgestuurd naar een pagina die specifiek over dat feest gaat.

Bovenaan deze pagina is een coverfoto te zien, met daaronder een korte tekst over het betreffende feest. Vervolgens is er een galerij met een verzameling foto's van het evenement. Om de pagina op te splitsen, heb ik een review-sectie toegevoegd. Ditzelfde element is ook terug te vinden op de homepage.

Om eenvoudig van het ene feest naar het andere te navigeren, heb ik vorige- en volgende-knoppen toegevoegd. In plaats van pijlen, heb ik een deel van het logo gebruikt om deze knoppen meer bij de stijl van Dream Organization te laten passen. Dit ziet er sierlijk uit en zorgt ervoor dat het logo op een subtiele manier in de website terugkomt.

Op de contactpagina heb ik een formulier toegevoegd. Wanneer bezoekers dit invullen en op verzenden klikken, wordt er een e-mail gestuurd naar Dream Organization. Omdat ik niet precies wist hoe ik dit moest doen, heb ik veel hulp gekregen van ChatGPT.

Ik ben begonnen met een eenvoudig formulier met slechts vier vragen. Op basis hiervan heb ik zelf nog een aantal extra velden toegevoegd. Eigenlijk wilde ik een multi-select dropdown maken, maar dat is me niet gelukt. In plaats daarvan heb ik twee selectievakken gemaakt, zodat bezoekers twee opties kunnen kiezen.

Voor de e-mailconnectie heb ik gebruik gemaakt van XAMPP en PHPMailer. XAMPP fungeert als lokale server, waarmee ik het PHP-script kan uitvoeren. Met PHPMailer heb ik de Gmail SMTP-server gebruikt om e-mails te verzenden. Om alles te testen, heb ik mijn eigen Gmail-account gebruikt en een app-wachtwoord aangemaakt. Dit app-wachtwoord zorgt voor een veilige verbinding tussen Gmail en een externe applicatie.

Het volledige project heb ik geplaatst in de htdocs-map van XAMPP, zodat ik het lokaal kan testen. Zolang de Apache-server draait, kan ik de website op mijn laptop openen en het formulier verzenden. Deze aanpak zorgt ervoor dat het formulier betrouwbaar werkt en veilig e-mails verzendt via Gmail, terwijl ik alles lokaal ontwikkel en test. Wanneer de website online gaat, moet deze werkwijze worden aangepast, omdat de verbinding dan niet meer lokaal kan functioneren.

Bezoekers kunnen het formulier niet verzenden zonder akkoord te gaan met de algemene voorwaarden. Dit is toegevoegd om zowel de bezoeker als het bedrijf te beschermen en om duidelijkheid te bieden over de afspraken en verantwoordelijkheden bij het aanvragen van een offerte. Op dit moment is de inhoud van de algemene voorwaarden mogelijk nog niet volledig correct, omdat ik deze nog niet heb gepresenteerd aan mijn klant.

Wanneer bezoekers op 'algemene voorwaarden' klikken, opent er een nieuw tabblad met een PDF van de voorwaarden. Deze PDF kan eenvoudig worden aangepast indien nodig

In mijn GitHub-repository is alles te zien, inclusief alle wijzigingen die ik heb aangebracht. Ik heb mijn code regelmatig gepusht, zodat alles daar veilig opgeslagen blijft. Hierdoor zijn alle versies van mijn project eenvoudig terug te vinden en kan ik altijd terugkijken naar eerdere aanpassingen

Ik heb alles wat ik voor deze sprint wilde maken ook daadwerkelijk af gekregen. Hier is de website te zien. De contactformulier werkt niet omdat het op een lokale server zit. Je kan nu dus niks verzenden.

Ik ben blij dat ik voor deze opdracht heb gekozen voor project X. Ik vind dat ik alle leerdoelen heb kunnen aantonen. Ik heb veel geleerd over verschillende aspecten van web ontwikkeling, van design tot implementatie. Bij elke stap van het traject ben ik nieuwe obstakels tegengekomen.

Ik heb onderzoek gedaan naar mobile first designing en wilde hier ook echt mee aan de slag gaan. Uiteindelijk heb ik toch een desktop website gemaakt, omdat dit voor nu makkelijker was voor mij. Maar ik begrijp het idee van mobile first wel en ga dit de volgende keer zeker toepassen.

Het programmeren ging eigenlijk best soepel, vond ik. Ik heb veel af kunnen krijgen in een korte tijd. Het enige wat ik nog wilde doen, was de website responsief maken. Ik was van plan om eerst de desktopversie af te maken en daarna de website geschikt te maken voor kleinere schermen, zodat ik in ieder geval een complete website kon leveren. Ik had voor deze sprint geen tijd meer om dit te doen, maar ik ga hier zeker nog verder aan werken.

Ik vond het belangrijk om het contactformulier werkend te maken, omdat ik zoiets nog nooit eerder had gedaan. Dit gaf mij de kans om mezelf te testen en te pushen. Ik ben hier urenlang mee bezig geweest, en toen alles uiteindelijk gefixt was, zag ik dat de oplossingen eigenlijk heel simpel waren. Tijdens het proces van uitzoeken heb ik veel geleerd.

Tijdens dit project heb ik goed contact gehouden met mijn klanten. Ik heb vaak om feedback gevraagd en sommige dingen laten testen. Daarnaast heb ik ook user tests uitgevoerd met andere mensen. Toch vind ik dat ik de volgende keer nog uitgebreider moet testen.

Dit project vond ik erg leerzaam. Ik heb niet alleen mijn technische vaardigheden verbeterd, maar ook geleerd hoe ik problemen stapsgewijs kan oplossen, feedback kan verwerken, en structuur kan aanbrengen in mijn werkproces. Ik ben supertrots op mezelf en mijn geleverde werk. Natuurlijk is er altijd ruimte voor verbetering, maar ik vind dat ik meer heb gedaan dan ik van mezelf had verwacht.