Sketch Tutorial Series

So verbessern Sie Ihre Benutzeroberflächen mithilfe der Designprinzipien: Homepage, Teil 1

Eine fortlaufende Tutorial-Reihe zeigt Ihnen, wie Sie durch Anwendung von Design-Prinzipien konsistente, klarere und stärkere Benutzeroberflächen erstellen

Na hallo da!

Willkommen zu meiner fortlaufenden UI & UX Design Tutorial-Reihe, in der ich Ihnen zeigen werde, wie Sie durch die korrekte Anwendung grundlegender Designprinzipien wie Kontrast, Abstand, Wiederholung und Nähe auf einfache Weise einheitlichere, klarere und stärkere UI-Designs erstellen können Alles ohne Kompromisse bei Ihrer Kreativität.

Zuerst nehmen wir es zurück, waaaay zurück ...

Ich habe meine Karriere als Grafikdesignerin in den frühen 90ern begonnen, in einer Zeit, in der es zweifelhafte Modewahlen (schuldig), All-Night-Raves (schuldig, soweit ich mich erinnern kann) und religiöses Anschauen von The Fresh Prince of Bel Air gab (schuldig, aber wer nicht).

In dieser Zeit habe ich auch meine ersten Schritte in die Welt des Printdesigns professionell gemacht.

Lange bevor das Web, wie wir es kennen, auftauchte, begann ich, die Designprinzipien vollständig zu verstehen, und als ich diese relativ einfachen Regeln befolgte und umsetzte, entdeckte ich, dass ich viel klarere, stärkere und konsistentere Grafiken erstellen konnte. Grundsätze und Regeln, die sich bis heute nicht geändert haben und für das UI-Design noch relevant sind, wenn nicht sogar noch relevanter.

Wie auch immer, ich habe unzählige Artikel gesehen, in denen die wichtigsten Designprinzipien aufgelistet sind, und nicht viel mehr. Ich wollte etwas anderes tun und Ihnen zeigen, wie Sie diese Designprinzipien im Handumdrehen implementieren und warum ich das begründe wählte einige aus, da wir tatsächlich gemeinsam ein Designprojekt durcharbeiten.

Klingt gut? Genial! Lass uns das machen…

Also, was schaffen wir genau?

Im ersten Eintrag dieser Tutorial-Reihe zeige ich Ihnen, wie Sie eine einfache Homepage für eine fiktive Modemarke erstellen. Diesen ersten Eintrag teile ich in 4 leicht verdauliche Teile auf, wobei die folgenden Teile wöchentlich eintreffen.

Halten! Vergessen Sie nicht die erforderlichen Dateien ...

Bevor wir beginnen, stellen Sie bitte sicher, dass Sie die Dateien heruntergeladen haben, die Sie für dieses Tutorial benötigen.

  • Cabana Design System (Tutorial-Version)
  • Bilder
  • Schriften

Hier können Sie die .zip-Datei herunterladen.

HINWEIS: Wenn Sie sich einen schnellen Überblick über das Cabana Design System verschaffen möchten, lesen Sie diesen praktischen Artikel hier.

"Muss ich Sketch verwenden?"

"Brauche ich eigentlich das Cabana Design System, um mitzumachen?"

Das tust du nicht. Diese Tutorial-Reihe enthält zahlreiche Informationen, die unabhängig vom Designtool sind. Sie sind daher nicht erforderlich. Sie können auch gerne einige der angezeigten Designtipps und -ratschläge wegnehmen, unabhängig davon, welches Designtool Sie verwenden.

Aber…

… Um diese Tutorial-Serie bestmöglich zu verfolgen, würde ich empfehlen, Sketch zu installieren und das Cabana Design System bereit zu halten.

Vor allem mit Cabana können Sie sehen, wie schnell Sie die erforderlichen Benutzeroberflächen erstellen können, sodass Sie sich leichter auf die Konstruktionsprinzipien und Best Practices konzentrieren können, die ich in dieser Serie behandeln werde.

Cabana heruntergeladen? Schriften installiert? Bilder bereit?

Genial! Kommen wir dazu, Leute ...

Header erstellen

In Teil 1 konzentrieren wir uns auf das Header-Element unseres Homepage-Designs, in dem ich Ihnen zeige, wie Sie bestimmte Gestaltungsprinzipien anwenden, wenn Sie ein solches UI-Element erstellen.

Okay. Beginnen wir mit der geöffneten Cabana Design System-Skizzendatei!

Arbeiten mit den 8pt- und Bootstrap Grid-Systemen

In einem meiner Tutorials habe ich bereits erwähnt, wie sehr ich es liebe, mit dem 8pt Grid System an so ziemlich allen meinen Projekten zu arbeiten, und das werden wir auch für diese Tutorialserie verwenden. Wenn Sie es also noch nicht getan haben, Lassen Sie mich Ihnen zeigen, wie Sie die Anstoß-Einstellungen in Sketch schnell einrichten, damit Sie Elemente in 8-Punkt-Schritten leicht anstoßen können, während Sie dieses Tutorial durcharbeiten.

Wählen Sie in der Menüleiste „Skizze“> „Voreinstellungen“ und im Bedienfeld „Voreinstellungen“ die Option „Leinwand“.

Fügen Sie im Abschnitt Nudging 8 in das Feld Move objects using Shift-Arrow keys ein.

In diesem Tutorial verwenden wir nicht nur das stets zuverlässige 8pt-Rastersystem für Abstandselemente, sondern auch das Bootstrap-Raster für die Spaltenstruktur.

Lassen Sie sich kurz zeigen, wie Sie das Raster auch dafür einrichten ...

Wählen Sie in der Menüleiste „Ansicht“> „Leinwand“> „Layouteinstellungen“ und geben Sie im Bedienfeld die folgenden Einstellungen ein…

  • Gesamtbreite 1140px
  • Offset 30px
  • Spaltenanzahl 12
  • Dachrinne außen geprüft
  • Dachrinnenbreite 30px
  • Spaltenbreite 65px

Jetzt ist Ihnen möglicherweise bewusst, dass das Bootstrap-Grid-System eine 30-Punkte-Rinne verwendet, die, als ich sie das letzte Mal überprüft habe, nicht wirklich durch 8 teilbar ist (was das 8-Punkte-Grid-System verwendet).

Was ist die Problemumgehung, die Sie möglicherweise fragen?

Wenn ich zuvor eine Kombination aus dem 8pt- und dem Bootstrap-Grid-System verwendet habe, habe ich mich immer für den Soft-Grid-Ansatz entschieden, im Gegensatz zu… darauf warten… und die offensichtliche… Hard-Grid-Option angegeben.

Mit der soeben erwähnten Soft Grid-Methode platziere ich Elemente in meinem Design mit dem 8pt-Raster vertikal und richte Elemente wie Bilder, die Breite von Textblöcken usw. mit dem Bootstrap-Raster horizontal aus .

Zitat aus: https://spec.fm/specifics/8-pt-grid

Es gibt zwei bekannte Versionen dieses Systems. Einer, der Elemente in ein vom System angezeigtes Raster einfügt, das in Schritten von 8 Punkten definiert ist (wir nennen dies die Methode "Hartes Raster"), und ein anderer, der einfach Schritte von 8 Punkten zwischen einzelnen Elementen misst (wir nennen dies die Methode "Weich") Gittermethode).
Das Argument für die Soft-Grid-Methode ist, dass die Verwendung eines tatsächlichen Rasters beim Codieren einer Schnittstelle keine Rolle spielt, da Programmiersprachen diese Art von Gitterstruktur nicht verwenden - sie wird einfach weggeworfen. Wenn die Geschwindigkeit, mit der Sie zu einem hochwertigen, programmierbaren Modellsatz gelangen, Vorrang hat, kann die Umgehung des zusätzlichen Verwaltungsaufwands für zusätzliche Ebenen durch Hard Grid zugunsten der flüssigeren, minimaleren Struktur von Soft Grid von Vorteil sein.

Klingt gut? Cool. Lassen Sie uns entwerfen ...

Einrichten der Zeichenfläche

Stellen Sie sicher, dass Sie die Seite mit der Bezeichnung "Tutorial" ausgewählt haben, und erstellen Sie anschließend eine neue Zeichenfläche (A) mit den folgenden Abmessungen.

  • Breite 1200px
  • Höhe 800px

… Und benennen Sie es einfach um (Cmd + R) in „Header“.

Hintergrundfarbe

Fügen Sie, während die neue Zeichenfläche noch ausgewählt ist, ein Rechteck (R) mit den gleichen Abmessungen ein und wählen Sie dann im Inspektor den Füll- / Primärebenenstil aus dem Cabana Design System aus.

Hintergrundbild

Fügen Sie im Menü Einfügen in der Symbolleiste das folgende Bild image-01.png aus dem zuvor heruntergeladenen Ordner Images / Header ein.

Skalieren Sie das Bild mit dem Größenänderungswerkzeug (Cmd + K) auf etwa 90% und richten Sie es dann mithilfe der Ausrichtungsoptionen oben im Inspektorfenster sowohl horizontal als auch vertikal innerhalb der Zeichenfläche aus.

SKETCH-KURZTIPP:

Wenn Sie feststellen, dass Sie die Funktion "Bilder entfernen" in Sketch (oder einem anderen Bild) verwenden und gelegentlich wie ich vor dem Einfügen in Sketch etwas faul sind, vergessen Sie nicht, dass Sie dies immer tun können Halten Sie die Dateigröße Ihres Skizzendokuments auf einem vernünftigeren Niveau, indem Sie Ihr Bild auswählen und dann in der Menüleiste "Ebene"> "Bild"> "Dateigröße minimieren" auswählen. Keine 10-MB-Bilder mehr von Unsplash, die Ihre Sketch-Dateien aufblähen.

Image-Lite im Haus!

Endlich. Sperren Sie im Ebenenbedienfeld sowohl die Bild- als auch die Farbebene.

Logo + Navigation

Setzen wir unser Logo schnell ein und konzentrieren uns dann auf das Schlüsselelement im oberen Bereich unserer Kopfzeile, die Navigation.

Fügen Sie im Ordner "Images / Header" die Datei "logo.svg" ein, schalten Sie die Bootstrap-Hilfslinien um (Strg + L) und fangen Sie das Logo in der ersten Spalte.

Für die Navigation werden wir nur eine Handvoll Textelemente, ein paar Symbole und ein Konstruktionsprinzip namens Proximity in die Praxis umsetzen, auf das ich später noch näher eingehen werde.

Wenn Sie sich zuerst auf die Textelemente konzentrieren, wählen Sie in der Symbolleiste Textstile aus und fügen Sie die folgende Stilbeschriftung / Schriftfamilie 1 / Links / Weiß / Normal ein, machen Sie zwei Duplikate dieser Textebene und bearbeiten Sie dann den Wortlaut der einzelnen…

  • MÄNNER
  • FRAU
  • SAMMLUNGEN

Platzieren Sie diese Textelemente im 8pt-Raster in einem Abstand von 24pt und gruppieren Sie sie dann (Cmd + G).

SCHNELLE NOTIZ:

Ich habe hier für die Navigationselemente Großbuchstaben / Großbuchstaben gewählt und habe sie bei einer normalen Schriftgröße sowie einer bestimmten Schriftgröße gehalten. Diese Stilauswahl wird für weitere Navigations- / Linkelemente in dieser Tutorialserie verwendet.

Ich strebe hier eine Wiederholung an, um sicherzustellen, dass ähnliche Elemente (dh Links) in unserem Design auf ähnliche Weise erscheinen, was wiederum ein klares Gefühl für Konsistenz und Kohäsivität vermittelt und es dem Benutzer ermöglicht, ihre Elemente leicht zu fokussieren Aufmerksamkeit auf wichtige Elemente wie Links.

Nun zu den Symbolen, wo wir eines für den Warenkorb und das andere für die Suchfunktion auswählen.

Der Schlüssel hierbei ist die Auswahl eines festgelegten Symbols, das die auszuführende Aktion klar darstellt und schnell die richtige Bedeutung und Funktionalität des Symbols vermittelt. Alles andere führt nur zu Verwirrung und wird zu einem kognitiven Hindernis für den Benutzer.

Haben Sie von erlerntem Verhalten gehört?

Durch das so genannte erlernte Verhalten (Standardaktionen, die wir unbewusst ausführen) haben wir als Benutzer verstanden, dass ein Symbol, das in unserem Beispiel mit der Warenkorbseite unserer Website verknüpft ist, entweder durch ein Warenkorb- oder ein Warenkorbsymbol dargestellt wird.

Das gleiche gilt für eine Suchfunktion. Gelerntes Verhalten hat uns einmal mehr gelehrt, zu erwarten, dass das Lupensymbol diese oben genannte Aktion darstellt. Vermeiden Sie Verwechslungen jeglicher Art, seien Sie nicht zu rebellisch und versuchen Sie immer, sich an etablierte Symbole in Ihren Benutzeroberflächen zu halten.

Nachdem dies gesagt ist, lasst uns weitermachen und unsere 2 Icons in Position bringen ...

Wählen Sie in der Symbolleiste die Option Symbole und fügen Sie die folgenden Symbole ein.

  • Einkaufstasche
  • Suche

… Ändern Sie dann unter Verwendung unserer vorhandenen Ebenenstile deren Farbe in „Füllen / Weiß“.

Wenn die Ebenenhilfslinien sichtbar sind (Strg + L), fangen Sie sie an der letzten Spalte und platzieren Sie sie dann mit dem 8pt-Rastersystem in einem Abstand von 24pt.

Gruppieren Sie die Symbole (Cmd + G), benennen Sie die Gruppe (Cmd + R) um und platzieren Sie die zuvor erstellte Textgruppe 40pt links von dieser neuen Symbolgruppe.

Gruppieren Sie schließlich (Befehlstaste + G) alle 3 Gruppen (Logo, Navigation und Symbole) und platzieren Sie diese neue Gruppe 32pt im oberen Bereich der Zeichenfläche.

Warenkorb Vs Bag Icon Debatte. Kampf!

TL; DR

Fühlen Sie sich wohl mit dem Taschen-Symbol für Mode- / Bekleidungsmarken und dem Warenkorb-Symbol für so ziemlich alles andere.

Dies ist eine Diskussion, über die ich einige Male im Internet diskutiert habe, und ich werde meine Gedanken hier schnell mitteilen.

Jetzt verstehe ich, dass das Warenkorb-Symbol sehr unterschiedlich ist und eine starke Beziehung zum Einkaufen hat, da es ein in Geschäften häufig verwendetes Objekt ist und das Taschen-Symbol aufgrund dieser Tatsache möglicherweise leichter falsch interpretiert werden kann, obwohl Sie Taschen verwenden, wenn kommst du zur Kasse?!? Aber das ist eine andere Debatte.

Persönlich glaube ich, dass es davon abhängt, was der Online-Shop verkauft. Ich hatte immer das Gefühl, dass Mode- / Bekleidungsmarken hier eine Ausnahme zu sein scheinen. Und Sie müssen sich nur die Onlineshops von Tommy Hilfiger, Gucci, Versace, Dolce & Gabbana und anderen Bekleidungsmarken ansehen, ob High- oder Low-Fashion-Marken, bei denen das Symbol der Tasche nun de facto zu sein scheint UI Wahl.

Ich habe einmal den Kommentar "Sie würden keinen Einkaufswagen oder Trolley in einem der physischen Geschäfte verwenden" gelesen, der sich auf die Auswahl der Benutzeroberfläche einer Kleidungsmarke bezieht. Okay. Sie haben einen Punkt. So'ne Art. Leider wird die Mehrheit der Endbenutzer natürlich nicht so denken, wenn sie mit Ihrer Website oder App interagieren. Das passiert so nicht.

Trotzdem habe ich ehrlich gesagt das Gefühl, dass das Taschensymbol zu einem erlernten Verhalten geworden ist, wie ich es zuvor erwähnt habe, wenn es um die Benutzeroberfläche von Online-Shops für Mode- / Bekleidungsmarken geht.

In einigen Kreisen ist dies immer noch umstritten. Wenn Sie also nicht 100% zufrieden sind, bleiben Sie beim Warenkorb-Symbol.

Ok Debatte vorbei. Vorerst;) Zurück ...

Nähe nutzen, um Beziehungen zu signalisieren

Wir haben jetzt ein Konstruktionsprinzip namens Nähe zwischen den Gruppen Textnavigation und Symbol.

Nähe ist der Prozess, bei dem sichergestellt wird, dass verwandte Designelemente zusammengefügt werden, was eine Beziehung untereinander signalisiert (in unserem Fall die Textlinks und Symbole), wodurch die Wahrnehmung des Benutzers beim Durchsuchen einer Site oder App beschleunigt wird.

Hier mit den Navigations- und Symbolen verwenden wir ein sehr verbreitetes Beispiel für Proximity bei der Arbeit. Wir werden es jedoch noch einmal ansprechen, während wir uns durch das Homepage-Design arbeiten.

Verbessern Sie den Kontrast mit einem einfachen Overlay

Kontrast ist ein Konstruktionsprinzip, das bei korrekter Verwendung ein Gefühl der Ausgewogenheit und Harmonie in Ihrem Design vermitteln kann und dazu dient, Textinformationen so darzustellen, dass die Botschaft für den Benutzer viel klarer wird und die Lesbarkeit kombinierter Elemente auf dem Display verbessert wird Seite über die korrekte Verwendung von Farbe, Größe und Typ, um nur einige zu nennen.

Zum gegenwärtigen Zeitpunkt besteht ein großer Kontrast zwischen dem Logo, der Navigation und der Hintergrundfarbe. Alles sieht gut aus. Es ist mehr als lesbar und vor allem für Benutzer mit Sehbehinderungen zugänglich.

Im nächsten Abschnitt werden wir jedoch Titel, Untertitel und Handlungsaufforderung hinzufügen, die sich in ihrer jetzigen Form, unabhängig von der Farbe oder Größe, die wir für diese Elemente auswählen, fürchterlich vom Bild abheben Die Dame und zu einem gewissen Grad die Hintergrundfarbe haben einen großen Einfluss auf die Lesbarkeit.

Lass uns loslegen und das mit einem einfachen Overlay schnell beheben ...

Fügen Sie bei ausgewählter Zeichenfläche ein Rechteck (R) mit den gleichen Abmessungen ein und wählen Sie dann im Informationsfenster den Stil Überlagerung / Schwarze Ebene aus.

Dann platziere diese neue Ebene direkt über den Ebenen Bild und Hintergrundfarbe.

Im Informationsfenster sehen Sie, dass die Überlagerung eine Deckkraft von 60% hat, was uns hoffentlich genügend Kontrast und Lesbarkeit zwischen den Textelementen bieten sollte, die wir in Kürze hinzufügen werden. Wenn im Moment nichts anderes hinzukommt, wird der Kontrast zwischen der Navigations- und der Hintergrundfarbe etwas erhöht.

Hinzufügen von Titel, Untertitel und Symbol

Okay. Lassen Sie uns unseren Text (Titel + Untertitel) und das Wiedergabesymbol einfügen und den Kontrast zwischen diesen und unseren vorhandenen Elementen (Bild, Hintergrundfarbe und Überlagerung) überprüfen.

Fügen Sie zunächst im Menü Textstile den folgenden Stil ein…

Hero / Schriftfamilie # 2 / Center / White / Bold

… Und ändern Sie den Wortlaut entsprechend.

Fügen Sie dann im Menü Textstile noch einmal den folgenden Stil ein…

Body / Schriftfamilie # 1 / Center / White / Regular

… Und dort auch den Wortlaut bearbeiten.

Im Informationsfenster sehen Sie, dass für den Titel Playfair Display und für den Untertitel Roboto verwendet wird. Lassen Sie mich ein wenig erklären, warum ich mich für diese Schriftart entschieden habe.

Mit Playfair Display haben Sie eine Schriftart, die sich hervorragend für Titel und Überschriften eignet, jedoch nicht so gut für größere Textpassagen geeignet ist. Die feinen Striche können die Lesbarkeit beeinträchtigen, insbesondere bei kleineren Bildschirmgrößen. Deshalb habe ich mich für den vielseitigen Roboto entschieden für den Untertitel und in späteren Kapiteln für den Body-Text, da er auf Bildschirmen unterschiedlicher Größe scharf wiedergegeben wird und auch dort eine gute Lesbarkeit aufweist.

Sie eignen sich im Allgemeinen hervorragend für Schriftpaarungen, vor allem aber für die Art der Stimme und die Ästhetik, die wir mit unserem fiktiven Modemarkendesign projizieren.

Wenn unsere 2 Textelemente vorhanden sind, fügen wir das letzte Element für unsere Kopfzeile hinzu und richten die Elemente korrekt aus.

Fügen Sie im Menü Symbole Folgendes ein:

Symbol / Spielkreis

… Dann erhöhen Sie mit dem Skalierungswerkzeug (Cmd + K) die Höhe und Breite auf 64 Pixel und ändern die Füllfarbe im Inspektor auf Weiß.

Platzieren Sie unter Verwendung des 8pt-Rastersystems die beiden Textelemente 16pt vertikal voneinander entfernt und platzieren Sie diese 24pt für das Symbol am unteren Rand der Textelemente.

Richten Sie mit den Ausrichtungswerkzeugen im Inspektor alle drei Elemente horizontal aus und gruppieren Sie sie dann (Cmd + G).

Wenn diese neue Gruppe ausgewählt ist, können Sie sie mit den Ausrichtungswerkzeugen erneut vertikal und horizontal in der Zeichenfläche zentrieren.

Hoffentlich können Sie sehen, dass wir mit der richtigen Kombination aus Farbe, Typ und Größe ein Designelement erstellen konnten, das jetzt die perfekte Mischung aus Kontrast und Lesbarkeit bietet.

Perfekt. Das ist unser Header-Design!

SKETCH-KURZTIPP:

Ein großartiges kleines Tool, mit dem ich besser zugängliche Benutzeroberflächen erstellen und Zugänglichkeits- und Kontrastprobleme in meinen Designs schnell erkennen kann, ist Contrast https://usecontrast.com. Es ist ein so einfaches, aber sehr nützliches Tool, das Sie an Ihrer Seite haben sollten. Ich benutze es regelmäßig und werde es während dieser Tutorial-Serie verwenden.

Natürlich ist Contrast eine kostenpflichtige App. Wenn Sie also nicht ein paar Dollar ausgeben möchten, gibt es Stark https://getstark.co, ein kostenloses Sketch-Plugin, das ähnliche Ergebnisse wie Contrast erzielt.

Raue Notizen…

Ursprünglich wollte ich mit dem Header eine Vektorform einfügen, um einen noch schärferen Kontrast zwischen Text und Hintergrundbild zu erzielen, was in der Designwelt als "Anomalie" bezeichnet wird.

Dies würde Ihre Augen von allem anderen ablenken und sich ausschließlich auf dieses Element konzentrieren und Ihre Augen auf den Hauptinhalt lenken, aber ich habe mich dagegen entschieden und mich einfach für die dunklere Vollbild-Überlagerung entschieden, die noch genügend Kontrast zwischen dem Text und erzeugt Hintergrundbild auf subtilere Weise. Und auch aus dem Grund, dass die Augen eines Benutzers so gut wie sofort auf den fett gedruckten Text in einer Kopfzeile gelenkt werden, wenn sie die Site dennoch anzeigen, ohne dass überflüssige Elemente erforderlich sind, die lediglich zu Dekorationszwecken dienen.

Das soll nicht heißen, dass ich die Vektorform nur zu dekorativen Zwecken dort belassen und das vorherrschend dunkle Thema, das der Header hatte, auflösen könnte, aber ich hatte das Gefühl, dass es am Ende nicht nötig war und ich mich dafür entschieden hätte Verwenden Sie die Primärfarbe (Blau) als Hintergrund, auf dem diese Option null und nichtig dargestellt wird.

Ich hätte auch einen kleinen horizontalen Teiler verwenden können, um das Auge mit der Primärfarbe zu zeichnen, aber ich hatte erneut das Gefühl, dass dies nicht erforderlich war, da die Elemente (Titel, Untertitel, Symbol für Wiedergabe) eng gruppiert waren, sodass die Nähe wieder ins Spiel kam

Denken Sie daran, Nähe schlägt Farbe oft in Bezug auf Dominanz, Wichtigkeit oder Aufbau von Hierarchie.

Und das ist ein Wrap für diesen Teil!

Wir haben das Header-Element für unsere Homepage und Teil 1 dieser Serie fertiggestellt.

In Teil 2 konzentrieren wir uns auf den Abschnitt "Sammlung" unserer Homepage, in dem ich Ihnen zeige, wie Sie Design-Prinzipien noch einmal leicht anwenden können, um eine klarere und stärkere Benutzeroberfläche zu erstellen.

Bis bald!

Möchten Sie Benutzeroberflächen in Sketch besser, intelligenter und schneller gestalten?

Wenn Sie Ihre UI-Kenntnisse verbessern und Ihren Design-Workflow bei der Arbeit mit Sketch erheblich beschleunigen möchten, kann Ihnen mein beliebtes Design-System sehr helfen.

Verwenden Sie den Angebotscode MEDIUM25, um 25% Rabatt zu erhalten.

https://cabanadesignsystem.com

Vielen Dank für das Lesen des Artikels,

Marc Andrew

Designer, Entwickler, Tutor.
Liebhaber von schönen Typ-Paarungen und Sweet Potato Pakoras.