Holidaze

Oppgaven

Et lokalt reiselivsbyrå i Bergen lanserer en ny nettside kalt Holidaze, der besøkende kan finne hoteller, B&B-er og gjestehus, og der overnattingsstedene mottar henvendelser. Prosjektet omfatter både besøkssiden – søk etter overnatting og send henvendelser – og adminsiden, der steder legges til og henvendelser håndteres.

Prosess

Design, prototyping og deretter utvikling etter designet.

Design

Farger

Fargene øverst er for besøkssiden. Jeg ville prøve farger jeg sjelden ser på bookingsider.

• Lilla brukes på alle knapper og klikkbare lenker, slik at brukerne lærer at «lilla er klikkbart». Jeg holdt antallet knapper og lenker nede for å lede brukerne fremover – mot booking – i stedet for å klikke rundt.
• Blå brukes i navigasjonen, likt på alle besøkssidene.
• Oransje brukes på hotellspesifikke ikoner og priser, for å gi siden et gladere preg.
• Mørk grå brukes på mindre ikoner, som maks antall gjester og ikonet i typeahead-søket.

Adminsiden bruker en lysere blå i navigasjon og detaljer – blått oppleves som en mer «teknisk» farge.

Ikonene er fra Font Awesome: flate ikoner er lette å forstå, og de passet godt med designet.

Prototype

Jeg brukte Adobe XD til å legge ut sidene uten detaljer først. Da alle elementene hadde fått sin plass, fylte jeg inn farger, bilder, knapper, ikoner og tekst fra style tile-en.

Utvikling

Bygget fra bunnen av uten CSS-rammeverk, for å vise ferdighetene mine uten snarveier. Siden er laget i React, med Axios for å hente og sende data og hooks for livssyklus.

Jeg brukte noen avhengigheter der de ga mening: React Hook Form for skjemavalidering, google-maps-react for å vise hvor hvert hotell ligger, og simple-react-lightbox for bildevisning. I tillegg er det ekstra validering med regex i JavaScript og sanering i PHP-koden. Filtrering og søk håndteres med useEffect og Axios.