typographische
zitate
Wichtiger als die bedruckte Fläche ist in der Gestaltung die unbe­druckte.
Joachim Opfer

Typographische
Gesellschaft
München e. V.

Elsenheimerstraße 48
80687 München

info@tgm-online.de
089.7 14 73 33

Abendkurs

Living Style­guides für Designer/-innen

Georg Obermayr
Wie digitale Style­guides die konsistente Gestaltung für Ihre Websites und Appli­ka­tionen erhöhen und die Einhaltung des CD erleichtern.

Moderne, digitale Desi­gnsysteme müssen skalieren können. Sie müssen sich im robusten Alltag­s­einsatz mit unbe­kannten Inhalten bewähren. Und sie müssen mit verschie­densten Rahmen­be­din­gungen und Formen der Benut­zerin­ter­aktion umgehen können. Hier immer den Überblick zu behalten, ist nicht leicht. Ein Living Styleguide unter­stützt dabei den Prozess, um das Erschei­nungsbild, das Verhalten und die verschiedenen Elemente des User Interfaces fest­zu­halten. Auch können die Vorgaben an die Typo­grafie oder Gestaltung als Kompo­nenten hinterlegt und in ihrer unter­schied­lichen Komplexität umgesetzt werden.

Dazu hat es sich bewährt mit Para­digmen wie Atomic Design oder Design Token die Elemente eines User Interfaces isoliert zu erar­beiten. Diese werden dann wie Lego-Steine zu einem Narrativ zusam­men­gesetzt. Tools wie »Storybook« helfen dabei, die Elemente zu entwickeln, zu doku­men­tieren und mit verschiedenen Arten von Tests produk­ti­ons­tauglich zu machen. Der Styleguide, der so entsteht, ist »lebendig«: Er ist direkt mit der Umsetzung verdrahtet und immer aktuell.

Das Seminar gibt Ihnen einen Einblick in die Entstehung eines digitalen Desi­gnsystems. Wir machen den Sprung vom Mock-Up zur echten Umsetzung im Medium. Dabei verwenden wir das Tool »Storybook«, um unsere UI-Elemente zu entwickeln. Wir schauen uns an, welche Möglich­keiten zur Doku­men­tation das Tool bietet, um den Anwendern des Desi­gnsystems die Arbeit zu erleichtern. Ein weiterer Fokus des Seminars liegt auf dem Design-Testing: Mit Werk­zeugen wie visuellen Tests, Edge-Case-Testings, Inter­aktions-Tests oder Acces­si­bility-Tests erreichen wir die Robustheit, die unsere UI-Elemente für die responsive Praxis mit echten Inhalten brauchen.

2 Abende

Dienstag13.6.2023
— von 17.00 bis 20.00 Uhr
Donnerstag15.6.2023
— von 17.00 bis 20.00 Uhr

Ort: Designschule München, Sendlinger-Tor- Platz 14 (Eingang Wallstraße), 80336 München, Raum B406 (4. Stock) und Online

150 € tgm-Mitglieder und tgm-Kooperationspartner 240 € Nicht-Mitglieder

Max. 16 Teilnehmer:innen

Verbindliche Anmeldung bis 30. Mai 2023
Die tgm behält sich vor, die Veranstaltung ggfs. auch online durchzuführen.

Themen

  • Design-Para­digmen wie Atomic Design oder Design Token

  • Transfer von Prototyp in Code

  • Umsetzung von Living Style­guides mit Storybook

  • Umsetzung von Doku­men­ta­tionen und Hand­büchern

  • Real-World- und Edge-Case-Testing für Ihr Design

  • Inte­gration in CMSe und Appli­ka­tionen

Ziel

Sie erfahren, wie Sie Living Style­guides produktiv und praxi­s­tauglich in Ihren Webpro­jekten einsetzen können und somit mehr Auto­ma­ti­sierung und Skalier­barkeit erreichen.

Zielgruppe

Alle Designer:innen mit prak­tischen Erfah­rungen in Konzeption und Umsetzung von Webdesigns. Erste prak­tische Entwicklungs-Erfah­rungen mit HTML, CSS, und Java­Script im Kontext moderner Web-Anwen­dungen werden voraus­gesetzt.

Weitere Hinweise

Einen eigenen Rechner mitzu­bringen, um die Beispiele und Übungen direkt nach­voll­ziehen zu können, ist sinnvoll, aber nicht zwingend notwendig. Es ist auch ohne Rechner möglich, allen Beispielen zu folgen. Falls Sie einen Rechner haben, sollte dieser mit aktuellen Browsern, einem Code-Editor (Visual Studio Code, Sublime Text, o.ä.) und einem ersten Test-Projekt mit Storybook (https://storybook.js.org/docs/react/get-started/install) ausge­stattet sein.

Das Kernteam der tgm-Fort­­bildung konzipiert und orga­­nisiert bundesweit Fort­­bil­­dungs­­an­­gebote für die Krea­ti­v­­branche. Neben dem Kernteam arbeiten wech­­selnde Akti­v­team­­mit­­glieder am Angebot mit. Diese Fort­­bil­­dungs­­­maßnahme wurde ehren­­amtlich von Petra Marth orga­­nisiert.

Georg Obermayr

Referent, Coach und Speaker

Head of CMS der Digi­ta­l­agentur schalk & friends, Autor des Buches »Agiles Publishing« über die Orga­ni­sation und Kreation von Publishing-Erleb­nissen. Seine Veröf­fent­li­chungen behandeln Themen rund um Digital Publishing und die Medi­en­pro­duktion. Er ist ein Praktiker der digitalen Medien – komplexe Websites, Apps und Portale begleitet er von der Konzeption bis zur Umsetzung. Als Grenz­gänger zwischen Design, Tech­nologie, Marketing und Beratung stellt er immer wieder spannende Transfers zwischen prak­tischer Umsetzung und stra­te­gischer Einordnung her.

georgobermayr.de

Weitere Veranstaltungen, die Sie interessieren könnten

Workshop

Creative Coding

Vera Kaeser

Dieser Workshop bietet eine Einführung in das kreative Program­mieren. Das soge­nannte »Creative Coding« mit dem kostenlosen Open-Source-Programm p5.js, einer Java­Script-Bibliothek für Designer, Künstler, Pädagogen und alle anderen.

Samstag9.9.2023
— von 10.00 bis 17.00 Uhr
Sonntag10.9.2023
— von 10.00 bis 17.00 Uhr
Seminarteilnehmer vor seiner Arbeit
Abendkurs

Kirby CMS für Designer/-innen

Georg Obermayr

Das CMS, das sich dir anpasst, nicht umgekehrt: Mit Kirby, dem schlanken aber trotzdem mächtigen Content Management System, redak­teurs­freundliche Backends und Websites erstellen.

Dienstag19.9.2023
— von 17.00 bis 20.00 Uhr
Donnerstag21.9.2023
— von 17.00 bis 20.00 Uhr
Dienstag26.9.2023
— von 17.00 bis 20.00 Uhr
Workshop

Proto­typing mit Wow-Effekt

Alexander Altenhof

Der Kurs bietet einen Einstieg in realis­tische Prototypen ohne Program­mier­kenntnisse auf Endprodukt-Niveau mit Protopie und Desi­gnimport aus Figma, Sketch oder Adobe XD

Freitag6.10.2023
— von 17.00 bis 20.00 Uhr
Samstag7.10.2023
— von 10.00 bis 17.00 Uhr