Algemene opzet

Homepage op desktop

Algemene Info

Je opdracht bestaat uit het maken van een fictieve webshop met minstens 6 producten of diensten die binnen jouw interesseveld vallen. De webshop moet worden geschreven in HTML5, CSS3 en JavaScript.

De opdracht is opgedeeld in 6 deelopdrachten:

1. Concept & content

2. Development mobiele website met HTML en CSS

3. Development responsive webshop

4. Contact page (met Leaflet en formulier)

5. Winkelmandje & wishlist

6. Dynamische content

Tijdens de laatste 2 labo's kom je je webshop die je doorheen het semester gebouwd hebt presenteren voor de klas. Deelopdracht 6 is dus je finale inzending.

Inzending via Digitap

Vòòr het verstrijken van iedere deadline lever je elke deelopdracht in via Digitap onder het hoofdstuk projectopdracht. Voor deadlines: check Digitap.

digitap-projectopdracht.png

Wireframes

De wireframes van de webshop zijn terug te vinden op deze Figma Community Page.

• Klik "Open in Figma", en maak een account aan.

• Deze Figma file bestaat uit 3 pagina's:

  • Mobile

  • Desktop

  • Components (enkel nuttig voor de ontwerper aka. de lector)

Bekijk de wireframes steeds op Figma, gezien ze nog geüpdatet kunnen worden doorheen het semester.

Mobile-First

We werken volgens het mobile-first principe. Dit betekent dat je de website in eerste instantie optimaliseert voor smartphones. In een latere fase (deelopdracht 3) zal je ook optimalisaties toevoegen voor tablets, laptops en desktops.

Copywriting Tips

• Alle teksten voor je webshop moeten in het Nederlands worden geschreven.

• Vermijd schrijffouten. Gebruik spellingscorrectie.

• Kopieer geen teksten van het internet waar copyright op rust. Zorg ervoor dat je originele teksten gebruikt.

• AI Tools: Maak gerust gebruik van AI, zoals ChatGPT, om teksten te genereren of inspiratie op te doen.

• Houdt teksten beknopt en helder.

• Laat je tekst op het laatste eens nalezen door een andere persoon.

Afbeelding Tips

Rechtenvrije Afbeeldingen

• Gebruik enkel rechtenvrije afbeeldingen die je zelf hebt gemaakt of die beschikbaar zijn via platforms met een vrije licentie, zoals:

  • Unsplash

  • Pexels

  • Pixabay

• Tip: Kun je geen perfecte afbeelding vinden voor je product? Kies dan voor een meer generieke afbeelding die het idee van je product goed weergeeft. Bijv. voor een webshop die voetbalschoenen verkoopt, kun je zoeken naar generieke, rechtenvrije foto's van voetbalschoenen.

• Afbeeldingen gegenereerd met AI kunnen ook, maar probeer origineel te zijn.

Bronvermelding

• Voeg altijd een bronvermelding toe bij rechtenvrije afbeeldingen, bijvoorbeeld in de figcaption van de afbeelding. Dit is een vriendelijke geste naar de fotograaf en maakt het gemakkelijk voor de lectoren om de bron te verifiëren.

• Zorg ervoor dat elke afbeelding een duidelijke bestandsnaam heeft, bijv. product-zaadjes-lavendel.jpg.

• Zorg voor een goede organisatie van foto's in een mappenstructuur.

Afbeelding Resizing & Aspect-Ratio's

• Gebruik gratis tools zoals:

  • Canva

  • Adobe Express

  • Imagy.app

  om je afbeeldingen bij te snijden naar de juiste afmetingen en aspect-ratio's.

• Voor productfoto's: ga voor vierkante images van 500x500px.

Coding Guidelines

Zorg ervoor dat alle code die je schrijft voldoet aan de Coding Guidelines. Volg deze richtlijnen zorgvuldig om een consistente en professionele webshop te bouwen.