Seminar/Schulung: Coding für Designer

In diesem Workshop lernen Design-Teams wie sie mit Code layouten und Prototyping betreiben können. Dieses Wissen führt zu besseren Design-Entscheidungen auch außerhalb des Browsers. Zudem wird die Zusammenarbeit mit der Entwicklung verbessert.

Kurzbeschreibung

Die Gestaltung von Websites ist kompliziert: Verschiedene Browser, Betriebssysteme, Displaygrößen, Auflösungen, Bedienkonzepte, Layout-Varianten und Komponenten-Zustände …
Die Leinwand im Web ist der Browser und die Materialien zum Gestalten heißen HTML, CSS, JavaScript und SVG. Nur wer den Browser gut kennt und die Materialien versteht, kann erfolgreich Websites gestalten.

In diesem Workshop erwerben Sie die notwendigen Coding-Skills um mit den Developer-Tools von Firefox und Chrome direkt im Browser gestalten zu können.

Sie lernen anhand praktischer Übungen kennen, wie flexible Gestaltungsraster erstellt werden, und wie variable Schriftgrößen und daraus abgeleitete Proportionen funktionieren. Wir zeigen Ihnen, was es bei Responsive Design, Bildern und Grafiken zu beachten gibt, und wie Animationen und Mouse-Over-Effekte gestaltet werden.

Das Ziel dieses Workshops besteht nicht darin, »production ready« Code zu schreiben. Vielmehr zeigen wir Design-Teams wie sie mit Code layouten und Prototyping betreiben können. In der Zusammenarbeit mit Frontend-Teams werden Sie danach spürbar besser aufgestellt sein. Und mit Sicherheit den Browser als weitere Gestaltungsumgebung in Ihr Toolset aufnehmen.

Inhalte

Die folgenden Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig angefragt. Gerne passen wir die Agenda auf Ihre individuellen Anforderungen hin an, bzw. beziehen aktuelle Praxisprojekte mit ein. Wir stimmen uns dazu im Vorfeld der Schulung persönlich mit Ihnen ab.

Die Developer-Tools der Browser

Bestehende Websites analysieren
Inhalte und HTML/CSS ändern
Schriften, Farben, Layouts und Effekte gestalten
Geräte und Geräteeigenschaften simulieren
Änderungen speichern und exportieren
Layouts »from scratch«
Testing und Audits

HTML/CSS-Basics

HTML/CSS-Syntax
Grundlagen Barrierefreiheit
Farben & Verläufe
Schriften
Abstände

Typografie

Schriften und Webfonts
Mikrotypografie
Relative Schrifteinheiten und modulare Skalierung
Mehrsprachige Layouts

Flexible Layouts & Gestaltungsraster

Positionierung und Layoutaufbau
Mehrdimensionale Gestaltungsraster mit »CSS Grid«
Lineare Layoutbereiche mit »Flexbox«
Browserabhängige Dimensionen
Responsive Design
Intrinsic Design

Grafiken und Effekte

Fotos und Grafiken
Icons & SVG
Masken
Blend Modes

Interaktionen & Animationen

States
Scrolling
Übergänge und Animationen

Dozent: Jonas Hellwig

Jonas Hellwig ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Feedback zu unseren Schulungen

Wir bedanken uns für die tolle Schulung. Es wurde uns wirklich viel gezeigt, was wir so noch nicht wussten oder nicht richtig angewendet haben. Wir freuen uns schon darauf, unsere nächsten Projekte auf eine neue und ordentlichere Art anzugehen :-).

Juli 2026, Emily Klassen, ahorn. gmbh – agentur für gestaltung und medienproduktion
Wir haben ein klassisches Kreativteam auf Figma geschult bekommen – keine leichte Aufgabe, aber Jonas als Trainer hat das souverän gemacht. Er versteht es, die beiden Welten Kreation und Development mit fundiertem Hintergrundwissen zu verbinden sowie die Vor- und Nachteile verschiedener Workflows aufzuzeigen. Er konnte wirklich jede der Fragen aus dem Team immer gut und plausibel erklären. Das Team ist nun ready for Figma.

Juni 2026, Kai Baumann, Creative Director, Olixir
Ich kann die Online-Schulungen der Kulturbanausen absolut empfehlen. Dieses Team weiß einfach, wovon es spricht, und kann sein Wissen auf Augenhöhe vermitteln. Ich, als Webdesignerin, habe in den 2 Tagen Workshop meine Fähigkeiten im Umgang mit Figma erheblich verbessern können und wirklich wertvolle Impulse für einen besseren Workflow erhalten, von Konzeption über Design bis Web-Development. Vielen Dank und bis zum nächsten Mal!

Juni 2026, Adriani Schmidt, fellowz GmbH