Redeeming Image Editors for Mobile Web Design

Transcript

1. Redeeming Image Editors for Mobile Web Design
2. SOMEBODY TOLD ME IT WASN’T COOL TO USE PHOTOSHOP IS THAT TRUE Y/N? K THX.
3. Source: http:/ /1.bp.blogspot.com You
4. Responsive Web Design
5. Photoshop
6. Source: http:/ /bossdungeon.com MEGAMAN!
8. Hi, I’m Dan and I use Photoshop.
9. Hi Dan.
10. Source: http:/ /neoabolition.com
14. Back when using Photoshop was cool...
16. Source: http:/ /onemoregadget.com
17. Source: http:/ /trendhunter.com
18. cmd+n W I D T H : 960 OK! P I X E L S
20. Source: http:/ /zachmorriscel l phone.com
22. Source: http:/ /bradfrost.com
23. Source: http:/ /dallasnews.com
24. Source: http:/ /news.yahoo.com
25. Source: http:/ /japantimes.co.jp
27. There’s ∞ mobile devices. That’s ∞ di erent screen sizes. Source: http:/ /larablog.com
28. Houston, we have a workflow problem. Source: http:/ /larablog.com
29. Old School Workflow WIREFRAME PHOTOSHOP COMPS FRONT-END DEVELOPMENT
30. New School Workflow IN-BROWSER ITERATION
31. We’ve been unfairly repurposing Photoshop for the web for years. Source: http:/ /lunettesde.com
32. All along, we’ve just been making pictures of websites
34. E F F I C I E N C Y D E L I V E R A B L E S
35. Anything* you can do in Photoshop, you can do in CSS.
44. “I’ve tried, goodness knows I’ve tried, but my designs end up su ering, looking boxy, bland and uninspiring.” S A R A H P A R M E N T E R
45. “I feel like responsive design has sucked the soul out of website design. Everything is boxes and grids. Where has the creativity gone?” N O A H S T O K E S
48. “Design with the browser, but not in the browser.” P A U L L L O Y D
49. Source: http:/ /bossdungeon.com
59. Source: http:/ /bossdungeon.com T H E M E G A M A N P R I N C I P L E Use the right tool, at the right time, for the right purpose
60. “When you find yourself fighting against your tools, you’re not being expressive.” D A N M A L L
63. Just because you didn’t start designing in an image editor doesn’t mean you can’t use one later.
64. Solve Photoshop problems in Photoshop. Solve browser problems in the browser.
65. Solve Photoshop problems in Photoshop. Solve browser problems in the browser.
66. Solve browser problems in the browser. Typography
67. Solve Photoshop problems in Photoshop. Colors
68. Solve browser problems in the browser. Interactivity
69. Layout? Establish Tweak
70. Totes Not ‘Shopped
71. Source: http://danielmall.com
72. Use Photoshop in the middle of a project, opposed to the beginning.
74. Screenshots on Steroids P A G E L A Y E R S Addressing the in-between
76. Interactive Wireframe/Lo-Fi Prototype w/ Foundation
77. Headline Iteration 1 : about 2 minutes
78. Headline Iteration 2 : about 5 minutes
79. Headline Iteration 1 Headline Iteration 3 : under 1 minute
80. Headline Iteration 1 Headline Iteration 4 : about 4 minutes
81. Final-ish
82. Because it was Elliot, there was no need for Reagan and I to present pixel-perfect PSDs. He trusted us so once we got past rough concepts and layout explorations we took things to the browser. While Dave and I were coding we'd regularly spot awkward points in the design across widths/ breakpoints. We'd kick things back and forth iterating in the browser and Photoshop — whatever tool worked best at the time. There’s no clear path or method to the madness, but I like it that way. You just sorta fidget and nudge and squish until the kinks are out. T R E N T W A L T O N
93. MAGIC
94. “y u no Photoshop?” N O C L I E N T , E V E R
97. “I could switch code editors, computers, wireframing tools, browser plugins, and more, but I’d be pretty sunk if I had to do a project without Photoshop.” D A N M A L L