‚Card-Webdesign‘ ist ein bekannter Webdesignansatz, den insbesondere das Social-Media-Tool Pinterest bekannt gemacht hat. Heute werden Cards recht häufig für unterschiedliche Zwecke genutzt, etwa im professionellen Webdesign, für Dating-Apps, Informationsseiten oder eben Social-Media-Angebote.
Im Card-Webdesign wird eine Website von der Frontend-Webentwicklung so eingerichtet, dass die Unterteilung durch separate visuelle Cards erfolgt. Dieses Webdesign ähnelt in etwa einer Wand, an die viele unterschiedliche und beschriftete Polaroidfotos angepinnt worden sind. Vor allem wenn die Website mit außerordentlich viel visuellem Content bespielt werden soll, kann dieser mit dem Card-Design intuitiv aufbereitet und emotional präsentiert werden. Bei viel Textanteil setzen Anbieter allerdings eher auf eine Mischform, weil sonst die Cards zu lang werden.
Das Layout des klassischen Card-Webdesigns besteht im oberen Teil aus einem Bild, Erklärvideo oder einer Illustration. Aufgrund des Aussehens entscheiden User nun, welche Karten sie wählen, wie etwa bei Tinder, wo die Darstellung auf einer visuellen Karte besteht, die schnell nach rechts und links gewischt werden kann. Ergänzend gibt es nicht selten eine Kurzbeschreibung am unteren Rand, was den Cards ihr polaroidähnliches Aussehen verleiht. Leichte Schatten, um der Optik eine gewisse Tiefe zu verleihen, runden das Card-Design ab.
Die Karten sind gut skalierbar und werden in der ‚Mobile first‘-Offensive auf kleinen Monitoren und mobilen Geräten perfekt abgebildet. Hier funktioniert die responsive Webentwicklung perfekt und die mobile Darstellung passt zum ‚Mobile-friendly‘-Trend.
Es gibt nun verschiedene Möglichkeiten, wie User mit Cards interagieren können: z. B. indem sie auf die jeweilige Karte klicken, um weitere Informationen zu erhalten, oder lediglich ein Mouseover ausführen. Hinzu kommen weitere kreative und konzeptionelle Spielräume: So können die Cards asymmetrisch oder streng nebeneinander angeordnet, als Rechtecke oder Vierecke dargestellt und mit viel oder weniger Platz ausgestattet werden. Das Card-Webdesign entwickelt sich in seinen Möglichkeiten fortwährend weiter und bietet wie bei Google Streams neben den oben erwähnten Bildern und Texten nun auch Links, das Vergeben von +1-Likes, Sharing-Optionen und Kommentarfunktionen. Auch Buttons, die eine alternative Navigation ermöglichen, sind verwendbar.
