Opdrachten: Webdesign

Om wat voor soort bedrijf gaat het? Er zijn verschillende soorten websites. We hebben een onderverdeling gemaakt in tien categorieën:
  1. Bedrijfspresentatie
  2. Voorlichting
  3. Educatief
  4. Nieuws
  5. Portal
  6. Zoekmachine
  7. Social media
  8. Webwinkel
  9. Entertainment
  10. Intranet/extranet
Zoek bij elk item een link en plaats deze in een Indesign of Word. Maak telkens een printscreen en geef kort uitleg wat deze website aanbiedt. Bekijk hier een voorbeeld.

In een concurrentieanalyse worden websites van concurrenten van de klant of branchegenoten onderzocht. Vraag aan de klant een lijst met websites van concurrenten. Ga zelf op internet ook op zoek naar concurrenten. Het is best mogelijk dat de klant niet op de hoogte is van alle concurrerende websites.

Bezoek ook een aantal websites die misschien niet concurrerend zijn voor de klant maar die voor de ontwikkeling van de website wel interessant kunnen zijn, zoals bedrijven uit een soortgelijke branche, overkoepelende organisaties en internationale bedrijven uit dezelfde branche. Neem de concurrentieanalyse als bijlage op in het Internet Project Plan.

Je kunt een korte en een uitgebreide concurrentieanalyse uitvoeren.

Korte concurrentieanalyse

Bij de korte concurrentieanalyse bekijk je maximaal vijf websites van concurrenten en vul je de korte checklist (.pdf) in. Om deze korte checklist beter te begrijpen moet je zeker ook de uitgebreide checklist (.pdf) bekijken. Na het invullen van de checklist beschrijf je per website wat je goed en zwak vindt aan de website. Dit doe je per website in tien tot twintig regels.

Bespreek 1 website volgens de korte analyse.

Uitgebreide concurrentieanalyse

Je kunt ook een uitgebreide concurrentieanalyse doen, maar dit moet het budget van de opdrachtgever toelaten. Het kost namelijk meer tijd (en dus meer geld). In een uitgebreide analyse evalueer en vergelijk je een uitgebreid aantal punten. Hiervoor vul je voor elke site de uitgebreide checklist (.pdf) in.

Het aantal websites kan bij een uitgebreide concurrentieanalyse sterk variëren, het kan om vijf concurrerende websites gaan, maar ook om twintig. Maak een overzichtelijk rapport van de analyse, compleet met screendumps. Presenteer de resultaten in een overzichtelijke tabel, geef per website een uitgebreide beschrijving en voeg per website twee tot vier relevante screendumps toe. Zorg er ook voor dat de screendumps in kleur worden geprint.

Bespreek 1 website volgens de uitgebreide analyse.

Bekijk hier een voorbeeld.

We gaan ons verdiepen in het denkwerk dat vooraf gaat voor je een statisch ontwerp maakt van je website.

Dit wordt ook wel UI flowchart genoemd. Wat is het verschil tussen UX en UI? UI staat voor User Interface en UX voor User Experience. Wij gaan ons vooral verdiepen in het Design dus User Interface. Kies een bedrijfswebsite, dit kan gaan over een bedrijf van snoepgoed, vleeswaren, loodgieters, enz... Maak een vergelijkende studie van 2 concurrenten waar je navigatie in een eenvoudige flowchart plaats. Geef ik onder onder een kort besluit of je de namen van de knoppen goed gekozen vind.

Schrijf een conclusie. Is er een verschil van inhoud tussen beiden? Ontbreekt er een knop die jij belangrijk vindt? Hoe onderscheidt het ene bedrijf zich van de rest? Wat biedt hij extra aan?

Bekijk hier een voorbeeld.

Bekijk de website structuur Kies uit de tien soorten kook websites één kookwebsite uit die je gaat analyseren. Gebruik de sneltoets F12 in de browser. Maak een printscreen van de gekozen website en plaats deze op 20% dekking in Illustrator. Op een nieuwe laag teken je de belangrijkste elementen. Vaak zie je dezelfde namen opduiken: container, section, nav, header, article, footer, aside, article, figure, ... Kijk goed naar de verdeling ... eerst in rijen en nadien in kolommen. Maak de nesting (groepenp) goed zichtbaar. Werk bijvoorbeeld in verschillende kleuren.
Download de uitleg als PDF-bestand: Beeldvorming Kies 2 websites waarvan je de beeldvorming bespreekt.
  1. De eerste stijl weerspiegelt luxe en duurzaamheid (doelgroep zakelijk/professioneel).
  2. De tweede is speels en kleurrijk (doelgroep kinderen).
Bespreek volgende items in detail:
  • De kleuren en hoe ze het ontwerp beïnvloeden (https://www.kleurenpsychologie.be)
  • De typografie (doel, lettertype, stijl, leesbaarheid en opvallend) Tip WhatFont App + F12 toets
  • De lay-out, is de stijl in overeenstemming met het beeld? Het stramien is in weinig of veel kolommen verdeeld ? Veel wit ruimte er rond? Harmonisch of dynamisch?
  • Persoonlijke mening (minimum 3 + en -): Wat is goed en minder goed in het beeldverhaal?
Bekijk hier een voorbeeld.
Start met het ontwerpen van een nieuwe huisstijl, vertrekkend van een nieuw logo voor je kooksite. Tip: deel van je voornaam + recept in verwerken. Maak een website ontwerp. Kies uit volgende grafische programma’s: Photoshop, Illustrator, of UX-Design. Denk na over volgende items:
  • Kleuren
  • Typografie/lettertype
  • Compositie
Bekijk hier een voorbeeld vanuit XD CC ontworpen.
Download de uitleg PDF-bestand: Doel_Doelgroepen
  1. Activiteitenanalyse: Een gerichte analyse maken van de behoeftes van de klant
  2. Doelgroepanalyse: De bezoeker. Wie is het? Wat komt hij doen?

1. Activiteitenanalyse of behoefte-analyse

Een behoefte-analyse is een onderzoek naar een behoefte van je organisatie. Daarmee zorg je ervoor dat een eventuele aanbesteding gericht zal zijn op het oplossen van het juiste probleem. Los van het bovenstaande blijft de vaststelling dat verkopers nog altijd niet de verschillende doelen van een goede behoefteanalyse kennen. Nog eens op een rijtje:
  • In de eerste plaats: het creëren van een goede rapport met de klant.
  • De motieven van de klant begrijpen, weten waarom de klant iets nodig heeft.
  • Weten wat de klant nodig heeft
Stel jezelf de volgende vragen
  • Wat is het probleem van de huidige website? Wat is de aanleiding van de website?
  • Wie ervaart het probleem? Intern team of bezoekers?
  • Waar is de visie van het bedrijf? De boodschap?
  • Wat is de bestaande huisstijl?
Verzamel zo veel mogelijk relevante informatie! Met behulp van deze uitgebreide vragenlijst kan je aan de slag!

2. Doelgroepanalyse

  • primaire doelstellingen: moeten gehaald worden
  • secundaire doelstellingen: mogen gehaald worden
  • Tot welk "type" website behoort het bedrijf (geef dit weer in een diagram)
    1. kennis: informatie
    2. houding: imago
    3. gedrag: interactie (taken die de bezoeker moet doen bv.webshop)
Opdracht: Kies 1 bedrijfswebsite waarvoor je een nieuwe of website wilt maken. Maak een doelgroep analyse aan de hand van bovenstaande inhoud en vragen. Bekijk hier een voorbeeld.
Maak voor je gekozen bedrijf volgend stappenplan:
  1. Keuze van bedrijf: algemeen, geschiedenis en visie,
  2. Behoefteanalyse
    1. Product-of /en dienstenanalyse
    2. Doelgroepanalyse
  3. Concurrentieanalyse
  4. Functioneel ontwerp (flowchart)
  5. Grafisch ontwerp
  6. Technisch ontwerp (wireframe)
Bekijk hier een voorbeeld.