Managing Responsive Design Projects
Upcoming SlideShare
Loading in...5
×
 

Managing Responsive Design Projects

on

  • 1,768 views

Featured in: Design

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 ...

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.

Statistics

Views

Total Views
1,768
Views on SlideShare
1,728
Embed Views
40

Actions

Likes
25
Downloads
25
Comments
0

6 Embeds 40

https://twitter.com 29
http://www.slideee.com 7
http://www.google.com 1
https://home.jolicloud.com 1
http://pulse.me&_=1411185994072 HTTP 1
http://pulse.me&_=1411192263876 HTTP 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Solution – go responsive
  • We often think of this as the zombie apocalypse.
  • As educators, we often think of this as the zombie apocalypse.
  • Solution – go responsive
  • Solution – go responsive

Managing Responsive Design Projects Managing Responsive Design Projects Presentation Transcript

  • Managing Responsive Design Projects @andrewsmyk FITC WebUnleashed 2014
  • www.andrewsmyk.com/webunleashed
  • Tweet using hashtags: #WebU14 #managingRWD
  • @andrewsmyk 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200
  • @andrewsmyk 1.5” to 50”
  • @andrewsmyk
  • Leveraging mobile to increase Wrestling with a responsive projects student engagement Andrew Smyk HighWeb Ed – Arkansas July 27, 2012 @andrewsmyk
  • @andrewsmyk
  • 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  • 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  • Edit content ruthlessly
  • Pro Tip: Document all the Types & Models of Devices You Encounter @andrewsmyk
  • Important! Note the Devices of Decision Makers in the Room @andrewsmyk
  • 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 frameworks before content modeling
  • Avoid coding or selecting frameworks before content modeling
  • @andrewsmyk
  • @andrewsmyk Dynamic Wireframe
  • @andrewsmyk
  • ????? @andrewsmyk
  • RUN!!! @andrewsmyk Zombie Apocalypse!!
  • @andrewsmyk 1 2 3 4 5 6 7
  • @andrewsmyk 1 2 3 4 5 6 7
  • 1 2 3 4 5 6 7 A/B Test Content Models and 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 Strategy 2. Agile 3. Prototyping 4. 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 Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  • @andrewsmyk Prototyping “Now we can think about users and their needs as it relates to content.”
  • “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 @andrewsmyk
  • 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?
  • Stop Wrestling with Static Mockups @andrewsmyk
  • 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
  • “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 @andrewsmyk
  • 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
  • Use the right tools & technologies @andrewsmyk
  • @andrewsmyk am I responsive? ish. remote preview Ghostlab (license) Edge Inspect (CC subscription)
  • 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. 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
  • User Testing, Tools and TPS Cover Sheets
  • Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store @andrewsmyk
  • @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
  • @andrewsmyk
  • @andrewsmyk
  • @andrewsmyk
  • u @andrewsmyk
  • @andrewsmyk
  • #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
  • @andrewsmyk
  • 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  • @andrewsmyk Questions?
  • Thank you!
  • @andrewsmyk www.andrewsmyk.com/webunleashed
  • Tweet using hashtags: #WebU14 #managingRWD
  • @andrewsmyk Questions?