Ontwerpen - Davidvboxt/Oba-release-candidate-2 GitHub Wiki
CARROUSEL
Schets 1
Voor de ontwerpface van de carousel heb ik paar concepten gemaakt voor de plaatsing van de pijltjes. Dit heb ik gedaan met behulp van Figma. Uiteindelijk heb ik gekozen voor concept 1.
Concept 1
Hier laat ik de pijltjes boven de carrousels hangen, dit geeft namelijk voor mij een meer rustgevender gevoel en zijn de pijltjes makkelijk te vinden.
Concept 2
In dit concept plaats ik de pijltjes in het midden van de carrousel aan de zijkanten. Dit komt vaak voor in websites, ook zal het dan een animatie krijgen dat als je over de carrousel hovert de pijltjes meer zichtbaarder wordt.
Concept 3
Voor dit concept heb ik de pijltjes onder de carrousel geplaatst. Dit komt niet vaak voor en zal ik waarschijnlijk ook niet gebruiken, het kan namelijk moeilijker te vinden zijn voor de bezoeker.
Schets 2
Hierin heb ik de carrousel ontworpen op de manier hoe ik het wil gaan bouwen. Hierbij heb ik de benodigheden voor javascript en css opgeschreven, zo weet ik wat ik allemaal in mijn code moet gebruiken.
Dit ontwerp is gebruikelijk voor zowel desktop als mobile form.
NIEUWE NAVIGATIE
Insperatie
- Hortizontaal
- De huidige hamburg kan gebruikt worden wanneer het mobile form wordt.
- De "contact" link kan veranderen naar "Log in/log uit"
Link: https://www.youtube.com/watch?v=PwWHL3RyQgk
- Verticaal
- Transpirant
- Als je hovert klapt die open
- CSS only (PE)
Link: https://www.youtube.com/watch?v=P1RwfxvQKQM
- Verticaal
- Toggle animatie die de menu uitklapt/inklapt
- Heeft de profiel avatar in de menu
Link: https://amberhva.github.io/fix-the-flow-interactive-website/
- Verticaal
- Heeft een fade in animatie
- Toggle animatie die de menu uitklapt/inklapt
- CSS only (PE)
Link: https://www.youtube.com/watch?v=V0O4pY2xX10
MORFOLOGISCHE KAART
Hier toon ik verschillende opties voor de delen in het nieuwe navigatie menu; Sub titel, Hamburg, Layout en wanneer de humburger open is.
Insperatie hamburg: https://codepen.io/RRoberts/pen/ZBYaJr
Familie overzicht
Tijdens de meeting met de opdrachtgever gevraagd naar de informatie voor de familie overzicht componenten, tijdens deze meeting heb ik zijn ideeen geschets in paint om een duidelijk beeld te geven van hoe het product er dan eruit zou komen te zien.
Werkplek reservering
Morfologische card
Hier toon ik doormiddel van een morfologische kaart verschillende opties voor de delen in het nieuwe component waar je een werkplek kan reserveren bij een van de oba vestigingen.
Breakdown schets
Hierin maak ik een breakdownschets van de werkplek reservering component waarin ik al de html elementen toon.
Sitemap
Deze sitemap schetst de structuur en werking van de werkplekreserverings- en uitleengeschiedenisfuncties binnen de applicatie, en hoe de gegevens worden verwerkt en opgehaald via de Hygraph API.
Control flow
Dit diagram toont de stappen die de code doorloopt vanaf het moment dat een gebruiker een formulier indient, tot het moment dat de reserveringsgegevens naar Hygraph worden gestuurd en een succesmelding wordt geretourneerd.
Familie overzicht component
Breakdown schets
Hierin maak ik een breakdownschets van de familie overzicht component waarin ik al de html elementen toon.