Logo MEI

Ontwerp

Het ontwerp van de website voor MEI staat inmiddels vast en is speciaal afgestemd op jongeren tussen de 16 en 20 jaar. Het ontwerp inspireert de doelgroep op een eenvoudige en leuke manier. Met een frisse uitstraling en een gebruiksvriendelijke indeling helpt de website jongeren stap voor stap bij het vinden van hun ideale vakantiebestemming. De focus ligt op een mix van functionaliteit en inspiratie, zodat ze zonder zorgen aan hun eerste avontuurlijke reis kunnen beginnen.

Schermflow

Flowchart In de schermflow is de taakbalk weergeven die op elke pagina zichtbaar is. Er zijn vier verschillende tabbladen zichtbaar;

  1. Quiz
    Onder deze tabbladen komen de vragen te staan waaruit de quiz bestaat. Hier zal de quiz plaatsvinden.
  2. Landen
    Op deze pagina komt de algemene informatie over elk land te staan. Onder algemene informatie valt; musea, activiteiten, slaapplekken, restaurants, natuur, etc.
  3. Informatie
    Hieronder zijn alle eerdere ontwerp-stappen zichtbaar voor het eindproject; het projectvoorstel, het Programma van Eisen en het ontwerp (de huidige pagina).
  4. Contact
    Op deze pagina zijn de contactgegevens te vinden van de organisatie MEI en de makers.
De gebruiker kan navigeren tussen de pagina's door op de knoppen in de taakbalk boven op de website de klikken. Zo kan je bij de pagina met de quiz komen, de pagina met alle landen, de pagina voor extra informatie over de opzet van de website en de pagina waar de contactgegevens te vinden zijn. Deze taakbalk is op elke pagina aanwezig, waardoor de gebruiker altijd naar een andere pagina kan.

ik wil nog een rij erbij!

Ontwerp met afmetingen

In de onderstaande afbeeldingen staan een aantal tabbladen uitgewerkt, met de bijpassende afmetingen en een schematische opbouw van de pagina.

Ontwerp van de homepagina De homepagina is het eerste wat de gebruiker ziet bij het openen van de website. Hier wordt de website geintroduceerd en uitgelegd waarom de makers voor dit idee hebben gekozen. Vanaf de homepagina kunnen gebruikers direct de quiz starten door op een opvallende knop te klikken. Willen ze de quiz opnieuw maken? Dan kunnen ze eenvoudig via de navigatiebalk terugkeren naar de homepagina om opnieuw te beginnen. In de linkerhoek van de homepagina bevindt zich een homeknop, zodat gebruikers altijd gemakkelijk terug kunnen keren naar deze startpagina. In de rechterhoek is een taakbalk te vinden, waarmee eenvoudig genavigeerd kan worden naar andere tabbladen. Deze taakbalk is op elke pagina zichtbaar, zodat de gebruiker gemakkelijk de weg kan vinden op de website.

aangezien
ik
het
niet
voor
elkaar
krijg

Ontwerp van de quiz-pagina Op deze pagina worden de vragen van de quiz weergegeven. Bovenaan staat de vraag, met daaronder vier antwoordopties waaruit de gebruiker kan kiezen. Om het overzichtelijker en visueel aantrekkelijker te maken, zijn er bij elk antwoord ook foto's toegevoegd. Onderaan de pagina bevindt zich een voortgangsbalk. Het groene gedeelte toont hoeveel vragen je al hebt beantwoord, terwijl het witte gedeelte laat zien hoeveel er nog te gaan zijn. Zo weet je altijd precies hoever je in de quiz bent. Zoals op elk tabblad is bovenaan de pagina de taakbalk te vinden.

aangezien
ik
het
niet
voor
elkaar
krijg

Ontwerp van de resultaten op de quiz-pagina
Op deze pagina wordt de uitslag van de quiz getoond: een persoonlijke top 3 van landen die perfect aansluiten bij de gebruiker zijn antwoorden. Voor elk van de drie landen wordt relevante informatie weergegeven, zodat de gebruiker een goed beeld krijgt van wat deze bestemmingen te bieden hebben. Aan de linkerkant van elk land staat een foto die het karakter van de bestemming laat zien. Naast de foto vind je de naam en de locatie van het land, met daaronder een korte beschrijving en interessante informatie, zoals restaurants of activiteiten die in de omgeving zijn. De top 3 landen komen onder elkaar te staan, voor een duidelijk overzicht van de beste, persoonlijke keuzes van de gebruiker. Onderaan staan handige links waarmee je meer kunt ontdekken over het land, zoals reisgidsen of boekingsopties. Helemaal onder aan de pagina kan een e-mailadres ingevuld worden om de quizresultaten op te slaan. Zo kunnen de resultaten later gemakkelijk terug worden gevonden. Bovenaan de pagina is weer een taakbalk zichtbaar, voor het gemakkelijk navigeren door de website.

aangezien
ik
het
niet
voor
elkaar
krijg

Ontwerp van de landen-pagina Natuurlijk is het ook mogelijk dat de gebruiker informatie zoekt over een specifiek land,zonder dat dit in de persoonlijke top 3 zat. Op deze pagina vind je alle informatie en tips die de makers hebben verzameld over de beschikbare landen. Bij elk land is er een beschrijving en een foto toegevoegd, zodat de gebruiker een goed beeld krijgt van wat verwacht kan worden. Daarnaast zijn er handige links te vinden naar externe websites voor extra informatie, zoals reisgidsen, activiteiten en boekingsmogelijkheden. Net als op de andere pagina’s is er een taakbalk waarmee je gemakkelijk naar andere pagina's van de website kunt navigeren.

aangezien
ik
het
niet
voor
elkaar
krijg

Opmaak

Kleuren gebruikt op de website De website maakt gebruik van een frisse en moderne kleurencombinatie die jongeren aanspreekt. Lichtgroen en donkergroen symboliseren natuur en groei, terwijl beige een warme en toegankelijke uitstraling geeft. Grijs, zwart, en wit zorgen voor balans en helderheid, waardoor de inhoud overzichtelijk en prettig leesbaar blijft.

Het lettertype is Times New Roman, een klassiek en tijdloos lettertype dat zorgt voor een professionele en leesbare uitstraling.

aangezien
ik
het
niet
voor
elkaar
krijg
Grapje nog een rij

Opgemaakte website

Het werkelijke ontwerp zichtbaar op de website Net zoals de gekozen kleuren, heeft de website een frisse en moderne opmaak die jongeren aanspreekt. Met een rustige indeling, natuurlijke kleuren en duidelijke knoppen is de navigatie gebruiksvriendelijk. De focus ligt op de quiz en de informatie, zonder afleidende elementen. Dit minimalistische ontwerp zorgt ervoor dat jongeren snel vinden wat ze zoeken en zich volledig kunnen concentreren op het ontdekken van hun ideale vakantiebestemming.

Ook is het dropdown-menu uit de navigatiebalk. Onder "informatie" zijn alle voorbereidingen voor het maken van het eindproduct zichtbaar. Met als doel jongeren ook te inspireren in het programmeren van een eigen website.