Ontwerp en maak een responsive website voor een startup.
De instructies voor deze opdracht staan in: INSTRUCTIONS.md
Een nieuwe website met oog op de nieuwe branding.
Op de site kan je de vacatures bekijken die op het moment openstaan bij drukwerkdeal. Ook vind je er informatie over het bedrijf en krijg je doormiddel van de vele afbeeldingen meer sfeer van het bedrijf. Je kan deze afbeeldingen bovenaan bekijken doormiddel van een interactie met pijltjes of wat verder naar beneden op de site. Dit door gewoon horizontaal te scrollen. Verder zijn de bedrijfsquotes terug te vinden van het bedrijf (de vier oranje quotes').
drukwerkdeal.scroll.through.mp4
Uiteraard heb ik de site responsive gemaakt. Deze is bijna optimaal, op de bovenste interactie met afbeeldingen na. Dit was erg ingewikkeld om nog binnen de tijd te kunnen halen.
responsive.showoff.mp4
Ik heb ook nog een snelle lighthouse test uitgevoerd en een w3c validator. Resultaten hieronder ↓
Verder zijn er helaas nog ideeën die ik had maar niet heb uit kunnen voeren. Het leek me leuk om een button fixed op de site te zetten. Dat als je op deze klikt, de site vult met een oranje grote druppel en dat jullie hier meer vertellen over de facaliteiten van jullie bedrijf, zoals de sportschool etc., die jullie hebben. Of hierin het nieuws met de blog te plaatsen. Ontwerp is uitgewerkt in FIGMA
Ook is het voor mobile ontwerp misschien handig nog iets meer feedforward toe te passen op de vacatures dus een pijltje toe te voegen. Verder mochten jullie desktop design te saai vinden, dan kan hier op de achtergrond in heel licht oranje misschien ook weer op enkele plekken de druppel terug komen? Uiteraard kunnen de afbeeldingen ook omgeruild worden met video's in het ontwerp.
De HTML heb ik gewoon semantisch geschreven. Verder heb ik hierin aria-labels toegevoegd zodat het meer accessible is.
Voor de algemene styling die vaak dubbel is heb ik een styleguide aangemaakt. Hierin staan custom properties en algemene styling. Ik heb voor responsiveness clamp gebruikt bij de fonts. Zo vergroot en verkleint de tekst geleidelijk aan, aan de hand vna de viewport width.
Met Javascript heb ik mijn interactie gemaakt met de afbeeldingen en pijltjes. De achterste afbeeldingen hebben een blur, lagere opacity, zijn zwart/wit en zijn kleiner. Terwijl de actieve afbeelding, gewoon in kleur is en groter is. De javascript bestaat eigenlijk uit 2 delen. Eerst moesten de pijltjes überhaupt de functie uitvoeren. De actieve afbeelding moest telkens vergroten en de achtergrond weer vervagen. Vervolgens moesten de pijltjes verdwijnen wanneer je bijvoorbeeld niet meer naar links kon dat het pijltje verdween en andersom.
Ik heb ervoor gezorgd dat er genoeg witruimte is en dat je kan zien wanneer een element inline of block is.
Ik heb ervoor gezorgd dat mijn CSS redelijk gelijk is aan de volgorde van de HTML. De elementen waar veel CSS voor nodig is staan onderaan. Nesting zorgt voor meer overzicht.
Ik heb mijn media queries genest in de bijbehorende styling. Dit zorgt voor meer overzicht, ook kan ik hierdoor verschillende breakpoints gebruiken en is het makkelijker een media query aan te passen.
Voor naamgeving heb ik rekening gehouden met beschrijvende namen. Ook heb ik er rekening meegehouden dat een custom property niet de naam krijgt van bijvoorbeeld de kleur, maar juist waarvoor de kleur gebruikt wordt. Bijvoorbeeld 'primary color' ipv 'oranje'. Verder is mijn Javascript zoals gebruikelijk in camelCase en mijn css in kebab-casing
This project is licensed under the terms of the MIT license.