Design Trainingen

Opdracht Webdesign

<<< terugwebsiteplanwebdesign tipsopdracht


Ontwerp in Photoshop een website op basis van een bestaande huisstijl.

Wat ga je maken:

  1. Ontwerp een startpagina en een vervolgpagina met behulp van dit 960-stramien voor Photoshop. Maak ze in hetzelfde document en werk met laagmappen.
  2. Zodra het ontwerp klaar is, maak je een ontwerpvariatie voor tablet en smartphone
  3. Maak je een mockup als klantpresentatie met daarin je ontwerp voor verschillende schermbreedtes
  4. Maak een PDF met daarin een instructie voor de programmeur van de werking van je ontwerp (rollovers, slidshow, scrollen, verschil home- en vervolg-pagina en andere interactive elementen)

Wat moet er in je ontwerp te zien zijn:

  • typografie sluit aan bij huisstijl
  • kleur in lijn met de huisstijl en sfeer
  • verplichte elementen:
    • horizontaal of verticaal menu
    • header en footer
    • tekstblokje (neptekst)
    • contactgegevens
    • 3 nieuwsberichten
    • social media buttons en links

  • Ontwerp in Photoshop de startpagina van een website op 150dpi in sRGB. Houdt rekening met verschillende schermbreedtes. De hoogte mag ook hoger zijn.
  • Gebruik een stramien van 4 kolommen
  • Deel je lagen overzichtelijk in (laagmappen).
  • Gebruik neptekst voor alle typografie. Maak de tekst op (kop, subkop, accentene.d.). Denk aan hiërarchie bij het opmaken van de tekst.
  • Geef aan welk(e) Google Webfont(s) er moet worden gebruikt.

Voorbeeld van een vierkoloms stramien voor een website

Kies bij voorkeur voor vier kolommen met een kolombreedte van 256 pixels (4 x 256 = 1024)

Een ontwerp in vier kolommen is eenvoudig te verdelen in verschillende schermbreedtes voor:

  • desktop (1280 x 800px)
  • tablet (1024 x 768px staand ontwerp)
  • mobiel (320 x 480px)