icon-arrow-lefticon-arrow

Kurzbeschreibung

Die Gestaltung flexibler und interaktiver Layouts stellt Designer und Agenturen vor neue Herausforderungen. Früher war es üblich Benutzeroberflächen für Websites und Apps in einem Grafik- oder Bildbearbeitungsprogramm zu gestalten und anschließend an die Programmierung zu übergeben. Der Designer hatte daher mit der technischen Umsetzung nur wenig zu tun und die Kommunikation mit Auftraggebern erfolgte häufig ebenso statisch und zeitintensiv wie der Design-Prozess.

Heute sind die Bereiche Design, UX und Entwicklung eng verzahnt. Screen-Designer müssen flexible Layouts entwerfen können, die über Interaktionen verfügen und Animationen, Verlinkungen und Scrolling-Effekte abbilden. Programme wie Photoshop, InDesign oder Illustrator sind dafür nur bedingt geeignet, doch es gibt neue Programme und Tools, die Designern unter die Arme greifen.

Wir möchten Ihnen mit diesem Workshop einen umfangreichen und praktischen Überblick über die aktuellen Design-Trends, die Protoyping- und Kollaborations-Tools sowie einen effizienten Workflow vermitteln.

In diesem Seminar lernen Sie, worin der Unterschied zwischen einem statischen Layout und einem visuellen Prototypen besteht und warum die Arbeit mit Prototypen so erfolgreich und effektiv ist. Sie erfahren, worauf es bei der Gestaltung responsiver Websites ankommt. In diesem Zusammenhang werden Sie anhand in sich abgeschlossener Übungen auch die neue Generation der Web Design Tools kennenlernen. Programme wie Adobe XD, Invision, Sketch, Muse und nicht zuletzt der Browser bieten vielfältige Möglichkeiten, um praxistaugliche visuelle Prototypen und Web-Layouts zu erstellen. Sowohl die Zusammenarbeit mit den Kollegen aus der Konzeption und Entwicklung als auch die Kommunikation mit dem Kunden kann somit spürbar vereinfacht werden, ohne dass Sie selbst zu tief in die Web-Entwicklung einsteigen müssen.


Agenda

Design-Trends, UX-, UI und RWD-Grundlagen

  • Modulares Design und Website-Architektur
  • Die Layout-Typen im responsive Design
  • Der Responsive Workflow
  • Breakpoints richtig setzen
  • Design Thinking
  • Design-Trends und Ihre Auswirkungen: Flat-Design, Material-Design & Co.
  • Benutzerführung und Mikroanimationen
  • Navigation im Responsive Design
  • Typografie
  • Die Design- und Testing-Funktionen der Google Chrome-Entwicklertools kennen

Clickdummies, interaktive Wireframes & Co.

  • Arbeiten mit »echten Inhalten«
  • Tools für Platzhalter und Content-Pools
  • Die Tools kennen: Balsamiq Mockups, Axure, Platforma, Adobe Comp, Pop & Co.
  • Pen and Paper Prototyping
  • Bootstrap

Layout, Responsive Design, Animation und Interaktion

  • Etablierte Tools wie Photoshop mit Plugins um Prototyping-Funktionen erweitern: InVision, Craft & Co.
  • Statische Programme effizient bedienen: Adobe Bibliotheken, Verknüpfungen & Co.
  • Tools für Gestaltung und Prototyping anhand praktischer Übungen kennenlernen: Adobe XD, Sketch, ProtoPie, Adobe Muse, Invision (Studio) & Co.
  • Tools für Animationen und Interaktionen: Framer & Co.

Workflow, Kommunikation und Datenübergabe

  • Design-Elemente exportieren und in CSS konvertieren: Zeplin, Adobe Extract & Co.
  • Tools für Kommunikation und Zusammenarbeit: XD, InVision, Figma, Marvel & Co.
  • Tools zum gleichzeitigen Arbeiten an einem Layout
  • Korrekturschleifen kostengünstig umsetzen

Dokumentation und Präsentation

  • Style Tiles und Style Guides
  • Atomic Design und PatternLab
  • Datenausgabe und Präsentationsmöglichkeiten

Zielgruppe/Voraussetzungen

Print-Designer und Screen-Designer die Websites bzw. Web-Layouts gestalten möchten, ohne dabei zu viele Berührungspunkte mit der Programmierung zu bekommen. Gute Kenntnisse in Adobe Photoshop und Illustrator werden erwartet. HTML- und CSS-Kenntnisse sind hilfreich, aber nicht erforderlich.


Dozent: Jonas Hellwig

Jonas HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben Responsive Design hat er sich auf WordPress, Photoshop und Workflow-Optimierungen im Web Design 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 Veranstaltungen zum Thema Web Design anzutreffen und unterstützt Web-Agenturen und Unternehmen bei der Planung und bei der technischen Umsetzung von Web-Projekten.


Kunden-Feedback zu unseren Inhouse-Schulungen

Herr Hellwig gestaltete das umfangreiche und auf uns individuell zugeschnittene Material spannend und mit vielen Beispielen (auch direkt von einem unserer aktuellen Projekte), so dass das Lernen leicht fiel. Auf all unsere Fragen hatte Herr Hellwig sofort eine Antwort sowie aktuelle Online-Beispiele zur Hand. Aufgrund der Praxisnähe war das Training äußerst authentisch und in sämtlichen Punkten eine große Bereicherung. Auch bei Fragen über Themen die den Workshop überstiegen, bekamen wir reichlich Informationen. Ein perfekter Workshop, der mit Sicherheit nicht der letzte sein wird. Auch die Betreuung im Nachhinein ließ keine Wünsche offen. Nachträglich auftretende Fragen wurden in den kommenden Wochen geduldig per Email beantwortet.

Juni 2013, Melanie Schupp, P8 Paulsen Media GmbH

Grandiosen Workshop mit Jonas von @_kulturbanause zum Thema #RWD #Workflow gehabt! Danke nochmal an der Stelle. #WebWorkers FTW. Love My Job

März 2016, Bernhard Weiler, @BernhardWeiler – Quelle

Am 26.11. habe ich dem Tagesseminar Responsive Web Design - Die technische Umsetzung - mit Jonas Hellwig (kulturbanause) teilgenommen. Ich bin mit dem Anliegen angereist, als Lehrender meinen aktuellen Kenntnisstand zu überprüfen und durch die Erfahrungen und Entwicklungen aus der Agenturpraxis zu ergänzen. Das Seminar hat meine Erwartungen vollständig erfüllt. Dem Referenten ist es gelungen, den gepackten Stoff didaktisch augezeichnet aufzuarbeiten und trotz seiner manchmal vorhandenen Komplexität verständlich und nachvollziehbar zu vermitteln. Eine umfangreiche digitale Seminardokumentation hilft, die Inhalte noch einmal zu rekapitulieren.

Dezember 2015, Prof. Andreas Baumgart, Hochschule für Angewandte Wissenschaften Hamburg

Danke @_kulturbanause für den Workshop! Ich hoffe es hat einigen den Horizont erweitert!

Januar 2015, Benno, @btotheenno, Frontend-Developer Zalando AG – Quelle

Jonas ist extrem schnell in der Auffassung unserer Knackpunkte, fachlich versiert in der Lösung und pragmatisch in der Umsetzung gewesen. Design und Konzept vereint in einer Person und zudem ein super Erklärbär – die perfekte Mischung für uns. Lieber Jonas, die Empfehlung von www.vergleich.de ist dir garantiert – vielen Dank für die super Workshop-Tage.

Mai 2015, Kingyi Yu, Leiterin Marketing & Projektmanagement, Vergleich.de Gesellschaft für Verbraucherinformation mbH


Öffentliche Schulungen für Konzepter/Designer

Alle öffentlichen Schulungen anzeigen

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