DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech...
Transcript of DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech...
![Page 1: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/1.jpg)
DESIGNING FOR THE DIGITAL ECOSYSTEMCornell Tech 2016Heather LuipoldAdam KatzMatt Delbridge
![Page 2: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/2.jpg)
CLASS 3:DIGITAL DESIGN BASICS
![Page 3: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/3.jpg)
WE COVEREDDESIGN BASICS
![Page 4: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/4.jpg)
WHAT ISDIGITAL DESIGN?
![Page 5: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/5.jpg)
USEREXPERIENCE
DIGITAL DESIGNA BIRD'S EYE VIEW
WIREFRAME VISUAL DESIGN PROTOTYPE USERTESTING
SHIP IT
REITERATE
![Page 6: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/6.jpg)
FIRST A BRIEF HISTORY OF DIGITAL DESIGN
![Page 7: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/7.jpg)
THE G.U.I.
![Page 8: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/8.jpg)
NEW TOOLS (SOFTWARE)
![Page 9: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/9.jpg)
NEW PROBLEMS (PIXELS) (TYPOGRAPHY)
![Page 10: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/10.jpg)
NEW DESIGN STYLES
![Page 11: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/11.jpg)
NEW CANVASES (WEBSITES)
![Page 12: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/12.jpg)
MOBILE DESIGN
![Page 13: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/13.jpg)
NEW SCREEN SIZES
![Page 14: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/14.jpg)
INTERNET OF THINGS
![Page 15: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/15.jpg)
WHAT ARE THE COMPONENTS OF DIGITAL DESIGN
![Page 16: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/16.jpg)
UXUSER EXPERIENCE
UIUSER INTERFACE
+
![Page 17: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/17.jpg)
The Difference Between UX and UI by Ed Lea
+UXUSER EXPERIENCE
UIUSER INTERFACE
![Page 18: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/18.jpg)
PRODUCTAll of the puzzle pieces that exist to the user. (GUI)
![Page 19: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/19.jpg)
USER EXPERIENCE (UX)The whole puzzle, ready to consume.
![Page 20: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/20.jpg)
USER INTERFACE (UI)The puzzle piece(s) that the user needs to get the job done.
![Page 21: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/21.jpg)
SO TO REPEAT
![Page 22: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/22.jpg)
PRODUCTAll of the puzzle pieces that exist to the user. (GUI)
![Page 23: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/23.jpg)
USER EXPERIENCE (UX)The whole puzzle, ready to consume.
Getting you from A - B
![Page 24: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/24.jpg)
USER INTERFACE (UI)The puzzle piece(s) that the user needs to get the job done.
![Page 25: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/25.jpg)
AND AGAIN
![Page 26: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/26.jpg)
PRODUCTAll of the puzzle pieces that exist to the user. (GUI)
![Page 27: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/27.jpg)
USER EXPERIENCE (UX)The whole puzzle, ready to consume.
Finding you a place to stay
![Page 28: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/28.jpg)
USER INTERFACE (UI)The puzzle piece(s) that the user needs to get the job done.
![Page 29: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/29.jpg)
ONE MORE TIME
![Page 30: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/30.jpg)
PRODUCTAll of the puzzle pieces that exist to the user. (GUI)
![Page 31: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/31.jpg)
USER EXPERIENCE (UX)The whole puzzle, ready to consume.
Project management through messaging.
![Page 32: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/32.jpg)
USER INTERFACE (UI)The puzzle piece(s) that the user needs to get the job done.
![Page 33: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/33.jpg)
UI = VISUAL DESIGN
![Page 34: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/34.jpg)
TYPOGRAPHY COMPOSITION
BRANDING ARCHITECTURE
![Page 35: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/35.jpg)
TYPOGRAPHY COMPOSITION
BRANDING ARCHITECTURE
![Page 36: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/36.jpg)
DIGITAL DESIGN TYPOGRAPHYOPERATES UNDER A FEW RULES
![Page 37: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/37.jpg)
TYPE SHOULD BE SIMPLE AND READABLE.
MOST LIKELY A GEOMETRIC SANS-SERIF.
HAS TO WORK AT SMALL SIZES.
ONE TYPEFACE WITH MULTIPLE WEIGHTS SHOULD BE PLENTY.
![Page 38: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/38.jpg)
Heading 1<h1></h1> CSS
1. Lorem ipsum 2. Dolor sit amet 3. Consectetur4. Ad minim quis
LINK HERE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna rud exercitation ullamco laboris nisi ut aliquip.
Heading 2<h2></h2>
Body Paragraph<p></p>
Ordered List<ol><li></li></ol>
Linka:link
Unordered List<ul><li></li></ul>
● Lorem ipsum ● Dolor sit amet ● Consectetur● Ad minim quis
Elements
![Page 39: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/39.jpg)
Font Properties
Font Propertiesh1 {
line-height:normal;}
Font Propertiesh1 {
line-height:1.15;}
h1 {padding:0;align:left;
}
h1 {padding:30px 30px 30px 30px;
}
1.15 x font size
Font Properties
![Page 40: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/40.jpg)
Font Propertiesh1 {
padding:0;align:left;
}
h1 {padding:30px 30px 30px 30px;
}
Font Properties
h1 {font-style:normal;font-weight:bold;
}
h1 {font-style:italic;font-weight:bold;
}
Font Properties
Font Properties
Font Properties
Font Properties
h1 {font-style:normal;font-weight:normal;
}
h1 {font-style:italic;font-weight:normal;
}
![Page 41: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/41.jpg)
Font Propertiesh1 {
padding:0;align:left;
}
h1 {padding:30px 30px 30px 30px;
}
Font Properties
h1 {font-family: Helvetica, Arial, sans-serif;
}
h1 {font-family: Helvetica, Arial, sans-serif;
}
Font Properties
Font Properties
Font Properties
Font Properties
h1 {font-family: Helvetica, Arial, sans-serif;
}
h1 {font-size:0.5em;
}
![Page 42: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/42.jpg)
Font Propertiesh1 {
padding:0;align:left;
}
h1 {padding:30px 30px 30px 30px;
}
Font Properties
h1 {text-align:left;
}
h1 {text-decoration:underline;
}
text properties
Text Properties
Text Properties
T e x t P r o p e r t i e s
h1 {text-transform:lowercase;
}
h1 {letter-spacing:50px;
}
![Page 43: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/43.jpg)
THE GOOD
![Page 44: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/44.jpg)
ART.SY
![Page 45: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/45.jpg)
THE BAD
![Page 46: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/46.jpg)
SEAMLESS
![Page 47: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/47.jpg)
TYPOGRAPHY COMPOSITION
BRANDING ARCHITECTURE
![Page 48: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/48.jpg)
ALWAYS USE A GRID
![Page 49: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/49.jpg)
THE GRID IDEALLY IS FLEXIBLE FOR BOTH VERTICAL…
![Page 50: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/50.jpg)
AND HORIZONTAL DISPLAYS
![Page 51: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/51.jpg)
THESE GRIDS HAVE
Headers
![Page 52: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/52.jpg)
THESE GRIDS HAVE
Margins
![Page 53: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/53.jpg)
THESE GRIDS HAVE
Columns
![Page 54: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/54.jpg)
ROWS
Rows
![Page 55: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/55.jpg)
GUTTERS
Gutter
![Page 56: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/56.jpg)
AND WHITE SPACE
![Page 57: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/57.jpg)
THE GOOD
![Page 58: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/58.jpg)
SOUNDCLOUD
![Page 59: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/59.jpg)
THE BAD
![Page 60: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/60.jpg)
LEOPARD MUSIC PLAYER
![Page 61: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/61.jpg)
TYPOGRAPHY COMPOSITION
BRANDING ARCHITECTURE
![Page 62: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/62.jpg)
+ + + +LOGO /
IDENTITY SYSTEM
TYPOGRAPHY COLOR PALETTE
WRITING / ATTITUDE CONSISTENCY
BRANDING IS COMPRISED OF:
![Page 63: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/63.jpg)
THE LOGO SHOULD BE READABLE,SCALABLE, SIMPLE AND EVER-PRESENT
![Page 64: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/64.jpg)
SCALABLEThe logo should be able to shrink down to tiny sizes and screens.
![Page 65: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/65.jpg)
SIMPLEThe logo should be able to be reproduced in black and white and in icon.
![Page 66: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/66.jpg)
EVER-PRESENTThe logo should be on every screen it can be and remain the same proportion.
![Page 67: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/67.jpg)
THE GOOD
![Page 68: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/68.jpg)
HEADSPACE
![Page 69: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/69.jpg)
THE BAD
![Page 70: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/70.jpg)
UBER
![Page 71: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/71.jpg)
TYPOGRAPHY COMPOSITION
BRANDING ARCHITECTURE
![Page 72: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/72.jpg)
SPLASH / LOADING SCREENS
![Page 73: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/73.jpg)
LOGIN SCREENS
![Page 74: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/74.jpg)
LOGIN SCREENS
Don’t forget about me, the keyboard!
![Page 75: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/75.jpg)
WARM WELCOME
![Page 76: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/76.jpg)
NAVIGATION
Bottom Buttons Top Tabs Overlays Hamburger Icon
![Page 77: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/77.jpg)
SEARCH
![Page 78: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/78.jpg)
SETTINGS
![Page 79: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/79.jpg)
MODALS
![Page 80: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/80.jpg)
PROFILES
![Page 81: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/81.jpg)
LISTS
Stacked Events Horizontal Blocks Grids
![Page 82: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/82.jpg)
FEEDS
![Page 83: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/83.jpg)
GRIDS
![Page 84: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/84.jpg)
ACTIONS
![Page 85: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/85.jpg)
THE GOOD
![Page 86: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/86.jpg)
![Page 87: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/87.jpg)
THE BAD
![Page 88: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/88.jpg)
VSCO
![Page 89: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/89.jpg)
SO WHAT MAKES A SUCCESSFULLY DESIGNED APP?
![Page 90: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/90.jpg)
ICONS
![Page 91: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/91.jpg)
BUTTONS
![Page 92: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/92.jpg)
COLOR PALETTE
![Page 93: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/93.jpg)
TYPOGRAPHY
![Page 94: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/94.jpg)
IMAGERY
![Page 95: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/95.jpg)
THESE ARE OFTEN PUT TOGETHER INTO UI TOOLKITS
![Page 97: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/97.jpg)
DISCUSSION:WHAT APPS HAVE YOU USED LATELY THAT ARE DESIGNED
AND BRANDED SUCCESSFULLY?
WHAT APPS HAVE YOU USED THAT AREN’T?
![Page 98: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/98.jpg)
QUESTIONS?
![Page 99: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/99.jpg)
http://www.pttrns.com/
http://www.mobile-patterns.com/
http://inspired-ui.com/
https://www.cocoacontrols.com/
http://www.lovelyui.com/
http://androidux.com/
https://developer.yahoo.com/ypatterns/about/libraries.html
APP DESIGN INSPIRATION
![Page 100: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/100.jpg)
DESIGNER MEETUPS
Maker Club
Designer Meetups
Creative mornings
![Page 101: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/101.jpg)
Archive
![Page 102: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/102.jpg)
PRINCIPLES OFINTERACTION DESIGN
![Page 103: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/103.jpg)
ALWAYS THINK ABOUT THE USER
PRINCIPLE 2
PRINCIPLE 3
PRINCIPLE 4
PRINCIPLE 5
![Page 104: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/104.jpg)
USER EXPERIENCE
![Page 105: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/105.jpg)
TOTAL USER EXPERIENCE OR THE 5 E’SConsidering the big(ger) picture
![Page 106: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/106.jpg)
Whether it’s a product or a service:
There’s an experience in the discovery
There’s an experience in the purchase
There’s an experience in the delivery
There’s an experience in the use/service
There’s an experience in the sharing
![Page 107: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/107.jpg)
ENTERDiscover +
Commitment
THE 5 E’S
EXITLast usage
ENTEROut of box experience
ENGAGEFirst use
EXTENDFirst month +
NTH Month
![Page 108: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/108.jpg)
STEP 1
DEFINE THE ACTORS
STEP 2
MAP HOW THE ACTORS PLAY TO EACH OTHER
STEP 3
DEFINE “MAGIC MOMENTS”HOW DOES THE BRAND MANIFEST IN THE STORY
![Page 109: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/109.jpg)
PARENTS
Use + manage usage ofothers
KIDS
Use with permission
ALLOWERS
Approve and allow use at a high level (e.g. politician)
IMAGINEERS
Imagine and design the good(e.g. Google)
MAKERS
Make the thing (e.g. Belkin)
RETAILERS
Put the thing in your hand(e.g. App Store)
Not all will be present in every experience.But it’s good practice to consider all to ensure full coverage.
EX. ACTORS
![Page 110: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/110.jpg)
THEN TAKE EACH ACTOR THROUGH THE 5 E’S
![Page 111: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/111.jpg)
5E’S: ENTICE
Define all the actors. How do they find out about your product?
What’s the tipping point that makes the conversion from “I’m curious” to“I’m committed”?
FIRST MONTH NTH MONTHFIRST USEPROFILES DISCOVERY OUT OF BOX EXPER.COMMITMENT LAST MONTH
ENTICE ENTER ENGAGE EXTEND EXIT
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
![Page 112: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/112.jpg)
Define all the actors. How do they find out about your product?
What’s the tipping point that makes the conversion from “I’m curious” to“I’m committed”?
FIRST MONTH NTH MONTHFIRST USEPROFILES DISCOVERY OUT OF BOX EXPER.COMMITMENT LAST MONTH
ENTICE ENTER ENGAGE EXTEND EXIT
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
What is the unboxing of the physical product like? If it’s digital what’s the warm welcome or the “welcome to the product” moment?
Example: App warm welcome, packaging quality, packaging that opens in order of setup.
5E’S: ENTER
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
![Page 113: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/113.jpg)
Define all the actors. How do they find out about your product?
What’s the tipping point that makes the conversion from “I’m curious” to“I’m committed”?
FIRST MONTH NTH MONTHFIRST USEPROFILES DISCOVERY OUT OF BOX EXPER.COMMITMENT LAST MONTH
ENTICE ENTER ENGAGE EXTEND EXIT
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
What is the unboxing of the physical product like? If it’s digital what’s the warm welcome or the “welcome to the product” moment?
Example: App warm welcome, packaging quality, packaging that opens in order of setup.
How do you capitalize on maximum goodwill?
It will never be shinier. Embed it in your user's’ lifestyle.
Example: Instant gratification, moment of joy easter egg, simplicity.
5E’S: ENGAGE
![Page 114: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/114.jpg)
Define all the actors. How do they find out about your product?
What’s the tipping point that makes the conversion from “I’m curious” to“I’m committed”?
FIRST MONTH NTH MONTHFIRST USEPROFILES DISCOVERY OUT OF BOX EXPER.COMMITMENT LAST MONTH
ENTICE ENTER ENGAGE EXTEND EXIT
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
What is the unboxing of the physical product like? If it’s digital what’s the warm welcome or the “welcome to the product” moment?
Example: App warm welcome, packaging quality, packaging that opens in order of setup.
How do you capitalize on maximum goodwill?
It will never be shinier. Embed it in your user's’ lifestyle.
Example: Instant gratification, moment of joy easter egg, simplicity.
How does it get even better with continual use?
What moment only surfaces after repeated use?
Example: Actionable analytics, more easter eggs, machine learning.
What’s better than better?
How does it accrue value over time?
How do you continuously optimize the experience?
Example: Idiot-proof trouble-shooting and service, unlock rewards or bonuses, additional products/add ons.
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
5E’S: EXTEND
![Page 115: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/115.jpg)
5E’S: EXIT
Define all the actors. How do they find out about your product?
What’s the tipping point that makes the conversion from “I’m curious” to“I’m committed”?
FIRST MONTH NTH MONTHFIRST USEPROFILES DISCOVERY OUT OF BOX EXPER.COMMITMENT LAST MONTH
ENTICE ENTER ENGAGE EXTEND EXIT
Example: Advertising, social media, word of mouth.
Example: In-store experience, test drive, product review.
What is the unboxing of the physical product like? If it’s digital what’s the warm welcome or the “welcome to the product” moment?
Example: App warm welcome, packaging quality, packaging that opens in order of setup.
How do you capitalize on maximum goodwill?
It will never be shinier. Embed it in your user's’ lifestyle.
Example: Instant gratification, moment of joy easter egg, simplicity.
How does it get even better with continual use?
What moment only surfaces after repeated use?
Example: Actionable analytics, more easter eggs, machine learning.
What’s better than better?
How does it accrue value over time?
How do you continuously optimize the experience?
Example: Idiot-proof trouble-shooting and service, unlock rewards or bonuses, additional products/add ons.
What happens when the user decides to leave the product? Do they have to? Can you get them to return to the product?
Example: No hassle returns, easy service termination, new product releases or updates.
![Page 116: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/116.jpg)
FOR EXAMPLE
ENTICE
User sees Google On sign on the subway
platform
ENTICE
Decides to try it: finds the network and downloads the Google On app
ENTER
Enjoys a great Google On Wi-Fi
experience
ENGAGE
Delighted tosee it actually works on the subway too...
EXTEND
Decides to bring it home - and purchases a
new OnHub
![Page 117: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/117.jpg)
WIREFRAMES
![Page 118: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/118.jpg)
THINK OF A WIREFRAME AS THESKELETON OF YOUR APP OR SITE
![Page 119: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/119.jpg)
START LOOSE, START WITH A SKETCH
![Page 120: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/120.jpg)
MAP OUT KEY AREAS OF CONTENTAND HOW A USER GETS FROM SCREEN TO SCREEN
![Page 121: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/121.jpg)
THEN MAKE IT DIGITAL BUT SIMPLE
![Page 122: DESIGNING FOR THE DIGITAL ECOSYSTEM - nixdell · designing for the digital ecosystem cornell tech 2016 heather luipold adam katz matt delbridge. class 3: digital design basics. ...](https://reader033.fdocuments.in/reader033/viewer/2022060302/5f0877377e708231d42225f0/html5/thumbnails/122.jpg)
LET’S MAKE A WIREFRAME