Erste Schritte mit Modulen und modularer Front-End-Entwicklung

Jeder kennt und liebt Legosteine. Ich war schon als Kind süchtig nach Legos und ich liebe sie noch heute. Sie können Ihr Spielzeug aus allen Arten von Legos auf alle möglichen Arten Stück für Stück zusammenbauen. Sie können dann von vorne beginnen und aus denselben Teilen ein anderes Spielzeug bauen. Die Möglichkeiten sind endlos.

Module auf einer Website sind Legos sehr ähnlich. Stellen Sie sich Module als Legosteine ​​vor, mit denen Sie Ihre Website erstellen können. Wenn Sie sie richtig miteinander verbinden, bilden sie Webseiten. Um Websites wie Legos zu erstellen, müssen Sie sich Websites als eine Sammlung unabhängiger Module vorstellen. Dieser Artikel wird Ihnen dabei helfen, genau das bei Ihrer Front-End-Entwicklung und Ihrem Design zu tun.

Modul Collagen

Wenn ich in die Designphase eines Projekts eintrete, beginne ich normalerweise damit, Designinspirationscollagen und Modulcollagen zusammenzustellen. Es ist ein ähnlicher Prozess wie bei Dan Mall, der diese Collagen als Designergebnisse für eine Post-Comp-Ära bezeichnet. Inspirationscollagen sind Sammlungen von Screenshots, die ich dem Kunden präsentiere, nur um eine allgemeine Vorstellung von der visuellen Richtung zu bekommen, in die wir uns bewegen. Sie sind einfach Screenshots von Websites, die sowohl mir als auch dem Kunden gefallen.

Sobald wir die Bestätigung erhalten, dass wir in Bezug auf den Stil auf der gleichen Seite sind, kann ich in meinen Grafikeditor (ich bevorzuge Sketch) hüpfen und Modulcollagen erstellen. Diese Collagen sind Sammlungen der am häufigsten verwendeten Module - Schaltflächen, Formulare, Überschriften, Absätze, Listen, Bilder und so weiter. Mit Modulcollagen kann ich schnell Teile davon erstellen, wie die Website aussehen und sich anfühlen wird.

Hier ist ein Teil einer kürzlich von mir erstellten Modulcollage, ein Beispiel für eine Schaltfläche, die ich zu Beginn eines Projekts in Sketch entworfen habe:

Vielleicht fragen Sie sich, wann statische Kompositionen und die Präsentation pixelgenauer Designs für den Kunden ins Spiel kommen. Sie tun es nicht – ich überspringe diese fast vollständig in meinem Prozess. Indem ich diesen Teil des Prozesses überspringe, kann ich sehr früh im Projekt in den Code einsteigen und Prototypen codieren (dazu komme ich bald) oder mit anderen Worten im Browser entwerfen. Hier sind einige der Vorteile des Entwerfens im Browser:

• Der Browser ist die natürliche Umgebung für eine Website, und das Festhalten an Ideen, die in einem Grafikeditor erstellt wurden, kann nach hinten losgehen. Es ist nur natürlich, Designentscheidungen in Browsern zu testen und zu treffen. Sie haben es schon einmal gehört, Sie werden es wieder hören – es geht nicht darum, wie es aussieht, es geht darum, wie es funktioniert.

• Es wird immer Design-Inkonsistenzen zwischen den statischen Mocks und dem geben, was Sie im Browser erhalten, sobald sie in Code übersetzt wurden. Um diese Inkonsistenzen zu vermeiden, springen Sie in den Code-Editor und den Browser, um echte Designprobleme zu lösen.

• Statische Kompositionen vermitteln möglicherweise nicht die richtige Botschaft. Das Look and Feel wird ganz anders sein, wenn Sie die Interaktivität integrieren – wie die Hover-Zustände, Übergänge und Animationen.

• Anstatt Stunden um Stunden damit zu verbringen, mehrere statische Mockups für mehrere Auflösungen zu entwerfen, kann ich viel Zeit sparen, indem ich früh in den Code einsteige. Das Optimieren des CSS ermöglicht es mir, dem Kunden auf verschiedenen Geräten – Smartphones, Tablets usw. – schnell die Änderungen und den reaktionsschnellen Aspekt zu demonstrieren.

Sparen Sie also Zeit und öffnen Sie Ihren Code-Editor und den Browser, um so früh wie möglich mit der Erstellung der UX zu beginnen. Meiner Erfahrung nach fragen die meisten Kunden nach einem vollständigen Mockup von ein oder zwei Seiten, bevor wir mit der Codierung fortfahren können, und das ist völlig in Ordnung. Es ist wichtig, dass der Kunde ein gutes Gespür für das zukünftige Design hat. Normalerweise verwende ich InVision, ein großartiges Tool, um die frühen Mockups, die Änderungen, Kommentare und mehr im Auge zu behalten. Es ist jedoch sehr wichtig, dass Kunden verstehen, dass Sketch und InVision sie nicht sehr weit bringen werden.

Erstellen der Module für die Front-End-Entwicklung

Sobald der Kunde mit der Modulcollage und den von mir entworfenen Modellen zufrieden ist, kann ich mit dem Programmieren beginnen und das tatsächliche Erscheinungsbild dieser Elemente definieren.

Modulares Design wird mit modularer Entwicklung in einem iterativen Prozess verflochten. Ich programmiere ein Modul, probiere es dann im Browser aus, um zu sehen, wie es funktioniert, und iteriere es dann bei Bedarf. Auch dieser Prozess ähnelt dem Bau von Legos – Sie entwerfen und entwickeln im Grunde gleichzeitig und probieren verschiedene Variationen aus, bis Sie sich dabei wohl fühlen.

Ich beginne die Entwicklung der Module oft damit, etwas Einfaches zu bauen, wie zum Beispiel einen Knopf. Stellen Sie sich vor, Sie bauen selbst einen und müssen einen orangefarbenen Button codieren, der normalerweise für ein Kontaktformular verwendet wird. Hier ist, was Ihnen einfallen könnte:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Einfach genug, oder? Sie würden die Klasse .submit-button auf Ihren HTML-Code anwenden, und das würde Ihr aktuelles Problem lösen. Was würde nun passieren, wenn Sie eine neue Schaltfläche erstellen müssten, genau wie diese, aber mit einer blauen Hintergrundfarbe? Sie würden wahrscheinlich genau diese Klasse kopieren und dann den Klassennamen und die Hintergrundfarbe ändern. Schnell und dreckig. Stellen Sie sich nun vor, Sie müssten dieselbe Schaltfläche verwenden, jedoch mit einem orangefarbenen Hintergrund. Sie können sehen, wohin das führt – am Ende wird möglicherweise viel CSS wiederholt. Bei einem sehr kleinen Projekt wird dies möglicherweise kein wirkliches Problem, bei größeren jedoch wahrscheinlich. Bevor Sie es wissen, wird Ihr CSS aufgebläht und schwer zu warten.

Wenn Sie jemals ein mittelgroßes bis großes Projekt entwickelt haben, haben Sie zweifellos einiges an Kopfschmerzen erlebt. Diese können durch einen der folgenden Gründe verursacht worden sein:

• Code, der chaotisch, inkonsistent, schwer zu scannen und zu verstehen ist.
• Aufgeblähter Code und XXL-CSS-Dateien mit vielen Duplikaten.
• Code, der schwer zu warten ist.
• Die fehlende Trennung von Struktur und Haut.

Keine Sorge, du bist nicht allein. Ich wette, alle Front-End-Entwickler haben diese schmerzhaften Probleme von Zeit zu Zeit erlebt, und wahrscheinlich noch viele mehr. Ich kann mit Sicherheit sagen, dass ich in der Vergangenheit viele Projekte hatte, bei denen ich auf all diese typischen Probleme gestoßen bin.

Eine Möglichkeit, diese Probleme zu vermeiden oder zu minimieren, besteht darin, modular zu bauen.

Der modulare Knopf

Wie kann man diese Schaltfläche modular codieren? Ein modularer Ansatz wäre, Code zu schreiben, den Sie wiederverwenden können. Denken Sie an diese Legos, die immer wieder verwendet und wiederverwendet werden können.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Was wir gemacht haben, ist eine clevere Stiltrennung. Die .button-Klasse enthält die Stile, die jede Schaltfläche in Ihrem Projekt verwendet, sodass Sie sie nicht wiederholen müssen. Die Klasse .button-orange verwendet nur die Stile, die für den orangefarbenen Button relevant sind. Sie würden dasselbe für alle anderen Schaltflächen tun und ihre Hintergrund- und Textfarben definieren.

Ihr Tastenmodul könnte am Ende aus mehreren unabhängigen Tasten bestehen, die jederzeit verwendet werden können, wenn Sie sie brauchen.

Was ist mit komplexeren Sachen?

Sie folgen den gleichen Prinzipien für alle anderen Komponenten, die Sie möglicherweise benötigen. Ziel ist es, Module zu schaffen, die eigenständige Elemente sind, unabhängig von anderen Modulen. Wenn diese Module kombiniert werden, bilden sie Vorlagen, in denen Sie die Module einfach nach Bedarf wiederverwenden und an der Fertigstellung Ihres Designs arbeiten.

Für weitere Lektüre zur modularen Frontend-Entwicklung empfehle ich dringend SMACSS, das ist die Architektur, die ich für alle meine Projekte verwende, ob groß oder klein.

Denken Sie daran, dass sich beim modularen Prozess alles um das Erstellen, Testen und Iterieren dreht. Ein Modul wird zuerst in Ihrem Editor erstellt, dann in einem Browser getestet und bei Bedarf iteriert. Wiederholen Sie diesen Zyklus bei Bedarf.

Einbeziehung des Auftraggebers

Vergessen Sie nicht die Bedürfnisse des Kunden – er möchte auf dem Laufenden gehalten werden und die Bestätigung erhalten, dass er auf seine Kosten kommt. Das Schöne an diesem Entwicklungsprozess ist, dass die Kunden aktive Mitglieder Ihres Teams sein können. Sie können ihnen die Module sicher zeigen und sie können den Entwicklungsprozess überblicken und jederzeit mit anpacken, um das Produkt zu verbessern. Sie müssen nicht warten, bis ein statischer Wettbewerb abgeschlossen oder ein Meilenstein erreicht ist, bevor sie echte Fortschritte sehen. Wenn Sie sich etwas Zeit nehmen, um Ihren Kunden die Funktionsweise von Modulen zu erklären, werden sie den Designprozess und die Zeit, die für deren Erstellung aufgewendet wird, besser verstehen und wertschätzen.

Die Art und Weise, wie ich einem Kunden normalerweise Module präsentieren würde, ist ähnlich wie Bootstrap – das Einrichten eines isolierten Moduls zusammen mit seinem Code ist eine großartige Möglichkeit, alle Designer, Entwickler und Kunden in den Prozess einzubeziehen.

Verwenden Sie die von Ihnen erstellten Module als Bausteine ​​für Seiten. Für Ihre Indexseite können Sie das Navigationsmodul oben platzieren, ein Hero-Modul daneben, einige der Inhaltsmodule daneben und dann Ihre Fußzeile unten. Bevor Sie es wissen, haben Sie bereits eine Seite für einen HTML-Prototyp. Aber was genau ist ein Prototyp? Ich habe Leah Buleys Definition eines Prototyps aus ihrem großartigen Buch The User Experience Team of One immer geliebt:

Funktionierende oder halbfunktionierende Beispiele dafür, wie sich das Design nach der Implementierung verhalten und funktionieren sollte.

Indem Sie einen Prototyp erstellen, erhalten Sie genau das in der frühen Phase des Projekts – eine semi-funktionierende Website. Wo statische Mockups und InVision zu kurz kommen, zeichnen sich HTML-Prototypen aus. Der Prototyp dient als perfektes Responsive Deliverable für Ihre Kunden. Und sobald der Kunde mit dem Erscheinungsbild Ihres Prototyps einverstanden ist, müssen Sie ihn nur noch aufpolieren, bis er so funktioniert, wie er soll. Erstellen, testen, iterieren.

Verwenden Sie die Bausteine ​​wieder

Module und Prototypen ermöglichen es Ihnen, den Code für das aktuelle Projekt, aber auch für zukünftige Projekte wiederzuverwenden. Das Optimieren eines Moduls aus Ihrem letzten Projekt kann Ihnen viel Zeit sparen – die Module, die Sie in jedem Projekt benötigen, sind oft ähnlich. Ich habe eine große Bibliothek von Modulen, die ich oft wiederverwende: Registerkarten, Navigationsmenüs, Schaltflächen, Breadcrumbs, Formulare, Tabellen, Paginierung, Listen usw. Der Code dieser Module ist zwar nicht in allen Projekten genau gleich, aber gute Teile davon kann wiederverwendet werden, was mir viel Entwicklungszeit spart. Mein Rat an Sie ist, auch für sich selbst wiederverwendbare Module zu erstellen. Schauen Sie sich BASSCSS, Pure und Refills an, um sich inspirieren zu lassen.

Lassen Sie sich nicht entmutigen, wenn die Umstellung auf modulares Design und Entwicklung einige Zeit in Anspruch nimmt. Wenn modulare Prinzipien für Sie neu sind, erfordern sie natürlich eine Anpassung Ihres Design- und Entwicklungsprozesses, aber die Änderung kann sich als lohnend erweisen.

Die modularen Methoden und Techniken, die ich in diesem Artikel behandelt habe, kratzen nur an der Oberfläche. Trotzdem hoffe ich aufrichtig, dass dieser Artikel hilfreich war und Sie dazu animiert hat, in modulares Design und modulare Entwicklung einzutauchen.