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.