Anzeige
Anzeige
Ratgeber
Artikel merken

Diese Fehler solltest du im kartenbasierten Webdesign vermeiden

Karten sind das neue Designkonzept – praktisch, allerdings solltest du es auch nicht übertreiben. Die folgenden Fehler solltest du deswegen vermeiden.

3 Min. Lesezeit
Anzeige
Anzeige

Kartendesign im Web ist nicht schwierig, wenn man weiß, wie. (Foto: Pixabay)

Kartenbasierte Designs sind aus Apps nicht mehr wegzudenken. Spätestens seit Einführung der Grundsätze des Material Design, zu dessen Konzepten auch das der Cards gehört, setzen sich die kleinen, variablen Informationshappen immer weiter durch. Vor einiger Zeit haben wir hier bei t3n einen Beitrag geschrieben, der den Trend näher erläutert und den du auch lesen solltest, wenn du dich tiefer mit dem Thema befassen willst.

Anzeige
Anzeige

Der gedankliche Ansatz hinter dem Kartendesign hat mehrere Aspekte: Zum einen dient die Karte als Zugangspunkt zu weiterführenden Informationen, quasi als Portal. Das ist der inhaltliche Aspekt. Zum anderen bietet die Karte als Designelement eine in sich variable Möglichkeit der Gestaltung größerer Zusammenhänge. Mit anderen Worten: Karten lassen sich als Form flexibel arrangieren, sodass sie das Design von Websites erleichtern, die auf vielen verschiedenen Auflösungen funktionieren müssen. Das ist der gestalterische Aspekt. Meiner Überzeugung nach ist das auch gleichzeitig der wichtigere.

Die generelle Vernachlässigung des inhaltlichen Aspekts hat dazu geführt, dass kartenbasierte Designs immer die gleichen Fehler aufweisen, die leicht zu vermeiden wären. Wenn du dir vor Augen hältst, dass die Karte deine kleinste individuelle Designeinheit ist, dann dürfte es dir nicht schwerfallen, folgende Fehler zu vermeiden:

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Eine vorbildliche Karte mit allen wichtigen Elementen. (Bildquelle: Google Material Design Guidelines)

Setze auf visuelle Hierarchie

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

Anzeige
Anzeige

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.

Übertreibe es aber auch nicht

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.

So nicht! Homogene Inhalte sollten nicht als einzelnen Karten dargestellt werden.. (Bildquelle: Google Material Design Guidelines)

Homogene Inhalte – wie die genannte Kontaktliste oder etwa eine Bildergalerie – gehören logisch zusammen und bilden so eine Karte.

Anzeige
Anzeige

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.

Kompakte Karten mit klaren Interaktionsmöglichkeiten. (Bildquelle: Google Material Design Guidelines)

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.

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.

Anzeige
Anzeige

Karte in ein- und ausgeklapptem Zustand. (Bildquelle: Google Material Design Guidelines)

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: Mit ein paar kleinen Tipps lässt sich das kartenbasierte Design optimieren

Kartenbasiertes Design ist nicht eben brandneu, hat aber auch eine Weile gebraucht, um sich durchzusetzen. Deshalb haben sich feste Best Practices noch nicht etabliert. Wenn du unsere Tipps hier ergänzen kannst, dann tue es bitte in den Kommentaren.

Quellen zum Weiterlesen:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige