Gestaltung von Materialität

Von Elvira Stein / @elvirastein

Interaktion

Materialität äußert sich in der Interaktion

Analog:
in sichtbaren, fühlbaren Eindrücken

Beispiel Buch: das Umblättern ist ein manueller Akt, das Überwinden eines feinen Widerstands

Digital:
in subtiler Veränderung

Wie kann sich die Veränderung ausdrücken?

Animation

  • Bewegung: eine Eingabe löst Bewegung aus
  • Tempo: etwas kann schneller oder langsamer werden

Via Twitter’s Heart Animation in Full CSS

Tonebene

Benutzereingaben lösen Sounds aus

Bildebene

  • Opazität: die Transparenz verändert sich
  • Schärfe: Bilder werden scharf oder unscharf
  • Veränderung der Helligkeit
«Beauty and brains, pleasure and usability – they should go hand in hand»

Donald Norman via ustwo.com

Microinteractions

  • Mini-Funktionen
  • erfüllen genau eine Aufgabe

Microinteractions sind der Schlüssel zu guter User Experience.

Intuitiv und Erfreulich

Via Microinteractions – Designing with Details

«By being intentional about user experience in those small moments, that are typically neglected, you can showcase the personality of your app, as well as building loyalty among users.»

Chuck Longanecker in Give your Website Soul with Emotionally Intelligent Interactions

«It’s about caring more than others do.»

Möglichkeiten
der Gestaltung im Druck

Wie können wir besondere Produkte schaffen?

Details

Emotion und Erfahrung mit dem Objekt spielen eine wichtige Rolle für den Benutzer.

Liegt es gut in der Hand?

Ist es schwer? Leicht?

Welche Assoziationen weckt es?

Kontext

Wer wird es verwenden, in welchem Zusammenhang?

«By designing contexts for experience instead of simply products, the focus shifts from the result of interaction […] towards the involvement during interaction […].
This means that the designer’s emphasis should not merely lie on creating a beautiful, pleasing product in appearance, but expand to creating a beautiful, engaging interaction with a product.»

Caroline Hummels on Design and Emotion
via International Journal of Design

Auflage

Papier

  • gestrichen – ungestrichen
  • glänzend – matt
  • Farbe
  • Grammatur: Widerstand, Opazität, Volumen
  • Haptik: rauh – glatt – strukturiert

Druckverfahren

  • Digitaldruck
  • Offsetdruck
  • Siebdruck
  • Buchdruck/Letterpress
  • Linoldruck
  • Handschrift

Farben

  • 1c: Bitmap, Graustufen
  • 4c: Vierfarbdruck (Standard)
  • Sonderfarben

Veredelungen

  • Lackierung (matt/glänzend)
  • Prägung
  • Heißfolienprägung
  • Laminierung (matt/glänzend)
  • Stanzungen, Falzungen, Perforation, …

Bindung

  • Klebebindung
  • Fadenheftung
  • Klammerheftung
  • Vorsatzpapiere
  • Softcover – Hardcover
  • Flappen, …

Materialität
im Design

Danke! ♥