Menü

Matthias Edler-Golla für:
Hochschule München, Fakultät für Design

Web Design, Wintersemester 26/27

Kursleiter

Matthias Edler-Golla
matthias.edler-golla@hm.edu

Ziel der Veranstaltung

Im Kurs Webdesign (301 ESSENTIALS: Digitalkompetenzen) lernen Studierende sowohl gestalterische als auch technische Grundlagen des Webdesigns. Die Lehrveranstaltung bietet einen Einblick in aktuelle Frontend-Technologien, darunter HTML, CSS und ansatzweise Javascript.

Online-Video-Treffen

Unterrichtszeiten

jeweils donnerstags 9:00 bis 12:15 im Pavillon

Unterrichtstermine & Scripte

Achtung: Termin & Inhalt kann sich noch ändern!

  1. 08.10.26 Grundlagen Webdesign & HTML; Aufgaben-Überblick (Semester); Bewertungskriterien → Script
  2. 15.10.26 Semantic Web, CSS für Links, Rahmen und Hintergründe
  3. 22.10.26 Prototyping-Tools, CSS Selektoren, CSS Box Model, Integration von Audio & Video
  4. 29.10.26 DOM, Flexbox
  5. 05.11.26 evtl. kein Unterricht
  6. 12.11.26 Desktop-Layouts via Grid-Layout
  7. 19.11.26 Positionieren von Elementen, Media-Queries
  8. 26.11.26 Interaction, Webfonts, Webtypografie
  9. 03.12.26 keine Vorlesung, Zwischenpräsentation
  10. 10.12.26 Interaction, Webfonts, Webtypografie
  11. 17.12.26 Responsive Type, Responsive Images, Transitions & Javascript
  12. 07.01.27 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
  13. 14.01.27 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
  14. 21.01.27 Abschlusspräsentation

Prüfungen/Abgaben

  • 03.12.26 Zwischenpräsentation: Layout des eigenen Portfolios
  • 21.01.27 Abschlusspräsentation:
    • alle Übungen sowie das Portfolio sind online auf unserem Server
    • Präsentation des eigenen Portfolios (ca. 3min)

Angemeldete Student:innen

alle angemeldeten Studierenden haben einen eigenen Webspace auf dem FK12-Server

Fertigstellung Übungsaufgaben

  • die Übungsaufgaben sollten jeweils bis zur nächsten Vorlesung fertiggestellt werden!
  • alle eigenen Übungsaufgaben müssen bis zur Abschlusspräsentation eine gemeinsame Startseite haben
  • auch bei dieser wird eine gute Gestaltung bewertet!

Prüfungsmodus

  • Übungsaufgaben
  • mit einer gemeinsamen Startseite, von der aus alle Übungen verlinkt sind.
  • Semesterprojekt: eigenes Portfolio
    • muss zumindest aus Text & Bildmaterial bestehen
    • muss „von Hand“ geschrieben sein, ein rein via KI erzeugtes Arbeitsergebniss wird nicht akzeptiert!
    • soll auf unterschiedlich großen Bildschirmen gut angesehen werden können (Responsive Design)
    • HTML-, CSS- und Javascript-Code der Site muss ohne Fehler sein, der entsprechende Source-Code muss lesbar sein

Beurteilung

33% Übungsaufgaben
33% Konzept & Design des Schlussprojekts (erstellt mit Sketch, Figma, PenPot oder Adobe XD)
33% HTML/CSS/JS des eigenen Portfolios

Benötigte Software

Bitte installiert Euch folgende, kostenlose Software auf Euren eigenen Rechner:

  1. Visual Code Studio, sehr leistungsfähiger Code-Editor
  2. Alternativ könnt Ihr die Open Source Variante VSCodium verwenden (ich nutze diese Variante…). Bitte wählt dafür den für Euch passenden Installer aus, bei neuen Macs ist das die ARM 64bits Version, bei Windows kenne ich mich leider zu wenig aus…
  3. Mozilla Firefox, mein Lieblings-Browser (open source), u.a. super tauglich, um Websites zu testen
  4. Cyberduck, zum Hochladen Eurer Sachen auf den Server

Buchenpfehlungen

  • MÜNZ, Stefan & Gull Clemens (2014): HTML5 Handbuch; ISBN 978-3645603454
  • ZELDMAN, Jeffrey, Marcotte Ethan (2009): Designing with Web Standards; ASIN B00LXNO9EG
  • FREEMAN & FREEMANN (2013): HTML und CSS von Kopf bis Fuß; ISDN 978-3-86899-934-1
  • KRUG, Stephe (2014): Don't Make Me Think! A Common Sense Approach to Web Usability; ISBN 978-0321965516
  • CLARKE, Andy (2015): Hardboiled Web Design; ISBN 978-3-945749-37-1
  • CLARKE, Andy (2019): Art Direction for the Web; ISBN: 978-3-945749-77-7
  • MEYER, Eric (2017): CSS: The Definitive Guide, 4th Edition; http://shop.oreilly.com/product/0636920012726.do
  • KEITH, Jeremy (2016): Resilient Web Design; https://resilientwebdesign.com/

Online-Nachschlagwerke

jeweils sehr viele, detaillierte Informationen und Beispiele zu HTML, CSS, Javascript

weitere, interessante Websites