Einführung zu Design Systems mit Figma
Ein Kurs von Javier CuelloUX Designer
Ein Kurs von Javier Cuello, UX Designer
Lerne Designsysteme zu schaffen, die auf die Bedürfnisse der Nutzer eingehen
Hinter jeder Benutzeroberfläche befinden sich eine Reihe von scheinbar unsichtbaren Details, die die Richtung Ihrer Marke, Ihres Unternehmens oder Ihres Produkts bestimmen können. Durch die Integration von Design Systems-Tools in Ihr Projekt können Sie sicherstellen, dass Ihre Benutzeroberfläche mit allen Mitgliedern Ihres Teams kompatibel ist und intuitiv funktioniert.
In diesem Kurs hilft Ihnen Javier „Simón“ Cuello, ein auf Benutzererfahrungen spezialisierter Designer, dabei, die Benutzeroberfläche einer Website auf organisierte, kohärente und konsistente Weise zu erstellen, die den tatsächlichen Anforderungen Ihrer Benutzer und Kunden entspricht.
Wir empfehlen, dass Sie auch Javiers andere Kurse bei Domestika konsultieren: Schnittstellendesign mit Sketch und Entwerfen Sie eine köstliche App .
Was lernst du in diesem Onlinekurs?
24 Lektionen & 39 Downloads
Was machen wir im Kurs?
4 Minuten, 34 Sekunden
Vorteile für Sie und Ihr Arbeitsteam
7 Minuten, 48 Sekunden
Teile eines Systems
6 Minuten, 24 Sekunden
Identifizieren Sie den Kontext
7 Minuten, 1 Sekunde
Die Gestaltungsprinzipien denken
7 Minuten, 45 Sekunden
Styleguide 1
13 Minuten, 49 Sekunden
Was ist in diesem Kurs enthalten?
Sie beginnen diesen Kurs mit dem Kennenlernen von Javier, seinen Projekten und Einflüssen während seiner gesamten Karriere sowie einer Einführung in die Hauptkonzepte von Design Systems.
Anschließend entdecken Sie die Vorteile von Design Systems für Sie und Ihr Team und sehen alle Teile, aus denen ein System besteht, einschließlich: die Prinzipien Ihres Designs, den Styleguide, die losen Elemente und Komponenten der Benutzeroberfläche, das Repository des Codes und der Dokumentation.
Javier bringt Ihnen bei, den Zweck Ihres Systems gemäß dem Kontext des Produkts zu identifizieren, und zeigt Ihnen, wie Sie die Kriterien verwenden, die Ihr Design leiten, um die Strategien Ihres Projekts festzulegen. Es wird Ihnen helfen, einen endgültigen Styleguide für Ihre Benutzeroberfläche zu erstellen.
Mach dich an die Arbeit! Mit der Figma-Software entwerfen Sie die einzelnen Elemente, Komponenten, Muster und Prototypen des Hauptbildschirms in verschiedenen Formaten.
Abschließend arbeiten Sie mit den Kommunikations- und Kollaborationselementen, sodass Ihr Designsystem eine kontrollierte Entwicklung aufweist und von allen Teammitgliedern unterstützt wird.
Javier zeigt Ihnen, wie wichtig Design-Token sind und wie Sie die Entwicklung Ihres Systems dokumentieren können. Es zeigt Ihnen, wie Sie eine laufende Arbeit von einer bereits abgeschlossenen unterscheiden und wie Sie mit den verschiedenen Profilen innerhalb eines Teams arbeiten.
Empfohlene Software und Tools für diesen Kurs
Was ist das Kursprojekt?
Sie gestalten die Hauptseite einer Reise-Website in 3 verschiedenen Größen.
Projekte von Kursteilnehmenden
An wen richtet sich dieser Onlinekurs?
Für Interface-Designer, die ein organisiertes, kohärentes und konsistentes Design für Websites und Anwendungen erstellen möchten.
Anforderungen und benötigte Materialien
Sie sollten ein grundlegendes Verständnis von Figma haben, einschließlich des Erstellens von Stilen, Komponenten und automatischen Layoutfunktionen sowie der Kenntnis des Schnittstellendesigns.
Für die Materialien benötigen Sie einen Computer mit installierter Figma-Software. Dieser Kurs wurde mit Figma 116.3.6 erstellt. Wenn Sie eine neuere Version haben, können Sie den Inhalt problemlos verfolgen.
Bewertungen
- vor 2 Monaten
very nice overview and introduction to design systems. so far so good.
- vor 4 Monaten
Até o momento, muito interessante. Vários insights interessantes e pontos de atencao negligenciados muitas vezes.
- vor 5 Monaten
Il corso offre una panoramica abbastanza completa. Purtroppo però la traduzione audio in italiano (e di conseguenza i sottotitoli, che corrispondono perfettamente alla traduzione audio) è davvero pessima. Ci sono troncamenti di frasi e parole/traduzioni insensate che rendono dei passaggi pressoché incomprensibili. Questo compromette notevolmente la qualità del corso per chi ne usufruisce in altra lingua.
- vor 6 Monaten
Very insightful!
- vor 10 Monaten
Un curso bastante completo, me sirvió para reafirmar mis conocimientos en DS. Lo recomiendo mucho si estas empezando en el mundo de los sistemas de diseño.
Was sich in seiner Arbeit widerspiegelt, ist das ständige Bestreben, scheinbar unsichtbare Details zu verbessern, die es einem digitalen Projekt jedoch ermöglichen, auf der Ebene der Benutzererfahrung zu glänzen.
Inhalt
- E1
Einführung
- Präsentation
- Einflüsse
- Was machen wir im Kurs?
- E2
Design-Systeme
- Vorteile für Sie und Ihr Arbeitsteam
- Teile eines Systems
- E3
Die Grundlagen Ihres Designsystems
- Identifizieren Sie den Kontext
- Die Gestaltungsprinzipien denken
- Styleguide 1
- Styleguide 2
- E4
Das System entwerfen
- Elemente 1
- Elemente 2
- Elemente 3
- Komponentendesign 1
- Komponentendesign 2
- Komponentendesign 3
- Komponentendesign 4
- Zusätzliche Komponenten
- Muster
- Bildschirme 1
- Bildschirme 2
- E5
Kommunikation und Zusammenarbeit
- Design-Token
- So dokumentieren Sie das System
- Änderungen und Aktualisierungen
- Arbeitsteams
- AP
Abschlussprojekt
- Einführung zu Design Systems mit Figma
Was erwartet dich in einem Domestika-Kurs?
Lerne in deinem Tempo
Lerne bequem von zuhause aus, in deinem eigenen Tempo und ohne festen Zeitplan. Du entscheidest, wann und wo.
Lerne mit den Profis
Lerne die nützlichsten Techniken und Methoden mit den Profis der Kreativbranche.
Tritt mit den erfahrendsten Experten in Kontakt
Jede Lehrperson übermittelt dir in jeder Lektion leidenschaftlich sein/ ihr Wissen mittels ausführlichen Erklärungen aus professioneller Sicht.
Zertifikate
PLUSErhalte als Plus-Mitglied für jeden Kurs ein von deiner Lehrperson personalisiertes und unterzeichnetes Zertifikat. Teile es in deinem Portfolio, in sozialen Netzwerken oder wo immer du möchtest.
Sei ganz vorne mit dabei
Dank hochwertig produzierter und gestochen scharfer Videos entgeht dir kein einziges Detail. Du hast uneingeschränkten Zugriff auf deinen Kurs und kannst dir so alle Videolektionen so oft ansehen, wie du möchtest.
Teile Wissen und Ideen
Stelle deine Fragen, bitte um Meinungen und biete Lösungsansätze. Teile deine Lernerfahrung mit anderen Schüler*innen in der Community, die genauso kreativ sind wie du.
Sei Teil einer globalen kreativen Community
Die Community umfasst Millionen wissbegierige Menschen weltweit, die Freude an kreativem Ausdruck finden.
Arbeite mit von Profis produzierten Kursen
Um eine einzigartige Online-Lernerfahrung zu garantieren, zählt Domestika auf eine sorgfältige Auswahl der Lehrpersonen und produziert jeden Kurs intern.
FAQ
Ein Designsystem ist eine Sammlung aus Komponenten, Richtlinien und Mustern, die für Konsistenz und Effizienz in digitalen Produkten sorgen. Es erleichtert die Zusammenarbeit, minimiert Fehler und beschleunigt die Entwicklung – ein unverzichtbares Werkzeug für Teams, die visuelle und funktionale Einheitlichkeit anstreben.
Ja, der Kurs richtet sich an Personen mit Designgrundkenntnissen, idealerweise auf mittlerem Niveau, die tiefer in die Erstellung und Verwaltung von Designsystemen für digitale Produkte einsteigen möchten.
Grundlegende Erfahrung im digitalen Design und im Umgang mit Tools wie Figma ist empfehlenswert. Kenntnisse über Komponenten, Interfaces und Designprinzipien helfen, den Kursinhalt optimal zu nutzen.
Du lernst, wie man Designsysteme erstellt und verwaltet, wiederverwendbare Komponenten definiert, Designprinzipien dokumentiert, Arbeitsabläufe optimiert und visuelle Konsistenz in Teams und digitalen Produkten sicherstellt.
Der Kurs zeigt, wie man die Prinzipien von Dieter Rams anwendet, um funktionale, zeitlose und minimalistische Interfaces zu gestalten, die Probleme durch Einfachheit lösen und Form mit Funktion harmonisch verbinden.
Hauptsächlich kommen Figma für das Design und die Komponenten-Erstellung sowie ZeroHeight für die Dokumentation von Styleguides und Prinzipien zum Einsatz – das fördert Zusammenarbeit und einfachen Zugriff auf Systeminformationen.
Ja, du lernst, wie man Komponenten, Prinzipien und Styleguides strukturiert und dokumentiert – mit kollaborativen Tools, um die korrekte Nutzung und Pflege des Systems im Team sicherzustellen.