MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Hoe gaat uw website eruitzien? beschrijft een eenvoudige methode die u kunt volgen om de inhoud en het ontwerp van uw website te plannen voordat u code begint te schrijven, en geeft antwoorden op vragen als ‘Welke informatie ga ik aanbieden?’, ‘Welke lettertypen en kleuren wil ik gebruiken?’ en ‘Wat is het doel van mijn website?’

Beginnen bij het begin: planning

Voordat u begint, hebt u een paar ideeën nodig. Wat gaat uw website bieden? Een website kan zo goed als alles doen, maar met uw eerste probeersel kunt u het beter simpel houden. We beginnen met een eenvoudige webpagina die een hoofding, een afbeelding en een paar alinea’s bevat.

Om te beginnen, hebt u een antwoord op deze vragen nodig:

  1. Waar gaat uw website over? Houdt u van honden, New York of Pacman?
  2. Welke informatie wilt u over het onderwerp aanbieden? Schrijf een titel, een paar alinea’s en denk na over een afbeelding die u op uw pagina wilt tonen.
  3. Hoe gaat uw website eruitzien? Gebruik eenvoudige termen. Welke achtergrondkleur kiest u? Welk lettertype is het meest geschikt: formeel, cartoony, vetgedrukt, subtiel?

Noot: complexe projecten hebben gedetailleerde richtlijnen nodig die alle details bevatten over kleuren, lettertypen, spaties tussen items op de pagina, aangewezen schrijfstijl, enzovoort. Dit wordt ook wel een ontwerpgids of merkboek genoemd. U kunt een voorbeeld bekijken op Firefox OS Guidelines.

Uw ontwerp schetsen

Vervolgens neemt u pen en papier en maakt u een ruwe schets van uw webpagina. Voor uw eerste pagina is er nog niet veel dat u op papier kunt zetten, maar u zou er nu al een gewoonte van moeten maken. Het helpt echt en u hoeft geen Van Gogh te zijn!

Noot: zelfs op echte, complexe websites begint het ontwerpteam meestal met ruwe schetsen op papier. Later bouwen ze digitale mockups (modellen) met een grafische editor of een andere webtechnologie.

Een grafisch ontwerper en een user-experience (UX)-designer zijn vaak leden van een webteam. Grafische ontwerpers ontwikkelen de visuele aspecten van een website. UX-ontwerpers spelen een eerder abstracte rol. Zij zijn verantwoordelijk voor de gebruikerservaring en -interactie met de website.

Uw hulpprogramma’s kiezen

Nu bent u zo ver om de inhoud samen te stellen die uiteindelijk op uw webpagina terecht zal komen.

Tekst

U zou nog steeds die alinea’s en de titel van uw ontwerp moeten hebben. Houd die paraat.

Themakleur

Ga naar de Kleurenkiezer om een kleur te kiezen. Zoek er een uit die u bevalt. Als u op een kleur klikt, zult u een vreemde code zien die uit zes tekens bestaat, zoals bijvoorbeeld #660066. Die tekens vormen een hex(adecimale)-code, en vertegenwoordigen uw kleur. Kopieer de code in een document dat u ergens veilig bijhoudt.

Afbeeldingen

Om een afbeelding te kiezen, gaat u naar Google Afbeeldingen en zoekt u naar iets geschikts.

  1. Als u een afbeelding hebt gevonden die u bevalt, klikt u op de afbeelding.
  2. Druk op de knop Afbeeldingen bekijken.
  3. Op de volgende pagina klikt u met de rechtermuisknop op de afbeelding (Ctrl + klik op een Mac), kies daarna Afbeelding opslaan als… en kies een veilige plek om de afbeelding op te slaan. Als alternatief voor deze methode kunt u ook het webadres van uw afbeelding opslaan voor later gebruik (het webadres vindt u in de adresbalk van uw browser).

Noot: de meeste afbeeldingen op het web, dus ook die van Google Afbeeldingen, zijn auteursrechtelijk beschermd. Om de kans op het schenden van dat auteursrecht te verkleinen, kunt u Google’s licentiefilter gebruiken. Klik hiervoor op 1) Tools en dan op 2) Gebruiksrechten:

Lettertypen

Om een lettertype te kiezen:

  1. Ga naar Google Fonts en scroll omlaag totdat u een lettertype in de lijst vindt dat u wilt gebruiken. U kunt ook het bedieningspaneel aan de rechterkant gebruiken om uw resultaten verder te filteren.
  2. Klik op het ‘plus’-pictogram (Toevoegen aan) naast het lettertype van uw keuze.
  3. Klik op de knop ‘* Family Selected’ in het paneel aan de onderkant van de pagina (‘*’ is afhankelijk van het aantal lettertypen dat u hebt geselecteerd).
  4. In het pop-upscherm kunt u de regels met code zien die Google aan u doorgeeft. Die regels kopieert u in een teksteditor en slaat u op voor later gebruik.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Tonnes, mientje, physicbits
 Laatst bijgewerkt door: Tonnes,