Inhalte
Der Designprozess von der Idee über Scribbles, Sketches und Wireframes bis zum ersten Prototypen.
Vom Design einzelner Elemente bis zum fertigen Screendesign und dessen Umsetzung mit Sketch oder Photoshop.
Entwicklung eines Styleguides mit Layoutraster, Farbplatte, Typografie und grafischen Elementen.
Anwendung des Styleguides bei der Komposition von Templates und einzelnen Screens.
Umsetzung der Screendesigns in Mockups und interaktiven Prototypen.
Erstellung, Verwaltung und Distribution von Designartefakten mit verschiedenen Methoden und Systemen.
Leistungen

Die Welt des digitalen Designs gewinnt immer mehr an Bedeutung. Es entstehen immer mehr digitale Produkte, für die gutes Design erforderlich ist. Dabei ist ein ökonomischer Umgang mit Design- und Entwicklungsressourcen von grosser Bedeutung. Die frühe und konsequente Nutzung von Sketching, Wireframing und Prototyping führt beim Digitalen Design zu schnelleren, durchdachteren Ergebnissen und erhöhter Planbarkeit. Iterativ verbesserte Mockups und Prototypen sprechen eine visuelle Sprache, die für alle verständlich ist und Chancen, Probleme und Aufwände frühzeitig verdeutlicht.

Der Workshop vermittelt Ihnen die Anwendung der Prozesse, Methodiken und Tools des Digitalen Designs und führt nachhaltig in die dazugehörige Praxis ein. Sie lernen die verschiedenen Schritte der digitalen Produktionskette zwischen Scribbles, Wireframes, Screendesigns, Mockups und interaktiven Prototypen sowohl theoretisch als auch praktisch kennen. Sie konzipieren und gestalten ein interaktives Produkt und setzen die entworfenen Screendesigns prototypisch um. Sie lernen die Techniken des modernen Webdesign und App Design erfolgreich anzuwenden.

Der Workshop wurde für all diejenigen entwickelt, die in und für Agenturen, Unternehmen und Organisationen digitale Produkte wie Websites, Apps und Software gestalten, entwickeln und verantworten. Es eignet sich am besten für Designer, Konzepter, Projekt- und Produkt-Manager sowie Webentwickler, die Ihren Erfahrungshorizont im Bereich des digitalen Designs, den damit verbundenen Prozessen und der dazugehörigen Technik erweitern und festigen möchten.
X8® - Unser Trainingskonzept
Agenda
Tag 1 - SKETCHES, WIREFRAMES & SCREENDESIGN
Am 1. Tag lernen Sie die Grundlagen des digitalen Designs. Sie erstellen Sketches und Wireframes und bekommen eine Einführung in die Gestaltung erstklassiger Screendesigns.
09:00 - 09:30 Willkommen, Kennenlernen & Warm-Up
Der Designprozess – von der Idee bis zum ersten Prototyp
Prozesse und Bausteine des digitalen Designs: Scribbles, Sketches, Flows, Wireframes, Interaction Design, Screen Design, Interaktive Mockups
Design-Trends – vom Skeuomorphic zum Material Design
Skeuomorphic Design, Flat Design, Material Design, Endless Scrolling, Card Layouts, Parallaxe Layout, One Pager
Methoden und Techniken
Skizzen, Sketchnotes, Stenceling, Papier-Prototypen, Paper Cutouts, Design Studio
Interface-Elemente
Einfache, grundlegende Formen, gängige UI-Elemente wie Buttons, Links, Überschriften, Text, Formularelemente, Bilder, Karten, Symbole
Einführung & Grundlagen
Grober Seitenaufbau, Informationsarchitektur, Verwendung, Platzierung und Priorisierung von Interface-Elementen, erste Einschätzung des Folgeaufwands
12:30 - 13:30 Mittagspause
Screenaufbau
Einspaltige und mehrspaltige Layouts, Full-Screen Layout, Slides, Fixed Sidebar, Square Grid, Masonry, …
Responsive Design
Adaptive, Fixed, Fluid und Responsive Design
Praktische Übung: Erstellung von Wireframes als Vorlage für das Design der Website/App
Einführung & Grundlagen
Pixelgenaues Design: Layout-Breite, Breiten einzelner Elemente, Padding, Margin, Konturen, Schatten, Transparenz, Farbcodes
Tools & Beispiele
Screendesigns mit Photoshop und Sketch
16:30 - 17:00 Retrospektive, Reflektion und Ausblick
Tag 2 - STYLEGUIDES & TEMPLATES
Im Kontext einer konkreten Designaufgabe lernen Sie am zweiten Tag, wie Sie einen Web-/App-Styleguide entwickeln und auf Basis dessen Screendesign-Templates mit Sketch bzw. Photoshop gestalten.
09:00 - 09:15 Warm-Up und Vorschau
Layout-Raster, Typografie, Farbpalette, Grafische Elemente (Buttons, Icons, Navigation, Formulare, … ), Medien (Bilder/Bildkompositionen, Fotos, Videos…)
Praktische Übung: Erstellung eines Web-/App-Styleguides und Definition grafischer Elemente mit Sketch/Frontify
12:30 – 13:30 Mittagspause
Gestaltung/Komposition einzelner Screens (Homepage/Homescreen, Produktübersicht, Produktdetail, Checkout…)
Praktische Übung: Gestaltung einzelner Screen-Templates mit Photoshop/Sketch
16:30 - 17:00 Retrospektive, Reflexion und Integration
Tag 3 - DESIGN MOCKUP’S & INTERAKTIVE PROTOTYPEN
Am 3. Tag lernen Sie aus dem Screendesign einen Mockup als interaktiven Prototypen zu machen. Sie lernen den digitalen Produktionsprozess zu optimieren und Ihr Design wirksam zu präsentieren.
09:00 - 09:15 WarmUp und Vorschau
Einführung & Beispiele
Tools (Axure, UXPin, Invision, Marvel, Pop), Beispiele fertiger Prototypen mit ausgewählter Software
Interaktionen & Animationen
Panels & States, Animationen, Transitions, Fadings, Gesten, Swipes, Rollover-Effekte, Skalierung, Transparenz, Sound
Praktische Übung: Umsetzung eines User Flows in Form eines interaktiven Design-Mockups/-Prototypen
12:30 – 13:30 Mittagspause
Produktion
Verwaltung und Organisation von Designartefakten, Methoden und Systeme, Versionierung, Benennung von Dateien, Ordnern, Ebenen, Layouts, Glossar / Design-Sprache, Teilen / Bereitstellung von Designs
Präsentation
Vorgehensweisen und Psychologie, Feedback geben und bekommen, Gutes und schlechtes Feedback, konstruktive vs. destruktive Kritik, praktische Tipps für Designer und Auftraggebern von Designs
Praktische Übung: Finale Präsentation der Arbeitsergebnisse (Sketches, Wireframes, Styleguide, Screendesigns, Mockups), Feedback und Kritik
16:00 - 16:30 Fragen & Antworten
Tipps, Links und Quellen, Vergabe Zertifikate, Verabschiedung
Benefits
Termine
Bis zu 15% Rabatt für die Anmeldung mehrerer Mitarbeiter an einem Seminar. Wir sind umsatzsteuerbefreit, daher entsprechen die Netto- den Bruttopreisen.
Testimonials
Informationen



Deutschland fördert Weiterbildung – wir sind dabei. Sie haben vielfach die Möglichkeit in den Genuss einer Förderung für die Teilnahme an unseren Weiterbildungen zu kommen. Wir haben für Sie Informationen zu den wichtigsten Fördermitteln zusammen getragen.
Zertifikat

Für das abgeschlossene Seminar, die aktive Teilnahme an den praktischen Übungen sowie die Abschlusspräsentation wird das Zertifikat „Certified Digital Designer Deluxe“ des XDi – Experience Design Instituts vergeben. Das Zertifikat ist durch die German UPA und die Interaction Design Foundation anerkannt und genießt mittlerweile internationale Reputation.
Unsere Services
Referenzen
Diesen Web Design-Kurs bieten wir auch als Live Online Kurs an. Mehr Infos