<<< terugwebsiteplanwebdesign tipsopdracht

Waarom Webdesign?

Door de groeiende vraag naar websites en online applicaties is het belangrijk dat een vormgever een ontwerp kan maken dat voldoet aan de eisen van de internet techniek. Hiervoor is een andere ontwerp-aanpak nodig dan bij drukwerk gebruikelijk is.

Waar bij drukwerk het belangrijkste aandachtspunt linksboven en rechtsonder ligt (leesrichting), heeft een website de aandacht vooral in het midden van het beeldscherm liggen. In een boekje bladert de lezer van de eerste naar de laatste pagina, terwijl een bezoeker van een website lekker in het rond klikt. Graag zonder te verdwalen. De navigatie is daarom een belangrijk onderdeel.

Iedere opdrachtgever heeft een eigen sfeer en uitstraling nodig. Vaak wordt die bepaald door de bestaande huisstijl. Maar vooral veel nieuwe ondernemers starten direct met een website of app. Als webdesigner zul je dan vaak meedenken in de online uitstraling die het beste past bij de opdrachtgever en zijn/haar klanten.

Als webdesigner ontwerp je dus vaak veel verschillende thema's en sferen. Daarom leer je, aan de hand van een aantal opdrachten, verschillende thema's toe te passen op een aantal basis-elementen van een website voor tablet of smartphone.

Gemiddeld scant EN beoordeelt een bezoeker in 3 seconden een pagina. Staat er niet wat men zoekt of is de layout onbegrijpelijk, dan klikt men weg....

 Don't Make Me Think!

Trends in webdesign:

Van Speel naar zakelijk

Van creatief gevarieerd naar flexibiliteit in blokken

Van pagina-aandacht naar product-aandacht

Van totaal-informatie naar one-liner

Doel

Ontwerpen van responsive website of app-elementen, zoals navigatie, headers, footers, typografie in verschillende thema's.

Wat wordt er behandeld

• vormgeving van headers en footers in een  thema
• knoppen met vlak- of gradientvulling en/of verschillende lijnen
• uitklap menu vormgeven
• gebruik van web icoontjes
• schermtypografie
• responsive ontwerpvariatie maken voor smartphone/tablet
• beschrijving maken van de functionaliteit van website

Werkwijze

Aan de hand van deelopdrachten leer je de belangrijkste basis vaardigheden voor het ontwerpen van een website.

Opdracht

Je ontwerpt aan de hand van het websiteplan een responsive website, geschikt voor verschillende schermbreedtes. Aan het eind van deze training heb je ervaring opgedaan in het ontwerpen van een website en geleerd welke keuzes die je tijdens het ontwerpproces moet maken.

Voorbeeld van de opbouw van een website ontwerp in Photshop

MAAK:

1. in Photoshop de startpagina van een website op 150ppi in sRGB:
2. het definitieve ontwerp, inclusief de uitwerking en fintuning in details (alsof de site helemaal al klaar is)

ONTWERP EEN VERSIE VOOR:

1. desktop (1280 x 800px)
2. tablet (1024 x 768px staand ontwerp)
3. mobiel (320 x 480px)

LEVER AAN:

1. de losse slideshow afbeeldingen
2. een losse achtergrondafbeelding, indien deze wordt gebruikt
3. een PSD-document in 150 ppi RGB, in duidelijke lagen/laagmappen opgebouwd voor de bouwer.
4. een PDF met daarin de werking aangegeven. Doe dit met pijlen en korte beschrijvingen die de werking aangeven:
   • waar staat de slideshow?
   • hoe ziet een rollover er uit?
   • wat gebeurt er bij een vervolgpagina?
   • wat doet de achtergrond? beeldvullend, repeteren, centreren
   • andere functionaliteit die je hebt bedacht
5. een presentatie mockup van het ontwerp op verschillende schermen voor de klant

Opzet Photoshop document:

Schets voor ontwerp, gebaseerd op stramien van de brochure

Ontwerpvoorstel:

Uitwerking in detail:

Maak van je eindontwerp een versie voor tablet

Maak van je eindontwerp een versie voor smartphone

Presenteer het ontwerp in een Mockup (gratis te downloaden) voor verschillende schermformaten