Embed Size (px)
Citation preview
GESTALTUNGVONMATERIALITÄT
Von /ElviraStein @elvirastein
INTERAKTION
MaterialitätäußertsichinderInteraktion
ANALOG:INSICHTBAREN,FÜHLBAREN
EINDRÜCKENBeispielBuch:dasUmblätternisteinmanuellerAkt,das
ÜberwindeneinesfeinenWiderstands
DIGITAL:INSUBTILERVERÄNDERUNGWiekannsichdieVeränderungausdrücken?
ANIMATIONBewegung:eineEingabelöstBewegungausTempo:etwaskannschnelleroderlangsamerwerden
Via
Youcansayalotwithaheart.IntroducinganewwaytoshowhowyoufeelonTwitter:
—Twitter(@Twitter)
https://t.co/WKBEmORXNWpic.twitter.com/G4ZGe0rDTP
November3,2015Twitter’sHeartAnimationinFullCSS
TONEBENEBenutzereingabenlösenSoundsaus
Playbackisn'tsupportedonthisdevice.
0:00/0:03
BILDEBENEOpazität:dieTransparenzverändertsichSchärfe:BilderwerdenscharfoderunscharfVeränderungderHelligkeit
DonaldNormanvia
«Beautyandbrains,pleasureandusability–theyshouldgohandinhand»
ustwo.com
MICROINTERACTIONSMini-FunktionenerfüllengenaueineAufgabe
MicrointeractionssindderSchlüsselzuguterUserExperience.
INTUITIVUNDERFREULICH
Smart Design
CL ICK FOR SOUND
Smart Design
CL ICK FOR SOUND
ViaMicrointeractions–DesigningwithDetails
ChuckLonganeckerin
«Bybeingintentionalaboutuserexperienceinthosesmallmoments,thataretypicallyneglected,youcanshowcasethepersonalityofyourapp,aswellas
buildingloyaltyamongusers.»GiveyourWebsiteSoulwithEmotionallyIntelligentInteractions
«IT’SABOUTCARINGMORETHANOTHERSDO.»
MÖGLICHKEITENDERGESTALTUNGIM
DRUCK
WiekönnenwirbesondereProdukteschaffen?
DETAILS
EmotionundErfahrungmitdemObjektspieleneinewichtigeRollefürdenBenutzer.
LiegtesgutinderHand?
Istesschwer?Leicht?
WelcheAssoziationenwecktes?
KONTEXTWerwirdesverwenden,inwelchemZusammenhang?
CarolineHummelsonDesignandEmotionvia
«Bydesigningcontextsforexperienceinsteadofsimplyproducts,thefocusshiftsfromtheresultofinteraction[…]towardstheinvolvementduringinteraction[…].Thismeansthatthedesigner’semphasis
shouldnotmerelylieoncreatingabeautiful,pleasingproductinappearance,
butexpandtocreatingabeautiful,engaginginteractionwithaproduct.»
InternationalJournalofDesign
AUFLAGE
PAPIER
gestrichen–ungestrichenglänzend–mattFarbeGrammatur:Widerstand,Opazität,VolumenHaptik:rauh–glatt–strukturiert
DRUCKVERFAHREN
DigitaldruckOffsetdruckSiebdruckBuchdruck/LetterpressLinoldruckHandschrift
FARBEN
1c:Bitmap,Graustufen4c:Vierfarbdruck(Standard)Sonderfarben
VEREDELUNGEN
Lackierung(matt/glänzend)PrägungHeißfolienprägungLaminierung(matt/glänzend)Stanzungen,Falzungen,Perforation,…
BINDUNG
KlebebindungFadenheftungKlammerheftungVorsatzpapiereSoftcover–HardcoverFlappen,…
MATERIALITÄTIMDESIGN
DANKE!♥
