"designing for the responsive web" - aiga south dakota open mouse night

29
Designing for the Responsive Web

Upload: blend-interactive

Post on 08-May-2015

1.045 views

Category:

Documents


0 download

DESCRIPTION

"Designing for the Responsive Web," by Sam Otis for AIGA South Dakota's Open Mouse Night in Sioux Falls, SD - December 6, 2012.

TRANSCRIPT

Page 1: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Designing for the Responsive Web

Page 2: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

RESPONSIVE DESIGN:

“A design that adapts to the size and capability of the device your content is being view on.”

Page 3: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 4: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 5: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 6: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 7: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

1. Simplify

Page 8: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 9: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 10: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Progressive enhancement

Page 11: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 12: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

1. Simplify2. Create live wireframes

Page 13: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 14: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 15: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 16: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

DESIGN PATTERNS:

mobile-patterns.comui-patterns.com

Page 17: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

3. Design a visual language

Page 18: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 19: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 20: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 21: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 22: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

4. Sweat the details

Page 23: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 24: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 25: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 26: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Device Testing

Page 27: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Success!

Page 28: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night
Page 29: "Designing for the Responsive Web" - AIGA South Dakota Open Mouse Night

Thank You!Sam Otis | @sam_otis | [email protected]