Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014

1,044 views

Published on

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
  • Be the first to comment

  • Be the first to like this

Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014

  1. 1. Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • WordCamp KC 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 31 Chrome 34 Firefox 24 Firefox 29 IE 10 Opera 17 Opera 21 Safari 6 Safari 7 16%16% 100% 75% 0% 100% 25% 100% 75% http://theshak.es/1c378Vn Browser Support as of July 11, 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. KEEP AS MUCH WORK AS POSSIBLE. #postpsd
  23. 23. #postpsd
  24. 24. DISCLAIMER #2 #postpsd
  25. 25. Designers (Probably you. Certainly me. Definitely Meg.)
  26. 26. Live Wireframing/ Prototyping #postpsd
  27. 27. http://theshak.es/1f3MmjA
  28. 28. http://theshak.es/1cqso7H
  29. 29. http://theshak.es/1r3dbzw
  30. 30. http://theshak.es/1c360Bj
  31. 31. Frameworks B
  32. 32. http://theshak.es/1oNjCDF
  33. 33. Keynote!
  34. 34. http://theshak.es/1cqwOLY
  35. 35. http://theshak.es/1cqx8KL
  36. 36. Visual Design #postpsd
  37. 37. http://theshak.es/1f3Gt5I
  38. 38. Comping? #postpsd
  39. 39. http://theshak.es/1kb38CD
  40. 40. http://theshak.es/1kb3yZF
  41. 41. http://theshak.es/1cquzYV
  42. 42. http://theshak.es/1cqvhph
  43. 43. http://theshak.es/WZKeVF
  44. 44. http://theshak.es/1cquzYV • 100% Vector • Easy export of @2x images • Easy SVG export • CSS3 properties are one click away • $79.00 on Mac App Store
  45. 45. Visual Coding #postpsd
  46. 46. http://theshak.es/1mU056f
  47. 47. http://theshak.es/1q48lzR
  48. 48. (They see what you did there.) Your Teammates
  49. 49. Code quality? #postpsd
  50. 50. 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>
  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. A change in your habits creates possible new challenges for your team #postpsd
  54. 54. Front-end devs will need copies of whatever alternate app you choose #postpsd
  55. 55. (Last chance to look at me, Hector.) Your Clients
  56. 56. Where are my design options? #postpsd
  57. 57. How am I supposed to sell this up the chain? #postpsd
  58. 58. Is this time well spent? #postpsd
  59. 59. Expectations #postpsd
  60. 60. Education #postpsd
  61. 61. Reaction #postpsd
  62. 62. We’ve only scratched the surface. #postpsd
  63. 63. Pick and choose what works for you. #postpsd
  64. 64. There is no magic formula.
 There is only Zuul.
  65. 65. Thanks! @jeremyfuksa jeremyfuksa.com Thanks for being super smart: Brad Frost Andrew Carr Mike Monteiro Samantha Warren Listen to The Shakes on

×