icon-arrow-lefticon-arrow

Kurzbeschreibung

Das vektorbasierte Web-­Grafikformat SVG hat in der letzten Zeit enorm an Popularität gewonnen. SVGs können ohne Qualitätsverlust skaliert werden, sehen auf jedem Display scharf aus und können darüber hinaus animiert oder mit Interaktionselementen versehen werden. In diesem Seminar lernen Sie anhand in sich abgeschlossener Übungen die Möglichkeiten von SVG kennen.

Zunächst erfahren Sie, wie SVG-­Grafiken mit Hilfe von Adobe Illustrator (oder Photoshop) erstellt werden und was Sie bereits bei der Gestaltung der Grafik beachten sollten. Anschließend lernen Sie die verschiedenen Export-­Einstellungen kennen und erfahren, wie Browser-­Kompatibilität, Bildqualität und Dateigröße entscheidend beeinflusst werden können. Auch verschiedene Plugins und Tools zur Optimierung der SVGs werden vorgestellt.

Im zweiten Teil des Seminars lernen Sie SVG-­Dokumente aufgebaut sind und wie der SVG-Code manipuliert werden kann. Sie werden Mouse-­Over-­Effekte erstellen, die Grafiken umgestalten oder Breakpoints hinzufügen, um unterschiedliche Grafiken für unterschiedliche Displaygrößen zu erstellen. Neben den nativen Möglichkeiten von SVG existieren dazu auch diverse CSS-­Eigenschaften.

Der letzte Teil des Seminars beschäftigt sich mit dem Thema SVG-­Animation. Auch hier existiert eine native SVG-Syntax mit der beispielsweise Elemente an Pfaden entlang bewegt werden können. Darüber hinaus lassen sich auch zahlreiche CSS-Animationstechniken auf SVG anwenden.

Agenda

  • SVG-­Grafiken mit Adobe Illustrator erstellen
  • SVG-­Grafiken exportieren und optimieren
  • SVG-Grafiken einbinden
  • Fallback-Lösungen
  • Der Aufbau eines SVG-­Dokuments
  • SVG-­Grafiken mit CSS umgestalten
  • Interaktionen hinzufügen
  • Responsive SVG-­Grafiken
  • SVG Sprites und Icon-Systeme
  • SVG-­Animationen mit CSS und SMIL
  • Tools und Hilfsmittel

Voraussetzungen, Zielgruppe & Durchführung

Das Seminar richtet sich an Webdesigner und Frontend-­Developer. Solide Kenntnisse in Adobe Illustrator und Photoshop sowie in HTML und CSS werden vorausgesetzt.

Wir können für das Seminar insgesamt 8 Apple iMacs bereitstellen. Wenn Sie Ihr eigenes Laptop nutzen wollen bzw. können, geben Sie dieses bitte bei der Anmeldung an. Die maximale Teilnehmerzahl ist 10.

Veranstaltungsort & Verpflegung

Das Seminar findet im »Haus der Wissenschaft« in der Sandstr. 4 in Bremen statt.

Fotos des Seminarraums im Haus der Wissenschaft Bremen

Sie finden das Haus der Wissenschaft in unmittelbarer Nähe zum Bremer Dom. Die Seminarräume befinden sich im 1. Obergeschoss und sind behindertengerecht ausgestattet.

Dozent

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.

Kunden-Feedback zu unseren öffentlichen Schulungen

Dieser interessante Workshop gehalten von Jonas Hellwig (kulturbanause.de) brachte viele neue Erkenntnisse in Sachen Workflow im Response Webdesign.

Juli 2014, Nina Evers – Quelle

Der Workshop zu SVG-Grafiken war spannend, zukunftsweisend und in einem breiten Arbeitsumfeld bereichernd. Jonas Hellwig gibt einen umfassenden Einblick in Anwendungsgebiete und fokussiert gekonnt die individuell relevanten Schwerpunkte. Ein intensiver und wertvoller Lehrgang – besonders an der Schnittstelle zwischen Gestaltung und Entwicklung, der zu neuen Ansätzen motiviert und mir als Designer technische Möglichkeiten verständlich und zugänglich macht.

April 2017, Miriam Stepper, Grafik-Designerin, infoclick.ch

Der Referent vermittelt den Seminarstoff verständlich und nachvollziehbar. Anweisungen und Übungen sind präzise und hilfreich. Top!

Dezember 2019, Thomas Pienz, UX-Design, DATEV

Great course! I came with no background knowledge and what I learned in these 2 days was amazing! I can definitely recommend it!

Mai 2019, Joshua Barton, International Marketing, DKMS

Danke für die 2 Tage Input und Inspiration. Der Funke ist innerhalb kurzer Zeit übergesprungen. Ich gehe mit einem positiven + energiegeladenen Eindruck in den Arbeitsalltag zurück und freue mich, die neuen Erkenntnisse in die neuen Projekte mit integrieren zu können.

Dezember 2019, Rebekka Petri, Mediendesignerin, iWelt AG

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:

diegruenen