Frontend und Design im Zeitalter des Responsive Webdesigns

Atomic Design – Responsive Webdesign neu gedacht
Keine Kommentare

Responsive Webdesign (RWD) ist nach wie vor in aller Munde. Kein Wunder, immerhin bietet selbiges eine ganze Reihe von Vorteilen. Für den klassischen Designprozess stellt das Zeitalter des Responsive Webdesigns jedoch eine große Herausforderung dar und so stößt er schnell an seine Grenzen – insbesondere, was die Anpassung des Workflows an die Umsetzung von RWD angeht.

Zwar lässt sich bereits seit einiger Zeit ein Paradigmenwechsel bei der Herangehensweise an den Designprozess feststellen, trotzdem ist auch das nicht immer fehlerfrei. Denn längst nicht alles, was heutzutage Responsive Design genannt wird, ist auch tatsächlich echtes RWD. Auf der International PHP Conference und WebTech Conference 2015 stellte Patrick Lobacher in seiner Session Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter eine Alternative zum klassischen Designprozess vor und zeigte anhand von Beispielen, wie sich ein solches Atomic Design praktisch umsetzen lässt.

Der klassische Designprozess – veraltet?

Typischerweise erfolgt der klassische Designprozess in verschiedenen Stufen, die bestenfalls aufeinander aufbauen. In der Realität kommt es dabei jedoch oft zu einigen Problemen. So folgt auf die Planung das Erstellen von Wireframes und dem Design, dann folgt die Entwicklung. Erst jetzt wird der Content eingefügt, bevor mit der Qualitätssicherung abgeschlossen wird.

ML Conference 2019

Deep learning advances for signal processing

with Oleksandr Honchar (Mawi Solutions)

Towards meaningful AI

with Imola Fodor (Electrolux)

Dass der Content erst so später geliefert wird, sorgt oft für Probleme – und werden dann auch noch bei der Qualitätssicherung Bugs festgestellt, entscheiden viele Designer, doch gleich nochmal zur Wireframe-Stufe zurückzugehen und weitere Anpassungen vorzunehmen. Für das Frontend-Team bedeutet es dann oft einen größeren Zeitaufwand, festzustellen, welcher Entwurf nun der aktuelle ist, der in der Website genutzt werden soll.

Dazu kommt, dass es mittlerweile unzählige Devices mit den unterschiedlichsten Auflösungen gibt. Um dieser Device-Fragmentierung gerecht zu werden, bedarf es einer immer größeren Anzahl von PSDs, mit denen in der Designphase gearbeitet wird – und deren Erstellung dauert. Projektdauern von bis zu zwei Jahren sind da keine Seltenheit.

Die Lösung: Responsive Webdesign

Nicht alles ist Responsive Webdesign, was als RWD angepriesen wird. Tatsächlich ist RWD mehr als Grids, flexible Images und Media Queries; allerdings werden Faktoren wie Usability, UX und Performance oft vergessen. Nötig ist darum ein neuer RWD-Prozess, der vor allem den Fokus auf die Content-Strategie legt. Aussehen könnte er etwa folgendermaßen:

  • Content-Strategie
  • Content Wireframes
  • Content erstellen
  • Content testen
  • Atomic Design
  • Linear Design
  • Prototyping
  • Device Testing

Ein solcher Prozess bietet einige Vorteile. So wird von Anfang an Wert auf den Content gelegt, was den Designern die Arbeit deutlich vereinfacht – immerhin sehen zum Beispiel Platzhaltertexte in PSDs anders aus, als Texte in der jeweiligen Websitesprache. So kann man sich mitunter einige Arbeit sparen.

Atomic Design – Fokus auf Designelemente

Einen neuen Ansatz für das Design hat Brad Frost mit dem Atomic Design entworfen. So wird dabei das Design auf einzelne Elemente heruntergebrochen, aus denen dann nach und nach das Design der Website entsteht. Dabei gibt es die folgenden Stufen: Atome, Moleküle, Organismen, Templates und die Seite.

Atome sind dabei kleine Designelemente wie zum Beispiel Buttons oder Labels, bei denen die Kunden schon früh Mikro-Entscheidungen treffen können. Das bietet nicht nur den Vorteil, dass Kunden deutlich mehr in den Entwicklungsprozess involviert werden, sondern auch, dass sich Änderungen leichter umsetzen lassen.

Während Atome die kleinste Einheit des Atomic Designs sind, werden in den folgenden Stufen immer mehr Elemente dazugenommen, bis am Ende die komplette Website erstellt wurde. Dabei lässt sich Atomic Design nicht nur für das Web nutzen, sondern etwa auch für Apps.

Das größte Problem des Atomic Designs ist allerdings die Zusammenarbeit von Frontend-Teams und den Designern. Oft arbeiten sie isoliert voneinander und können infolgedessen dem anderen nur schwer erklären, was sie sich bei ihren Entwürfen gedacht haben. Beim Atomic Design ist es jedoch wichtig, dass sie möglichst eng zusammenarbeiten – idealerweise am gleichen Standort.

Neben den Grundzügen des Atomic Designs stand bei Patrick Lobachers Session aber auch die praktische Nutzung im Fokus. So zeigte er, wie man mit dem von Brad Frost entworfenen Tool-Set Pattern Lab arbeitet und welche Tools idealerweise gemeinsam mit Pattern Lab genutzt werden sollten. Dazu gab es einige visuelle Beispiele, wie die Umsetzung von Websites mit Atomic Design aussehen kann – und die zeigen, dass Atomic Desing das Potenzial hat, Responsive Webdesign noch effektiver zu gestalten.

webinale 2019

A year with Progressive Web Apps

mit Antonio Peric-Mazar (Locastic)

SEO 2019: Wie man in einem kompetitiven Markt wächst

mit Matthäus Michalik (Claneo GmbH)

 

Aufmacherbild: Periodic Table of Elements Dmitri Mendeleev, vector design, extended version, black von Shutterstock / Urheberrecht: Panimoni

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -