Presentation slides from Dustin Tauer's 2014 MIMA Session:
What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design.
This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.
3. “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.”
– Ethan Marcotte, 2010
http://alistapart.com/article/responsive-web-design
14. We need a workflow that
respects the past but
prepares us for the future.
15. The Old Workflow
Launch!
• Drop in the content
Design Front-end Back-end
• Start thinking about users
• Lots of Lorem Ipsum (or Hipster Ipsum)
https://speakerdeck.com/bencallahan/workflow-on-rwd-projects
18. 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.
19. Content
Discovery!
• Research to uncover user needs
• Develop personas
• Create the user journey map that
becomes our product strategy
Planning!
• Evolve the user journey map into a
Content plan
• Information Architecture document
20. 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
22. The Post-PSD Era
Design
We still need Photoshop, but
it’s no longer our starting point.
23. The Post-PSD Era
Design
Photoshop is great for:!
• Creating and editing
graphics. Duh.
• Establishing the colors,
textures and general feel of a
design.
• Developing Style Tiles, mood
boards, etc.
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.
24. Design
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!
http://danielmall.com/articles/the-post-psd-era/
41. This is Responsive
http://bradfrost.github.io/this-is-responsive/
• Inspiration
• Strategies
• Case Studies
• Processes
• Tools
• Code, Code, and more Code
