Date post: | 14-Jun-2015 |
Category: |
Design |
Upload: | easelsolutions |
View: | 399 times |
Download: | 1 times |
Thank You, Summit Sponsors
– Ethan Marcotte, 2010 http://alistapart.com/article/responsive-web-design
“Responsive design is not about ‘designing for mobile.’ But it’s not about ‘designing for the desktop,’ either. Rather,
it’s about adopting a more flexible, device-agnostic approach to designing for the web.”
Desktop, Tablet, & Mobile Browser Traffic
US time spent accessing Internet
Responsive Design
M-dot (Mobile) Site
Mobile App
US smartphone users’ number of app downloads per month
http://wtfmobileweb.com/
M-Dot (Mobile Site)
iPhone 6 Plus vs. Samsung Galaxy Note 4
iOS Fragmentation
http://opensignal.com/reports/2014/android-fragmentation/
Android Fragmentation
http://opensignal.com/reports/2014/android-fragmentation/
Design consistency isn’t pixels !
Design consistency is purpose
Patty Toland, filamentgroup.com
We need a workflow that respects the past but
prepares us for the future.
The Old Workflow
Launch!Design Front-end Back-end
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects
• Start thinking about users • Lots of Lorem Ipsum (or Hipster Ipsum)
• Drop in the content
Current Workflow
Launch!Design Front-end Back-end
• RWD!
UXContent
• RWD! • RWD! • RWD! • RWD! • RWD!
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects
1-Deliverable Workflow
Back-end
Front-end
Design
UX
Content
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects
Content first. Stop thinking about content in terms of layout, and plan content independent of design.
!
Mobile first. Stop the focus on device thinking, and assume a omni-device world where we work on style direction independent of layout.
Discovery!
• Research to uncover user needs
• Develop personas
• Create the user journey map that becomes our product strategy
Content
Planning!
• Evolve the user journey map into a Content plan
• Information Architecture document
Sketching!
• Do not do static wireframes.
• Allows people to try multiple solutions to a problem before settling on one or two ideas to iterate further.
http://www.cennydd.com/blog/why-i-dont-wireframe-much?s=2012/why-i-dont-wireframe-much
UX
UX
http://zurb.com/playground/responsive-sketchsheets
The Post-PSD Era
Design
We still need Photoshop, but it’s no longer our starting point.
The Post-PSD EraPhotoshop is great for:!
• Creating and editing graphics. Duh.
• Establishing the colors, textures and general feel of a design.
• Developing Style Tiles, mood boards, etc.
Design
Photoshop is not great for:!
• Creating fully fleshed-out comps – It’s impossible to articulate every environment, resolution, and circumstance in Photoshop.
• Articulating states – Hovers, clicks, and other interactive elements are better prototypes that show performance, responsiveness, ergonomics, and feel.
Design
http://danielmall.com/articles/the-post-psd-era/
Designer: Here’s a comp of what your site will look like.Client: Great! But what will it look like on my iPhone?Designer: Oh, I’ll show you that.Client: And what about my iPad? Will you show me that too?Designer: Sure.Client: Will it look good on my boss’s Blackberry? And landscape orientation on my iPad2? What about the Surface? I think I might get a Galaxy Tab. Retina screens!
The Post-PSD Era
Content PrototypeDesign
Design Style Prototype
Style TilesDesign
http://styletil.es
Design Style Tiles
http://styletil.es
Design
Modular ApproachBuild pieces, not pages
Front-end Development
Atomic DesignFront-end Development
http://bradfrostweb.com/blog/post/atomic-web-design/
AtomsMolecules
Organisms
Atomic DesignFront-end Development
http://bradfrostweb.com/blog/post/atomic-web-design/
Templates
Front-end Development http://daverupert.com/2013/04/responsive-deliverables/
TestingFront-end Development
You must test on physical devices.
Front-end Development http://creative.adobe.com/products/inspect
PerformanceFront-end Development
http://www.websiteoptimization.com/speed/tweak/average-web-page/
Iterate
Back-end
Front-end
Design
UX
Content
http://bradfrost.github.io/this-is-responsive/• Inspiration • Strategies • Case Studies • Processes • Tools • Code, Code, and more Code
This is Responsive
Consistent = Identical
http://mediaqueri.es/skt/
Consistent = Identical
Thank You! Dustin Tauer - Easel Solutions [email protected] @dtauer