Erstellen Sie einen Styleguide für Apps
Ein Kurs von Christian Vizcarra, Senior Produktdesigner
Erfahren Sie, wie Sie mit Sketch einen Styleguide dokumentieren und erstellen
Eines der Schlüsselelemente für das Design mobiler Anwendungen ist der Style Guide oder der visuelle Style Guide, der als Dokumentation und Leitfaden für alle an der Erstellung der App beteiligten Teams dient, insbesondere für Programmierer, die Sie müssen die Entwürfe umsetzen. In diesem Kurs lernen Sie, wie Sie einen schrittweisen Styleguide erstellen, damit er nicht nur gut aussieht, sondern auch hochfunktionell ist.
Christian Vizcarra - Produktdesigner und Kurslehrer Design einer mobilen Anwendung - hat mehr 9 Jahre Entwicklung digitaler Produkte, anerkannt durch CSS Design Awards, Behance und Awwwards. In diesem Kurs lernen Sie, alle Komponenten zu dokumentieren, zu kommunizieren und zu exportieren, um einen professionellen Style Guide zu erstellen.
Was lernst du in diesem Onlinekurs?
20 Lektionen & 8 Downloads
Was ist in diesem Kurs enthalten?
Zuerst lernen Sie Christian kennen, seine berufliche Laufbahn, seine Erfahrung bei der Erstellung digitaler Produkte und das Ziel seines Kurses, die Erstellung von Styleguides für mobile Anwendungen.
Sie werden sehen, was ein Style Guide , wofür er gedacht ist und warum er beim Erstellen eines digitalen Web- oder Anwendungserlebnisses so wichtig ist. Außerdem werden Sie sehen, was ein UI-Kit ist, wofür es ist, welche Eigenschaften es hat und welche Unterschiede es zu dem visuellen Styleguide hat, den Sie in diesem Kurs erstellen. Sie beenden die erste Einheit und sehen Beispiele für bewährte Methoden zum Erstellen Ihres Handbuchs.
Als Nächstes überprüfen Sie alle Elemente, aus denen ein Style Guide besteht. Sie lernen, sie zu definieren, zu dokumentieren und zu exportieren. Sie beginnen mit den Symbolen: wie man sie erstellt und wie wichtig sie sind; und Sie werden mit dem -Layout , dem -Raster , den vorhandenen Raumtypen und den Farben fortfahren.
Anschließend lernen Sie die Typografie kennen, lernen Hierarchien kennen, dokumentieren Größen, Gewichte, Stile und alles, was zur Generierung von Konsistenz in Ihrem digitalen Produkt erforderlich ist.
Sie werden sehen, wie Sie Symbole erstellen und wie Sie die Ikonografie Ihres Projekts richtig dokumentieren sollten. Darüber hinaus werden Sie verstehen, wie Sie die UI-Komponenten dokumentieren: Schaltflächen, Formulare, Karten usw.
Zum Abschluss lernen Sie, einen bereits erstellten Style Guide auf ein neues Produkt anzuwenden und die Assets für Programmierer zu exportieren.
- 99% positive Bewertungen (137)
- 3,976 Lernende
- 20 Lektionen (2 Stdn. 18 Min.)
- 8 Downloads
- Online und in deinem Tempo
- Verfügbar via App
- Audiosprache: Spanisch, Englisch, Französisch, Italienisch, Portugiesisch, Türkçe
- Spanisch · Englisch · Portugiesisch · Deutsch · Französisch · Italienisch · Polnisch · Niederländisch · Türkçe
- Niveau: Anfänger
- Dauerhaft unbegrenzter Zugang
Adobe XD
Figma
InVision
SketchWas ist das Kursprojekt?
Sie erstellen einen Style Guide für eine mobile Anwendung.
Projekte von Kursteilnehmenden
An wen richtet sich dieser Onlinekurs?
Anfängliche Designer, UI / UX-Junioren und alle, die sich für Design interessieren und an der Erstellung eines digitalen Produkts beteiligt sind.
Anforderungen und benötigte Materialien
Sie benötigen Grundkenntnisse in Webdesign und mobilen Anwendungen sowie Grundkenntnisse in Sketch oder einer anderen Designanwendung für interaktive Web-Erlebnisse oder Apps.
Für die Materialien benötigen Sie einen Computer mit Sketch (denken Sie daran, dass Sketch nur mit Apple funktioniert) oder andere Designprogramme wie Figma, InVision, Adobe XD (diese 3 funktionieren unter Windows und Apple).
Bewertungen
Christian Vizcarra
Ein Kurs von Christian Vizcarra
Christian Vizcarra ist Senior Produktdesigner und Digitalstratege mit einer 360-Grad-Produktvision dank seiner Anfänge in Marketing, 3D, Video und Social Media. Seit 8 Jahren widmet er sich hauptsächlich der Erstellung digitaler Produkte, der Gestaltung von Websites, Anwendungen und allen Arten von Schnittstellen für Unternehmen und Start-ups, unter anderem in Ländern wie Spanien, Kanada, den USA, China oder Brasilien.
Aus Leidenschaft für Ideen erforscht er immer wieder neue Wege, um neue Fähigkeiten und Techniken zu erlernen, um sich als Designer weiterzuentwickeln. Daher sein persönliches Projekt namens The Design Project, eine 60-tägige Non-Stop-Design-Herausforderung. Seine Arbeit wurde von Awwwards, Behance und CSS Design Awards ausgezeichnet.
Inhalt
-
E1
Hallo!
-
Präsentation
-
Einflüsse
-
Was machen wir im Kurs?
-
-
E2
Einführung
-
Was ist ein Styleguide?
-
Unterschiede zwischen Styleguide und UI Kit
-
Gute Praktiken zum Erstellen eines Styleguides
-
-
E3
Elemente im Styleguide
-
Wie erstelle ich Symbole?
-
Layout
-
Räume
-
Farben
-
Typografie
-
Ikonographie
-
UI-Komponenten Teil 1
-
UI-Komponenten Teil 2
-
UI-Komponenten Teil 3
-
UI-Komponenten Teil 4
-
UI-Komponenten Teil 5
-
-
E4
Anwenden eines Styleguides
-
Anwenden meines Styleguides
-
Assets für die Programmierung exportieren
-
Und wenn es Änderungen gibt
-
-
AP
Abschlussprojekt
-
Erstellen Sie einen Styleguide für Apps
-
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 ein von deiner Lehrperson personalisiertes und unterzeichnetes Zertifikat. Füge es deinem Portfolio hinzu oder teile es online, um deine Teilnahme zu bestätigen.
-
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, document, and implement Style Guides, manage UI components, improve collaboration between design and development, and achieve visual consistency in digital products using current tools and practices.
This course is designed for those with basic digital design knowledge, perfect for anyone looking to deepen their skills in documentation, Style Guide creation, and working closely with development teams.
Basic digital design skills and familiarity with tools like Sketch or Figma are recommended. You don’t need to be an expert, but you should be interested in documentation and improving collaborative workflows.
You’ll learn to document specifications clearly, create effective Style Guides, and use collaborative tools that reduce errors and make it easier for developers to understand your designs.
A Style Guide is a set of style rules and visual components that ensure consistency and efficiency in designing and building digital products.
You’ll get hands-on experience with tools like Sketch, Figma, Zeppelin, InVision, and Abstract to create, organize, and document interface components and Style Guides.
Yes, you’ll learn how to build UI Kits and understand the difference: a UI Kit is a collection of reusable components, while a Style Guide documents visual rules and specifications.
Adobe XD
Figma
InVision
Sketch
Excelente curso. Só faltou material de apoio. Poderia ter uma versão com o figma
excelente curso , me gusta que el workflow sea en sketch.
Excelente curso, me ha gustado y mejor aun muy bien explicado. :D
Awesome course!
Curso muito bom!!! Abriu meu horizontes para a área e me instigou a querer estudar ainda mais!!