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.
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Responsive Design & Prototyping -- An Agency Model (Part 3/3)
1. Responsive Design & Prototyping – Part 3 "
!
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. !
4. 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.!
Flash! HTML5!
Functionality (JavaScript)!
Styling (CSS)!
Content (HTML)!
11. Device! Screen Size! Content! Site!
Identify Your Prioritize Your Determine Resolution Single!
Content! Content! Device Features! Ranges! Site!
Consumer Behavior!
Min - Max!
Scenario - Where
use it?!
.COM!
Mindset - How Min - Max!
use it?!
Goal - Why use
it?!
Min - Max!
15. Just because something is smaller and portable
doesn’t mean it should have less content.!
16. It’s not about the right amount of content, but rather the
right prioritization of content.!
Mobile! Tablet! Desktop!
Scenario / Mindset ! On-the-go, Multi-tasking! Focused, Exploratory!
•! Must get it done quickly! •! Take time to look around the site!
•! It must be very simple for me •! Less environmental distractions!
to understand.!
! !
Content Priority! What are the Entertaining and A mix of content with
most important engaging Content! focused task-based
tasks.! paths!
17. Content!
All content always available!
We can no longer assume people will view our content across multiple
devices.!
Prioritize content for each device!
Based on where, when and how consumers interact with each device.!
21. We create a malleable design!
Placement!
Scale!
Start with
Mobile!
Flow!
Mobile! Stretch! Tablet!
22. Layout!
Solve for the gap!
Use techniques like placement, scale & flow to adjust individual
components as you stretch your design.!
Mobile first!
It is easier to solve for more space than to compress content.!
23. How can we be responsive?!
Think Di"erently!
!
25. We have to wear more hats…!
Usability Specialists
Mobile Experts
Content Experts
Researchers
Taxonomists
Designers Social gurus
Information Architects
Infographicologists
Content Strategists
…and change them "
frequently!!
26. We have to raise our UX game…!
Cross-office Tablet exploration &
collaboration " assignment delivery!
! Mobile device &
experience training!
Cross-capability "
learning sessions!
Content
Mandating " management
earlier UX engagement " processes!
in projects !
Moving beyond ‘Visio’:
clickable prototyping!
Experience
strategy design!
Responsive "
digital design!
27. We have to come together… !
…in ways we’re not used to!
28. We have to broaden the definition of UX Design!
Discover/Define! Design! Implementation!
"! Business Needs! "! Site Maps! "! Work with Tech!
"! User Needs! "! Navigation Design! "! Content Mapping!
"! Interface Design! "! CMS set up!
"! Heuristic Analysis!
"! Wireframes! "! QA Experiences!
"! Competitive Analysis!
!
"! Content Design!
"! User Personas!
"! Data Mapping! ! And other stuff…!
"! Client Consulting!
"! User Scenarios/Journeys!
"! Clickable Prototypes! ! "! Pressure Testing!
"! High-Level Requirements! !
"! Reality Mapping!
"! Process Optimization!
"! Capability Alignment!
"! Experience Strategy! "! Temporal Specifications! "! Story Telling!
!
!
!