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 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 HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben UX/UI-, Frontend- & Responsive Design hat er sich auf Workflow-Optimierungen im Design-Prozess spezialisiert und ist Gründer der Agentur kulturbanause® (kulturbanause.de). Auf blog.kulturbanause.de veröffentlicht er interessante Artikel, Tipps und Tutorials zum Thema Web Design. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Website-Projekten.


Feedback zu unseren Inhouse-Schulungen

Super Seminar! Es wird ein breiter Überblick über responsives Webdesign gegeben. Zu empfehlen für alle, die mit Websites zu tun haben.

April 2019, Anika Donner, Projektmanagerin online, DEAG

Wahnsinnig guter Workshop! Sehr gute fachliche Kompetenz des Dozenten, der sehr detailliert und persönlich auf individuelle Fragen und Beispiele eingeht. Vermitteltes Wissen ist sehr »state of the art« und nah am Business. Sehr empfehlenswert.

November 2019, Joe Schiefer, Art Director, Romeo B.V.

Ich bin sehr geflasht von dieser Schulung. Perfekter Ausgleich zwischen Praxis und Background-Wissen. Für ein besseres Workflow-Verständnis kann ich diesen Workshop allen empfehlen, die Online-Projekte managen müssen.

November 2018, Kristina Vogel, Projektmanagerin Digital/UX/UI, K12 GmbH

Ich bin total begeistert. Ich hatte schon in den ersten Stunden totale Aha-Erlebnisse. Viele meiner Fragen, die sich für mich als Laien durch Recherche in Foren nicht beantworten ließen, wurden hier mit Leichtigkeit erklärt und beantwortet. Sehr schön! Danke!

März 2017, Bonnie Siebke, UX-Designerin, Cornelsen GmbH

100% responsive, mit vielen <aha>-Effekten für unser Webteam, da Jonas sehr sympathisch offene Einblicke in sein Tagesgeschäft gewährte und auch nach offiziellem Schulungsschluss engagiert viele <?> auflöste. Ein Dozent, den wir auch für andere Themen auf dem Zettel behalten werden.

Dezember 2016, Kathrin Wiezorrek, Art Director, K16 GmbH

Themenverwandete Schulungsthemen

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: