# Aufgabe M152-b | [Storytelling, Wireframes, Mockups]
Zeitbedarf:

Aufwand ca. 3 Modul-Halbtage (12 Lektionen) plus die eigentliche Umsetzung bis zum Modulende


## Inhalt Ihrer Webseite

Auf Ihrer Webseite müssen Sie folgendes mindestens erklären (=Inhalte -> überlegen Sie die "gute" Reihenfolge selber):

Ihr Styleguide
Ihr Webseitenkonzept (inkl. Sitemap)
Ihre Galerie
Ihr Impressum 
Ihre Erklärungen bezüglich Urheberrecht 
Ihr Minifilmprojekt und die Einbindung des Filmes in eine Webseite
Seite wie man Animationen mit CSS macht (mehrere)
Seite wie man Animationen mit "Multi-Gifs" macht und die in die Webseite einbindet
Seite was die Unterschiede der Bildformate sind 
Seite was die Unterschiede zu den Videoformaten & Audioformate sind 
Ihre Reflexion (in der man sieht, welche "learnings" und welche Erfahrungen Sie gemacht haben)

--> Upload auf Ihre Webseite im Internet. 

Gehört zum Modul-Bewertungsraster (K1) M152_Bewertungsraster - Google Tabellen
 

## Planen Sie Ihre Webseite

### Storytelling 
1.)  ca. 30-40 min

Lesen Sie Kap. 3 im Buch (S. 40-90 , aber bitte nicht jeden Buchstaben -> überflugsmässig)

https://bscw.tbz.ch/bscw/bscw.cgi/d31695006/SaewertRiempp2019_Digital-Storytelling-im-Web_9783658230555.pdf

und lassen Sie sich davon inspirieren,

 
### Mockup, Wireframes
2.) ca. 30-40 min

Studieren Sie, was Mockups und Wireframes sind und schreiben Sie mit eigenen Worten in 3-4 Sätzen, was der Unterschied ist und wozu man das braucht. (Abgabe in txt-File hier im Auftrag) 

https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup/

https://bscw.tbz.ch/bscw/bscw.cgi/31665901

 
### Wireframe anwenden
3.) ca. 60-80 min

Erstellen Sie eine Planung Ihrer Webseite mit einem Wireframe-Tool (oder skizzieren Sie von Hand / dann scannen oder fotografieren) und stellen Sie die entstanden Bilder/Grafiken/Scans in Ihrer neuen Webseite dar.

wieviele und welche Seiten
was ist in Etwa drauf (keine Details!!)

https://www.elmastudio.de/eine-neue-webseite-entsteht-teil-2-die-layout-vorlage-mockup/


Und machen Sie es so, wie diese Firma es für ihre Kunden anbietet.

https://www.snowflake.ch/ux-design/