Design Trainingen

Tips voor Webdesigners

<<< terugwebsiteplanwebdesign tipsopdracht


Webdesign TIPS voor vormgevers

  • Wees direct duidelijk in de beeldtaal en uitstraling. Een bezoeker bepaalt in 3 seconden of jouw website zinvolle informatie voor hem/haar bevat.
     
  • HET MIDDEN is het belangrijkste aandachtspunt in een website. Niet, zoals bij papier, de leesrichting van linksboven naar rechtsonder. Hieronder te zien in zogenaamde Heat-maps. Waar het oog het meeste kijkt...

     
  • DE RECHTERZIJDE wordt het minst goed bekeken
     
  • Ontwerp bij voorkeur op een vier-koloms stramien. Vier kolommen zijn eenvoudig naar andere schermbreedtes te verkleinen.

     
  • Ontwerp altijd een homepagina + vervolgpagina. De homepagina is meestal een inhoudsopgave voor de rest van de website en heeft vaak een andere indeling
     
  • Houdt bij knoppen rekening met de touchscreen en vingertop-dikte. Websites worden bekeken op mobiele apparaten, zoals smartPhones en Tablets.
     
  • Duidelijke icoontjes kunnen bijdragen aan de speelsheid en duidelijkheid in de website (bijv. FontAwesome)
     
  • Het logo staat vaak links of rechts boven in de hoek en bevat vaak een link naar de homepage. Denk na over de juiste plek voor het logo: bijvoorbeeld boven- of onder het hoofdmenu, gecentreerd, links of rechtsboven
     
  • Maak gebruik van de scrollfunctie in de browser. Maak pagina's zolang als dat er content voor is. Een aparte scrollbalk in een speciaal kader is ongemakkelijk op touchscreen en werkt vaak niet prettig bij touchpads op laptops.
     
  • Houdt rekening met eventuele uitbreidingen. Bijvoorbeeld ruimte voor extra menuknoppen die er bij komen of een in hoogte 'groeiende' kolom
     
  • Houdt in je ontwerp rekening met het repeteren van een achtergrond afbeelding en geef duidelijk aan hoe je de achtergrond wilt zien bij grotere schermresoluties (wel of niet repeteren?). Achtergrondafbeeldingen in de body van de website repeteren standaard. Dit is te gebruiken voor patronen.
     
  • Je ontwerpt voor beeldscherm:
    • bij voorkeur met een resolutie van 150 ppi
    • in kleurmodus sRGB
    • afbeeldingen voor web bewaren als: PNG24, JPG, of GIF
       
  •  Je ontwerpt voor verschillende schermformaten: Desktop, Tablet & Smartphone
     
  • De resolutie van een website-ontwerp of afbeelding is alleen belangrijk voor de laadtijd van de pagina. Afbeeldingen worden op elk scherm 1:1 weergegeven. Hoge resolutie afbeeldingen hebben meer laadtijd dan lage resolutie-afbeeldingen.

Doe de resolutietest:
Resample in Photshop een plaatje tot bijv. 200 pixels.
Vink resamplen (pixels berekenen) daarna uit.
Sla dit plaatje op in 72 ppi, daarna in 300 ppi, of welk getal je maar wilt.
Zet die plaatjes op je website. Zie je verschil? Nee, want er is geen verschil!

Bij vormgeven voor verschillende schermformaten is het handig om te werken met stramienkolommen.

BETEKENIS VAN KLEUR

Blauw: koele, zakelijke uitstraling
Groen: frisse, jonge, natuurlijke uitstraling
Oranje: warme, actieve, sportive uitstraling
Rood: warme, romantische of waarschuwende uitstraling
Roze: vrouwelijke warme uitstraling
Grijs: technische, neutrale, zakelijke uitstraling
Zwart: donkere klassieke, fotografische of rock-achtige uitstraling
Wit: minimalistische, rustige, neutrale uitstraling


Je kunt ook gebruik maken van bestaande vormgeving die al volledig voor je is gecodeerd. Jij hoeft deze alleen zelf aan te passen en te vullen. Bootstrap en PureCSS zijn de bekendste. Veel Wordpress-templates maken hiervan gebruik.

Maar ja, als iedereen het gaat gebruiken wordt het misschien weer saai....

 


Gebruik onderstaande deelopdrachten om tot het eindontwerp te komen:

1. Header vormgeven

De header is de sfeerbepaler van de website en het eerste element die een bezoeker ziet. Het is dus belangrijk dat de sfeer die jij voor ogen hebt daarin al goed zichtbaar is. In de header staat dan ook vaak het logo of de bedrijfsnaam met het doel van de site. Aan de hand van de header bepaalt een bezoeker vaak of de site zinvol is om te bekijken. Als het doel van de site niet duidelijk wordt in de header, dan klikt een bezoeker meestal sneller weg. Zet bijvoorbeeld in jouw portfolio-website naast je naam, ook wat je doet/maakt.

Omdat beweging meer aandacht trekt dan stilstaand beeld, zie je regelmatig een slideshow van beelden of geanimeerde tekst/typografie in de header staan.

De header wordt, na de eerste indruk, verder genegeerd door de bezoeker. Wel bevat de header vaak linksboven een link naar de homepage. Bijvoorbeeld door klikken op de homepage.

Boven of onder de header staat meestal de navigatie.

Indien je website veel bezoekers trekt op een website kun je boven de header ook advertenties laden (AddSense) via Google of via eigen adverteerders.

Voor mobiele applicaties wordt de header meestal op maat gemaakt in de verschillende schermgroottes. Dat is niet noodzakelijk, want de afbeelding wordt gewoon verkleint. Maar vanwege de leesbaarheid is het prettig om verschillende formaten aan te leveren:

Ontwerp bij voorkeur maken op: 1280px breedt en de hoogte is minimaal 800px

iPad formaat breedte liggend 1024px en staand 768px
Galaxy Tab formaat breedte liggend 1280px en staand 720px

Iphone/HTC formaat breedte liggend 800px en staand 480px (ouder dan iPhone 4)
Iphone/HTC formaat breedte liggend 960px en staand 640px (v.a. iPhone 4)

iPhone 5: Resolutie van 1136 x 640 pixels bij 326 ppi
iPhone 6: Resolutie van 1334 x 750 pixels bij 326 ppi
iPhone 6 Plus: Resolutie van 1920 x 1080 pixels bij 401 ppi

Inmiddels wordt er veel gebruik gemaakt van Responsive Design. Er wordt dan in blokken ontworpen. Op een breed scherm komen die naast elkaar te staan, maar bij een smal scherm (smartphone) komen ze onder elkaar te staan. Hieronder een voorbeeld:

Deelopdracht 1

Zoek in Google op afbeeldingen: 'header design'. Bestudeer de afbeeldingen en variaties.
Ontwerp 2 verschillende headers, passend bij jouw huisstijl


2. Footer vormgeven

De footer is vaak niet direct zichtbaar wanneer je een website opent, maar heeft toch een interessante functie in de websitenavigatie. De footer geeft vooral het einde van een pagina aan, maar is ook een plek waarin de bezoeker altijd weer de weg terug vindt naar de homepage of contact-pagina. Het is een soort baken wanneer de bezoeker de weg kwijt is in de site.

Naast een link naar de home- en contactpagina staat er in de footer vaak achtergrond informatie, zoals:

  • Algemene Voorwaarden (indien aanwezig)
  • Disclaimer (waarin het auteursrecht wordt uitgelegd)
  • Naam van de site/opdrachtgever: goed voor de zoekmachines
  • Jaartal + copywright-teken: geeft vertrouwen dat de site actueel is. Hier zijn automatische scripten voor zodat je dat zelf niet hoeft bij te houden.

Deelopdracht 2

Zoek in Google op afbeeldingen: 'footer design'. Bestudeer de afbeeldingen en variaties.
Ontwerp 2 verschillende footers, passend bij jouw huisstijl


3. Horizontaal menu vormgeven

Het horizontale menu is in bijna elke website wel te vinden. Vaak in de vorm van het hoofdmenu, maar steeds meer ook klein, rechtboven in de site. Hier kun je dan inloggen of of contact opnemen. Horizontale menu's hebben vaak een submenu dat uitklapt (rollout functie). Omdat er steeds meer gebruik wordt gemaakt van Touch-navigatie is het belangrijk om daar in de vormgeving rekening mee te houden. LET OP: Maak je menuknoppen dus niet te klein en houdt rekening met een vingertopdikte.

Als vormgever ontwerp je het hoofdmenu, maar ook het submenu dat uitklapt.
De kans is vrij groot dat er menuknoppen bij komen. Houdt dus rekening met wat extra ruimte in je menubalk.

Elke knop heeft 3 standen. Laat deze 3 standen minimaal 1 x in je ontwerp terugkomen, zodat de opdrachtgever en programmeur kunnen zien hoe je het graag wilt hebben.

  1. normaal: hoe ziet de knop er in basis uit
  2. rollover: hoe ziet de knop er uit wanneer de muis er over heen gaat?
  3. actief: hoe ziet de knop er uit wanneer de pagina van de knop geladen is? De knop als het ware 'aan staat'.

Daarnaast hebben de submenu's of uitklap-menu's meestal een accent-kleur. Vaak iets lichter of donkerder dan de hoofdknoppen.

TIP: eenvoudig css-verloopjes maken voor de knoppen in jouw website? Kijk hier

Deelopdracht 3

Zoek in Google op afbeeldingen: 'website menu design'. Bestudeer de afbeeldingen en variaties.
Ontwerp 1 horizontaal
menu met submenu, passend bij jouw huisstijl.


4. Verticaal menu vormgeven

Het verticale menu is in bijna elke website wel te vinden. Vaak in de vorm van een submenu aan de linkerkant van de pagina. Verticale menu's hebben vaak een submenu dat soms uitklapt (rollout functie), maar vaak ook al uitgeklapt blijft Omdat er steeds meer gebruik wordt gemaakt van Touch-navigatie is het belangrijk om daar in de vormgeving rekening mee te houden. LET OP: Maak je menuknoppen dus niet te klein en houdt rekening met een vingertopdikte.

Als vormgever ontwerp je het hoofdmenu, maar ook het submenu dat uitklapt.
De kans is vrij groot dat er menuknoppen bij komen. Houdt dus rekening met wat extra ruimte in de hoogte van je menubalk.

Elke knop heeft 3 standen. Laat deze 3 standen minimaal 1 x in je ontwerp terugkomen, zodat de opdrachtgever en programmeur kunnen zien hoe je het graag wilt hebben.

  1. normaal: hoe ziet de knop er in basis uit
  2. rollover: hoe ziet de knop er uit wanneer de muis er over heen gaat?
  3. actief: hoe ziet de knop er uit wanneer de pagina van de knop geladen is? De knop als het ware 'aan staat'.

Daarnaast hebben de submenu's of uitklap-menu's meestal een accent-kleur. Vaak iets lichter of donkerder dan de hoofdknoppen.

TIP: eenvoudig css-verloopjes maken voor de knoppen in jouw website? Kijk hier

Deelopdracht 4

Zoek in Google op afbeeldingen: 'website menu design'. Bestudeer de afbeeldingen en variaties. Ontwerp 1 verticaal menu met submenu, passend bij jouw huisstijl.


5. Patronen voor de achtergrond vormgeven

In Photoshop kun je, net als in Illustrator, patronen ontwerpen. De webbouwer kan deze patronen overnemen en in de achtergrond van een website plaatsen.

Deelopdracht 5

Zoek in Google op afbeeldingen: 'background pattern'. Bestudeer de afbeeldingen en variaties.
Probeer deze online patronen maker eens
Ontwerp 2 verschillende patronen voor achtergrond, passend bij jouw huisstijl.


6. Scherm typografie

Schermtypografie verschilt van drukwerktypografie. Waar een schreefletter in een magazine of krant prima volstaat, daar is deze letter op het scherm vaak lastig leesbaar. Vaak wordt er bij schermtypografie dan ook gekozen voor schreefloze fonts. Veel drukwerkfonts zijn inmiddels voor scherm omgezet (hinten) en een beetje aangepast voor optimale leesbaarheid op het scherm. Zo is een schermletter Arial ontstaan uit het drukwerkfont Helvetica. En zo is de schermletter Times new Roman ontstaan uit de krantenletter Times.

Meer typografische verschillen tussen scherm en drukwerk:

  • Meerdere tekstkolommen zijn op tablets en smartphones niet nodig en zelfs vervelend. Terwijl dit bij drukwerk juist heel prettig is.
  • De Interlinie (regelafstand) (css= line-height) is op scherm groter nodig dan in drukwerk. Dit geldt ook voor de spatiering (css= letter-spacing)

Deelopdracht 6

Bekijk verschillende fonts op Google webfonts
Ontwerp 2 verschillende kop-sub-brood tekst typografie,
passend bij jouw huissijl.


7. Web icons voor multimedia applicaties

Deelopdracht 7

Zoek in Google op afbeeldingen: 'web icon design'. Bestudeer de afbeeldingen en variaties.
Ontwerp de volgende icoontjes in je eigen stijl voor: home | contact | pijltje | in-uitklappen | winkelmandje | agenda

Voor symbolen is er ook een mooi symbolen-font beschikbaar: Font Awesome