Leveling & Cards

Google’s Material Design macht interaktive Elemente subtil sichtbar.

Wird der Schatten inkonsistent verwendet (linkes Schaubild), fühlt man sich sofort in die wilden 1990iger Jahre zurückversetzt. Schatten dienen auch nicht als Schmuckattribute sondern werden subtil genutzt und markieren größere klickbare Einheiten (rechts).

Die Zeit stark verschatteter Elemente ist eigentlich lange vorbei. Das stimmt jedoch nicht ganz, da der Schatten durch das Google Material Design in einer sehr subtilen Weise als Hilfsmittel fungiert, um interaktive Elemente zu erkennen. Die Idee: alles, was durch Klicken weitere Optionen offenbaren würde, wird vom Grund der Seite räumlich in Richtung des User-Auges angehoben. Würde man bei Tageslicht reales Papier vom Tisch hochheben, würde dieses einen feinen subtilen Schatten werden. Voila: damit erklärt sich das schattige Comeback.

Der Schatten ist daher kein Gestaltungsmittel sondern wird konsistent ohne Variation der Beleuchtungsrichtung gleichartig für alle interaktiven Elemente verwendet. Besonders wichtige Elemente, wie der Call-2-Action Button werden besonders stark angehoben und haben daher einen etwas größeren, jedoch blasseren Schatten.

Card-Design

Karten werden genutzt zur Strukturierung von Entitäten gleichen Aufbaus, z.b. Produkte in einem Shop werden dargestellt durch den Namen, einem Produktbild, einer Beschreibung und dem Preis. Damit sofort erkennbar ist, dass es sich hier um eine Einheit handelt, werden besagte Elemente auf einer Karte platziert. Da diese Karten meist klickbar sind (zur Auswahl des Produktes) wird die Karte auch mit einem subtilem Schatten versehen.

Ähnliche Beiträge

  • Grid Raster

    Ordnung ist das halbe Leben. Mit Raster & Bündigkeit wird sogar ein ganzes Daraus. Nicht eingezeichnete Ordnungsstrukturen werden unbewusst erkannt, wenn alle Elemente innerhalb eines regelmäßigen Grids (Raster) angeordnet sind. Unbewusst wird diese gerasterte Ordnung positiv vom User wahrgenommen. Das Raster besteht aus gleichbreiten bzw. gleichhohen Reihen und Spalten mit einem gleichbleibenden Abstand (engl. Gutter)…

  • Visuelle Hierarchie

    Das unwichtige vom wichtigen Trennen. Eine Hierarchie macht es möglich. Schriftgröße Je wichtiger die Überschrift, desto größer die Schriftgröße. Durch stark sichtbare und kontrahierende Zeichen wird die Aufmerksamkeit des Users auf die Titelüberschrift gezwungen. Zur Orientierung ist das natürlich ein sehr sinnvolles Vorgehen, denn es muss entschieden werden, ob das weitere Scannen der Seite thematisch…

  • Farben

    Das Google Mateiral Design definiert einen Farbkatalog und klassifiziert Helligkeitsstufen, damit Hintergrundfarben (auch Primärfarbe genannt) mit Vordergrundfarben (auch Akzentfarbe genannt) nahezu beliebig kombiniert werden können. Primärfarben werden mit einer mittleren Helligkeit angelegt (Stufe 500), während Akzentfarben stark gesättigt und hell sind (Stufe A100 bis A300). Primärfarbe Hintergrundfarben nehmen flächenmäßig einen großen Raum ein. Diese sind…

  • Weissraum

    Man sieht oft den Wald vor Bäumen nicht. Stünde ein einzelner Baum auf einer sonst baumfreien Lichtung fällt er sofort ins Auge. Weißraum bietet den Elementen eine Bühne, damit diese Platz haben, atmen und entfalten können. Der Weissraum muss nicht unbedingt weiß sein, sondern wird in der Primärfarbe oder mit einem subtilen Farbverlauf eingefärbt. Fehlt…