UX/UI in Figma für Anfänger: Grundlagen, Hierarchie & Wireframes (Teil 1/3) | UX by Chris

Figma für Anfänger auf Deutsch: In diesem ersten Teil lernst du die UX/UI-Grundlagen, findest dich in Figma zurecht und baust dein erstes Wireframe für eine Musikplayer-App. Ohne Vorkenntnisse, komplett zum Mitmachen. 👉 Hier lädst du Figma herunter: https://www.figma.com/downloads/ 📍 Kapitel 0:00 Was dich in dieser Serie erwartet 1:13 Figma herunterladen und installieren 1:34 Die Home-Seite und dein Starter-Team 2:37 Was ist UX/UI & Usability? 5:40 Die Prinzipien hinter gutem Interface-Design 6:38 Was Figma ist und wofür es genutzt wird 7:46 Neues Projekt anlegen: Drafts, Teams, Projekte 8:59 Dateiarten: Design, FigJam, Slides und mehr 10:21 Seiten und Ebenen zur Strukturierung nutzen 11:23 Die linke Sidebar: Variablen, Assets, Agents 11:42 Die rechte Sidebar: Teilen, Prototyp, Styles 13:04 Canvas und Action Bar 14:17 Motion und Dev Mode 15:16 Die Anforderungen an unseren Musikplayer 16:02 Der UX-Prozess als Design-Thinking-Kreislauf 17:58 Den ersten Frame aufziehen 20:05 Warum jeder Status einen eigenen Frame bekommt 23:22 Was Wireframes sind und warum man damit startet 25:23 Columns-Grid und Randabstände einrichten 27:20 Das 8-Point-Grid erklärt 28:10 Den Wireframe erstellen 36:45 Die Controls mit Auto Layout ausrichten 40:36 Das Wireframe auswerten: Hierarchie prüfen 42:08 Ausblick auf Teil 2 Das lernst du in diesem Video: Der Unterschied zwischen UX, UI und Usability, erklärt an einem konkreten Beispiel Wie du dich in Figma zurechtfindest: Frames, Ebenen, Seiten, Canvas, Action Bar Wie der UX-Prozess als Kreislauf funktioniert und warum man nicht direkt ins fertige Design springt Wie du ein Low-Fidelity-Wireframe aufbaust und worauf du dabei achten musst Was das 8-Point-Grid ist und warum Profis damit arbeiten Wie Auto Layout dir das Ausrichten von Abständen abnimmt Für alle, die mit UI und UX Design anfangen wollen und ein Werkzeug suchen, das in fast jedem Produktteam im Einsatz ist. Vorkenntnisse brauchst du keine, Figma ist in der Starter-Version kostenlos. Die komplette Serie: Teil 1: UX Grundlagen und erstes Wireframe (dieses Video) Teil 2: Vom Wireframe zum fertigen UI Design Teil 3: Prototyping und Mockups 🔗 Links Figma herunterladen: https://www.figma.com/downloads/ Figma Hilfe-Center: https://help.figma.com/ Figma Community: https://www.figma.com/community Themen in diesem Video: Figma Tutorial Deutsch, Figma für Anfänger, UI Design lernen, UX Design Grundlagen, Wireframe in Figma, App Design, Auto Layout, 8-Point-Grid, Usability, Design Thinking 💬 Woran hakt es bei dir gerade in Figma? Schreib es in die Kommentare, das nehme ich in die nächsten Teile mit.