Kartenbasiertes Design: So machst du es richtig!

Kartenbasiertes Design, auch als Card Based Design bekannt, ist nicht erst durch Googles Material Design zu Beliebtheit gelangt, sondern bietet schon länger handfeste, objektive Vorteile abseits von Konzernstrategien. Wir zeigen dir, wie du den populären Trend erfolgreich gestalterisch umsetzt.

Die Anforderungen an modernes Design legen die Karte als Gestaltungsebene nahe

Mittlerweile ist kartenbasiertes Design so omnipräsent, dass es eher auffällt, wenn eine Seite kein Karten-Layout besitzt als umgekehrt. Treiber dieses Trends waren anfangs die sozialen Netzwerke Twitter und Facebook. In den letzten Jahren beschleunigte dann vor allem Google mit seinem Material-Design die weitere Verbreitung. Auch Microsoft zeigte sich mit den Metro-, respektive Modern-Ansätzen dem Karten-Design nicht abgeneigt. Auch wenn Windows 10 inzwischen die Dominanz der Kachel-Optik deutlich zurückgenommen hat, bleibt sie doch die Gestaltungsphilosophie hinter dem Start-Button.

Mit der Verbreitung der mobilen Webnutzung, der Verwendung grid-basierender Frameworks und der Verfügbarkeit neuer Standardelemente, wie Flexbox und Grid, wird die Karte als Design-Element immer zwingender.

Die fünf Vorteile von Karten als Gestaltungsebene im Webdesign

Die mobile Revolution hat uns eine Beschleunigung in der Webentwicklung beschert, die wir vor zehn Jahren noch für völlig unmöglich gehalten hätten. Die Limitationen, aber auch die neuen Möglichkeiten mobiler Devices sorgten dafür, dass die Standardisierung der Webtechnologien Fahrt aufnahm wie nie zuvor.

Ebenso sorgte die rasante Verbreitung mobiler Devices dafür, dass das konventionelle Design unter Druck geriet. Immer mehr Seitenbetreiber legen Wert darauf, dass Smartphone- und Tablet-Nutzer eine ähnliche Nutzererfahrung erleben wie jene, die mit konventionellen Browsern auf dem Desktop zum Besuch ansetzen.

Die folgenden Vorteile solltest du im Blick haben.

Vorteil #1: Karten funktionieren gut in responsiven Designs

Aus der Nachfrage nach mobiltauglichen Websites entwickelten sich verschiedene Ansätze. Der erfolgreichste ist sicherlich das responsive Design, gelegentlich noch ergänzt um die Verschärfung Mobile First. Beim responsiven Design geht es bekanntlich darum, dass sich ein Design automatisch den Begrenzungen und Möglichkeiten des Besucherbrowsers anpasst. Das Ziel besteht darin, eine Website auf den unterschiedlichen Geräten möglichst vollumfänglich, aber mindestens soweit es auf mobilen Geräten sinnvoll ist, nutzbar zu machen.

Um das zu erreichen, ist es unabdingbar, dass die Inhalte einer Seite sich dynamisch – mindestens in der Breite – an den Viewport anpassen können. Dieses Erfordernis zu erfüllen, ist weniger leicht, als es sich zunächst anfühlen mag, denn es kommt ganz darauf an, mit welcher Zielauflösung du schaust.

Sicherlich ist ein fluides Design, das die volle Breite des Bildschirms ausnutzt, auf einem mobilen Gerät in der Regel ansehnlich. Ruft man dasselbe Design aber auf einem 4K-Display auf, sieht die Sache ganz anders aus.

Früher war es üblich, feste Breiten für Websites zu definieren. Jahrelang lag dieser Konsens bei 800 x 600 Pixeln. Entweder fixierten wir den gleichbleibend breiten Bereich in der Mitte des Bildschirms und erzeugten so unterschiedlich breite Ränder rechts und links, oder wir fixierten den Bereich am linken Rand und ließen nach rechts Whitespace oder einen Hintergrundverlauf, später dann auch Hintergrundbilder, zu. Im nächsten Schritt erweiterten wir die Fix-Bereiche auf 1.024 x 768 Pixel. So waren wir im Grunde auf der sicheren Seite.

Zu Beginn der mobilen Revolution – als die Stückzahlen mobiler Geräte höher wurden, sprich als das iPhone kam – brach diese Norm in sich zusammen. Denn das iPhone hatte nur 340 Pixel Breite. Schnell setzten sich besonders angepasste, zusätzliche Websites durch, die zumeist nur eine eingeschränkte Funktionalität im Vergleich zur Vollversion hatten, aber immerhin mobil funktionierten.

Heute gibt es mobile Geräte mit einer breiten Vielfalt verschiedenster Auflösungen. Mit einer speziell angepassten Version ist dir meist nicht geholfen, zumal sowohl Seitenbetreiber wie auch Besucher heutzutage erwarten, mobil keine Kompromisse machen zu müssen.

Unter dem Design-Gesichtspunkt drängt sich damit die Verwendung von kartenbasierten Layout-Blöcken förmlich auf. Diese kannst du auf einem schmalen Bildschirm perfekt nutzen, und sie funktionieren auch auf einem 4K-Boliden. Während auf dem Smartphone die einzelnen Karten als fortlaufender Stream angezeigt werden, kannst du sie bei mehreren Tausend Pixeln Auflösung wie eine Patience auf dem Bildschirm anordnen; sie aneinander reihen, stapeln, untereinander legen – ganz, wie es dir beliebt.

Vorteil #2: Karten sind abgeschlossene Inhaltseinheiten

Dabei gehst du am besten so vor, dass eine Karte immer einen Inhaltsbestandteil komplett abdeckt. In einem Magazin wäre das etwa ein Artikel mit Teaserfoto, Anreißer und Call-to-Action, der im Normalfall „Weiterlesen” lauten dürfte. Durchgesetzt hat sich ebenso, dass die sonstigen Interaktionsmöglichkeiten, also in erster Linie die sozialen Medien, von der Karte aus erreicht werden können.

Da eine Karte quasi ein eigener Canvas ist, kannst du gestalterisch aus dem Vollen schöpfen. Alles, was du im Viewport ausdrücken kannst, gelingt dir mit der entsprechenden Kreativität auch auf der Miniaturvariante, der Karte. In manchen Designs wirst du Wert darauf legen, dass die Karten eine konsistente Optik haben, in anderen wirst du sie stark unterschiedlich gestalten wollen.

Visuell aufwändige Frameworks, wie etwa Designmodos Slides, sind letztlich auch kartenbasiert, nur dass die Karten hier die Breite des Bildschirms voll abdecken und eher zu einer vertikalen Ordnung beitragen.

Vorteil #3: Karten lassen sich ausgezeichnet mit anderen teilen

Soziale Medien leben davon, Inhalte zu teilen. Schau dir an, in welchem Format dieses Teilen zumeist stattfindet. Es sind Karten mit Inhaltshappen, die du an deine Follower weiterleitest. Durch die Reduktion auf das Wesentliche besteht eine erhöhte Chance, dass das Interaktionslevel hoch gehalten werden kann. Je mehr Auswahl ein Besucher hat, desto schwieriger wird es, ihn zu jener Aktion zu bringen, die der eigentlichen Intention des Betreibers entspricht. Und bei sozialen Medien geht es nun mal in erster Linie um das Teilen.

Durch die Unterteilung der Inhalte in Karten ergibt sich eine natürliche Abgrenzung der Inhalte voneinander. Das kommt den wichtigen Aspekten, der Übersichtlichkeit und leichten Bedienbarkeit, zugute. Wenn du Karten weiter gruppieren willst, kannst du es so machen wie Trello, wo du Karten in Listen sortierst oder wie der Guardian, der Karten mit einzelnen Beiträgen in große Karten mit dem übergreifenden Thema verpackt.

Vorteil #4: Karten sind schnell zu erfassen

Wie wir alle wissen, liest heutzutage kaum ein Besucher konzentriert auf einer Website. Stattdessen wird die Seite nach relevanten Inhalten mit den Augen gescannt und bei Misserfolg schneller verlassen als sie aufgesucht wurde. Karten sind dabei wesentlich leichter scannbar als lange Inhaltspassagen ohne klare Abgrenzung.

Sicherlich wäre es schöner, wenn deine Besucher sich mehr Zeit zum Stöbern nähmen. Da du das aber nicht erreichen kannst, solltest du sie im Scanvorgang unterstützen und auf deine Inhalte lenken. Eine Optimierung der Scanbarkeit gehört auf deine Aufgabenliste.

Vorteil #5: Mit Karten kann jeder etwas anfangen

Abgesehen von technischen Aspekten haben Karten etwas, das in diesen schnelllebigen Zeiten nicht selbstverständlich ist. Sie bieten nämlich so etwas wie einen Anker, eine bekannte Umgebung und damit ein Stück Sicherheit.

Karten haben eine jahrhundertealte Tradition als Informationsmedium. Als Karteikarten sind sie teils noch heute im Einsatz. In den Achtzigern waren Karten die Datenbanken jener Zeit. Wir alle kennen Spielkarten und senden aus dem Urlaub Postkarten nach Hause – trotz Whatsapp und Co. Und trotz Digitalisierung verlieren Visitenkarten nicht an Beliebtheit.

Das Bild der Karte dürfte damit eines der vertrautesten überhaupt sein. Jeder kann etwas damit anfangen, niemand benötigt eine Unterweisung. Damit eignet sich die Karte vorzüglich zum Einsatz im Webdesign.

Wie schon Steve Krug empfahl: Don’t Make me Think!

Best Practice: Sechs Tipps für kartenbasiertes Webdesign

Wenn du dich nun für den Einsatz des kartenbasierten Designs entschlossen hast, solltest du noch die folgenden sechs Best Practices beachten. Denn Karten kannst du natürlich auch falsch einsetzen. Das wollen wir in jedem Falle vermeiden.

Tipp #1: Baue keine weiteren Unterteilungen ein

Die Karte ist deine kleinste Einheit. Unterteile sie nicht in weitere Einheiten, etwa indem du mit horizontalen oder vertikalen Linien arbeitest oder viel Whitespace innerhalb der einzelnen Karte einsetzt.

Erstelle eine Karte stets so kompakt wie möglich. Sie soll schnell vom Nutzer erfasst werden. Wenn er erst herausfinden muss, wie du dir das Kartendesign womöglich gedacht hast, ist es kein gutes.

Tipp #2: Setze auf visuelle Hierarchie

Statt mit weiteren Ordnungsmerkmalen. wie etwa Linien, dein Kartendesign zu strukturieren, setze lieber auf visuelle Hierarchie. Das erreichst du durch typografisch sinnvolle Schriftgrößen für Header und Subheader. Strukturiere deine Karten stets gleich, etwa Bild, Header, Subheader, Teaser, Call to Action.

Tipp #3: Verwende pro Thema eine Karte

Sobald der nächste Header fällig würde, weil du ein neues Thema zu bearbeiten gedenkst, erstelle eine neue Karte. Vermische die Themen nicht innerhalb ein und derselben Karte. Dadurch geht die Übersicht verloren. Zudem torpedierst du so das Konzept als solches.

Tipp #4: Bewahre den logischen Zusammenhang

Wenn du zum Beispiel eine Kontaktliste anzeigen willst, dann ist diese Liste deine Karte. Komm nicht auf die Idee, aus jedem einzelnen Kontakt eine einzelne Karte zu erstellen. Wichtig ist, immer den logischen Zusammenhang zu wahren.

Homogene Inhalte – wie die genannte Kontaktliste oder etwa eine Bildergalerie – gehören logisch zusammen und bilden so eine Karte. Dass die Karte dann im Beispiel der Bildergalerie mehrere Fotos enthalten wird, versteht sich von selbst. So könnte die Karte etwa „Sonntag am Strand” heißen, und alle entsprechenden Bilder des Tages enthalten.

Tipp #5: Limitiere die Interaktionsmöglichkeiten

Zumeist ist eine Karte ein einziger Link. Wenn es die Aufgabe der Karte ist, deine Besucher zu einer bestimmten Information zu leiten, stelle sicher, dass die Karte auch tatsächlich als ein kompletter Link funktioniert. Optisch lässt sich das etwa durch einen leichten Schlagschatten um die Karte realisieren.

Sollte das nicht die Aufgabe deiner Karte sein, musst du explizit Interaktionsmöglichkeiten vorsehen. Diese sollten dabei aber deinen Zielen entsprechen und nicht ins Beliebige abdriften. So solltest du insbesondere auf Links ins Irgendwo verzichten, wenn du eigentlich möchtest, dass der Besucher dein Produkt kauft oder deinen Newsletter abonniert.

Tipp #6: Halte jede Karte so kompakt wie möglich

Bedenke, dass die Karte der Zugangspunkt zu weiteren Informationen sein soll und nicht die umfassende Information selbst. Auf eine Karte gehört daher nur das absolute Mindestmaß dessen, was sich als Zugangspunkt definieren lässt.

Wenn du dazu neigst, eher etwas mehr Infos zu geben, solltest du überlegen, die Karte erweiterbar anzulegen. So würde sie im eingeklappten Zustand nur das Minimum und im ausgeklappten Zustand etwas mehr an Informationen liefern. Der eingeklappte Zustand wäre der initiale, sodass der Besucher einen aufgeräumten und übersichtlichen optischen Eindruck gewinnt.

Fazit: Karten vereinfachen dein Design und erhöhen die Konversionschancen

Je einfacher deine Besucher zu den gewünschten Informationen gelangen, desto leichter lassen sie sich steuern. Denn die psychologische Barriere, die sich bei sperriger Bedienung aufbaut, bleibt aus. So ist kartenbasiertes Design tendenziell konversionsfördernd.

Vollkommen frei von Problemen ist natürlich auch diese Art der Gestaltung nicht. So kann kartenbasiertes Design auf sehr großen Bildschirmen dennoch zu Unübersichtlichkeit führen. Sicherlich wäre jede andere Gestaltungsform schon sehr viel früher unbedienbar geworden, aber Karten können auch nur bis zu einem gewissen Punkt ausgleichend wirken. Das würde ich indes nicht als Nachteil der Gestaltungsmethode bezeichnen.

(Bildnachweis Artikelbild: Depositphotos)