/A Process for Responsive Design
VerneHo
Co-founder + Creative Director
Jet Cooper
@verneho
2
We design products for web, mobile and tablet devices
3
Peopleweworkwith
We’ve had an opportunity to work alongside leading
Canadian startups, brands, and organizations
4
Community
We take an active role in changing the way people think
about design in our communities
5
Programs
We get hands on by helping Canada’s highest potential
startups better integrate design
6
Me+JetCooper
Creative Direction + Process
7
Process
A process exists to support creativity, not resist it
Today
1. Getting Started
2. Our Process
9
Disclaimers
1. This is only our approach
2. This is best case scenario
3. This is difficult
4. There is no such thing as pe...
GettingStarted
Considerations for starting a responsive design project
Ourecosystem
∞ Devices
12
WhyRWD?
A common access point
Continuity in the experience
A tailored experience
13
Andforus?
Scalability + Maintainability
14
Differencestoexpect
Nature of planning
Pace of iterations
Degree of finalization
Client sign-offs
Workflows & Roles
15
Beneighbours
There’s no substitute for pointing at a screen
16
Startdevsearly
An equally important voice
17
OurProcess
How we do it
Contentisstillking
Ask yourself: what matters most?
19
20
21
1
2
3
4
5
6
22
1
3
4 ...
2
23
1
3
4 ...
*
*
*
2
Designisstilla
holisticactivity
Design for all screens in mind
24
Compsareexpensive
Minimize the comps you need to explicitly design
25
26
27
28
29
1 2 3
30
31
Doitlive!
Design can (and should) happen in a browser, too
32
33
34
35
36
37
38
39
Dynamicduo
Design informs, dev informs design
40
Warning
This takes practice
41
Tips
More things to keep in mind
Choosingscreens
It’s not supposed to be one size fits all
Desktops
Laptops
Tablets
Mobile
Televisions
Kiosks
Large Format ...
Definingbreakpoints
It’s not always just about the devices
44
45
780px840px
Testing
Build your test suite
46
InSummary...
A quick recap
InSummary...
1. Ask yourself “what matters most?”
2. Design is still a holistic activity
3. Comps are expensive
4. Iterate...
Whenallelsefails
1. Stay lean
2. Open conversation channels
3. Think about obsess over process
49
Thanks!
@verneho
jetcooper.com
Questions
+ Answers (Possibly)
Upcoming SlideShare
Loading in …5
×

A Process for Responsive Design

510 views

Published on

FITC Toronto
December 1, 2012

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

A Process for Responsive Design

  1. 1. /A Process for Responsive Design
  2. 2. VerneHo Co-founder + Creative Director Jet Cooper @verneho 2
  3. 3. We design products for web, mobile and tablet devices 3
  4. 4. Peopleweworkwith We’ve had an opportunity to work alongside leading Canadian startups, brands, and organizations 4
  5. 5. Community We take an active role in changing the way people think about design in our communities 5
  6. 6. Programs We get hands on by helping Canada’s highest potential startups better integrate design 6
  7. 7. Me+JetCooper Creative Direction + Process 7
  8. 8. Process A process exists to support creativity, not resist it
  9. 9. Today 1. Getting Started 2. Our Process 9
  10. 10. Disclaimers 1. This is only our approach 2. This is best case scenario 3. This is difficult 4. There is no such thing as perfect, just perfect-er 10
  11. 11. GettingStarted Considerations for starting a responsive design project
  12. 12. Ourecosystem ∞ Devices 12
  13. 13. WhyRWD? A common access point Continuity in the experience A tailored experience 13
  14. 14. Andforus? Scalability + Maintainability 14
  15. 15. Differencestoexpect Nature of planning Pace of iterations Degree of finalization Client sign-offs Workflows & Roles 15
  16. 16. Beneighbours There’s no substitute for pointing at a screen 16
  17. 17. Startdevsearly An equally important voice 17
  18. 18. OurProcess How we do it
  19. 19. Contentisstillking Ask yourself: what matters most? 19
  20. 20. 20
  21. 21. 21 1 2 3 4 5 6
  22. 22. 22 1 3 4 ... 2
  23. 23. 23 1 3 4 ... * * * 2
  24. 24. Designisstilla holisticactivity Design for all screens in mind 24
  25. 25. Compsareexpensive Minimize the comps you need to explicitly design 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29 1 2 3
  30. 30. 30
  31. 31. 31
  32. 32. Doitlive! Design can (and should) happen in a browser, too 32
  33. 33. 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. Dynamicduo Design informs, dev informs design 40
  41. 41. Warning This takes practice 41
  42. 42. Tips More things to keep in mind
  43. 43. Choosingscreens It’s not supposed to be one size fits all Desktops Laptops Tablets Mobile Televisions Kiosks Large Format Displays ... 43
  44. 44. Definingbreakpoints It’s not always just about the devices 44
  45. 45. 45 780px840px
  46. 46. Testing Build your test suite 46
  47. 47. InSummary... A quick recap
  48. 48. InSummary... 1. Ask yourself “what matters most?” 2. Design is still a holistic activity 3. Comps are expensive 4. Iterate in a live environment 48
  49. 49. Whenallelsefails 1. Stay lean 2. Open conversation channels 3. Think about obsess over process 49
  50. 50. Thanks! @verneho jetcooper.com
  51. 51. Questions + Answers (Possibly)

×