Hoe gaat jouw website er uit zien?

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

In Hoe gaat jouw website eruitzien? tonen we je een eenvoudige methode die je kan volgen om de inhoud en het design van je website te plannen voordat je code begint te schrijven. We geven antwoorden op vragen als : Welke informatie ga ik aanbieden?  Welke lettertypes en kleuren wil ik gebruiken? Wat is het doel van mijn site?

Begin bij het begin: planning

Voordat je begint heb je een paar ideeën nodig. Wat gaat jouw website aanbieden? Een website kan zo goed als alles doen, maar met je eerste probeersel kan je het beter simpel houden. We beginnen met  een eenvoudige webpagina die een hoofding, een afbeelding en een paar paragrafen bevat.

Om te beginnen heb je een antwoord op deze vragen nodig: 

  1. Waar gaat je website over? Hou je van honden, New York of Pacman?
  2. Welke informatie wil je over het onderwerp aanbieden ? Schrijf een titel, een paar paragrafen en denk na over een afbeelding die je wil tonen op je pagina.
  3. Hoe gaat jouw website eruitzien ?  Gebruik eenvoudige termen. Welke achtergrondkleur kies je ? Welk lettertype is het meest geschikt: formeel, cartoony, vetgedrukt, subtiel?

Opmerking: Complexe projecten hebben gedetailleerde richtlijnen nodig die alle details bevatten over kleuren, lettertypes, spaties tussen items op de pagina, aangewezen schrijfstijl enzovoort. Dit wordt ook wel een ontwerpgids of merkboek genoemd. Je kan een voorbeeld bekijken op Firefox OS Guidelines.

Schets je ontwerp

Vervolgens neem je pen en papier maak je een ruwe schets van je webpagina. Voor je eerste pagina is er nog niet veel dat je op papier kan zetten maar je zou er nu al een gewoonte van moeten maken. Het helpt echt en je hoeft geen Van Gogh te zijn!

Opmerking: Zelfs op echte, complexe websites, begint het design team meestal met ruwe schetsen op papier. Later bouwen ze digitale mockups (i.e. 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. Ze zijn verantwoordelijk voor de gebruikerservaring en -interactie met de website.

Kies je hulpprogramma's

Nu ben je klaar om de inhoud samen te stellen, die uiteindelik op je webpagina te terecht zal komen. 

Tekst

Je zou nog steeds die paragrafen en de titel van je ontwerp moeten hebben. Houd die paraat. 

Themakleur

Ga naar de the Color Picker om een kleur te kiezen en zoek er eentje uit, die je bevalt. Als je op een kleur klikt, zal je een vreemde code zien die uit zes tekens bestaat zoals bijvoorbeeld  #660066. Die tekens vormen een hex(adecimale) code, en vertegenwoordigen jouw kleur. Kopiëer de code in een document en dat je ergens veilig bijhoudt. 

Afbeeldingen

Om een afbeelding te kiezen, ga je naar Google Afbeeldingen en zoek je naar iets geschikts.

  1. Als je een beeld hebt gevonden, dat je bevalt, klik je op het beeld.  
  2. Druk op Afbeeldingen bekijken.
  3. Op de volgende pagina, klik je met de rechter muisknop op het beeld (Ctrl + clik op een Mac), kies Afbeelding opslaan als... en kies een veilige plek om je afbeelding op te slaan. Als alternatief voor deze methode kan je ook heb webadres van je afbeelding opslaan voor later gebruik (het webadres vind je in de adresbalk van je browser). 

Opmerking: De meese afbeeldingen op het web, dus ook die van Google afbeeldngen,  zijn auteursrechtelijk beschermed. Om de kans op het schenden van dat auteursrecht te verkleinen, kan je Google's licentiefilter gebruiken. Klik gewoon  1) Tools  en dan op 2) Gebruiksrechten:

Lettertype

Om een lettertype te kiezen:

  1. Ga naar Google Fonts en scroll omlaag tot je er één in de lijst vindt dat je wil gebruiken. Je kan ook het bedieningspaneel aan de rechterkant gebruiken om je resulten verder te filteren. 
  2. Klik op het "plus"-icoon (i.e. Voeg toe) naast het lettertype van je keuze.
  3. Klik op de "* Family Selected" -knop in het paneel aan de onderkant van de pagina ("*" is afhankelijk van het aantal lettertypes die je hebt geselecteerd.
  4. In het popup-scherm, kan je de regels met code zien die Google aan jou doorgeeft. Die regels kopiëer je in een tekstverwerker en sla je op voor later gebruik. 

 

Documentlabels en -medewerkers

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