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. Der sog. »User-Flow« wird gestaltet – die Bewegung des Anwenders durch die Website oder App.

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 Design Tools kennenlernen. Programme wie Adobe XD, Sketch, Figma 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

  • Tools für Visual Design und Prototyping anhand praktischer Übungen kennenlernen: Adobe XD, Sketch, Figma & Co.
  • Tools für komplexe Animationen und Hardware-Sensorik anhand praktischer Übungen kennenlernen: ProtoPie

Workflow, Kommunikation und Datenübergabe

  • Design-Elemente exportieren und in CSS konvertieren: Zeplin & Co.
  • Tools für Kommunikation und Zusammenarbeit: XD, Figma & 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 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 Inhouse-Schulungen

Ich kann auch nur sagen: es hat riesig Spaß gemacht! Vielen Dank für die klasse Seminartage!

Februar 2014, Simone Stein, Art Director, Kontrast Communication Services

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

Ich fand den Kurs super aufschlussreich. Dozent sehr angenehm, gut verständlich, Inhalt sehr gut, umfangreich.

Mai 2017, Philippe Rothen, Frontend, infoklick.ch

Tolles und kurzweiliges Seminar! Ich hätte nicht gedacht, in so kurzer Zeit so viel zu lernen und zu verstehen. Ich habe richtig viel Spaß am Thema gewonnen.

Mai 2019, Phil Hoffmann, International Marketing, DKMS GmbH

Im Gegensatz zu anderen Schulungen hat diese inhaltlich genau das behandelt, was wir lernen wollten, mit einem Dozenten vom Fach, der alle Probleme und Lösungen kennt. Sehr kompetent, die weite Anreise hat sich definitiv gelohnt. Gerne wieder!

November 2018, Nicole Klose, Bärbel Drexel GmbH


Öffentliche Schulungen für Konzepter/Designer

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:

diegruenen