Hallo!
Ich freue mich, zu Ihnen zurückzukehren, liebe Leser der Community, und die Erfahrungen und Kenntnisse zu teilen, die Sie durch die Arbeit bei der IT-Firma Omega gesammelt haben.
Das Thema Designsysteme wurde anscheinend bereits von allen Seiten betrachtet: Sie finden viele Artikel, Beiträge, Berichte und andere Materialien. Trotzdem hat jeder, der auf diesen Begriff stößt, viele Fragen. Ich werde versuchen, die wichtigsten im Detail zu beantworten:
Was ist ein Designsystem?
Wofür ist das?
Wie erstelle ich es?
Was ist ein Designsystem?
Lassen Sie es uns in der richtigen Reihenfolge sortieren. Das Entwurfssystem ist eine Kombination aus drei Einheiten:
Visuelle Sprache ist das, was wir sehen.
Framework - visuelle Sprachbibliothek, ihr Code.
Richtlinien - Regeln, wie alles aussehen soll und wie es anzuwenden ist.
Es kann davon ausgegangen werden, dass ein Designsystem ein separates Produkt innerhalb eines IT-Produkts ist.
Visuelle Sprache
Die visuelle Komponente des Designsystems umfasst viele Elemente, von denen die wichtigsten sind:
Farben
UI-
– . , , . - , , , .
, , -, , , ? ? , .
Framework
– , , . .
. , « ». , « ».
, ? , . , ? , ?
, .
Guidelines
, -, « », .
, , . , - . . .
, . , ? , :
?
?
?
UI- : , .
, - . , - . , , .
-?
IT-, : -? , – « »?
. , . .
– . - .
, Figma . , , .
- . . .
– . .
, , , , .
, : , , .
IT- .
, : , , .
UX
, , . , , .
- user flow (, , ). , user flow .
- . , , .
-
-, , , .
-, - – . . - . : , - .
, - . - , .
, - - , , Figma. , UI-kit. , Figma ,
-?
-. , . , . (Brad Frost) «Atomic Web Design».
, :
Nach der Erstellung eines Designsystems ist es wichtig, herauszufinden, wie es in der Unternehmenspraxis implementiert werden kann. Im zweiten Artikel werde ich darüber sprechen, wie Schritt für Schritt der Prozess der Implementierung eines Designsystems in einem Unternehmen aufgebaut werden kann.
Ich hoffe, jeder hat viel aus dem Artikel gelernt. Und ich war wieder einmal davon überzeugt, dass die Arbeit an dem Artikel Wissen strukturiert und zu weiteren Studien motiviert.
Vielen Dank für Ihre Aufmerksamkeit!