Mit System an Webseiten- und Digitalisierungsprojekte

28. April 2017
399 Views
Comments are off for this post

Atomic Design und Front-End-Frameworks

Unternehmensprojekte im Bereich der Digitalisierung sind selten klein.  Dazu steht oftmals nicht nur ein Projekt an: Über den Verlauf einiger Monate häufen sich verschiedene Initiativen von Digitalisierungsmaßnahmen an – ob beim Relaunch einer Webseite oder beim Aufbau von E-Commerce-Lösungen. Alle diese Prozesse haben einen gemeinsamen Nenner: Sie sind webbasiert und überschneiden sich an vielen Stellen inhaltlich. Beim Klicken und Scrollen durch eine Webseite fällt beispielsweise auf: Bestimmte Bereiche wiederholen sich, finden sich an den gleichen Stellen, haben gleiche Funktionalitäten oder sehen vom Design her identisch aus. Wo sich Gemeinsamkeiten zeigen, können Verantwortliche Zeit, Gedankenkraft und personelle Ressourcen sparen, oder nicht?

Genau deswegen lohnt sich eine gute, vorausschauende Planung solcher Projekte sowie die Entwicklung von Baukasten-Systemen, um Synergie-Effekte zu erzielen. Es werden „Code- oder Design-Blöcke“ erstellt, die wiederverwendbar sind. Eine Übersicht der möglichen Baukästen haben wir in einem früheren Artikel bereits betrachtet. An dieser Stelle möchten wir auf zwei Schwerpunkte detaillierter eingehen: Atomic Design und Front-End-Frameworks.

Atomic Design

Atomic Design ist als Ansatz von Webdesigner Brad Frost entwickelt worden. Dabei geht es vor allem nicht um einen Style, der schön anzusehen oder Trend ist. Es geht darum, Systeme zu entwickeln, um besonders im Webdesign sich wiederholend anfallende „Aufgaben“ oder Designs einfacher und schneller zu erledigen.

Der Aufbau einer Webseite wird nach dem Atomic Design Ansatz in fünf Bereiche zerlegt. Angefangen beim kleinsten Element, das kombiniert eine nächste Ebene bildet, bis hin zur ganzen Seite:

Atome sind alle einzelnen, kleinen Komponenten auf einer Seite; ein Atom kann ein Button sein, den Besucher klicken können oder aber auch eine Überschrift
Moleküle sind zusammenhängende Atome: mehrere Elemente, die sich zu einem gemeinsamen Kontext zusammenschließen und sinnvoll verknüpft sind. Warum ein Besucher einen Button oder Link klicken soll, wird vermutlich erst durch die dazugehörige Überschrift verständlich.
Organismen setzen sich aus Atomen und Molekülen zusammen, etwa Header oder Footer Bereich einer Seite. Ein Organismus, eine komplexere Struktur, kann sich in dieser Form auf verschiedenen Seiten wiederfinden. Im Header beispielsweise können sich auf jeder Seite das Logo und die Navigation finden.
Templates/Vorlagen = Gruppe von Organismen. Sie dienen einem einheitlichen Aufbau gleicher, wiederkehrender Bereiche. Im Bereich der Konzeption spricht man auch von einem Wireframe, das konzeptionell mit Struktur und Logik die Elemente einer Seite darstellt. Auf dieser Ebene lässt sich ein erstes zusammenhängendes Design erkennen. Oft findet sich in Vorlagen Platzhaltertext oder ausgegraute Bildbereiche, die später in den richtigen Seiten einfach ersetzt werden können.
Seiten sind ganz konkret: Echte Inhalte, gefüllte Templates.

Atomic Design bietet besonders bei der Erstellung von responsiven Seiten und dem Prinzip des „Continuous Relaunch“ einen Vorteil. Denn auch wenn bei einem Relaunch oder auf mobilen Endgeräten Inhalte an verschiedene Positionen rücken und auf einmal untereinander stehen, ermöglicht das Denken in Atomen, Molekülen und Organismen, dass gleiches Design und Funktionalität in jeder Darstellungsform gegeben sind. Insgesamt zeigen sich drei große Vorteile für die Entwickler und Administratoren von Webseiten:

Erweiterbar: Neue Organismen und damit Vorlagen können aus bestehenden Atomen und Molekülen erstellt werden. Verschiedene Organismen können in einem neuen Template genutzt werden. Oder es können neue Organismen erstellt und in bestehende Templates eingebaut werden, ohne andere Elemente des Templates zu beeinflussen.

Konsistent: Das Rad muss nicht immer neu erfunden werden. Wenn ein neues Element auf einer Webseite erforderlich wird, greift man auf bestehende Atome zurück (zum Beispiel einen Button) und muss diesen nicht neu gestalten oder programmieren. Das hat den großen Vorteil, dass auch der Endnutzer diesen Button bereits „kennt“, und kein Lernprozess notwendig ist.

Zusammenarbeit: Für Programmierer ist es eine große Herausforderung, den Code eines anderen zu verstehen. Denn jeder Programmierer hat seine eigene Schreibweise und das ist auch gut so. Atomic Design kann aber dazu beitragen, den Codeaufbau schneller zu verstehen.

Front-End-Framework

Auch für Front-End Entwickler gilt der Grundsatz, die Webseite in „Atome“ und Elemente zu unterteilen, etwa nach Funktionen. Ein weiterer Baukasten ist daher das Front-End-Framework. Das Front-End-Framework dient der schnellen Entwicklung einheitlicher, responsiver Benutzeroberflächen und der Herstellung von Musterelementen. Ein Framework nimmt dem Entwickler daher viel Arbeit ab. Es hält sich an vordefinierte Standards und enthält u.a. CSS, HTML und auch JavaScript Elemente. Mit definierten Klassen und Funktionen kann so bei Bedarf auch ein Kollege zügig in das Projekt und den Code einsteigen und daran weiterarbeiten. Solche Baukästen und Vorlagen erlauben Entwicklern dann, einen Auftrag wie etwa die Umsetzung von Webseiten, Online-Anwendungen und webbasierten Applikationen schneller und mit weniger möglichen Fehlerquellen zu bearbeiten.

Es gibt verschiedene Front-End-Frameworks, die dem persönlichen Nutzen im nächsten Projekt am meisten entsprechen können. Daher ist es wichtig, sich mit Vor- und Nachteilen der Front-End Framworks wie Bootstrap, Semantic-UI oder Foundation auseinanderzusetzen. Dabei kommt es auf folgende Kriterien an:

  • Wie hoch ist das persönliche Skill-Set? Braucht es ein Framework, das mit einem Minimum an Coding auskommt oder eines, das viel Spielraum für Anpassungen lässt?
  • Ist ein responsives Design erwünscht? Nicht alle Front-End Frameworks unterstützen responsives Webdesign.
  • Können Wireframes und Prototypen schnell erstellt werden?

Responsive ein Muss

In einer Welt, in der der Großteil des Datenverkehrs von mobilen Endgeräten erzeugt wird, führt nichts mehr an responsivem Webdesign vorbei. Die meisten Frameworks unterstützen responsives Webdesign und daher sollten von vorneherein responsive Stylesheets entwickelt werden. Das spart viel Arbeit und Sorgen im Nachhinein. So ist z.B. das Ein- oder Ausblenden bestimmter Inhalte auf einer Webseite nicht viel mehr, als das Hinzufügen einer entsprechenden Klasse zu einem <div>. Dies ist einfach und zielführend: Eine Übersicht über aller verfügbaren Klassen und Funktionen vermeidet die individuelle Berechnung und Programmierung der einzelnen Ansichtsgrößen für diverse Endgeräte.

Im Entscheidungsprozess vereinfachen

Während der Erstellung von Websites ist einer der größten Zeitfresser nicht das Coden, sondern die Entscheidungsfindung während der Programmierung. Selbst der beste Designer lässt an der einen oder anderen Stelle Spielraum für Interpretationen, wie genau ein bestimmtes Element umgesetzt werden soll. So wird die Entscheidung, ob ein Header „sticky“ oder eine Navigation „floating” sei soll, erst spät diskutiert und entschieden.

Ohne ein Framework wäre die Umsetzung eines solchen Elements zeitraubend und unter Umständen sinnlos, sollte während der Erstellung die Entscheidung für eine andere Variante fallen. Mit einem Front-End-Framework jedoch ist das Umschalten des Verhaltens des Headers oder der Navigation, die Umgestaltung interaktiver Elemente wie Buttons oder das Anpassen von Hovereffekten eine kleinere Anpassung, die global vorgenommen werden kann. Es werden Regeln für Atome oder Moleküle geändert, die für alle Stellen Gültigkeit haben, an denen diese Atome und Moleküle zum Einsatz kommen.

Nutzen für alle

Der große Nutzen für alle Beteiligten liegt deutlich auf der Hand: Designer können, ebenso wie die Front-End-Entwickler, die kleinsten Bestandteile einer Website definieren und standardisieren. Umsetzung und Anpassungen können rasch vorgenommen werden. Solche Standards gelten für das Aussehen und die Funktionalität der Website ebenso wie für ihre Anwender. Auch Redakteure können sich darauf verlassen, dass die von Ihnen erstellten Seiten und Inhalte immer gleich aussehen und gleich funktionieren.

Und nicht zuletzt profitiert der Besucher einer Website von den Standardisierungen. So haben zum Beispiel alle Funktionen das gleiche Verhalten oder alle Buttons sind dank gleichem Aussehen schnell als Button wieder zuerkennen – der Nutzer weiß somit, was ihn erwartet und was er erwarten kann.