Ga naar hoofdinhoud

Deelopdracht 1 - Webshop Concept & Content

Lees eerst de Projectinformatie. Daar vind je de wireframes, de deadlines en de regels voor het hele project.

In deze deelopdracht bereid je je webshop voor: je bepaalt het concept, de huisstijl en alle content (teksten en afbeeldingen). Je programmeert nog niets. Neem hier voldoende tijd voor: hoe beter je content, hoe vlotter het programmeren later verloopt.

Alles wat je schrijft, komt in één Markdown-document styleguide.md met vier secties: Situering, Producten, Auteur en Styleguide.

Houd bij alle teksten rekening met de copywriting tips en bij alle afbeeldingen met de afbeeldingstips.

1. Situering​

Kies een onderwerp dat je interesseert en waarvoor je minstens 6 verschillende producten of diensten kunt bedenken. Lukt dat niet, kies dan een ander onderwerp.

Schrijf onder de titel Situering:

  • de naam van je webshop;
  • een korte, wervende omschrijving: wat is het doel van je webshop en waarom zou een bezoeker bij jou kopen?

Deze tekst komt later op de homepage.

Tip: Laat je omschrijving de toon en sfeer van je webshop uitstralen.

2. Producten​

Beschrijf onder de titel Producten je 6 producten of diensten. Geef elk een eigen subtitel met:

  • Titel
  • Omschrijving: minstens 1 paragraaf
  • Prijs
  • Specificaties: 6 kenmerken, telkens met een label en een waarde (bv. Materiaal: eikenhout)
  • Bron van de afbeelding (zie stap 3)

Kies ook één product dat je in de kijker zet. Dat product krijgt op je webshop een label (badge), bv. Verlaagde prijs, Uitgelicht of Keuze van de redactie. Noteer bij dat product de tekst van het label.

Tip: Maak in je omschrijving duidelijk wat de voordelen zijn. Waarom zou een bezoeker net dit product kiezen?

3. Productafbeeldingen​

Zoek voor elk product een afbeelding en zorg dat:

  • alle afbeeldingen bijgesneden zijn tot 500x500 pixels;
  • je de bron (link) noteert onder de juiste productomschrijving.

Tip: Afbeeldingen met dezelfde afmetingen geven je webshop een nette, professionele uitstraling.

Ontwerp een eenvoudig, herkenbaar logo dat past bij je webshop, bijvoorbeeld met FreeLogoDesign.org.

Tip: Denk aan de identiteit van je webshop. Past een speelse, strakke, moderne of klassieke stijl het best bij wat je verkoopt?

5. Auteur​

Schrijf onder de titel Auteur een korte bio: wie ben je en wat is je professionele achtergrond?

Voeg ook een professionele foto van jezelf toe. Die hoeft niet formeel te zijn, maar wel scherp en goed belicht. Vermijd selfies en drukke achtergronden.

6. Styleguide​

Beschrijf onder de titel Styleguide je kleurenpalet en lettertype(s).

Kleurenpalet​

Kies deze 4 kleuren:

  • background-color: achtergrondkleur
  • text-color: tekstkleur
  • primary-color: kleur voor knoppen
  • secondary-color: kleur voor accenten

Tips:

  • Kies eerst tussen een light theme (lichte achtergrond, donkere tekst) of een dark theme (donkere achtergrond, lichte tekst).
  • Voorzie per kleur 3 tinten: lichter, normaal en donkerder. Zo heb je genoeg variatie in je ontwerp.
  • Gebruik Happy Hues, Coolors of Adobe Colors om kleuren te vinden die goed bij elkaar passen.
  • Zorg voor voldoende contrast tussen tekst en achtergrond.

Lettertype​

Kies één of twee lettertypes op Google Fonts. Gebruik je een tweede lettertype (bv. voor titels), zoek dan een combinatie die goed samengaat via FontPair.

Tip: Kies goed leesbare lettertypes, zeker voor langere teksten.

Deliverables​

Plaats alles in je private projectrepository onder de GitHub-organisatie van dit vak (zie Projectinformatie):

  • styleguide.md met de secties:
    • Situering: naam en omschrijving van je webshop
    • Producten: titel, omschrijving, prijs, 6 specificaties en afbeeldingsbron per product, plus de badge-tekst van je uitgelicht product
    • Auteur: korte professionele bio
    • Styleguide: kleurenpalet en lettertype(s)
  • Een map assets/ met:
    • de 6 bijgesneden productafbeeldingen
    • je logo
    • een professionele foto van jezelf