Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 3. Mai 2018

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, son­dern bie­tet schon län­ger hand­fes­te, objek­ti­ve Vorteile abseits von Konzernstrategien. Wir zei­gen dir, wie du den popu­lä­ren Trend erfolg­reich gestal­te­risch umsetzt.

Die Anforderungen an moder­nes Design legen die Karte als Gestaltungsebene nahe

Mittlerweile ist kar­ten­ba­sier­tes Design so omni­prä­sent, dass es eher auf­fällt, wenn eine Seite kein Karten-Layout besitzt als umge­kehrt. Treiber die­ses Trends waren anfangs die sozia­len Netzwerke Twitter und Facebook. In den letz­ten Jahren beschleu­nig­te dann vor allem Google mit sei­nem Material-Design die wei­te­re Verbreitung. Auch Microsoft zeig­te sich mit den Metro-, respek­ti­ve Modern-Ansätzen dem Karten-Design nicht abge­neigt. Auch wenn Windows 10 inzwi­schen die Dominanz der Kachel-Optik deut­lich zurück­ge­nom­men hat, bleibt sie doch die Gestaltungsphilosophie hin­ter dem Start-Button.

Google+: Konsequentes Kartendesign über alle Geräte. (Screenshot: D. Petereit)

Mit der Verbreitung der mobi­len Webnutzung, der Verwendung grid-basie­ren­der Frameworks und der Verfügbarkeit neu­er Standardelemente, wie Flexbox und Grid, wird die Karte als Design-Element immer zwin­gen­der.

Die fünf Vorteile von Karten als Gestaltungsebene im Webdesign

Die mobi­le Revolution hat uns eine Beschleunigung in der Webentwicklung beschert, die wir vor zehn Jahren noch für völ­lig unmög­lich gehal­ten hät­ten. Die Limitationen, aber auch die neu­en Möglichkeiten mobi­ler Devices sorg­ten dafür, dass die Standardisierung der Webtechnologien Fahrt auf­nahm wie nie zuvor.

Ebenso sorg­te die rasan­te Verbreitung mobi­ler Devices dafür, dass das kon­ven­tio­nel­le Design unter Druck geriet. Immer mehr Seitenbetreiber legen Wert dar­auf, dass Smartphone- und Tablet-Nutzer eine ähn­li­che Nutzererfahrung erle­ben wie jene, die mit kon­ven­tio­nel­len Browsern auf dem Desktop zum Besuch anset­zen.

Die fol­gen­den Vorteile soll­test du im Blick haben.

Vorteil #1: Karten funk­tio­nie­ren gut in respon­si­ven Designs

Aus der Nachfrage nach mobil­taug­li­chen Websites ent­wi­ckel­ten sich ver­schie­de­ne Ansätze. Der erfolg­reichs­te ist sicher­lich das respon­si­ve Design, gele­gent­lich noch ergänzt um die Verschärfung Mobile First. Beim respon­si­ven Design geht es bekannt­lich dar­um, dass sich ein Design auto­ma­tisch den Begrenzungen und Möglichkeiten des Besucherbrowsers anpasst. Das Ziel besteht dar­in, eine Website auf den unter­schied­li­chen Geräten mög­lichst voll­um­fäng­lich, aber min­des­tens soweit es auf mobi­len Geräten sinn­voll ist, nutz­bar zu machen.

Um das zu errei­chen, ist es unab­ding­bar, dass die Inhalte einer Seite sich dyna­misch – min­des­tens in der Breite – an den Viewport anpas­sen kön­nen. Dieses Erfordernis zu erfül­len, ist weni­ger leicht, als es sich zunächst anfüh­len mag, denn es kommt ganz dar­auf an, mit wel­cher Zielauflösung du schaust.

Responsive Design im gro­ben Raster. (Foto: Depositphotos)

Sicherlich ist ein flui­des Design, das die vol­le Breite des Bildschirms aus­nutzt, auf einem mobi­len Gerät in der Regel ansehn­lich. Ruft man das­sel­be Design aber auf einem 4K-Display auf, sieht die Sache ganz anders aus.

Früher war es üblich, fes­te Breiten für Websites zu defi­nie­ren. Jahrelang lag die­ser Konsens bei 800 x 600 Pixeln. Entweder fixier­ten wir den gleich­blei­bend brei­ten Bereich in der Mitte des Bildschirms und erzeug­ten so unter­schied­lich brei­te Ränder rechts und links, oder wir fixier­ten den Bereich am lin­ken Rand und lie­ßen nach rechts Whitespace oder einen Hintergrundverlauf, spä­ter dann auch Hintergrundbilder, zu. Im nächs­ten Schritt erwei­ter­ten wir die Fix-Bereiche auf 1.024 x 768 Pixel. So waren wir im Grunde auf der siche­ren Seite.

Zu Beginn der mobi­len Revolution – als die Stückzahlen mobi­ler Geräte höher wur­den, sprich als das iPhone kam – brach die­se Norm in sich zusam­men. Denn das iPhone hat­te nur 340 Pixel Breite. Schnell setz­ten sich beson­ders ange­pass­te, zusätz­li­che Websites durch, die zumeist nur eine ein­ge­schränk­te Funktionalität im Vergleich zur Vollversion hat­ten, aber immer­hin mobil funk­tio­nier­ten.

Heute gibt es mobi­le Geräte mit einer brei­ten Vielfalt ver­schie­dens­ter Auflösungen. Mit einer spe­zi­ell ange­pass­ten Version ist dir meist nicht gehol­fen, zumal sowohl Seitenbetreiber wie auch Besucher heut­zu­ta­ge erwar­ten, mobil kei­ne Kompromisse machen zu müs­sen.

Unter dem Design-Gesichtspunkt drängt sich damit die Verwendung von kar­ten­ba­sier­ten Layout-Blöcken förm­lich auf. Diese kannst du auf einem schma­len Bildschirm per­fekt nut­zen, und sie funk­tio­nie­ren auch auf einem 4K-Boliden. Während auf dem Smartphone die ein­zel­nen Karten als fort­lau­fen­der Stream ange­zeigt wer­den, kannst du sie bei meh­re­ren Tausend Pixeln Auflösung wie eine Patience auf dem Bildschirm anord­nen; sie anein­an­der rei­hen, sta­peln, unter­ein­an­der legen – ganz, wie es dir beliebt.

Vorteil #2: Karten sind abge­schlos­se­ne Inhaltseinheiten

Dabei gehst du am bes­ten so vor, dass eine Karte immer einen Inhaltsbestandteil kom­plett abdeckt. In einem Magazin wäre das etwa ein Artikel mit Teaserfoto, Anreißer und Call-to-Action, der im Normalfall „Weiterlesen” lau­ten dürf­te. Durchgesetzt hat sich eben­so, dass die sons­ti­gen Interaktionsmöglichkeiten, also in ers­ter Linie die sozia­len Medien, von der Karte aus erreicht wer­den kön­nen.

Da eine Karte qua­si ein eige­ner Canvas ist, kannst du gestal­te­risch aus dem Vollen schöp­fen. Alles, was du im Viewport aus­drü­cken kannst, gelingt dir mit der ent­spre­chen­den Kreativität auch auf der Miniaturvariante, der Karte. In man­chen Designs wirst du Wert dar­auf legen, dass die Karten eine kon­sis­ten­te Optik haben, in ande­ren wirst du sie stark unter­schied­lich gestal­ten wol­len.

Visuell auf­wän­di­ge Frameworks, wie etwa Designmodos Slides, sind letzt­lich auch kar­ten­ba­siert, nur dass die Karten hier die Breite des Bildschirms voll abde­cken und eher zu einer ver­ti­ka­len Ordnung bei­tra­gen.

Slides von Designmodo, letzt­lich auch eine Variante kar­ten­ba­sier­ten Designs. (Screenshot: D. Petereit)

Vorteil #3: Karten las­sen sich aus­ge­zeich­net mit ande­ren tei­len

Soziale Medien leben davon, Inhalte zu tei­len. Schau dir an, in wel­chem Format die­ses Teilen zumeist statt­fin­det. Es sind Karten mit Inhaltshappen, die du an dei­ne Follower wei­ter­lei­test. Durch die Reduktion auf das Wesentliche besteht eine erhöh­te Chance, dass das Interaktionslevel hoch gehal­ten wer­den kann. Je mehr Auswahl ein Besucher hat, des­to schwie­ri­ger wird es, ihn zu jener Aktion zu brin­gen, die der eigent­li­chen Intention des Betreibers ent­spricht. Und bei sozia­len Medien geht es nun mal in ers­ter Linie um das Teilen.

Durch die Unterteilung der Inhalte in Karten ergibt sich eine natür­li­che Abgrenzung der Inhalte von­ein­an­der. Das kommt den wich­ti­gen Aspekten, der Übersichtlichkeit und leich­ten Bedienbarkeit, zugu­te. Wenn du Karten wei­ter grup­pie­ren willst, kannst du es so machen wie Trello, wo du Karten in Listen sor­tierst oder wie der Guardian, der Karten mit ein­zel­nen Beiträgen in gro­ße Karten mit dem über­grei­fen­den Thema ver­packt.

The Guardian sor­tiert Karten in Themenbereiche. (Screenshot: D. Petereit)

Vorteil #4: Karten sind schnell zu erfas­sen

Wie wir alle wis­sen, liest heut­zu­ta­ge kaum ein Besucher kon­zen­triert auf einer Website. Stattdessen wird die Seite nach rele­van­ten Inhalten mit den Augen gescannt und bei Misserfolg schnel­ler ver­las­sen als sie auf­ge­sucht wur­de. Karten sind dabei wesent­lich leich­ter scann­bar als lan­ge Inhaltspassagen ohne kla­re Abgrenzung.

Sicherlich wäre es schö­ner, wenn dei­ne Besucher sich mehr Zeit zum Stöbern näh­men. Da du das aber nicht errei­chen kannst, soll­test du sie im Scanvorgang unter­stüt­zen und auf dei­ne Inhalte len­ken. Eine Optimierung der Scanbarkeit gehört auf dei­ne Aufgabenliste.

Vorteil #5: Mit Karten kann jeder etwas anfan­gen

Abgesehen von tech­ni­schen Aspekten haben Karten etwas, das in die­sen schnell­le­bi­gen Zeiten nicht selbst­ver­ständ­lich ist. Sie bie­ten näm­lich so etwas wie einen Anker, eine bekann­te Umgebung und damit ein Stück Sicherheit.

Diese Karten kennt jeder. (Foto: Depositphotos)

Karten haben eine jahr­hun­der­te­al­te Tradition als Informationsmedium. Als Karteikarten sind sie teils noch heu­te im Einsatz. In den Achtzigern waren Karten die Datenbanken jener Zeit. Wir alle ken­nen Spielkarten und sen­den aus dem Urlaub Postkarten nach Hause – trotz Whatsapp und Co. Und trotz Digitalisierung ver­lie­ren Visitenkarten nicht an Beliebtheit.

Das Bild der Karte dürf­te damit eines der ver­trau­tes­ten über­haupt sein. Jeder kann etwas damit anfan­gen, nie­mand benö­tigt eine Unterweisung. Damit eig­net sich die Karte vor­züg­lich zum Einsatz im Webdesign.

Wie schon Steve Krug emp­fahl: Don’t Make me Think!

Best Practice: Sechs Tipps für kartenbasiertes Webdesign

Wenn du dich nun für den Einsatz des kar­ten­ba­sier­ten Designs ent­schlos­sen hast, soll­test du noch die fol­gen­den sechs Best Practices beach­ten. Denn Karten kannst du natür­lich auch falsch ein­set­zen. Das wol­len wir in jedem Falle ver­mei­den.

Tipp #1: Baue kei­ne wei­te­ren Unterteilungen ein

Die Karte ist dei­ne kleins­te Einheit. Unterteile sie nicht in wei­te­re Einheiten, etwa indem du mit hori­zon­ta­len oder ver­ti­ka­len Linien arbei­test oder viel Whitespace inner­halb der ein­zel­nen Karte ein­setzt.

Erstelle eine Karte stets so kom­pakt wie mög­lich. Sie soll schnell vom Nutzer erfasst wer­den. Wenn er erst her­aus­fin­den muss, wie du dir das Kartendesign womög­lich gedacht hast, ist es kein gutes.

Eine vor­bild­li­che Karte mit allen wich­ti­gen Elementen. (Bildquelle: Google Material Design Guidelines)

Tipp #2: Setze auf visu­el­le Hierarchie

Statt mit wei­te­ren Ordnungsmerkmalen. wie etwa Linien, dein Kartendesign zu struk­tu­rie­ren, set­ze lie­ber auf visu­el­le Hierarchie. Das erreichst du durch typo­gra­fisch sinn­vol­le Schriftgrößen für Header und Subheader. Strukturiere dei­ne Karten stets gleich, etwa Bild, Header, Subheader, Teaser, Call to Action.

Tipp #3: Verwende pro Thema eine Karte

Sobald der nächs­te Header fäl­lig wür­de, weil du ein neu­es Thema zu bear­bei­ten gedenkst, erstel­le eine neue Karte. Vermische die Themen nicht inner­halb ein und der­sel­ben Karte. Dadurch geht die Übersicht ver­lo­ren. Zudem tor­pe­dierst du so das Konzept als sol­ches.

Tipp #4: Bewahre den logi­schen Zusammenhang

Wenn du zum Beispiel eine Kontaktliste anzei­gen willst, dann ist die­se Liste dei­ne Karte. Komm nicht auf die Idee, aus jedem ein­zel­nen Kontakt eine ein­zel­ne Karte zu erstel­len. Wichtig ist, immer den logi­schen Zusammenhang zu wah­ren.

So nicht! Homogene Inhalte soll­ten nicht als ein­zel­nen Karten dar­ge­stellt wer­den.. (Bildquelle: Google Material Design Guidelines)

Homogene Inhalte – wie die genann­te Kontaktliste oder etwa eine Bildergalerie – gehö­ren logisch zusam­men und bil­den so eine Karte. Dass die Karte dann im Beispiel der Bildergalerie meh­re­re Fotos ent­hal­ten wird, ver­steht sich von selbst. So könn­te die Karte etwa „Sonntag am Strand” hei­ßen, und alle ent­spre­chen­den Bilder des Tages ent­hal­ten.

Tipp #5: Limitiere die Interaktionsmöglichkeiten

Zumeist ist eine Karte ein ein­zi­ger Link. Wenn es die Aufgabe der Karte ist, dei­ne Besucher zu einer bestimm­ten Information zu lei­ten, stel­le sicher, dass die Karte auch tat­säch­lich als ein kom­plet­ter Link funk­tio­niert. Optisch lässt sich das etwa durch einen leich­ten Schlagschatten um die Karte rea­li­sie­ren.

Kompakte Karten mit kla­ren Interaktionsmöglichkeiten. (Bildquelle: Google Material Design Guidelines)

Sollte das nicht die Aufgabe dei­ner Karte sein, musst du expli­zit Interaktionsmöglichkeiten vor­se­hen. Diese soll­ten dabei aber dei­nen Zielen ent­spre­chen und nicht ins Beliebige abdrif­ten. So soll­test du ins­be­son­de­re auf Links ins Irgendwo ver­zich­ten, wenn du eigent­lich möch­test, dass der Besucher dein Produkt kauft oder dei­nen Newsletter abon­niert.

Tipp #6: Halte jede Karte so kom­pakt wie mög­lich

Bedenke, dass die Karte der Zugangspunkt zu wei­te­ren Informationen sein soll und nicht die umfas­sen­de Information selbst. Auf eine Karte gehört daher nur das abso­lu­te Mindestmaß des­sen, was sich als Zugangspunkt defi­nie­ren lässt.

Karte in ein- und aus­ge­klapp­tem Zustand. (Bildquelle: Google Material Design Guidelines)

Wenn du dazu neigst, eher etwas mehr Infos zu geben, soll­test du über­le­gen, die Karte erwei­ter­bar anzu­le­gen. So wür­de sie im ein­ge­klapp­ten Zustand nur das Minimum und im aus­ge­klapp­ten Zustand etwas mehr an Informationen lie­fern. Der ein­ge­klapp­te Zustand wäre der initia­le, sodass der Besucher einen auf­ge­räum­ten und über­sicht­li­chen opti­schen Eindruck gewinnt.

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

Je ein­fa­cher dei­ne Besucher zu den gewünsch­ten Informationen gelan­gen, des­to leich­ter las­sen sie sich steu­ern. Denn die psy­cho­lo­gi­sche Barriere, die sich bei sper­ri­ger Bedienung auf­baut, bleibt aus. So ist kar­ten­ba­sier­tes Design ten­den­zi­ell kon­ver­si­ons­för­dernd.

Vollkommen frei von Problemen ist natür­lich auch die­se Art der Gestaltung nicht. So kann kar­ten­ba­sier­tes Design auf sehr gro­ßen Bildschirmen den­noch zu Unübersichtlichkeit füh­ren. Sicherlich wäre jede ande­re Gestaltungsform schon sehr viel frü­her unbe­dien­bar gewor­den, aber Karten kön­nen auch nur bis zu einem gewis­sen Punkt aus­glei­chend wir­ken. Das wür­de ich indes nicht als Nachteil der Gestaltungsmethode bezeich­nen.

(Bildnachweis Artikelbild: Depositphotos)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. Danke für die­sen Post. Card Design ver­eint tol­le Optik mit super Benutzerfreundlichkeit – da kriegt man 2 Fliegen mit einer Klatsche ;-) In die­sem Zusammenhang möch­te ich auch auf mei­ne bei­den Blogartikel zum Thema “Card Design” aus dem Jahre 2016 hin­wei­sen, weil’s super zum Thema passt:

    Card Design: Organisierte Flexibilität im Raster http://hcgcorporatedesignsdeutsch.blogspot.com/2016/05/card-design-organisierte-flexibilitat.html

    Bitte kei­ne lang­wei­li­gen Card Designs mehr http://hcgcorporatedesignsdeutsch.blogspot.com/2016/12/bitte-keine-langweiligen-card-designs.html

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.