Workshop: Coding for Designers
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 folgende Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig gewünscht. Der Umfang beträgt, abhängig von den Vorkenntnissen und dem Anteil praktischer Übungen, meist zwischen 8h – 24h. 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-Syntax
- CSS-Syntax
- Farben
- Schriften
- Abstände
- Browser-Support
- Progressive Enhancement
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
- Verläufe
- Transformationen
- Filter
- Masken
- Blend Modes
- SVG
Interaktionen & Animationen
- Mouse Over-Effekte und Interaktionen
- Animierter Seitenaufbau
- Selbstablaufende Animationen
Voraussetzungen und Zielgruppe
Für diesen Workshop benötigen alle teilnehmenden Personen ein eigenes Notebook mit installiertem Firefox- und Chrome-Browser sowie einem der folgenden drei Grafikprogramme: Illustrator, XD oder Sketch.
Der Workshop richtet sich an gestalterisch arbeitende Menschen mit guten Vorkenntnissen in branchentypischen Grafik-Programmen. Wir gehen davon aus, dass eine Affinität zum Web Design vorhanden ist, und dass die zügige Handhabung des eigenen Computers keinerlei Probleme darstellt.
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.