Informaat Landingspagina

Deze Readme geeft een overzicht van het Informaat Landingspagina Project, waarvan ik mijn versie heb uitgevoerd voor Informaat, een ontwerpbureau gespecialiseerd in het bouwen van websites.

Inhoudsopgave

• Opdracht
• Opdrachtgever
• Kenmerken
• Ontwerp probleem en oplossing
• Gebruik
• Wel gelukt / niet gelukt
• Installatie
• Licentie

Opdracht

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.

Opdrachtgever

De opdracht is voor het ontwerpbureau Informaat. Informaat ontwerpt/bouwt websites en richt zich vooral op grotere klanten.

Kenmerken

Dit project is gemaakt met HTML, CSS en JavaScript. Verder staat hieronder een korte lijst met gebruikte tools en middelen.

Tools

• Figma

Gebruikte technieken

• HTML
• CSS
• JavaScript

Gebruikte links

• https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

Ontwerp probleem en oplossing

Desktop view namaken

Ik heb een figma bestand gekregen met de desktop view. Deze moest worden omgezet naar een responsive versie vanaf 320px tot desktopgrootte.

Oplossing: Ik heb eerst een paar breakdown schetsen gemaakt voor de mobile view en welke code ik daar mogelijk voor zou kunnen gebruiken. Vervolgens heb ik een structuur gemaakt van de websites en die zo sematisch mogelijk gehouden (hier en daar zitten divs, meestal om warnings te ontlopen voor validatie). Met flex kon ik makkelijk de direction anders zetten, zodat ik de desktop pagina na kon maken.

Mobile view

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 die past op alle formaten
• contact formulier en samenwerken onderelkaar gezet.

Tablet view

Voor de tablet view heb ik de mobile view gebruikt alleen die een stuk wijder gemaakt en de spacings vergroot.

Gebruik

Algemeen:

Doormiddel van scrollen kun je allemaal informatie over informaat vinden.

Slider functie:

De slider is automatisch en responsive op alle formaten. Het is niet een slider de de gehele breedte inneemt van de website en de afbeelding worden om de 3,5 seconde verwisseld

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 / niet gelukt

Wel gelukt:

-Afgeschuinde hoeken ✅

-Mobile view ✅

-Slider ✅

-Responsive op alle schermformaten ✅

-Custom li driehoekvorm ✅

-100% lighthouse test score ✅

-Text op wcag 2 AA (minimaal 2em) ✅

-Pagina is te bedienen doormiddel van de tab toets ✅

Niet gelukt:

-Button animaties ❌

-Scrol animaties ❌

Installatie

1. Clone of download deze respository.
2. Ga naar de root directory van het project.
3. Open het index.html bestand, hierdoor wordt de homepagina van de website geopend.

🔓 Licentie

Dit project is gelicentiëerd door Informaat.

©Informaat. Alle rechten voorbehouden.