Algemene info

Homepage op desktop

Algemene Info

Op deze pagina vind je alle informatie over de projectopdracht die je gedurende het semester zal uitvoeren. De projectopdracht bestaat uit verschillende deelopdrachten die je stap voor stap zal uitvoeren. Je zal een volledige, responsieve webshop bouwen voor een fictief bedrijf. De webshop zal verschillende pagina's bevatten, waaronder een homepage, productpagina's, een contactpagina, en een werkend winkelmandje.

Deelopdrachten

De projectopdracht is opgedeeld in 7 deelopdrachten en wordt afgesloten met een presentatie. De deelopdrachten zijn:

1. Concept & content

2. Development mobiele website met HTML en CSS

3. Development responsive webshop

4. Contact page formulier

5. Winkelmandje & wishlist

6. Contact page kaartje

7. Dynamische content

Elke deelopdracht bouwt voort op de vorige. Zorg ervoor dat je elke deelopdracht grondig doorneemt en uitvoert.

Designs

Voor deze opdracht baseer je je op de volgende designs op de Figma Community Page. Deze designs pas je aan naar jouw kleuren en lettertypes. (Zie Concept & content)

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

• Deze Figma file bestaat uit 2 pagina's: de mobile en de desktop designs.

TIP: Bekijk de designs 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.

Tips

Copywriting

• 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.

Afbeeldingen

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 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, en stelt ons in staat om te controleren waar jij je afbeeldingen vandaan hebt gehaald.

• 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:

  • ⭐️ Photopea

  • 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.