Share
Willkommen bei der nächsten Ausgabe von Development for Designers! Wenn Sie den letzten Artikel verpasst haben, lesen Sie ihn bitte. In diesem Artikel werde ich eine Denkschule diskutieren, die die Lücke zwischen Entwicklung und Design überbrückt.
Das Stichwort, das Schlüsselwort oder das Konzept, mit dem Sie sich ernsthaft vertraut machen möchten, ist „Atomic Design“. Atomic Design wurde geprägt als:
„… Eine Methode zur Erstellung von Entwurfssystemen.“ - Brad Frost
Für mich war dies ein Durchbruch. Als Entwickler weiß ich, dass Logik aus kleinsten Konzepten aufgebaut ist. Variablen, Arrays, Funktionen, Klassen. Als Designer gilt dasselbe. Ich kann etwas Komplexes aus der Auswahl komplementärer Farben, Schriftarten, positiver oder negativer Räume und Form erstellen. In der Tat ist es eine riesige Metapher für unsere eigene menschliche Existenz.
Es werden Sei ein BuchAtomic Design arbeitet im Wesentlichen wie folgt: Atome bilden Moleküle, Moleküle bilden Organismen. Organismen können komplex oder einfach sein. Ein Bakterium oder ein Mensch, der hinter diesem Computer sitzt, schreibt genau über dieses Konzept. Wir sind alle Beispiele für Atomic Design.
Diese Methode eignet sich hervorragend für Web-Erlebnisse, das IoT (Internet of Things) oder die mobile Entwicklung, da sie eine Architektur bietet, die die Einfachheit zu etwas Komplexem verfestigt. Schlichtheit ist nicht die ultimative Raffinesse?
Atomic Design ist ein System. Ein System, das mit mehreren Teilen zusammenarbeitet, um etwas Einzigartiges zu schaffen. Es ist ein System, das von Konstrukteuren oder Entwicklern verstanden werden kann, wodurch beide Jobs einfach zu warten, zu ändern und voranzukommen. Ganz zu schweigen von Stress und Druck, wenn zum Beispiel ein wichtiger Designer oder Entwickler ausgetauscht werden muss oder ein Team verlassen muss.
Hier ein kurzer Überblick:
Atome sind die Grundbausteine. Entitäten, die nicht weiter abgebaut werden können und trotzdem funktionsfähig bleiben. Sie sind die HTML-Tags wie , , , .
Atome können auch für Farbpaletten oder Schriftarten verwendet werden. Es ist jedoch gut anzumerken, dass Atome ohne Kontext für sich ziemlich abstrakt sein können. Ein genau definiertes Atom erzeugt ein gut gebildetes Molekül.
Moleküle sind Kombinationen und Anordnungen von Atomen. Im Wesentlichen das Rückgrat Ihres Entwurfssystems. Ein Molekül wäre so etwas wie eine Navigation oder eine Suchmaske, die zum Beispiel eine Atom, Atom und a Atom. Zusammen mit ein paar mehr, wenn Sie Lust hatten, ein komplexes Molekül zu erzeugen.
Ein Organismus baut sich weiter auf und gibt uns eine Kombination von Molekülen. Der gesamte Header einer Website kann als Organismus betrachtet werden. Aufgrund seiner Grundstruktur besteht eine einzigartige Anordnung von Atomen und Molekülen, um einen komplexen Organismus zu schaffen. Ein Fußzeilenabschnitt würde als Organismus betrachtet. Wenn wir es im Kontext betrachten, wird das Produktraster innerhalb einer WooCommerce-Vorlage als Organismus betrachtet. es wiederholt das gleiche Molekül mit unterschiedlichem Inhalt oder sogar die gleichen Atome mit unterschiedlichen Werten für jedes.
Grayson - ein stilvolles und vielseitiges Shopthema Obwohl dieser Abschnitt nicht wirklich mit der Analogie zu tun hat, die Brad aufgebaut hat, können Vorlagen verwendet werden, um Arrangements von Organismen anzuzeigen.
An diesem Punkt wird das Layout wirklich wesentlich. Menschen beginnen als einfache Zellen, wachsen zu einem Fötus, einem voll ausgebildeten Baby, einem Kind, einem Teenager oder einem jungen Erwachsenen, und wir beenden die Analogie, wenn wir zu unseren besten Zeiten kommen. Die Vorlage ist eine ästhetisch ansprechende, semantische Anordnung von Organismen, Molekülen und Atomen. Im Wesentlichen beziehen wir uns auf Wireframes, die im Laufe der Zeit entwickelt wurden.
Wenn eine Vorlage ihren Höhepunkt erreicht und wir sie mit Bildern, Inhalten und Texten usw. ausarbeiten, haben wir eine Seite. Zum Beispiel würde eine Seite in ein Tool wie InVision für grundlegende Benutzertests hochgeladen, bevor sie in die Entwicklung geht.
Ich werde Sie mit ein paar abschließenden Gedanken verlassen. Es gibt kein richtiger Weg um die Beziehung zwischen Entwicklern und Designern zu handhaben. Beim Aufbau eines Web-Erlebnisses (Website, Plattform, Netzwerk, SaaS oder PaaS) geht es darum, die Talente und Erkenntnisse von Designern und Entwicklern zu kombinieren. Der eine kann nicht ohne den anderen leben. Daher darf kein Projekt weder Designer noch Entwickler haben. Ich hoffe, dass Sie am Ende dieser Serie verstehen werden, was ich besser verstehen kann, und vielleicht werden Sie einige Ideen bekommen, wie Sie besser mit Ihren Teamkollegen zusammenarbeiten können.
Ich möchte auch erwähnen, dass diese Serie zwar auf Entwickler und Designer ausgerichtet ist, aber nicht bedeutet, dass ich Content Manager oder Texter nicht anerkenne. Ihre Arbeit ist genauso wichtig, wenn es darum geht, ein Web-Erlebnis großartig zu gestalten.
Nun, da Sie sich mit Atomic Design auskennen, können wir wirklich herausfinden, wie es in Design und Entwicklung übergeht.
In den kommenden Artikeln werden wir tief in die jeweiligen Welten von Front und Backend eintauchen. Wenn Sie Designer oder Anfänger sind, können Sie mit den beiden folgenden Artikeln das erforderliche Grundlagenwissen erwerben. Wenn Sie aus der Designwelt kommen oder auch nur in Richtung Entwicklung arbeiten, werden Sie mit den Konzepten, die ich erläutern werde, die Lücke schließen, die den Übergang vom Design zur Entwicklung bedeutet.
Accentsconagua