mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-24 10:41:56 +01:00
65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
|
# Aufgabe M152-b: Storytelling, Wireframes, Mockups
|
||
|
|
Zeitbedarf:
|
||
|
|
ca. 2-3 Modul-Halbtage (8-12 Lektionen) plus die eigentliche Umsetzung bis zum Modulende
|
||
|
|
|
||
|
|
## Planen Sie Ihre Webseite
|
||
|
|
|
||
|
|
|
||
|
|
### 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
|
||
|
|
|
||
|
|
|
||
|
|
### Storytelling
|
||
|
|
1.) ca. 30-40 min
|
||
|
|
|
||
|
|
Lesen Sie Kap. 3 im Buch (S. 40-90 , aber bitte nicht jeden Buchstaben -> überflugsmässig)
|
||
|
|
- [SaewertRiempp2019_Digital-Storytelling-im-Web](../x_gitressourcen/Buecher_Skripts_Praesentationen/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://app.moqups.com](https://app.moqups.com)
|
||
|
|
- [https://thedigitalprojectmanager.com/de/die-10-besten-wireframe-tools](https://thedigitalprojectmanager.com/de/die-10-besten-wireframe-tools)
|
||
|
|
- [https://www.iqual.ch/de/internet-glossar/mockups](https://www.iqual.ch/de/internet-glossar/mockups)
|
||
|
|
- [https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup](https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup)
|
||
|
|
- [https://www.lucidchart.com/pages/de/was-sind-website-wireframes](https://www.lucidchart.com/pages/de/was-sind-website-wireframes)
|
||
|
|
- [https://www.iqual.ch/de/internet-glossar/wireframes](https://www.iqual.ch/de/internet-glossar/wireframes)
|
||
|
|
|
||
|
|
|
||
|
|
### 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 (Wichtig: 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/
|
||
|
|
|