Algemene opzet
Last updated
Last updated
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:
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.
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.
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.
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.
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.
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.
Gebruik gratis tools zoals:
om je afbeeldingen bij te snijden naar de juiste afmetingen en aspect-ratio's.
Voor productfoto's: ga voor vierkante images van 500x500px.
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.
