- Beschrijving
- Responsive Design
- Ontwerpkeuzes
- Gebruikte Technieken
- Code Conventies
- Live Website
- Licentie
Active Collective is een digital agency uit Beverwijk die bedrijven helpt hun online presence te verbeteren. Voor hun klant "Ontdek de Schoonmaak" kreeg ik de opdracht om een vacaturewebpagina te bouwen.
"Ontdek de Schoonmaak" is een schoonmaakbedrijf dat nieuw personeel zoekt. De vacaturewebpagina die ik heb gemaakt, is helemaal geschikt voor zowel desktop als mobiel, omdat steeds meer mensen via hun telefoon vacatures bekijken.
Het was de bedoeling om een vacaturepagina te maken waarmee gebruikers makkelijk vacatures kunnen filteren op locatie, functie, en andere voorkeuren. De focus lag op een mobile-friendly design, waarbij ik het bestaande ontwerp van de klant en een Figma-ontwerp voor desktop heb gebruikt, en dit moest ik omzetten naar een mobielvriendelijke versie.
Belangrijkste kenmerken:
- Mobile-first ontwerp.
- Filtermenu voor eenvoudige zoekfunctionaliteit.
- Gebruiksvriendelijke interface voor zowel desktop als mobiel.
De website is volledig responsief, zodat deze optimaal wordt weergegeven op zowel desktop- als mobiele apparaten. Ik heb de Mobile-First benadering toegepast, zodat de website op kleinere schermen goed functioneert voordat ik deze verder uitbreidde naar grotere schermen.
- Desktop (1024px en groter): De vacaturelijst wordt weergegeven in meerdere kolommen met filteropties aan de zijkant.
- Tablet (768px - 1023px): De vacaturelijst wordt weergegeven in twee kolommen en de navigatiebalk wordt verticaal gepositioneerd.
- Mobiel (768px en kleiner): De website is volledig geoptimaliseerd voor mobiel gebruik, met een hamburgermenu voor de navigatie en een verticaal gestapelde vacaturelijst.
De website maakt gebruik van verschillende interactieve elementen om de gebruikerservaring te verbeteren. Bijvoorbeeld:
- Hover-effecten op knoppen geven de gebruiker visuele feedback zodat duidelijk is welke knoppen klikbaar zijn.
- Feedback bij het filteren: Wanneer een gebruiker een filter toepast, worden de resultaten onmiddellijk bijgewerkt zonder dat de pagina opnieuw wordt geladen, wat de interactie naadloos maakt.
Deze interacties helpen de gebruiker zich bewust te maken van de acties die ze ondernemen, wat de algehele gebruikerservaring bevordert.
Een belangrijk kenmerk van de vacaturepagina is de toevoeging van een filtermenu. Gebruikers kunnen filteren op verschillende criteria zoals:
- Locatie
- Functie
- Werkuren
Het filtermenu is ontworpen om gemakkelijk toegankelijk en intuïtief te zijn, zelfs op mobiele apparaten. Dit is gerealiseerd door het gebruik van een dropdown-menu dat de gebruiker in staat stelt de gewenste zoekcriteria te selecteren en onmiddellijk de vacaturelijst bijwerkt.
Screen.Recording.2025-01-26.191403.mp4
Screen.Recording.2025-01-26.191147.mp4
Aangezien steeds meer mensen via mobiele apparaten naar vacatures zoeken, heb ik een Mobile-First ontwerp toegepast. De interface is geoptimaliseerd voor kleinere schermen, waarbij de hamburgermenu voor de navigatiebalk en de verticaal gestapelde vacaturelijst centraal staan. Vervolgens heb ik de layout uitgebreid voor grotere schermen, met behulp van CSS media queries.