Webshop: Van moodboard naar ontwerp

• newEditor
• MVI
• Middelbare school
• vmbo b, k
• Leerjaar 3

LEs 1 - Wat is een poster met een boodschap?

Learning objective

STARTKLAAR

Jas aan de kapstok

Telefoon in de kluis

Pak een stoel en ga voor mijn bureau zitten

1

minute

00

second

add30s

CHECK IN

Hoe gaat het vandaag?

WELKOM

Meneer Mendes Dias

Les 04: Van moodboard naar ontwerp

Keuzevak: Webshop

Lesdoel

Aan het einde van deze les kan ik schetsen hoe de homepage van mijn webshop eruit komt te zien.

PROGRAMMA

• Terugkijken op de moodboards

• Kort voorkennis activeren

• Bekijken wat een wireframe is

• De indeling van een homepage leren

• Een schets maken van onze webshop

• Afsluiten met een korte reflectie

Terugblik: Stijl van je webshop

Welke sfeer heb jij gekozen?

Tip: Er zijn geen foute antwoorden, we leren met elkaar door het vergelijken.

Terugblik: Stijl van je webshop

Welke kleuren passen bij jouw webshop?

Tip: Er zijn geen foute antwoorden, we leren met elkaar door het vergelijken.

Terugblik: Stijl van je webshop

Past jouw stijl bij je doelgroep?

Tip: Er zijn geen foute antwoorden, we leren met elkaar door het vergelijken.

Voorkennis activeren

Waar kijk je als eerste wanneer je een webshop opent?

Tip: Er zijn geen foute antwoorden, we leren met elkaar door het vergelijken.

Je hebt de sfeer van je webshop bepaald. De volgende stap is de indeling van je website ontwerpen. Ontwerpers doen dat eerst met een wireframe.

Webshop Concept & Ontwerp

Wat is een wireframe?

Tip: Er zijn geen foute antwoorden, we leren met elkaar door het vergelijken.

Webshop Concept & Ontwerp

Een wireframe is:

• een schets van een website

• zonder kleuren

• zonder foto's

• alleen de indeling

Het helpt je bepalen waar alles komt te staan.

Webshop Concept & Ontwerp

Je bepaald al van te voren waar onderdelen van een website zitten.

• logo

• menu

• banner

• product

• knop

Webshop Concept & Ontwerp

Welke onderdelen zitten vaak op de homepagine van een webshop?

Tip: Er zijn geen foute antwoorden, we leren met elkaar door het vergelijken.

Webshop Concept & Ontwerp

Een homepage bevat vaak:

• logo / titel

• menu

• grote afbeelding

• product of aanbieding

• knop (shop nu)

Opdracht: Schets je homepage

Je schets moet bevatten:

• titel of logo

• menu

• grote afbeelding

• product

• knop

• Presenteer aan elkaar of individueel aan de leraar

Werkvorm: Individueel

Opdracht: Simulise

• Upload je schets in Simulise

• Beantwoord alle vragen in Simulise

Werkvorm: Individueel

Delen & afsluiten

Lesdoel:

Aan het einde van deze les kan ik schetsen hoe de homepage van mijn webshop eruit komt te zien.

2 korte vragen:

• Is jouw homepage duidelijk voor een bezoeker? Waarom wel of niet?

• Past de indeling van jouw webshop bij jouw moodboard en stijl?