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.
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.
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
Termine
10% Rabatt für Selbstzahler und bis zu 20% Rabatt für die Anmeldung mehrerer Mitarbeiter an einem Seminar
Trainer
Kurzprofil Kurzprofil Kurzprofil 
Testimonials
Super freundlicher Trainer, großartig erklärt, absolut unterhaltsam. Könnte noch ein paar Tage mehr dauern.
Dinko hat uns die Inhalte super vermittelt und leicht verständlich erklärt. Ich fahre mit 200% Wissen nach Hause 🙂
Dinko hat das Seminar sehr angenehm und informativ gestaltet. Wir haben in sehr angenehmer Atmosphäre viele geeignete Tools und Methoden kennengelernt und konnten sehr von den Praxiserfahrungen unseres Coaches profitieren.
Informationen
Zahlen & Fakten
Fördermittel
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.
Leistungen
Jede Menge Best Practices
Jede Menge Best Practices
Jede Menge Best Practices
Benefits
Unsere Services
XDi'Inhouse
XDi'360°
Den nachhaltigsten Lernerfolg erzielen Sie mit einer guten Mischung aus Training, Coaching und Beratung. Alle XDi-Trainings können mit individuellen Coachings und flankierenden Beratungsleistungen zu einem „Continious Improvement-Programm“ zur kontinuierlichen Weiterentwicklung verbunden werden.
XDi'Coaching
Um Ihr Team oder einzelne Team-Mitglieder gezielt zu unterstützen und stärker zu fördern, haben wir ein spezielles Coaching-Angebot entwickelt. Wir coachen Sie zu allen Themen unserer Weiterbildungen. Lassen Sie uns einfach wissen wie genau wir Sie unterstützen können.
XDi'Consulting
Wir beraten Unternehmen und deren Führungskräfte auf dem Weg in die Digitale Transformation. Wir bereiten Unternehmen auf den Wandel einer vernetzten, globalen Welt vor und begleiten Sie beim Aufbau neuer Arbeitswelten, der Nutzung digitaler Tools und dem Setup Ihrer Teams.
Our Way
Referenzen
