View
12
Download
3
Category
Tags:
Preview:
DESCRIPTION
Manage client expectations and get sign off for multi-screen, responsive projects with interactive mock-ups. Move away from the traditional use of Photoshop for interface mock-ups for multi-device interface and interaction designs. Incorporate client involvement for flexible decision making in responsive web design projects and building cost of devices into pricing models, guerrilla usability testing and project deliverables.
Citation preview
Managing Responsive Design Projects
FITC WebUnleashed 2014
@andrewsmyk
www.andrewsmyk.com/webunleashed
Tweet using hashtags: #WebU14 #managingRWD
@andrewsmyk
640 x 480 800 x 6001024 x 7681200 x 9001920 x 1200
@andrewsmyk
1.5” to 50”
@andrewsmyk
Leveraging mobile to increase student engagement
Andrew SmykHighWeb Ed – Arkansas
July 27, 2012
Wrestling with a responsive projects
@andrewsmyk
1-2-3-4
@andrewsmyk
1. Content Strategy2. Agile3. Prototyping4. Art Direction
@andrewsmyk
1. Content Strategy2. Agile3. Prototyping4. Art Direction
@andrewsmyk
Edit content ruthlessly
@andrewsmyk
Pro Tip: Document all the Types & Models of Devices You Encounter
@andrewsmyk
Important! Note the Devices of Decision Makers in the Room
http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
Stakeholders
@andrewsmyk
Content Modeling & Strategy
• Content Engagement• Content Curation• Rank and Prioritize Content
Avoid coding or selecting frameworksbefore content modeling
Avoid coding or selecting frameworksbefore content modeling
@andrewsmyk
@andrewsmyk
Dynamic Wireframe
@andrewsmyk
@andrewsmyk
?????
@andrewsmyk
RUN!!!
ZombieApocalypse!!
@andrewsmyk
1
23
4
5
6
7
@andrewsmyk
1
2
3
4
5
6
7
1
2
3
4
5
6
7
A/B Test Content Modelsand early lo-fi Wireframes
http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
1. Content Strategy2. Agile3. Prototyping4. Art Direction
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
via Michelle Cryan - @sporkles
@andrewsmyk
Pro Tip: Avoid Designing and Developing Projects in Silos
@andrewsmyk
1. Content Strategy2. Waterfall vs. Agile3. Prototyping4. Art Direction
@andrewsmyk
@andrewsmyk
Prototyping
“Now we can think about users and their needs as it relates to content.”
@andrewsmyk
“Work in Photoshop and Fireworks by all means (I do). Make static visuals as rich and as detailed as you want them to be.”
Just don’t set the wrong expectations by showing them to your clients.
~ Andy Clarke
Logo needs to be “bluer”
desktop + +
main internal specialized
variants?
DAYS?
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
Logo needs to be “bluer”
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
How blue is our logo?
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
We need to see another design
desktop + +
main internal specialized
tablet
smart phone
shiny & new
+ +
main internal specialized
+ +
main internal specialized
+ +
main internal specialized
variants?
DAYS?
@andrewsmyk
Stop Wrestling with Static Mockups
https://www.flickr.com/photos/kitch/4286136925
https://www.flickr.com/photos/kitch/4286136925
No Usability Testing
https://www.flickr.com/photos/kitch/4286136925
Lack Interaction
https://www.flickr.com/photos/kitch/4286136925
Don’t Show Transitions
https://www.flickr.com/photos/kitch/4286136925
Lack Fluidity
https://www.flickr.com/photos/kitch/4286136925
Don’t Display Web Fonts
@andrewsmyk
“Design consistency is not about pixels.”
@andrewsmyk
@andrewsmyk
“A prototype is worth a thousand words”Leigh Howells - @leigh
@andrewsmyk
“A prototype is worth a thousand meetings”Mike Davidson - @mikeindustries
Pro Tip: A Working Prototype can Help Make Decisions Faster
Think about the ecosystem, not just the devices:
@andrewsmyk
@andrewsmyk
https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk
@andrewsmyk
Use the right tools & technologies
@andrewsmyk
am I responsive?ish.remote preview
Ghostlab (license)
Edge Inspect (CC subscription)
1. Content Strategy2. Waterfall vs. Agile3. Prototyping4. Art Direction
@andrewsmyk
Logo needs to be “bluer”
@andrewsmyk
Visual inventory, you say…Responsive style tiles, you say…
catalog of assumptions
@andrewsmyk
Responsive Style Tile
@andrewsmyk
Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store
@andrewsmyk
Pro Tip: Build a Device Library
Plan for gestures and taps.
Help users with error and miss taps
Plan for the “Fat Finger”
Design for the thumb
Pro Tip: A Touch Template helps design Interactions
#ffly #rwd
i
They share a common infrastructure, but mobile is NOT the traditional web
@andrewsmyk
l
Mobile is a different environment and requires new thinking and design considerations.
@andrewsmyk
Harness the power of a missile throwing robot
with laser beam eyes on a UNICORN.@andrewsmyk
@andrewsmyk
1-2-3-4
@andrewsmyk
1. Content Strategy2. Agile3. Prototyping4. Art Direction
@andrewsmyk
@andrewsmyk
Questions?
Thank you!
@andrewsmykwww.andrewsmyk.com/webunleashed
Tweet using hashtags: #WebU14 #managingRWD
@andrewsmyk
Questions?
Recommended