Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014
I will give you safe passage
 in the wasteland.
PostPSD? #postpsd
http://theshak.es/1hDROP8 Brad Frost
http://theshak.es/1hDSqnI
DISCLAIMER #1 (just in case Adobe Typekit ever sponsors my podcast) #postpsd
I’m an old fart of Photoshop. A Photofart, if you will.
It’s never been ideal
 to design in Photoshop #postpsd
WILL IT BLEND?
http://theshak.es/1n4tJSS
.blended { background-image: url(ermahgerd.jpg); background-color: fuchsia; background-blend-mode: multiply; }
CSS3 Blend Modes Chrome 29 Chrome 30 Chrome 31 Firefox 24 IE 10 Opera 17 Safari 6 Safari 7 16%16% 75% 0% 25% 75% 67%67% ht...
A PSD is a painting of a website.” “ Mike Monteiro
RWD mobile-home.psd 768-home.psd 800-home.psd desktop-home.psd hd-home.psd Thanks, Obama. + @2x #postpsd
How many “paintings” are you willing to make? mobile-home.psd 768-home.psd 800-home.psddesktop-home.psd hd-home.psd mouth-...
Your goal: Get into real code as quickly as possible. <html> Arrows #postpsd
Bigger goal: Not wasting your team’s time
 and your client’s money #postpsd
YOU ARE ENTERING A WORLD OF PAIN. #postpsd
Enthusiasm For New Design Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients
Enthusiasm For New Design Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients When you...
Disposable Deliverables #postpsd ArrowsArrows
Disposable Deliverables #postpsd
KEEP AS MUCH WORK AS POSSIBLE. #postpsd
#postpsd
DISCLAIMER #2 #postpsd
Designers (Probably you. Certainly me. Definitely Meg.)
Live Wireframing/ Prototyping #postpsd
http://theshak.es/1f3MmjA
http://theshak.es/1cqso7H
http://theshak.es/1c360Bj
Frameworks B
Keynote!
http://theshak.es/1cqwOLY
http://theshak.es/1cqx8KL
Visual Design #postpsd
http://theshak.es/1f3Gt5I
Comping? #postpsd
http://theshak.es/1kb38CD
http://theshak.es/1kb3yZF
http://theshak.es/1cquzYV
http://theshak.es/1cqvhph
http://theshak.es/WZKeVF
http://theshak.es/1cquzYV • 100% Vector • Easy export of @2x images • Easy SVG export • CSS3 properties are one click away...
Visual Coding #postpsd
http://theshak.es/1mU056f
http://theshak.es/1q48lzR
(They see what you did there.) Your Teammates
Code quality? #postpsd
Adobe Edge Reflow <div id="primaryContainer" class="primaryContainer clearfix"> <div id="intro" class="clearfix"></div> <d...
<body class="body index clearfix"> <div class="intro-background"></div> <div class="dark-box"></div> <h1>Jeremy wishes he ...
<body class="body index clearfix"> <div class="intro-background"></div> <div class="dark-box"></div> <h1>Jeremy wishes he ...
Is the code worth passing to devs? #postpsd
Adobe Edge Reflow Macaw • Decent interface • Unnecessary IDs and classes • Not semantic or following HTML5 best practices ...
HADOUKEN!
A change in your habits creates possible new challenges for your team #postpsd
Front-end devs will need copies of whatever alternate app you choose #postpsd
(Last chance to look at me, Hector.) Your Clients
Where are my design options? #postpsd
How am I supposed to sell this up the chain? #postpsd
Is this time well spent? #postpsd
Expectations #postpsd
Education #postpsd
Reaction #postpsd
We’ve only scratched the surface. #postpsd
Pick and choose what works for you. #postpsd
There is no magic formula.
 There is only Zuul.
Thanks! @jeremyfuksa jeremyfuksa.com Listen to The Shakes
 on muleradio.net
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
Upcoming SlideShare
Loading in …5
×

Alternative Design Workflows in a "PostPSD" Era

7,302 views

Published on

Presented at SXSW Interactive 2014.

As responsive design and progressive enhancement become mainstream design practices, the decades old approach of using Adobe Photoshop to comp up page designs for clients is becoming increasingly irrelevant. A quick search online shows designers quickly clamoring for a better way to do their work.

Along with new tools to learn, there's also the challenge of acclimating a client base that has been used to seeing fully-rendered Photoshop designs for decades. How do these new practices benefit them?

This presentation looks at some "post-Photoshop" design practices and how they might fit into a designer's workflow. Additionally, Jeremy will share how a new design workflow has worked for his team at Clickfarm and how clients have received this new way of looking at their projects.

Published in: Design
License: CC Attribution-NonCommercial-NoDerivs License
0 Comments
9 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

Show More
No Downloads
Views
Total views
7,302
On SlideShare
0
From Embeds
0
Number of Embeds
3,475
Actions
Shares
0
Downloads
56
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Alternative Design Workflows in a "PostPSD" Era

  1. 1. Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014
  2. 2. I will give you safe passage
 in the wasteland.
  3. 3. PostPSD? #postpsd
  4. 4. http://theshak.es/1hDROP8 Brad Frost
  5. 5. http://theshak.es/1hDSqnI
  6. 6. DISCLAIMER #1 (just in case Adobe Typekit ever sponsors my podcast) #postpsd
  7. 7. I’m an old fart of Photoshop. A Photofart, if you will.
  8. 8. It’s never been ideal
 to design in Photoshop #postpsd
  9. 9. WILL IT BLEND?
  10. 10. http://theshak.es/1n4tJSS
  11. 11. .blended { background-image: url(ermahgerd.jpg); background-color: fuchsia; background-blend-mode: multiply; }
  12. 12. CSS3 Blend Modes Chrome 29 Chrome 30 Chrome 31 Firefox 24 IE 10 Opera 17 Safari 6 Safari 7 16%16% 75% 0% 25% 75% 67%67% http://theshak.es/1c378Vn Browser Support as of March 1, 2014
  13. 13. A PSD is a painting of a website.” “ Mike Monteiro
  14. 14. RWD mobile-home.psd 768-home.psd 800-home.psd desktop-home.psd hd-home.psd Thanks, Obama. + @2x #postpsd
  15. 15. How many “paintings” are you willing to make? mobile-home.psd 768-home.psd 800-home.psddesktop-home.psd hd-home.psd mouth-crimes.psd dark-fister.psd pole-strap.psdfart-clamp.psd gangnam.psd dribbbler.psd cursus.psd fringilla.psd wiggler.psdbart-schedule.psd fat-lick.psd who-farted?.psd random-act.psd mule-radio.psdpodcaster.psd the-shakes.psd wang-doodler.psd cursus.psd fringilla.psd wiggler.psdbart-schedule.psd fat-lick.psd who-farted?.psd random-act.psd mule-radio.psdpodcaster.psd the-shakes.psd wang-doodler.psd stinky-dog.psd rwd-hero.psd nervousness.psdsxsw-pics.psd self-loathing.psd hot-carl.psd laser-cats.psd mangled.psdyou-rule.psd extra-work.psd scabby.psd
  16. 16. Your goal: Get into real code as quickly as possible. <html> Arrows #postpsd
  17. 17. Bigger goal: Not wasting your team’s time
 and your client’s money #postpsd
  18. 18. YOU ARE ENTERING A WORLD OF PAIN. #postpsd
  19. 19. Enthusiasm For New Design Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients
  20. 20. Enthusiasm For New Design Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients When you’re using a billable project to try it out
  21. 21. Disposable Deliverables #postpsd ArrowsArrows
  22. 22. Disposable Deliverables #postpsd
  23. 23. KEEP AS MUCH WORK AS POSSIBLE. #postpsd
  24. 24. #postpsd
  25. 25. DISCLAIMER #2 #postpsd
  26. 26. Designers (Probably you. Certainly me. Definitely Meg.)
  27. 27. Live Wireframing/ Prototyping #postpsd
  28. 28. http://theshak.es/1f3MmjA
  29. 29. http://theshak.es/1cqso7H
  30. 30. http://theshak.es/1c360Bj
  31. 31. Frameworks B
  32. 32. Keynote!
  33. 33. http://theshak.es/1cqwOLY
  34. 34. http://theshak.es/1cqx8KL
  35. 35. Visual Design #postpsd
  36. 36. http://theshak.es/1f3Gt5I
  37. 37. Comping? #postpsd
  38. 38. http://theshak.es/1kb38CD
  39. 39. http://theshak.es/1kb3yZF
  40. 40. http://theshak.es/1cquzYV
  41. 41. http://theshak.es/1cqvhph
  42. 42. http://theshak.es/WZKeVF
  43. 43. http://theshak.es/1cquzYV • 100% Vector • Easy export of @2x images • Easy SVG export • CSS3 properties are one click away • $49.99 on Mac App Store
  44. 44. Visual Coding #postpsd
  45. 45. http://theshak.es/1mU056f
  46. 46. http://theshak.es/1q48lzR
  47. 47. (They see what you did there.) Your Teammates
  48. 48. Code quality? #postpsd
  49. 49. Adobe Edge Reflow <div id="primaryContainer" class="primaryContainer clearfix"> <div id="intro" class="clearfix"></div> <div id="box" class="clearfix"> <p id="text"><span id="textspan">Jeremy wishes he were an Okie from Muskogee.</span><br /></p> <p id="text1"><span id="textspan1">Because, as you know, it is the place where even squares can have a ball.</span></p> </div> <p id="h2">Broadcast Appearances</p> <img id="image" src="img/letsmakemistakes.jpg" class="image"/> <img id="image1" src="img/pixel_recess-icon.png" class="image"/> <img id="image2" src="img/bigwebshow.jpg" class="image"/> <img id="image3" src="img/theeastwing.jpg" class=“image"/> </div>
  50. 50. <body class="body index clearfix"> <div class="intro-background"></div> <div class="dark-box"></div> <h1>Jeremy wishes he were an Okie from Muskogee.</h1> <div class="intro-text"> <p>Because, as you know, it is the place where even squares can have a ball.</p> </div> <h2 class="broadcast">Broadcast Appearances</h2> <img src="images/letsmakemistakes-112x113.jpg" data-rimage data-src=“images/letsmakemistakes-226x226.jpg" data-srcat2x="images/letsmakemistakes-226x226@2x.jpg" data-srcmax992="images/letsmakemistakes-186x186.jpg" data-srcmax992at2x="images/letsmakemistakes-186x186@2x.jpg" data-srcmax768="images/letsmakemistakes-118x186.jpg" data-srcmax768at2x="images/letsmakemistakes-118x186@2x.jpg" data-srcmax480="images/letsmakemistakes-112x113.jpg" data-srcmax480at2x="images/letsmakemistakes-112x113@2x.jpg" data-srcmax320="images/letsmakemistakes-112x113.jpg" data-srcmax320at2x="images/letsmakemistakes-112x113@2x.jpg"> <img src="images/pixel_recess-icon-112x112.png" data-rimage data-src="images/pixel_recess-icon-226x226.png" data-srcat2x="images/pixel_recess-icon-226x226@2x.png" data-srcmax992="images/pixel_recess-icon-186x186.png" data-srcmax992at2x="images/pixel_recess-icon-186x186@2x.png" data-srcmax768="images/pixel_recess-icon-118x118.png" data-srcmax768at2x="images/pixel_recess-icon-118x118@2x.png" data-srcmax480="images/pixel_recess-icon-112x112.png" data-srcmax480at2x="images/pixel_recess-icon-112x112@2x.png" data-srcmax320="images/pixel_recess-icon-112x112.png" data-srcmax320at2x="images/pixel_recess-icon-112x112@2x.png"> <img src="images/bigwebshow-112x112.jpg" data-rimage data-src="images/bigwebshow-226x226.jpg" data-srcat2x="images/bigwebshow-226x226@2x.jpg" data-srcmax992="images/bigwebshow-186x187.jpg" data-srcmax992at2x="images/bigwebshow-186x187@2x.jpg" data-srcmax768="images/bigwebshow-117x118.jpg" data-srcmax768at2x="images/bigwebshow-117x118@2x.jpg" data-srcmax480="images/bigwebshow-112x112.jpg" data-srcmax480at2x="images/bigwebshow-112x112@2x.jpg" data-srcmax320="images/bigwebshow-112x112.jpg" data-srcmax320at2x="images/bigwebshow-112x112@2x.jpg"> <img src="images/theeastwing-112x112.jpg" data-rimage data-src="images/theeastwing-224x225.jpg" data-srcat2x="images/theeastwing-224x225@2x.jpg" data-srcmax992="images/theeastwing-185x186.jpg" data-srcmax992at2x="images/theeastwing-185x186@2x.jpg" data-srcmax768="images/theeastwing-118x118.jpg" data-srcmax768at2x="images/theeastwing-118x118@2x.jpg" data-srcmax480="images/theeastwing-112x112.jpg" data-srcmax480at2x="images/theeastwing-112x112@2x.jpg" data-srcmax320="images/theeastwing-112x112.jpg" data-srcmax320at2x="images/theeastwing-112x112@2x.jpg"> </body> Macaw
  51. 51. <body class="body index clearfix"> <div class="intro-background"></div> <div class="dark-box"></div> <h1>Jeremy wishes he were an Okie from Muskogee.</h1> <div class="intro-text"> <p>Because, as you know, it is the place where even squares can have a ball.</p> </div> <h2 class="broadcast">Broadcast Appearances</h2> <img src="images/letsmakemistakes.jpg" class="lets-make-mistakes"> <img src="images/pixel_recess-icon.png" class="pixel-recess"> <img src="images/bigwebshow.jpg" class="big-web-show"> <img src="images/theeastwing.jpg" class="the-east-wing"> </body> Macaw
  52. 52. Is the code worth passing to devs? #postpsd
  53. 53. Adobe Edge Reflow Macaw • Decent interface • Unnecessary IDs and classes • Not semantic or following HTML5 best practices • Ships as a preview product • Interface isn’t quite as polished • No way to turn off rimage.js support • Cleaner, semantic code • Released early to Kickstarter backers
  54. 54. HADOUKEN!
  55. 55. A change in your habits creates possible new challenges for your team #postpsd
  56. 56. Front-end devs will need copies of whatever alternate app you choose #postpsd
  57. 57. (Last chance to look at me, Hector.) Your Clients
  58. 58. Where are my design options? #postpsd
  59. 59. How am I supposed to sell this up the chain? #postpsd
  60. 60. Is this time well spent? #postpsd
  61. 61. Expectations #postpsd
  62. 62. Education #postpsd
  63. 63. Reaction #postpsd
  64. 64. We’ve only scratched the surface. #postpsd
  65. 65. Pick and choose what works for you. #postpsd
  66. 66. There is no magic formula.
 There is only Zuul.
  67. 67. Thanks! @jeremyfuksa jeremyfuksa.com Listen to The Shakes
 on muleradio.net

×