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

  • Typographie

    Die Schriftart vermittelt Emotionen durch Form und Schwung der Buchstaben und wird dementsprechend sorgfältig zum Thema passend ausgewählt. Informationen werden nicht nur durch den lexikographischen kargen Text selbst vermittelt, sondern auch die Zeichnung, der Steg-Verlauf, die Serifen und die Ausrichtung von Buchstaben in einer Schriftart kommunizieren Infos und erzeugen Stimmungen. Abhängig vom Thema der Webseite…

  • 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.

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

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