[web] 1e jaar periode 4

Opdrachten periode 4

In periode 4 van het 1e jaar maak je voor het vak webdesign minimaal 2 websites. Deze periode richten we ons voornamelijk op vormgeving en visuele communicatie. We werken aan losse opdrachten. De opdrachten die je in de les uitvoert tellen  voor 70% mee voor het het cijfer van periode 4. De toets in de toetsweek voor 30%. Als je alle opdrachten hebt gemaakt, dan zou de toets aan het einde geen probleem mogen zijn. De 1e opdracht wordt hier beschreven.

Redesign Website

  • Je zoekt een site en beschrijft wat er veranderd moet worden.
  • Je zoekt in de klas een medestudent die je klant/uitvoerder is.
  • Studenten die niet iemand anders kunnen vinden voeren onderstaande opdracht uit.
  • De keuze voor een medestudent moet in de eerste les gemaakt zijn.
  • De opdracht loopt over vier lessen, eind van de vierde les moet het af zijn. De week erop volgt de volgende opdracht.
  • Volg de stappen 1 tot en met 7 zoals verderop beschreven.

nikevision.com

De site is niet up to date: de wintercollectie staat er nog op. Hoog tijd om de nieuwe collectie te plaatsen. Dat is meteen een mooie gelegenheid om ook opnieuw naar de indeling te kijken, en het menu. Kan dat beter?

De opdracht is om de bestaande site te ontdoen van zijn winterjas. De nieuwe collectie zomerbrillen komt op de site. En het menu moet anders.

Hoe pak je dat aan?

Om het overzicht te houden maak je een projectmap waarin je alles bij elkaar houdt. Daarin ook de websitemap zoals je dat gewend bent.

Structuur aanbrengen in je ontwerpproces

Het ontwerpproces vormt het hoofdbestanddeel van deze opdracht. Werk de onderstaande onderdelen uit en laat ze zien aan je docent. Ieder onderdeel telt mee voor je cijfer.

  1. Informatie verzamelen
    De eerste stap 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 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)) enzovoorts. Voor kleurschema’s zie http://kuler.adobe.com
    Opdracht: Noteer welke kleuren je gaat gebruiken en welk lettertype
  2. Sitemap
    Welke menu-elementen krijgt de site. Hoe is de inhoud van de site logisch gerangschikt? Een veel gebruikte aanpak om deze vraag te beantwoorden is het maken van een sitemap.
    Opdracht: Maak een sitemap
  3. Moodboard
    Ga zoveel mogelijk materiaal verzamelen waardoor
    je geïnspireerd raakt. Verzamel op een manier die je zelf wil: bijvoorbeeld met knipsels uit tijdschriften of screenshots van het web.
    Opdracht: verzamel zoveel mogelijk beeldmateriaal
  4. Wireframe
    Hoe is de informatie gerangschikt op het scherm? Bedenk eerst welke onderdelen op de site komen en maak een schetsmatige weergave van de schermindeling: waar komt het menu, waar komen de afbeeldingen, waar de teksten? Je mag dit digitaal of op papier uitwerken. Een handig hulpmiddel is https://gomockingbird.com/
  5. Schetsen
    Neem alle voorgaande producten bij de hand en maak op basis daarvan 2 schetsen met een ontwerpoplossing waarin alle elementen in een enkele lay-out samen komen. Elke ontwerpbeslissing is gekoppeld aan de informatie die je in de vorige stappen hebt verzameld.
    Opdracht: Maak 2 schetsen
  6. Ontwerp
    Als je tevreden bent over je schetsen dan ga je deze eerst uitwerken in een digitale mockup (een visuele presentatie van een ontwerp van eenwebsite of pagina layout die in grote lijnen duidelijk maakt hoe het uiteindelijke resultaat er uit zal zien). Je kunt dat in Photoshop, Fireworks of Illustrator doen. Ga uit van een schermbreedte van 1024px. Kies de ondersteunende afbeeldingen. Je kunt stockfoto’s gebruiken van http://www.sxc.hu/home.
    Opdracht: maak 1 gedetailleerde mockup.
  7. Uitvoeren
    Pas als de klant tevreden is met het ontwerp ga je het ontwerp uitvoeren in html en css