Responsive Design & Prototyping -- An Agency Model (Part 3/3)
•
1 like•1,064 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to Responsive Design & Prototyping -- An Agency Model (Part 3/3)
Similar to Responsive Design & Prototyping -- An Agency Model (Part 3/3) (20)
Recently uploaded
Recently uploaded (20)
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. !
- 2. The Solution:! ! ! ! Accessibility: ! Progressive Enhancement! ! Optimization: ! Responsive Design!
- 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)!
- 9. Device! Screen Size! Content! Site! 480 ! .MOBI! x! 320! 768! x! 1024! .COM! 1024 x 768!
- 10. One Site, Optimized for ALL Screens! Responsive Web Design!
- 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!
- 12. Content!
- 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.!
- 18. Layout!
- 19. How do we usually start?! Content!
- 20. The Landscape Changes, Again.!
- 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! !
- 24. So what does this all mean — really?!
- 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! ! ! !
- 29. What does this mean?!
- 30. To be successful in an Agency Model,! " UX has to embrace change " — and lead it.! Thanks!!