Dit document geeft een overzicht van het Informaat Landingspagina Project, uitgevoerd voor Informaat, een ontwerpbureau gespecialiseerd in het bouwen van websites.
- Opdracht
- Opdrachtgever
- Kenmerken
- Ontwerp probleem en oplossing
- Gebruik
- Wel gelukt / niet gelukt
- Installatie
- Licentie
Ik kreeg van Informaat de opdracht om een bestaand ontwerp (desktop versie) van een landingspagina na te bouwen, en hier zelf een mobile versie voor te maken.
De opdracht is voor het ontwerpbureau Informaat. Informaat ontwerpt/bouwt websites en richt zich vooral op grotere klanten.
Dit project is gemaakt met HTML, CSS en JavaScript. Verder staat hieronder een korte lijst met gebruikte tools en middelen.
Tools
- 🖥️ Php storm
- ✍ Figma
Gebruikte technieken
- 📟 HTML
- ⌚ CSS
- 📲 JavaScript
Probleem: De pagina is al ontworpen voor desktop view, het is de bedoeling dat de site responsive is en ook op mobile te bekijken is, hiervoor moet alles opnieuw ingedeeld worden.
Oplossing: Om de pagina mobile te krijgen heb ik het volgende gedaan:
- Content onder elkaar laten weergeven met flex column voor een one column layout
- Afbeeldingen kopje slimmer smeertechnisch heb ik een slider van gemaakt zodat deze op mobile passen
- Stappen plan interactie gemaakt met progressbar voor de sectie dit is hoe we beginnen
- contact formulier en samenwerken onderelkaar gezet.
Ik heb een figma bestand gekregen met de desktop view. Deze moest vervolgens omgezet worden naar een webpagina.
Oplossing: Ik heb eerts de desktop view grondig bestudeerd in figma en heb daarna mijn mobile view omgezet naar de desktop view. Aangezien ik alle secties uit de website in divs heb geplaatst. Met flex kon ik makkelijk de direction anders zetten, zodat ik de dektop pagina na kon maken.
Voor de tablet view heb ik de mobile view gebruikt alleen die een stuk wijder gemaakt en de spacings vergroot.
Algemeen:
Doormiddel van scrollen kun je allemaal informatie over informaat vinden.
Slider functie:
De slider kun je bedienen doormiddel van de pijltjes, hiermee kun je verder of terug gaan, op het moment dat je op de laatste slide bent en je drukt vooralsnog op verder gaan wordt je naar de eerste slide teruggebracht.
Progressbar functie:
Je kunt op de progressbar op de 1 2 of 3 knop drukken elke knop laat een nieuwe stap zien, deze staan in chronologische volgorde.
Contact formulier:
Je kunt doormiddel van de velden je gegevens achterlaten. Met de verstuur knop wordt je bericht verstuurd. Je bent verplicht alle velden in te vullen inclusief de privacy ceckbox anders krijg je een melding dat dit nog moet gebeuren.
Wel gelukt:
-Afgeschuinde hoeken ✅
-Mobile view ✅
-Slider ✅
-Custom li driehoekvorm ✅
-100% lighthouse test score ✅
-Text op wcag 2 AA (minimaal 1em / 16px) ✅
-Pagina is te bedienen doormiddel van de tab toets ✅
-Maximaal aantal karakters op een zin 60 voor een betere leesbaarheid ✅
Niet gelukt:
-Responsive op alle schermformaten ❌
-Button animaties ❌
-Scrol animaties ❌
-Progressbar functie ❌
- Clone of download deze respository.
- Ga naar de root directory van het project.
- Open het
index.htmlbestand, hierdoor wordt de homepagina van de website geopend.
Dit project is gelicentiëerd door Informaat.
©Informaat. Alle rechten voorbehouden.
