Seminar: UX/UI Design & Visual Prototyping
In diesem Workshop vermitteln wir aktuelle UX/UI Design-Techniken und Workflows. Angelehnt an den Ablauf eines Design-Projekts beginnen wir mit Konzept und UX Research. Anschließend werden Ideen grob visualisiert und getestet, bevor letztlich im UI Design hochwertige visuelle Prototypen entstehen. Wir dokumentieren unsere Entscheidungen in Design Systemen und Bibliotheken.
Kurzbeschreibung
Die Gestaltung flexibler und interaktiver Layouts stellt Design-Teams und Agenturen vor immer neue Herausforderungen. Die Bereiche Design, UX und Entwicklung müssen eng zusammenarbeiten.Personen im Design sollten responsive Layouts und Komponenten entwerfen können, die über Interaktionen verfügen und Animationen, Verlinkungen und Scrolling-Effekte abbilden können. Es werden auch immer seltener einzelne Screens gestaltet – der sog. »User-Flow« steht im Mittelpunkt, also die Bewegung einer Person durch die Website oder App. Design Systematiken und Barrierefreiheit nehmen mit zunehmender Projektgröße ebenfalls einen immer höheren Stellenwert ein.
Moderne Tools, Know-how und das richtige Mindset helfen dabei all diese Anforderungen zu erfüllen.
Wir vermitteln in diesem Workshop einen umfangreichen und praktischen Überblick über die aktuellen Design-Trends, die Protoyping- und Kollaborations-Tools sowie einen effizienten wie professionellen Workflow.
Themen unseres UX/UI Design-Workshops
Die folgenden 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.
Der Workshop ist unabhängig von einem bestimmten Design-Tool konzipiert: Wir können die Schulung gerne anhand des von Ihnen genutzten Tools (z.B. Figma oder XD) planen.
Überblick & Herangehensweise
- Worklow & Methoden im digitalen Produktdesign
- Der Workflow im Responsive Webdesign
- Tools zur Webentwicklung: Code-Editor, Browser, DevTools, Websites & Co.
- Tools für UX/UI Design – Apps, Online-Tools, Plugins & Co.
Die Zielgruppe kennen und ihre Sichtweise einnehmen
- Zielgruppenbestimmung und Personas
- User Flows, User Stories und KPIs
- Überblick über UX-Methoden
Website-Strukturen planen
- Informationsarchitektur
- Content First und Purpose First
- SEO in der Gestaltung und Konzeption
- Navigation-Pattern
Konzeption aus Perspektive der Nutzenden
- UX Gesetze
- Websites erwartungskonform gestalten
- Bedienkonzepte (Touch, Tastatur, Voice etc.)
Grundlagen guten UI & Web Designs
- Entwicklung und Geschichte UI Design
- UX/UI & Webdesign Trends
- Farbe im Web (Farbräume, Websichere Farben etc.)
- Responsive Web Typografie
- Flexible Gestaltungsraster und Spacing
Ideen visualisieren
- Wireframes
- LoFi > HiFi Prototyping
- Prototyping Arten
Responsive Design & mobiler Nutzungskontext
- Mobile First
- Breakpoints, Mikro und Makro Layouts
- Layout Pattern
- Modulares Design, Atomic Design
High Fidelity Design und Visual Prototyping
Überprüfen und Optimieren
- UX/UI Design testen
- Barrierefreiheit testen
- Responsive Design testen
- Websites mit Lighthouse testen
- Die Chrome Dev-Tools
Design Systeme
- Design Tokens und Stile Tiles
- Design-Systematiken gestalten und organisieren
- Styleguides & Living Styleguides
- UI Kits, Bibliotheken und Design Systeme
Barrierefreiheit
- Barrierefreiheit, Inklusive Design & Universal Design
- Anforderungen für Barrierefreiheit
- Gestalterische- und konzeptionelle Anforderungen für Barrierefreiheit
- Redaktionelle Anforderungen für Barrierefreiheit
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.