Opdracht 3e jaars interactief

WordPress framework

Voor de lessen programmeren en webdesign werken jullie deze periode aan een gecombineerde opdracht. Je maakt een site met CMS.

De opdracht is in grote lijnen vastgesteld. Je maakt  zelf, en waar nodig in overleg met je docent een concreet plan. Je kunt kiezen uit een van de volgende onderwerpen.

  • kookrubriek met recepten in te delen en te doorzoeken op categorieën of ingrediënten, met een score systeem
  • bioscoop met agenda, beschrijving van de films en reserveringssysteem
  • verzamelsite met portfolio’s van verschillende striptekenaars, fotografen of vormgevers
  • site voor een kledingmerk in te delen en te doorzoeken op categorieën of type keldingstuk, met een bestelmodule.


Proces

Grofweg is de opdracht onderverdeeld in 4 stappen

  1. Informatie verzamelen
    Voordat je gaat ontwerpen moet je je een aantal dingen afvragen zoals:

    • wat wil je met de site bereiken
    • wat is de doelgroep en hoe zorg je ervoor dat deze de site gebruikt
    • wat is de belangrijkste informatie, en hoe zorg je ervoor dat een bezoeker die in een oogopslag vindt
    • hoe is de informatie geordend: maak een sitemap
  2. Ontwerp: uitgewerkte interface en layout schetsen (photoshop, illustrator, fireworks)
    Bestudeer ook de lesbrief  over compositie! (pdf )
  3. Het definitieve ontwerp omzetten naar statische html & CSS
  4. Maak hiervan universeel wordpress theme, dus op iedere wordpress site te gebruiken, + een wordpress widget.

Eisen

  1. Werk volgens de hierboven genoemde volgorde: stap 1 dient afgetekend te worden door je docent voor je verder gaat met stap 2, hetzelfde geldt voor stap 2 3 en 4.
    Let op: dit is een voorwaarde. (oftewel: een werkend template zonder vooraf afgetekend ontwerp of statische html levert geen voldoende beoordeling op)
  2. Het menu van de site is dynamisch.
  3. Maak gebruik van beeldmateriaal om de site tet verlevendigen en/of ter illustratie
  4. Zorg voor relevante inhoud van je site:afhankelijk van het onderwerp plaats je minimaal 5 recepten / films / portfolio’s
  5. De site voldoet aan toegankelijkheidsrichtlijnen

Downloads en uitleg

Ontwerpproces in detail

Breng structuur aan in je ontwerpproces

  1. Informatie verzamelen
    De eerste stap in elk designproject is achterhalen voor wie je gaat ontwerpen. Ben je met een persoonlijk project bezig, dan is dat direct duidelijk. Maar als je voor een klant werkt, zul je een aantal zeer belangrijke vragen moeten stellen: bepaal wat het doel van de site is, op wie deze gericht is, welke beperkingen er zijn (bepaalde kleurschema’s, lettertypes en ‘verplichte’ afbeeldingen (voor bepaalde beeldmerken)) enz. Het is van groot belang dat je je klant en het bedrijf goed begrijpt, dit heeft grote invloed op de ontwerpoverwegingen.
  2. Je doelen bepalen
    Als je weet wie je klant is kun je gaan bepalen voor wie de website bedoeld is. In de meeste gevallen zal je klant de site willen gebruiken om bepaalde functies te vervullen. Bv verhogen van de verkopen, opbouwen van (zakelijke) relaties, communicatie met klanten of het aanbieden van (technische) documenten. Als je deze doelstellingen scherp hebt zul je een goed beeld hebben die de site gaan gebruiken/bezoeken.
  3. Persona’s opstellen
    Je moet jezelf afvragen hoe de gebruiker op elk aangedragen ontwerpelement zal reageren. Om deze informatie helder en objectief te krijgen moet je een serie gebruikers persona’s maken. Een persona is een karakterschets van een typische gebruiker / bezoeker van de website uit de beoogde doelgroep. Ontwikkel een persona voor alle grote elementen binnen de doelgroep. Geef ze allemaal een naam en wat brede karakteristieken, zoals leeftijd, geslacht, inkomensgroep, opleiding en houding.
  4. Teken een sitemap
    Als je weet voor wie je gaat ontwerpen en wat de doelen zijn kunnen we weer een volgende stap maken. We beginnen nu aan de informatie architectuur van de website. Dus hoe de content en site informatie logisch gerangschikt wordt. Een veel gebruikte aanpak hiervoor is het maken van een sitemap. Dit is een visuele voorstelling van de verschillende pagina’s waaruit de site bestaat. Teken dit op een stuk papier en denk na over het relatief belang van elk stuk informatie. (houd de doelen en persona’s in het oog). Vb: http://www.mienspace.nl/wp-content/uploads/2008/10/sitemap.png
  5. Moodboard
    Je bent nu in een fase gekomen dat je ideeën moet ontwikkelen voor je ontwerpen. Het gaat erom zoveel mogelijk materiaal te verzamelen waardoor je geïnspireerd raakt. Verzamel op een manier die je zelf wil: met knipsels uit tijdschriften, screenshots van het web.
    Opdracht: verzamel zoveel mogelijk beeldmateriaal
  6. Schetsen en storyboards
    Neem alle voorgaande producten bij de hand en maak op basis daarvan een serie kleine schetsen met een ontwerpoplossing waarin al deze elementen in een enkele lay-out samen komen. Elke ontwerpbeslissing is gekoppeld aan de informatie die je in de vorige stappen hebt verzameld.
  7. Reflecteren
    Dit is misschien wel de allerbelangrijkste stap in het designproces. Je moet de tijd nemen  en even een stapje terug doen. Reflecteer op het werk dat je gedaan hebt, kijk naar de ontwerpoplossing die je bedacht hebt en wat dit betekent voor usability en de (bedrijfs) doelstellingen. Bedenk hoe de gebruikers zouden reageren. Is het ontwerp toepasselijk voor het bedrijf en de doelstellingen? Je zou naar de mening van anderen kunnen vragen.
  8. Ontwerpaanpak kiezen
    Als je tevreden bent over je schetsen dan ga je deze eerst uitwerken in een eerste digitale mockup(is een visuele presentatie van een ontwerp van een website of pagina layout die in grote lijnen duidelijk maakt hoe het uiteindelijke resultaat er uit zal zien). Je kunt dat in Photoshop, Fireworks, Illustrator doen. Ga uit van een schermbreedte van 1024px. Kies de ondersteunende afbeeldingen bewust en grijp vaak terug naar je moodboard voor de juiste associaties en kleuren te bereiken. Spendeer nog niet teveel tijd aan details. (je kunt stockfoto’s gebruiken van http://www.sxc.hu/home , ook tutorials) Voor kleurschema’s: http://kuler.adobe.com
  9. Ontwerpprototype
    Je hebt nu een aantal verschillende pagina’s ruw opgemaakt. Je moet nu testen of je ontwerpen effectief zijn. Communiceren ze waarvoor ze bedoeld zijn, zijn alle onderdelen aanwezig etc… . Zijn alle elementen die je ziet logisch, is de navigatie duidelijk. Laat een ander er naar kijken. Stel vragen over de onderdelen.