Einheitliches Design-Systeme in der Skizze Mit Atomic Design und die Auto-Layout-Plugin

0
70

Tun Sie design digitaler Produkte (oder Webseiten) und das hand-design-Dateien aus, um Entwickler für die Umsetzung? Wenn Sie mit ja beantwortet, lassen Sie sich nieder! Während die soll-Designer-code-Debatte tobt auf, die wir uns anschauen, wie das hinzufügen einer Methodik, um Ihre design-workflow können Sie schneller, konsistenter und von allen geliebt-Entwickler… auch wenn Sie nicht den code.

Let ‘ s dig in!

Warum eine Methode?

In der Entwicklung der Welt, wie es scheint, mindestens die Hälfte Ihrer Karriere über den Aufenthalt up-to-date mit neuen tech und Nivellierung Ihre Fähigkeiten. Während das Tempo vielleicht nicht ganz so Wild in der design-Landschaft, wie es ist, in Entwicklung, es hat definitiv schon einen großen Wandel in den Werkzeugen, die über die letzten drei Jahre oder so.

Werkzeuge wie Skizze gemacht haben, viel von dem alten Schmerz von der Arbeit im design-Dateien der Vergangenheit an. Intelligente Kombinationen von text-styles, Objekt-Stile, Symbole und Bibliotheken jetzt zu bedeuten tiefgreifende Veränderungen sind nur einen Klick entfernt. Nicht mehr die Kommissionierung bis 40 Photoshop-Ebenen, um eine einzelne Farbe zu ändern.

Doch kehren Farbe ändert sich in ein marketing-landing-page ist nicht mehr die größte design-Herausforderung. Design-und Entwicklungsteams sind jetzt zu erwarten komplexe Schnittstellen geladen mit Wechselwirkung und bedingten Staaten… für jedes Gerät verfügbar heute und den nächsten Tag. Arbeitet als designer und Entwickler habe ich gesehen, dass der workflow die Reibung von beiden Seiten.

Darüber hinaus tools, die Designer benötigen ein Ansatz.

Denken im Sinne von “Komponenten”

Wenn Sie die Arbeit in der tech-Raum, in welcher Eigenschaft haben, haben Sie wahrscheinlich gehört, Entwicklungs-frameworks wie React, Angular, oder Vue.

Ähm ja, ich bin ein designer, so dass nicht wirklich beunruhigt mich, bye.

Irgendwie. Aber wenn Sie hoffen, tun Gestaltung der Arbeit, für moderne digitale Produkte, es ist eine ziemlich große chance, dass die besagten Produkte werden erstellt, indem eines dieser frameworks. Niemand erwartet, dass ein Architekt zum Bau der Strukturen selbst, aber Sie besser haben ein high-level-Verständnis von dem, was die Werkzeuge sind und wie Sie verwendet werden.

Also hier ist was Sie wissen müssen über moderne front-end-frameworks:

Sie brachte einen Paradigmenwechsel für die Entwickler, die Produkte werden durch die Kombination einer Reihe von kleineren Komponenten, die in komplexen Systemen, die Anpassung an die unterschiedlichen Kontexte und Geräte. Dies macht den code leichter zu warten ist, und das ganze system flexibler.

Für eine Vielzahl legitimer Gründe, viele Designer, die haben Sie nicht erwischt, an dieser Paradigmenwechsel so schnell als Entwickler. Uns fehlt ein mentales Modell für die Erstellung der Stücke, aus denen sich diese Schnittstellen unabhängig von Ihrer Umgebung/Seiten/Bildschirme/Ansichten etc.

Ein solcher Ansatz ist Atomic Design.

Was ist Atomic Design?

Zunächst geprägt von Brad Frost, Atomic Design ist eine Methode, die versucht zu beantworten eine einfache Frage: wenn Hunderte von Geräte-Größen bedeutet, wir können nicht mehr effektiv design ” – Seiten,” wie können wir dann noch design?

Die Antwort liegt in brechen alles machen könnte, bis eine “Seite” oder “view” in kleinere und kleinere Stücke, die Schaffung eines “Systems” von Blöcken, die dann rekombiniert in einer unendlichen Anzahl von Variationen, die für unser Projekt.

Sie kann denken Sie daran, wie Sie die Zutaten in einem Rezept. Sicher, man könnte die muffins, aber Sie könnte genauso gut machen einen Kuchen mit der gleichen Liste von Zutaten.

Brad entschied sich für den Chemie-Analogie, und so schlägt er vor, dass unsere Systeme aus:

  • Atome
  • Moleküle
  • Organismen

Der Einfachheit halber, lassen Sie uns nehmen einen Blick an, wie wir diese anwenden, um eine website.

Atome

Atome stellen die kleinsten Bausteine, die unsere Benutzer-interfaces. Stellen Sie sich ein Formular label, ein Formular-input und ein button. Jeder von denen vertritt ein atom:

Ein header, den text und link-alle dienen als Atome.

Moleküle

Moleküle sind einfach Gruppen von Atomen kombiniert, um etwas neues zu schaffen. Für unsere Zwecke können wir uns vorstellen, die Moleküle, die als Gruppen von separaten UI-Stücke, die kombiniert zu erstellen, die eine sinnvolle Komponente.

Die Atome kommen zusammen und bilden eine “Karte” – Komponente.

Organismen

Organismen bestehen aus Gruppen von Molekülen (oder Atomen oder anderer Organismen). Das sind die Stücke von einer Schnittstelle, die wir denken, dass als ein “Abschnitt”. In einer Rechnungsstellung Anwendung, ein Organismus könnte ein dashboard kombinieren, eine “neue Rechnung” – Taste (atom), ein Suchformular (Molekül), eine “total open” – Karte (Molekül), und die Tabelle, in der überfälligen Rechnungen. Sie bekommen die Idee.

Schauen wir uns an, was ein “featured block” Organismus Aussehen könnte, wie in unserem einfachen website:

Ein header (atom), drei Karten (Moleküle), ein Bild (atom) und ein teaser (Molekül) kombiniert werden, um eine funktionsfähige block Organismus.

Mit stacks für die Konsistenz

So, jetzt haben wir ein mentales Modell für das “Zeug,” wie erstellen wir diese Bausteine? Sketch ist großartig, out of the box, aber die plugins zur Verfügung stellen enorme performance-tools… nur wie text-Editoren für Entwickler. Wir werden mit Sketch eingebaute Symbole-tools, sowie die erstaunliche Stapel” – Funktion von Anima-App die Auto-Layout-plugin.

Mit diesen tools bringen einige unschätzbare Vorteile, die ich will darauf hinweisen, wie wir gehen, aber zumindest können Sie zählen auf:

  • besser ist die Konsistenz des Designs und schnellere iteration
  • eine überprüfung von über gleichbleibende Abstände Multiplikatoren
  • schnellere Neuordnung von Inhalten
  • Unterstützung bei der Identifizierung der design-Probleme schnell und früh auf

Was genau sind stacks?

Wenn Sie jemals gehört, die Entwickler aufgeregt reden flexbox für Gebäude-layouts in CSS, dann können Sie denken stacks als Skizze entspricht. Stacks (wie flexbox) können Sie die Gruppe einer Reihe von Schichten zusammen, und definieren Sie dann Ihre Abstände und die Ausrichtung auf einer vertikalen oder horizontalen Achse.

Hier gruppieren wir die drei Elemente so ausrichten, dass Sie durch Ihre Mitte, und legen Sie 48px vertikale Abstand zwischen den einzelnen ein:

Eine einfache stacked-Ordner ausrichten und verteilen von drei items.

Die Ebenen werden automatisch die Gruppe, in einen blauen Ordner mit einem Symbol von vertikalen oder horizontalen Punkte zu zeigen, welche Art von stapeln, die Sie haben.

Schauen Sie sich das an! Sie haben soeben gelernt, flexbox ohne Sie zu berühren eine Zeile code. 😂

Verschachtelte stapeln

Die wirkliche macht der stacks kommt aus Schachteln stapeln in einen anderen Stapel:

Pakete können geschachtelt werden innerhalb der jeweils anderen zu schaffen, komplexe Abstand Systemen.]

Hier können wir sehen, eine Karte-Komponente, bestehend aus mehreren stacks:

  • Karte__cta-link aus dem vorherigen Beispiel.
  • Karte__Kopie Stapel mit der Ausrichtung & Platz für den header und text.
  • Karte__Inhalt die Steuerelemente für den Abstand und die Ausrichtung zwischen der Karte__cta und Karte__Kopie stapeln.

Eine kurze Notiz über layer naming

Ich verwende fast immer das BEM Namenskonvention für meine Komponenten. Entwickler schätzen die Logik, wenn ich die hand von design-Dateien, weil es oft an die Namenskonventionen, die Sie verwenden im code. In dem Fall, wo ich bin mit der Entwicklung des Projekts selbst, es gibt mir ein bisschen von einem Vorsprung, als ich angefangen habe, nachzudenken über das markup auf der design-Bühne.

Wenn es das ist super verwirrend, nicht darum kümmern. Bitte machen Sie Ihre Kolleginnen und Kollegen den job ein wenig leichter organisieren Sie Ihre Ebenen und geben Sie Ihnen aussagekräftige Namen.

Stapel shmacks, ich habe viel Liebe zu detail und können all das tun, manuell!

Du hast absolut Recht! Was aber, wenn Sie sorgfältig gelegt aus 10 items, die alle in unterschiedlichen Größen, und jetzt brauchen Sie zusätzlichen Platz zwischen Ihnen? Oder, müssen Sie eine Zeile hinzufügen von text zu einem dieser Artikel? Oder, Sie brauchen, um split-Inhalte in drei Spalten statt vier?

Das passiert nie, richtig? 😱

Eines von zwei Dingen geschieht in der Regel in dieser Phase:

  1. Manuell gestartete Neuorganisation aller Dinge, und jemand zahlt für Verschwendete Zeit (ob es Sie oder der Kunde).
  2. Sie ein bisschen fudge… immerhin, die Entwickler sicher weiß, was Ihre ursprünglichen Absichten waren, bevor Sie nach Links jedem Rand ein paar Pixel in Ihrem layout. _(ツ)_/

Hier ist, was Stapel erhalten Sie:

  • Sie können ändern Sie die Ausrichtung oder Abstände Optionen als viel wie Sie möchten mit einem einfachen Wert-Einstellung und die Dinge werden nur auf Magische Weise aktualisieren.
  • Sie können die Größe der Elemente , ohne zu Holen, um die Zeichenfläche zu rejig all die Dinge.
  • Sie können neu anordnen, hinzufügen oder entfernen Elemente aus dem Stapel Ordner und beobachten Sie die Objekte verteilen sich nach Ihren Einstellungen—genau wie code. 🎉

Beachten Sie, wie schnell es ist, Inhalte zu editieren und Experimentieren Sie mit verschiedenen layouts, die alle unter Beibehaltung der Konsistenz:

Stapeln und Symbole machen Experimente Billig und konsistent.

OK, jetzt wissen wir also, warum stacks sind erstaunlich, wie wir Sie tatsächlich verwenden?

Erstellen von stapeln

Erstellen Sie ein stack ist eine Frage der Auswahl der zwei (oder mehr) Schichten und auf den Stapel Ordner-Symbol im Bereich “Informationen”. Von dort aus können Sie entscheiden, wenn Sie das stapeln der Schichten horizontal oder vertikal, und stellen Sie den Abstand zwischen den Elementen.

Hier ist ein Beispiel, wie wir, das würde der atom-Komponente mithilfe von stacks:

Erstellen einer horizontalen Stapel mit 20px Abstand zwischen dem text und dem Symbol.

Und nun die Stapel-Konzept zu einem komplexeren Molekül-Komponente:

Erstellen einer Karte Molekül mit verschachtelten stapeln.

Erstellen von Symbolen aus stapeln

Wir haben gesprochen über die vielen Vorteile von stapeln, aber wir können Sie noch effizienter durch die Anwendung Skizzieren Sie das symbol Werkzeug für Sie. Das Ergebnis, das wir bekommen, ist ein stack verwaltet werden kann von einem Quell-Instanz und an beliebigen stellen wiederverwendet werden.

Die Schaffung einer atom-symbol

Wir greifen kann call-to-action-stack, die wir gerade erstellt haben, und machen es zu einem symbol. Dann können wir mit überschreibungen für die text-und wissen, dass der Stapel wird zu Ehren der Abstände:

Erstellen Sie ein symbol aus einem Stapel ist ideal für die Gewährleistung space Konsistenz mit überschreibt.

Wenn ich später entscheiden, dass ich mich ändern will der Raum durch ein paar Pixel, ich kann nur zwicken die Stapel Abstand auf das symbol und es aktualisieren auf jeder Instanz 🎉

Erstellen einer Molekül-symbol

Auch ich kann die Gruppe mehrere gestapelte Atome in einer Komponente, und stellen Sie diesen in einem symbol:

Erstellen einer Karte symbol von unserer stacks und call-to-action symbol.

Symbole + stacks = 💪

Wäre es nicht schön, wenn wir uns das erhalten können die räumlichen Anforderungen setzen wir unabhängig von den Optimierungen, die wir mitbringen könnten, Sie auf der ganzen Linie? Ja!

Ersetzt ein Element mit einem anderen in einer Komponente

Nehmen wir an, unsere Karte-Komponente benötigt nun eine Taste, anstatt einen link als call-to-action. Solange wir Platz, die Taste in die richtige Stapel-Ordner, alle pixel-stieß geschieht automatisch:

Weil unser symbol verwendet-stacks, den Abstand zwischen der Kopie und der call-to-action wird automatisch respektiert werden.

Bearbeitung von Molekülen und Organismen on-the-fly 🔥

Sie werden vielleicht denken, dass dies keine große Sache ist und dass die Anpassung der winzige räumliche Problem aus dem vorherigen Beispiel würde genommen haben, nur einen Augenblick, ohne zu stapeln. Und Sie wäre nicht falsch. Aber lassen Sie uns zurück zu verweisen, unsere Vorstellungen über atomic design für einen Augenblick, und Fragen, was passiert, wenn wir weit komplexere “Lebewesen” (Gruppen von Atomen und Molekülen) zu beschäftigen?

Ähnlich wie unsere mobile Beispiel von Anfang an, das ist, wo die integrierte power-stacks wirklich glänzt:

Stapeln und Symbolen macht das Experimentieren Billig und konsistent.

Mit einer Bibliothek von grundlegenden Symbolen (Atome) an unseren Fingerspitzen, und die mächtigen-Abstand/Ausrichtung-tools, können wir Experimentieren und zu erstellen endlosen Variationen von Komponenten. Der Schlüssel ist, dass wir es tun können schnell und ohne Einbußen bei der design-Konsistenz.

Komplexe layouts und mega-stacks

Halten mit der Elemente, die wir bereits entworfen haben, mal sehen, was ein Schicht-stack Aussehen könnte für eine einfache marketing-Seite:

Ein Beispiel für eine erweiterte layer-stack.

Lassen Sie sich nicht von dem ersten Eindruck der Komplexität des stacks erschrecken Sie. Ein non-stacked-version dieses Zeichenfläche würde nicht so unterschiedlich Aussehen, dass abgesehen von der Farbe der Ordner-Symbole.

Allerdings ist es sehr Ordnern, die uns alle macht:

Layout-Experimente können schnell und Billig!

Wir können nicht brauchen, um code, aber wir haben eine Verantwortung für die Beherrschung unserer Werkzeuge für die Effizienz und die Abbildung neuer workflows mit unserer Entwickler-Kollegen.

Dies bedeutet eine Abkehr vom denken des design im Kontext von Seiten sowie das erstellen von Sammlungen von Komponenten… Module… Inhaltsstoffe… legos… herauszufinden, eine Metapher, die für Sie arbeitet und stellen Sie sicher, dass das gesamte team teilt die Vokabeln.

Sobald wir dies tun, Fragen rund um workflow-und collaboration-Schmelzen:

Geschwindigkeit und Flexibilität

Gezielt Bauteile mit Symbolen und mit automatisierten und konsistenten Abstand/Ausrichtung mit stacks erfordert ein wenig Zeit-Investition im Voraus. Doch die Rückkehr von einfachen Experimenten und die Fähigkeit, Kurs zu ändern, schnell und mit geringem Aufwand ist es Wert.

Konsistenz und UX

Gedanken darüber, wie die Elemente funktionieren als Kombinationen und in unterschiedlichen Kontexten zu fangen UX-riecht frühen und setzen Themen rund um Konsistenz, bevor Sie 13-Bildschirme. Die Richtung ändern durch Anpassung ein paar Variablen/Komponenten/Abstand-Einheiten beats verschieben Elemente um eine Zeichenfläche, den ganzen Tag.

Verantwortung und Governance

Eine einzelne 1440px Seite Ansicht von der Sache, die Sie bauen einfach nicht, sofern ein Entwickler mit genug Kontext für mehrere Bildschirme und Interaktion. Zur gleichen Zeit, crafting mehrere high-fidelity-comps ein winziges element, gleichzeitig ist ein budget-buster (und dies gilt besonders für app-designs). So, was dazu neigt zu geschehen, in kleinen teams? Der Entwickler bekommt eine wunderschöne 1440px anzeigen… uuuuund alle kognitiven Aufwand der Füllung in die Lücken, für alles andere.

Die Bereitstellung der Daten ist unser job.

Atomic design gab uns die Geschwindigkeit, die kreative Freiheit und Flexibilität. Es verändert sich alles.”

—Von der vorwärts-Atomic-Design

Wenn wir arbeiten mit den Entwicklern an digitalen Produkten, wir sollten aufgeregt über das lernen, wie die Wurst gemacht wird, und passen unsere Herangehensweise an das design entsprechend. Unsere Werkzeuge können nicht entwickeln, ganz so schnell wie JavaScript-frameworks, aber wenn Sie noch nicht genommen, einen Blick unter Kapuze, die einige dieser apps in den letzten paar Jahren, ist dies eine gute Zeit zu Graben!