Web Design Platform as a Service

In diesem Artikel möchte ich einen kurzen Überblick geben, was Frontastic für den Web Designer bietet und wie alle Beteiligten, also Web Designer, Agenturen, Online Redakteure und Kunden/Konsumenten davon profitieren.

Struktur oder Freiheit?

Gute Gründe für die Nutzung von Strukturen

  • Schneller

    Fertige Strukturen helfen dabei, schneller ans Ziel zu kommen.

  • Skalierbarer

    Flexible Strukturen helfen dabei, Projekte skalierbar zu gestallten.

  • Hochwertiger

    Feste Strukturen helfen dabei, eine gleichbleibend hohe Qualität zu erzeugen.

Ich bediene mich eines bekannten Spielzeuges, um zu versuchen, die allgemeine Problemstellung zu umreißen: Lego®.

Um es ganz einfach zu machen: Das Ziel ist es die rechts abgebildete Wand in unterschiedlichen Varianten möglichst schnell und fehlerfrei herstellen zu können.

Wenn man sich mein Lego-Kunstwerk genauer anschaut, erkennt auch das ungeübte Auge, dass es zum einen aus einzelnen Steinen besteht und zum anderen, dass es einzelne Steine doppelt gibt: also zum Beispiel den weißen Stein, der vier Einheiten breit ist.

Bei genauerer Betrachtung fällt weiter auf, dass ich je Größe/Bauform eine Farbe gewählt habe. Dies dient im Wesentlichen der Übersichtlichkeit (nicht der Ästhetik ;-) ).

Im nächsten Schritt zerlege ich die Mauer in die kleinsten Komponenten: Atome.

Mit diesen einzelnen Lego-Bausteinen, den Atomen, kann ich jetzt sehr flexibel bauen.

Es würde mir auch sehr leicht fallen, auf einen Schlag alle blauen Steine, die zwei Einheiten breit sind, durch entsprechende schwarze Steine zu tauschen. Dadurch, dass das gleiche Element immer genau in einer Variante vorkommt, ist mein Gesamtsystem sehr übersichtlich.

Einen Nachteil habe ich jedoch: ich bin relativ langsam, denn ich muss immer von Grund auf anfangen, wenn ich eine neue Mauer bauen möchte.

Um schneller zu werden, erstelle ich „Fertigbauteile”: Einzelne Moleküle, die sich aus Atomen zusammensetzen.

Das geübte Auge hat es direkt erkannt: meine Mauer hat sich aus Design-Pattern, wiederkehrenden Mustern, zusammengesetzt.

Diese „Moleküle” bestehen aus den einzelnen „Atomen”. Auf dieser Basis bin ich nun wesentlich schneller in der Lage eine Mauer zu bauen.

Dennoch bin ich flexibel und kann unterschiedliche Mauern bauen. Eventuell ergibt es sogar Sinn, einzelne Moleküle noch weiter zusammenzufassen. Wenn mein Haus als Design-Element beispielsweise öfter zwei kombinierte Fenster aufweist, könnte man die einzelnen, die Fenster umgebenden Moleküle, zu einem größeren Bauteil zusammensetzen: im Atomic Web Design wird hier von Organismen gesprochen.

Ein Konzept reicht nicht aus?

BEM für die Namen

„Wer sich mit Frontend-Architektur beschäftigt, wird um die Methodik der ‘Block, Element, Modifier’ nicht herumkommen”, so schreibt das t3n Magazin 2014. Und auch vier Jahre später ist die Methodik immer noch das Mittel der Wahl.

Geht es bei Atomic Design um den grundsätzlichen Aufbau von Webdesign, so geht es bei BEM um die Benennung von CSS. Das t3n Magazin weiter hierzu:

BEM dient dazu, eine skalierbare CSS-Architektur aufbauen zu können und ist vergleichbar mit SMACSS oder OOCSS. Dabei werden einzelne Strukturen im DOM nur mit Klassennamen nach einem bestimmten Muster benannt, um den Code leichter lesbar und skalierbarer zu machen.

Genau wie beim Atomic Design haben wir auch bei BEM einen Weg gesucht, der eine gute  Developer Experience bietet.

In a Nutshell:

Die Vorteile der Web Design Platform as a Service von Frontastic

  • Designer

    erhalten mit der Frontastic Platform eine Grundlage für die individuelle Pattern Library des Kunden.

  • Web-Entwickler

    erhalten eine sauber strukturierte Umgebung, die ihnen dabei hilft, skalierbare, wartungsarme Projekte zu erstellen.

  • Agenturen

    erhalten eine umfangreiche Web Design Platform, die eine sehr gute Grundlage für ein skalierendes Geschäft ist.

  • Online-Redakteure

    erhalten eine klar strukturierte und damit einfach zu bedienende Anwendung, die für Veränderungen offen ist.

  • Konsumenten

    erhalten ein Benutzererlebnis, in dem sie sich wohlfühlen, weil sie sich sofort zurecht finden. Struktur bedeutet hier einfache Orientierung.

Eine Web Design Platform as a Service ist natürlich noch wesentlich mehr, als das hier skizzierte.

Im Wesentlichen geht es jedoch – ähnlich wie bei dem Thema React Platform as a Service – darum, den Designern und Entwicklern dabei zu helfen, eine stressfreie Arbeit zu haben.

Wichtig ist uns dabei immer, dass die Developer Experience, also letztlich der Spaß an der Arbeit, gefördert wird. Denn machen wir uns nichts vor: wenn unser Produkt dem Entwickler nicht so viel Spaß bringen würde, hätten wir nicht so viel Zuspruch.

1 reply

Trackbacks & Pingbacks

  1. […] an: angefangen bei einer kompletten Entwicklungsumgebung inkl. VMs und Docker-Containern, GitHub-Repository und Continuous Integration. Weiter über eine leistungsfähige und einfach zu bedienende Software-Plattform für die Content […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

“Was sind Eure Erwartungen an eine Web Design Platform as a Service? Ich freue mich über Eure Kommentare!”