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

  • Evil UX worst practices

    „Don’t be evil“ war bis 20181 ein Teil von Google’s Code of Conduct. Die damalige Version des Verhaltenskodex liest sich ganz im Sinne des Dienstes am User „Yes, it’s about providing our users unbiased access to information, focusing on their needs and giving them the best products and services that we can …“ (der volle…

  • Frontend-Layout

    Alle Elemente des Produktkonfigurators werden in verschiedenen Positionen, Reihenfolgen und Größen „ausgelegt“. Durch das Weglassen von Farben, Bildern, Icons und inhaltlich gestalteten Texten kann sich der Designer voll auf das Layout konzentrieren. Denn dieses bildet nicht nur das Gerüst an dem die Gestaltung aufgehängt ist, sondern ist auch fundamental wichtig für Usability und User-Experience.

  • 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)…