Vollständiger Web- & Mobile-Designer im Jahr 2024: UI/UX, Figma + mehr

Tauche ein in den Zero To Mastery Designkurs, bei dem praxisnahes Lernen im Vordergrund steht! Dieser Kurs ist darauf ausgelegt, dich von einem Anfänger zu einem wettbewerbsfähigen Kandidaten für Jobs oder freiberufliche Aufträge zu machen.

Was du entdecken wirst:

• Grundlagen des Grafikdesigns und Kernprinzipien
• Die effektivsten Techniken für Web- und Mobildesign
• Wesentliche Best Practices für User Interface (UI) und User Experience (UX) Design
• Wie du atemberaubende, professionelle Designs mit den neuesten Design-Tools und Methoden für 2024 erstellst
• Tools, um deine Designs mit HTML und CSS in funktionale Websites oder Anwendungen zu verwandeln

Du wirst auch eine vollständige Designreise unternehmen, dabei ein reales Produkt für einen Kunden erstellen, das zu einem Highlight in deinem Portfolio wird.

Wir bieten einen umfassenden Leitfaden, damit du bei deinen eigenen Designprojekten einen klaren Schritt-für-Schritt-Plan hast.

Bonus: Erhalte sofortigen Zugang zu über 100 Ressourcen und Premium-Designvorlagen, um deine zukünftigen Projekte zu verbessern.

Absolventen von Zero To Mastery sind jetzt bei führenden Unternehmen wie Google, Tesla, Amazon, Apple, IBM, Uber, Facebook und Shopify beschäftigt (schau wirklich mal online nach!).

Viele florieren als Freiberufler und genießen remote Arbeit aus der ganzen Welt.

Du könntest der Nächste sein.

Mit deiner Anmeldung heute wirst du Teil unseres lebhaften, online Community-Klassenzimmers und lernst zusammen mit einem umfangreichen Netzwerk von Mitschülern, Alumni, Mentoren, TAs und Dozenten.

Aktiv. Unterstützend. Engagiert. Freundlich. Erhebend. Unverzichtbar.

Dies sind nur einige Begriffe, die unsere Schüler verwenden, um die ZTM Discord Community zu beschreiben.

Du wirst von Experten mit realer Berufserfahrung aus führenden Firmen in Toronto und dem Silicon Valley lernen.

Hier ist ein Einblick in die breite Palette der in diesem Design-Bootcamp behandelten Themen

Wir halten unser Versprechen, der umfassendste Designkurs online zu sein. Lass uns erkunden, was du alles meistern wirst.

0. Web- & Mobildesign-Prinzipien & Der Unterschied zwischen Design und Webentwicklung

1. ANFANG – Skizzieren, Inspiration & Struktur

1. Skizzieren

   • Einführung ins Skizzieren
   • Skizzieren von UX-Flows
   • Tipps für das Skizzieren

2. Inspiration

   • Wie du deine Kreativität erhältst
   • Design-Inspiration online finden

3. Benutzerabläufe

   • Verständnis für Benutzerabläufe
   • Wichtige Do’s und Don’ts
   • Workflow-Optimierung mit Komponenten
   • Erstellung von Benutzerabläufen: Registrierung (Teil 1)
   • Erstellung von Benutzerabläufen: Suche (Teil 2)
   • Erstellung von Benutzerabläufen: Checkout (Teil 3)

4. Sitemaps

   • Einführung in Sitemaps
   • Erstellung einer grundlegenden Sitemap
   • Vorbereitungsmaßnahmen vor dem Beginn
   • Entwicklung einer Sitemap (Teil 1)
   • Entwicklung einer Sitemap (Teil 2)
   • Tipps für die ersten Schritte

2. ENTDECKEN UND ITERIEREN – Drahtmodelle, Prototyping & Feedback

1. Drahtmodelle

   • Definition eines Drahtmodells
   • Schritte zur Erstellung eines Drahtmodells
   • Aufgabenbeschleunigung in Figma
   • Erstellung einer Startseite
   • Erstellung einer Produktseite
   • Erstellung einer Checkout-Seite

2. Prototyping in Figma

   • Grundlagen des Prototypings: Gerät + Trigger
   • Prototyping-Grundlagen: Aktionen
   • Prototyping-Grundlagen: Überlauf
   • Prototyping-Grundlagen: Präsentation + Zusammenarbeit
   • Verknüpfung eines Benutzerflusses in Figma
   • Erstellung kleiner Interaktionen mit Figma

3. Design-Feedback einholen

   • Die Bedeutung von Feedback
   • Konstruktives Design-Feedback erhalten

3. VISUELLES DESIGN – Design-Theorie & Zugänglichkeit

1. Rastern + Abstände

   • Grundlagen von Abständen und Rastern
   • Reaktionsfähige Raster in Figma
   • Erstellung eines benutzerdefinierten Rasters in Figma
   • Rasterprinzipien

2. Typografie

   • Grundlagen der Typografie (Teil 1)
   • Auswahl von Schriften, die zu einer Ära passen
   • Grundlagen der Typografie (Teil 2)
   • Geeignete Schriften auswählen
   • Grundlagen der Typografie (Teil 3)
   • Eine Schriftart auswählen
   • Ist deine Schriftart kontextgerecht?
   • Erweiterung eines bestehenden Schriftsystems
   • Schriftarten auf Google Fonts finden
   • Eingrenzung der Typografie-Auswahl
   • Entwicklung eines Schriftsystems in Figma

3. Farbe

   • Farbschemata verstehen
   • Wichtige Fragen vor der Farbwahl
   • Nützliche Tipps zur Erstellung einer Farbpalette
   • Design einer monochromatischen Farbpalette
   • Umsetzung einer einfachen Farbpalette
   • Erweiterung einer strengen Farbpalette
   • Entwicklung deiner eigenen Farbpalette

4. Formulare + UI-Elemente

   • Verständnis für UI-Elemente
   • Best Practices: Formulare Teil 1
   • Best Practices: Eingaben Teil 1
   • Best Practices: Eingaben Teil 2
   • Best Practices: Eingaben Teil 3
   • Best Practices: Eingaben Teil 4
   • Best Practices: Buttons
   • Erstellung von Komponenten in Figma
   • Verwendung von atomaren Elementen in Figma
   • Arbeiten mit Instanzen in Figma
   • Bearbeitung von Instanzen zur Gestaltung neuer Komponenten
   • Nutzung von Beschränkungen für reaktionsfähige Komponenten
   • Erstellung eines Registrierungsformulars in Figma

5. Bilder + Ikonografie

   • Techniken zur Erstellung herausragender visueller Assets
   • Handhabung von Bildern in Figma (Teil 1)
   • Handhabung von Bildern in Figma (Teil 2)
   • Arbeiten mit Illustrationen in Figma
   • Verwendung von Figma-Plugins zur schnellen Iconsuche
   • Erstellung eigener benutzerdefinierter Icons

6. Zugänglichkeit

   • Verständnis für Zugänglichkeit
   • Assistive Technologien
   • Visuelle Muster für Zugänglichkeit (Teil 1)
   • Tools zur Verbesserung der Design-Zugänglichkeit
   • Visuelle Muster für Zugänglichkeit (Teil 2)

4. DESIGN-EXPLORATION – Anwendungsdesign & Designs-Systeme

1. Designmuster

   • Definition von Designmustern
   • Die Bedeutung von Designmustern
   • Wie man Designmuster umsetzt
   • Kollaborative Analyse von Designmustern
   • Kollaborative Auswahl von Designmustern

2. Mobiles Design

   • Best Practices für moblies Design (Teil 1)
   • Best Practices für moblies Design (Teil 2)

3. Visual Design umsetzen

   • Designtreue
   • Erkundung von Stilen (Navigation)
   • Erkundung von Stilen (Karten)
   • Erkundung von Stilen (Interessen)
   • Erkundung von Stilen (Neue Elemente)

4. Grundlagen des Motion Designs (einschließlich Zugang zu Daniels umfassendem Motion Design-Kurs)

   • Das Verständnis der Bedeutung von Bewegung
   • Die Rolle der Bewegung im Design
   • Einführung in Figma Smart Animate
   • Demonstration des Potenzials von Figma Smart Animate

5. Mikrointeraktionen

   • Was sind Mikrointeraktionen?
   • Warum Mikrointeraktionen wichtig sind
   • Erstellung von Mikrointeraktionen (Teil 1)
   • Erstellung von Mikrointeraktionen (Teil 2)
   • Verwendung von Figmotion (Teil 1)
   • Verwendung von Figmotion (Teil 2)

5. INTEGRATION ALLER ELEMENTE – Nutzung unseres Designs-Systems & Hochwertiges Prototyping in Figma

1. Design-Systeme

   • Verständnis von Designs-Systemen
   • Grundlegende Elemente (Farbe)
   • Grundlegende Elemente (Rasters und Abstände)
   • Grundlegende Elemente (Typografie)
   • Grundlegende Elemente (Ikonografie)
   • Komponenten (Buttons)
   • Komponenten (Eingaben)
   • Komponenten (Karten)
   • Rezepte (Kartonlayouts)
   • Rezepte (Suche)
   • Rezepte (Bestellungen)

2. Endgültige Kompositionen

   • Umsetzung unseres Designs-Systems (Suche)
   • Umsetzung unseres Designs-Systems (Produktbeschreibung)
   • Umsetzung unseres Designs-Systems (Warenkorb)
   • Umsetzung unseres Designs-Systems (Kasse)

3. Zusammenarbeit mit Entwicklern

   • Verständnis der Bedeutung der Projektübergabe
   • Zusammenarbeit in Figma

6. UMSETZUNG VON FIGMA-DESIGNS IN WEBSITES (Konvertierung deines Designs von Figma zu einer Live-Site mit HTML und CSS)

7. HTML + HTML5

8. CSS + CSS3 - Grundlagen von CSS, CSS Grid, Flexbox und CSS-Animationen

9. BEREITSTELLUNG DEINER WEBSITE

Am Ende dieses Kurses wirst du alles besitzen, was nötig ist, um ein Designer zu werden, der eine Anstellung erhalten kann.

Was ist der Nutzen?

Design ist eine zeitlose Fähigkeit, deren Wert deutlich länger anhält als verschiedene Tech-Skills. Obwohl sich Trends weiterentwickeln, werden dir die hier erworbenen Erkenntnisse und Grundlagen noch viele Jahre nützlich sein.

Dieser Kurs ist darauf ausgelegt, sicherzustellen, dass du nicht passiv lernst, ohne die grundlegenden Prinzipien zu verstehen, und dich danach unsicher und unvorbereitet fühlst.

Wir fordern dich heraus, dich von einem absoluten Anfänger zu einem Designer der Spitzenklasse zu entwickeln, bereit für Chancen bei führenden Unternehmen und in der Lage, wettbewerbsfähige Tarife für deine Arbeit zu verlangen 💪!

Besorgt? Es gibt nichts zu verlieren! Beginne noch heute zu lernen, und wenn der Kurs nicht deinen Erwartungen entspricht, erstatten wir dir deine Investition innerhalb von 30 Tagen, ohne Wenn und Aber.