Erstellung von UI-Kits mit Sketch
Ein Kurs von Nodos .Interface und Interaktionsdesigner
Ein Kurs von Nodos ., Interface und Interaktionsdesigner
Lerne vorgefertigte Dateien mit der Atomic Design Methode für Anwendungen und Webseiten zu erstellen, um den Workflow zu verbessern
Die Hauptregel von Anwendungen besteht darin, den Benutzern das Leben zu erleichtern. Das Erstellen einer Anwendung von Grund auf kann jedoch ein sehr komplizierter Prozess sein. Daher sind UI-Kits, gebrauchsfertige Sätze von Elementen im Schnittstellendesign, eine wirklich nützliche Ressource.
In diesem Kurs lernen Sie, wie Sie UI-Kits für Anwendungen und Websites in Sketch vom Designer Migue, auch bekannt als El Nodos, erstellen. Darüber hinaus erfahren Sie, wie Sie sie aktualisieren, um sie in zukünftigen Projekten wiederzuverwenden und Ihren Workflow noch weiter zu optimieren. Erwecken Sie atemberaubende Benutzeroberflächen zum Leben und schaffen Sie schnell und einfach unvergessliche Erlebnisse.
Was lernst du in diesem Onlinekurs?
17 Lektionen & 21 Downloads
Was werden wir während des Kurses tun?
2 Minuten, 25 Sekunden
Was ist ein UI-Kit?
7 Minuten, 52 Sekunden
UI-Muster und -Komponenten in Sketch
4 Minuten, 57 Sekunden
Atomic Design
11 Minuten, 18 Sekunden
Das Projekt
10 Minuten, 16 Sekunden
Farben, Schriftart und Raster
20 Minuten, 13 Sekunden
Was ist in diesem Kurs enthalten?
Sie lernen zunächst Ihren Lehrer kennen und erfahren, wie er sich beruflich weiterentwickelt hat. Außerdem wird das Projekt erläutert, an dem Sie während des gesamten Kurses arbeiten werden.
Als Nächstes erfahren Sie, was ein UI-Kit ist und was es von einem Design-System unterscheidet. Sie sehen die Schnittstellenentwurfsmuster und lernen, Ihre Dateien gemäß der von Migue verwendeten Methode zu organisieren.
Sie überprüfen das Projekt, auf dem Sie basieren, um Ihr UI-Kit zu erstellen, und analysieren die zu erstellenden Komponenten. Anschließend definieren Sie Ihren Styleguide, indem Sie sich die Farben, die Schriftart, die Gitter (Gitter) und den Symbolsatz ansehen.
Sie werden Maßnahmen ergreifen, indem Sie zuerst die Atome erstellen, dann einige davon kombinieren, um die Moleküle zu erstellen, und schließlich einige Bildschirme mit all diesen Komponenten erstellen.
In der letzten Einheit lernen Sie in Migue, wie Sie Ihr UI-Kit in Sketch als Bibliothek verwenden und es auf dem neuesten Stand halten und bei Bedarf neue Komponenten hinzufügen.
Empfohlene Software und Tools für diesen Kurs
Was ist das Kursprojekt?
Sie erstellen ein UI-Kit, mit dem Sie Ihre Arbeit beim Erstellen von Bildschirmen für Ihre Anwendung optimieren können. Während des Kurses arbeiten sie über eine Musik-App.
An wen richtet sich dieser Onlinekurs?
Für Designer, die in die Welt des Interface-Designs einsteigen möchten, UI-Designer, Junior-Interaktionsdesigner und alle, die sich für Anwendungsdesign interessieren oder sich mit digitalem Produktdesign befassen.
Anforderungen und benötigte Materialien
Für diesen Kurs sind Grundkenntnisse in Sketch erforderlich.
Für Materialien benötigen Sie einen Computer mit macOS Mojave oder höher und die neueste Version von Sketch (Sie können die Testversion auf der Website herunterladen). Ein Wacom zu haben ist ein Plus, aber es ist nicht wesentlich.
Bewertungen
- vor 1 Jahr
El curso es una base para iniciar a trabajar con la metodología Atomic Design.
- vor 3 Jahren
La neta no era lo que esperaba, pensé que el UI Kits te ayudaba a crear el diseño de la aplicación, pero ya lo tenia creado y solo agrupo los componentes, y también no me gusto el estilo en como hablaba, parecía que le faltaba el aire para pronunciar palabras, disculpen mi critica pero así lo percibí
- vor 4 Jahren
Increible curso
- vor 4 Jahren
Muy completo
- vor 5 Jahren
El curso me ha parecido super claro y completo. El profesor da muchos detalles y es super dinamico para todo lo que explica en tan poco tiempo. Super recomendable.
Derzeit konzentriert er sich auf die Erstellung skalierbarer Designsysteme und -muster. Darüber hinaus ist er Mitbegründer der SketchMX-Community, in der regelmäßig Meetups für die Produktdesign-Community organisiert werden, an denen Designer, Entwickler, UX-Autoren, Produktdesigner und alle, die sich für digitales Produktdesign interessieren, teilnehmen.
Inhalt
- E1
Einführung
- Präsentation
- Einflüsse
- Was werden wir während des Kurses tun?
- E2
Skizzieren Sie Konzepte und Einstellungen
- Was ist ein UI-Kit?
- UI-Muster und -Komponenten in Sketch
- Atomic Design
- E3
Mit Sketch den Grundstein für unser UI Kit legen
- Das Projekt
- Farben, Schriftart und Raster
- Farben, Schriftart und Raster 2
- Icon Set
- E4
So erstellen Sie atomare Komponenten in Sketch
- Komponenten erstellen: Atome
- Komponenten erstellen: Atome 2
- Komponenten erstellen: Moleküle
- Gebäudebildschirme mit Atomen und Molekülen
- E5
Bibliotheken in Skizze
- UI Kit als Bibliothek in Sketch
- Fügen Sie unserem UI-Kit neue Komponenten hinzu
- Präsentieren Sie Ihr UI Kit
- AP
Abschlussprojekt
- Erstellung von UI-Kits mit Sketch
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
You’ll learn how to create, organize, and document visual design systems, UI Kits, and reusable components in Sketch, using methodologies like Atomic Design and Material Design patterns for mobile and web apps.
This is an intermediate-level course, so it’s recommended that you have basic knowledge of digital graphic design or prior experience with tools like Sketch or Figma.
You’ll need a Mac with Sketch installed, internet access, and basic design knowledge. Familiarity with digital interfaces and usability concepts is recommended.
Atomic Design is applied by breaking components into atoms, molecules, and organisms, enabling you to build modular, scalable, and easy-to-maintain interfaces in Sketch.
Yes, the course guides you step-by-step to create, organize, and reuse a UI Kit in Sketch, centralizing components, styles, and visual elements for mobile or web apps.
Yes, you’ll learn to create, document, and manage visual design systems, including style guides, color palettes, typography, and components.
Yes, the course shows you how to check color contrast between backgrounds and text, applying accessibility principles to improve readability and user experience.