Embed Size (px)
DESCRIPTION
Responsive Design & Prototyping -- An Agency Model This presentation is in three parts, please see the links and description below: Links: Part 1: http://www.slideshare.net/ngoplani/responsive-design-prototyping-an-agency-model-part-13 Part 3: http://www.slideshare.net/ngoplani/responsive-design-prototyping-an-agency-model-part-23 Part 2: http://www.slideshare.net/ngoplani/responsive-design-prototyping-an-agency-model-part-33 Description: Digitas is pleased to host the April 2012 UPA Boston meeting. We’ll be looking at some of the latest trends we’ve seen in Experience Design. We will discuss how we at Digitas are redefining our approach and share the successes and challenges we’ve encountered along the way. We will focus specifically on responsive design as well as the value of prototyping in new more complex digital ecosystems.
Citation preview
What does this mean for us?!If we focus our design and implementation efforts on typical desktop sites that are...!
!
•! Flash-Powered/Bandwidth Hungry!
•! Made primarily for BIG screens!
•! And, that need to be rebuilt for every marketplace innovation !
We’ll increasingly cut off users from our content. !
Responsive Design & Prototyping – Part 3 "!
The Solution:!
!!
!Accessibility: !
Progressive Enhancement!!
Optimization: !Responsive Design!
Accessibility !Progressive Enhancement!
What is “Progressive Enhancement”?!A design methodology that focuses on allowing ALL users access to the base site content while providing for progressively richer experiences for
users with more advanced devices and browsers.!
Content (HTML)!
Styling (CSS)!
Functionality (JavaScript)!
Flash! HTML5!
Optimization!Responsive Design!
The Landscape Changed!
Content!Screen Size! Site!
.MOBI!
1024 x 768!
.COM!
Device!
480 !x!
320!
768!x!
1024!
One Site, Optimized for ALL Screens!
Responsive Web Design!
Identify Your Content!
.COM!
Consumer Behavior!
Min - Max!
Min - Max!
Min - Max!
Content!Screen Size! Site!Device!
Prioritize Your Content!
Determine Device Features!
Scenario - Where use it?!
Mindset - How use it?!
Goal - Why use it?!
Resolution Ranges!
Single!Site!
Identify Your Content!
Prioritize Your Content!
Resolution Ranges!
Content!
Just because something is smaller and portable doesn’t mean it should have less content.!
Scenario / Mindset !
Content Priority!
Mobile! Tablet! Desktop!
What are the most important
tasks.!
Entertaining and engaging Content!
A mix of content with focused task-based
paths!
On-the-go, Multi-tasking!•! Must get it done quickly!•! It must be very simple for me
to understand.!!
Focused, Exploratory!•! Take time to look around the site!•! Less environmental distractions!
!
It’s not about the right amount of content, but rather the right prioritization of content.!
All content always available!We can no longer assume people will view our content across multiple devices.!
Content!
Prioritize content for each device!Based on where, when and how consumers interact with each device.!
Layout!
How do we usually start?!
Content!
The Landscape Changes, Again.!
We create a malleable design!
Stretch!Mobile!
Start with Mobile!
Tablet!
Placement!
Scale!
Flow!
Solve for the gap!Use techniques like placement, scale & flow to adjust individual components as you stretch your design.!
Layout!
Mobile first!It is easier to solve for more space than to compress content.!
Think Di"erently!!
How can we be responsive?!
So what does this all mean — really?!
We have to wear more hats…!
DesignersInformation Architects
Conte
nt E
xperts
Usa
bility S
pecia
lists
ResearchersTaxonomists
Content Strategists
Mo
bile
Exp
ert
s
Social gurus
Infographicologists
…and change them "frequently!!
We have to raise our UX game…!
Experience strategy design!
Content management
processes!
Mobile device & experience training!
Tablet exploration & assignment delivery!
Cross-capability "learning sessions!
Mandating "earlier UX engagement "
in projects !
Moving beyond ‘Visio’: clickable prototyping!
Responsive "digital design!
Cross-office collaboration "
!
We have to come together… !
…in ways we’re not used to!
We have to broaden the definition of UX Design!Discover/Define!
"! Business Needs!
"! User Needs!
"! Heuristic Analysis!
"! Competitive Analysis!
"! User Personas!
"! User Scenarios/Journeys!
"! High-Level Requirements!
"! Experience Strategy!
Design!
"! Site Maps!
"! Navigation Design!
"! Interface Design!
"! Content Design!
"! Data Mapping!
"! Clickable Prototypes!
"! Process Optimization!
"! Temporal Specifications!
!
!
!
Implementation!
"! Work with Tech!
"! Content Mapping!
"! CMS set up!
"! QA Experiences!
!
!
!
"! Client Consulting!
"! Pressure Testing!
"! Reality Mapping!
"! Capability Alignment!
"! Story Telling!
And other stuff…!
"! Wireframes!
!
What does this mean?!
Thanks!!
"UX has to embrace change "
— and lead it.!
To be successful in an Agency Model,!
