2. Ontwerpfase - JalalToufik/Bieb-In-Bloei GitHub Wiki
1. Sitemap
Met onze opdrachtgever zijn we gaan bespreken welke nieuwe projecten erbij komen en hoe de Sitemap word aangepast.
Dit hadden wij gelijk samen met Joost samengesteld om alvast een beeld te schetsen hoe we de nieuwe pagina's willen tonen.
Op basis van deze kennis zijn we nieuwe sitemap gaan ontwerpen voor Bieb in Bloei.
1.1 Sitemap V1
Hier ben ik samen met Duneya sitemap gaan samen stellen. Deze gingen we ook presenteren aan de opdrachtgever voor feedback.
1.2 Sitemap V2
Na gesprek met de opdrachtgever over onze sitemap hebben we feedback ontvangen en hebben we de sitemap aangepast naar de wensen van de opdrachtgever.
2. Redesign - Plantswap naar Bieb in Bloei
Samen met Duneya zijn we gaan brainstormen voor een nieuw design voor het heel project. We hebben gekozen om opnieuw te ontwerpen omdat de opdrachtgever nieuwe projecten heeft aangekondigd, aan de hand van deze informatie zijn we zelf een nieuw ontwerp gaan samenstellen.
2.1 Homepage schets
Op basis van onze nieuwe sitemap ben ik ook een nieuw ontwerp gaan maken voor Bieb in Bloei. We zijn begonnen met het schetsen van ideeën, waarbij de focus aanvankelijk lag op de homepage.
We hebben individueel geschetst en vervolgens het beste ontwerp gekozen om uit te werken. Uiteindelijk hebben we besloten om mijn ontwerp te gebruiken, dat ik heb uitgewerkt tot een volledig Hi-Fi ontwerp in Figma.
- Dit is mijn eerste versie die ik hebb ontwikkeld.
- Deze had Duneya geschetst voor de homepapge:
2.2 Hi-fi ontwerp Bieb in Bloei
We zijn op basis van de gemaakte sitemap en schetsen een heel nieuw website gaan samenstellen in Figma.
2.2.1 visuele hiërarchie
Goede visuele hiërarchie zorgt voor een betere gebruikerservaring, omdat het de website overzichtelijker, begrijpelijker en aantrekkelijker maakt. Dit hebben wij gedaan door goed rekening te houden met de grootte, contrast, kleur, positionering en witruimte.
Voorbeeld voor onze Hero slider component staat de h1 met een titel, deze is wit van kleur en om de contrast te balanseren heb ik een background shadow gegeven aan het achtergrond:
2.2.2 typografie
Wij maken ook gebruik van verschillende lettertypes. Elk lettertype heeft weer zn eige rol en dit maakt de website ook minder eentonig. Dit zijn onze lettertypes:
- Koptitels : Poppins Black
- Paragrafen : Poppins Medium
- Linkjes : Mulish Black
2.2.3 kleurentheorie
Wij zijn bewust gaan kijken welke kleuren combinatie we kunnen gebruiken en welke combinatie voldoet aan de contrast check.
Wij zijn onze kleuren gaan testen via https://colourcontrast.cc/:
2.2.4 layout
Verder heb ik de layout van de rest van de website in elkaar gezet:
2.3 Logo Bieb in Bloei
We hebben hulp ingeschakeld bij het ontwerpen voor het nieuwe logo voor ons project. Rosa wilde ons helpen met het ontwerpen met nieuwe logo en dit is ook aardig goed gelukt!
Versie 1 - Logo
Versie 2 - Logo
We hadden de logo's gepresenteerd aan de opdrachtgever en we kregen feedback om nog een specifieke bloem er in te verweken