Bouw een layout volgens de mockup
De mockup kan je vinden op: https://moqups.com/nangko/zuU98IHb/. Globale volgorde van aanpak:
Start met de standaard breedte opzetten en centreren daarna de vlakken verdeling van boven naar beneden uitwerken.
lorempixel.com
Webdesigners maken vaak gebruik van "Lorem ipsum" tekst wanneer er nog geen tekst inhoud aanwezig is. Dit is neutrale tekst (want bijna niemand weet wat het betekend) en qua woordgebruik wel afwisselend.
Maar wat als er nog geen afbeelding materiaal is? Dan kun je op lorempixel.com makkelijk en rechten vrij, neutrale afbeeldingen van alle verschillende maten opvragen.
Volgorde van bouw:
1) Maak een html pagina en een css (stylesheet) bestand2) Link het css bestand in de html pagina
3) Zet de standaard reset bovenaan in het css-bestand: * { margin: 0; padding: 0}
4) Maak een div voor de globale breedte van de inhoud van de site, en zorg dat deze gecentreerd in het venster staat.
5) Zet in de globale div's voor de vertikale verdeling: header, banner, tekst1, tekst2, footer
6) Werk de divs verder uit volgens de moqups
Klaar met de layout?
Geef dan je layout een eigen style. Bedenk dit niet helemaal zelf, maar kijk naar bestaande sites die je qua look and feel aanspreken en bouw dit in jouw eigen site.
- Begin met de globale layout (achtergrond / voorgrond). Werk bijvoorbeeld met achtergrond voorgrond kleur, een rand of schaduw
- vervolgens typografie (headers / tekst vlakken) zoek op https://www.google.com/fonts een goed lettertype en bouw dit in
- Denk na hoe het menu duidelijk naar voren komt en hoe de links animeren wanneer je er moet de muis overheen gaat.
- hoe moeten de afbeeldingen naar voren komen in de content?
- vervolgens typografie (headers / tekst vlakken) zoek op https://www.google.com/fonts een goed lettertype en bouw dit in
- Denk na hoe het menu duidelijk naar voren komt en hoe de links animeren wanneer je er moet de muis overheen gaat.
- hoe moeten de afbeeldingen naar voren komen in de content?
