2. Ontwerpen - Trisjan/Freago GitHub Wiki

Sitemap

Ik heb een sitemap geschetst voor de opdrachtgever om te laten zien hoe de website navigeert. Zo kunnen zij zien welke pagina's opgeleverd wordt en kan ik zien hoeveel pagina's er uberhaupt komen. Door de hoeveelheid pagina's op papier te schetsen kan ik ook alvast gaan bedenken hoeveel tijd ik kan spenderen per pagina.

Lo-Fi schetsen

Tijdens de briefing met de opdrachtgever was hij al bezig met schetsen. Hij liet mij zien wat voor pagina's wilt en hoe deze er ongeveer uit gaan zien. Dat is de tekening hieronder. Hij heeft onder andere in grote lijnen geschetst hoe hij de layouts wil hebben van de pagina's: Homepage, Wie zijn wij, Wat bieden wij etc.

Hi-Fi schetsen

Ik heb voor deze opdracht een aantal pagina's designed om deze te vertonen aan de opdrachtgever.

Homepage

Hieronder is de homepage te zien. Ik heb 3 tegels gemaakt op aanwijzing van de opdrachtgever. Hij wilde deze 3 buttons groot op hun landingspage hebben. Ik heb de belangrijkste 2 (naar mijn mening) boven op gezet. Daaronder is de over ons pagina. Als ZZP'er of bedrijf wil je een van de 2 bovenste knoppen drukken, dit zijn de primary actions op deze pagina.

Ik zoek werk page

Hieronder is de "Ik zoek werk" page te zien. Ik heb een card ontworpen voor elk bedrijf wat op de pagina te zien is. Je kan ook op naam zoeken van het bedrijf in de searchbar.

Werk met ons page

Hieronder is de "Werk met ons" page te zien. Ik heb een formulier onderaan de pagina staan. Dit is een workaround van de registratie en login pagina die ze wouden om zo te registreren als bedrijf. Nu kunnen ze een mail sturen doormiddel van dit formulier om een intake gesprek in te plannen met de eigenaren van Freago. Zo kan Freago zelf daarna het bedrijf toevoegen in het systeem.

Over ons page

Op de about page heb ik nu nog teksten staan. Het belangrijkste is dat je als gebruiker kan lezen wie Freago is en wat hun doel is. Daarnaast vind ik het belangrijk dat je de eigenaren kan vinden onderaan met hun socials.

Detailpage

Op de detailpage moet je meer kunnen lezen over de fucntie die ze aanbieden op Freago.

Breakdownschets

Ik heb voor de volgende designs een breakdown gemaakt.

Homepage & Card

Om de homepage en de cards te bouwen heb ik een breakdown gemaakt. Dit heb ik gedaan omdat ik voor mezelf wilde kijken of ik de logica zou snappen en de juiste elementen zou gebruiken zonder een code editor te gebruiken als hulp.

Form (server side)

Om de server side code (proberen) te begrijpen heb ik een breakdown schets gemaakt met hulp van Joost zijn les over forms.

Datamodel

Hieronder is een schets te vinden van het datamodel van prismic voor deze website. Ik heb deze gebruikt tijdens de meeting met de opdrachtgever om uit te leggen hoe hij de data en teksten kan beheren zonder mij.