Figma Masterclass: Der ultimative Kurs für UX/UI Design
Daniel Schworm
Schau dir diesen Kurs und Tausende anderer Kurse an
Schau dir diesen Kurs und Tausende anderer Kurse an
Einheiten dieses Kurses
-
-
1.
1. Intro und Motivation
1:05
-
2.
1.1 Was ist Figma
2:04
-
3.
1.2 Schneller Überblick in Figma und FigJam
4:35
-
4.
1.3 Der Unterschied zwischen UX und UI
2:33
-
5.
2. Abgrenzung & Möglichkeiten
5:05
-
6.
2.1 UX Guidelines was jeder UX UI Designer kennen sollte
1:16
-
7.
2.2. Hicks Law
2:53
-
8.
2.3 Fitts Law
1:21
-
9.
2.4 Jakobs Law
1:38
-
10.
2.5 Restorff Effekt
2:49
-
11.
2.6 Responsive Web Design
5:03
-
12.
2.7 Don Normans Grundprinzipien der Interaktion
10:58
-
13.
3. Voraussetzungen für diesen Kurs
2:17
-
14.
3.1 Account Registrierung
1:49
-
15.
3.2 Welche Figma Lizenz ist für mich die Richtige
4:19
-
16.
3.3 Web oder Desktop App
3:47
-
17.
4. Arbeitsbereich
4:46
-
18.
4.1 Ebenenansicht
4:48
-
19.
4.2 Assets
3:07
-
20.
4.3 Bearbeitungsleiste mit Werkzeugen
7:07
-
21.
5. Was sind Frames
7:57
-
22.
5.1 Responsive Layout Grid
6:43
-
23.
5.2 Auto Layout 1
13:30
-
24.
5.3 Auto Layout 2
6:05
-
25.
5.4 Auto Layout
17:50
-
26.
5.5 Auto Layout Resizing
6:45
-
27.
5.6 Auto Layout Alignment
6:56
-
28.
5.7 Auto Layout Absolute Positioning
4:17
-
29.
5.8 Auto Layout Wrap
4:24
-
30.
6. Was sind Wireframes
9:00
-
31.
6.1 Ein Wireframing Konzept selbst erstellen
18:41
-
32.
7 Einführung Design-Elemente
0:59
-
33.
7.1 Formen
11:42
-
34.
7.2 Vektorgrafiken1
4:02
-
35.
7.3 Vektorgrafiken2
3:56
-
36.
7.4 Texte
9:13
-
37.
7.5 Bilder
4:12
-
38.
8. Einführung
3:08
-
39.
8.1 Eine oder mehrere Komponenten erstellen
9:04
-
40.
8.2 Hauptkomponenten vs
11:01
-
41.
8.3 Änderungen an Komponenten und Instanzen vornehmen
10:47
-
42.
8.4 Komponenteninstanzen austauschen
7:39
-
43.
8.5 Benennen und Organisieren von Komponenten 1
7:52
-
44.
8.6 Benennen und Organisieren von Komponenten 2
1:31
-
45.
8.7 Verwendung von Komponenten Varianten 1
5:33
-
46.
8.8 Verwendung von Komponenten Varianten 2
2:33
-
47.
9. Prototyping Einführung & Überblick
4:14
-
48.
9.1 Grundlagen & Scrolling
17:59
-
49.
9.2 Design Panel
10:03
-
50.
9.3 Transition
8:19
-
51.
9.4 Smart Animate
6:11
-
52.
9.5 Interaktive Komponenten
7:01
-
53.
10. Zusammenarbeit in Figma
11:54
-
54.
10.1 Figma Community
12:06
-
55.
10.2 Plugins 1
5:04
-
56.
10.3 Plugins 2
20:35
-
57.
10.4 Exportieren 1
3:31
-
58.
10.5 Exportieren 2
1:55
-
59.
10.6 Shortcuts
4:33
-
60.
11. Do s and Dont s im Allgemeinen
8:15
-
61.
11.1 Do s and Dont s UI UX spezifisch 1
14:42
-
62.
11.2 Do s and Dont s UI UX spezifisch 2
2:21
-
63.
11.3 Die beliebtesten Fonts
17:40
-
64.
11.4 Design Systeme am Beispiel “Material Design” 2
11:42
-
65.
12. Einführung & Konzept
4:22
-
66.
12.1 Grundaufbau der App
16:01
-
67.
12.2 Homepage Searchbar
6:59
-
68.
12.3 Homepage Categoryslider
4:54
-
69.
12.4 Homepage Rabatt Sektion
4:22
-
70.
12.5 Homepage die besten Deals des Tages
8:42
-
71.
12.6 Kategorie Fashion
10:57
-
72.
12.7 Produktdetailseite
15:32
-
73.
12.8 Warenkorb
8:28
-
74.
12.9 Prototyping
10:29
-
-
- --
- Anfänger-Niveau
- Fortgeschrittenes Niveau
- Fortgeschrittenes Niveau
- Jedes Niveau
Von der Community generiert
Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.
17
Teilnehmer:innen
--
Projekte
Über diesen Kurs
Tauche ein in die faszinierende Welt des UX/UI-Designs und entdecke Figma, ein vielseitiges und leistungsstarkes Tool, das weltweit von Designern geschätzt wird. Dieser umfassende Kurs führt dich Schritt für Schritt durch alle wichtigen Aspekte des Tools – von den Grundlagen über die ersten Wireframes bis hin zur Erstellung eines interaktiven Prototyps. Ob du ein absoluter Anfänger bist oder bereits Erfahrung im Design hast, dieser Kurs bietet dir die Möglichkeit, deine Fähigkeiten zu erweitern und auf ein neues Niveau zu bringen.
Was du lernen wirst
- Einführung in UX/UI-Design und Figma
- Design-Prinzipien für optimale Benutzererfahrung
- Arbeiten mit Frames und Layouts
- Erstellung von Wireframes und Design-Elementen
- Nutzung von Komponenten für effizientere Workflows
- Interaktives Prototyping
- Praxisprojekt: Live-Erstellung einer E-Commerce-App
Warum du an diesem Kurs teilnehmen solltest
- Praxisnah und leicht verständlich: Lerne die wichtigsten Design-Fähigkeiten, die heute gefragt sind.
- Flexibel für alle Lernstufen: Von Anfänger*innen bis Fortgeschrittene – dieser Kurs bietet für alle etwas.
- Hands-on-Erfahrung: Du arbeitest an einem realen Projekt und erstellst am Ende einen funktionsfähigen Prototypen.
- Zukunftssicheres Wissen: UX/UI-Design ist eine gefragte Fähigkeit, die dich beruflich weiterbringen kann.
Für wen ist dieser Kurs geeignet?
- Design-Anfänger*innen, die ihre ersten Schritte machen möchten.
- Quereinsteiger*innen, die UX/UI-Design als neue Karriereoption erkunden wollen.
- Designer*innen, die ihre Workflows mit Figma verbessern möchten.
Was du am Ende des Kurses erreicht hast
✔ Du wirst Figma sicher und selbstbewusst einsetzen können.
✔ Du wirst in der Lage sein, einen professionellen E-Commerce-Prototypen zu erstellen.
✔ Du wirst verstehen, wie UX/UI-Design die Benutzererfahrung verbessert.
✔ Du wirst bereit sein, Designprojekte in Teams umzusetzen.
Praxisnahes Kursprojekt
Kursinhalte:
- Einführung in die Welt der UX/UI & Figma
- UX/UI Design Prinzipien
- Figma Konto
- Benutzeroberfläche
- Frames & Layouterstellung
- Wireframes
- Grundlegende Design-Elemente
- Komponenten
- Prototyping
- Good to know!
- UX/UI-Tipps
- Live-Erstellung einer E-Commerce App in Figma
Gesamtdauer: ca. 8 Stunden
Kursbewertung
Warum lohnt sich eine Mitgliedschaft bei Skillshare?
Nimm an prämierten Skillshare Original-Kursen teil
Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen
Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare