Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014
•
0 likes•1,508 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014
Similar to Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014 (20)
More from Jeremy Fuksa
More from Jeremy Fuksa (11)
Recently uploaded
Recently uploaded (20)
Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014
- 1. Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • WordCamp KC 2014
- 2. I will give you safe passage in the wasteland.
- 8. DISCLAIMER #1 (just in case Adobe Typekit ever sponsors my podcast) #postpsd
- 9. I’m an old fart of Photoshop. A Photofart, if you will.
- 11. It’s never been ideal to design in Photoshop #postpsd
- 12. WILL IT BLEND?
- 14. .blended { background-image: url(ermahgerd.jpg); background-color: fuchsia; background-blend-mode: multiply; }
- 15. 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
- 16. A PSD is a painting of a website.” “ Mike Monteiro
- 18. RWD mobile-home.psd 768-home.psd 800-home.psd desktop-home.psd hd-home.psd Thanks, Obama. + @2x #postpsd
- 19. 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
- 20. Your goal: Get into real code as quickly as possible. <html> Arrows #postpsd
- 21. Bigger goal: Not wasting your team’s time and your client’s money #postpsd
- 22. YOU ARE ENTERING A WORLD OF PAIN. #postpsd
- 23. Enthusiasm For New Design Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients
- 24. 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
- 26. KEEP AS MUCH WORK AS POSSIBLE. #postpsd
- 27. #postpsd
- 29. Designers (Probably you. Certainly me. Definitely Meg.)
- 35. Frameworks B
- 37. Keynote!
- 50. 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
- 56. (They see what you did there.) Your Teammates
- 58. 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>
- 59. <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
- 60. Is the code worth passing to devs? #postpsd
- 61. A change in your habits creates possible new challenges for your team #postpsd
- 62. Front-end devs will need copies of whatever alternate app you choose #postpsd
- 63. (Last chance to look at me, Hector.) Your Clients
- 64. Where are my design options? #postpsd
- 65. How am I supposed to sell this up the chain? #postpsd
- 66. Is this time well spent? #postpsd
- 71. We’ve only scratched the surface. #postpsd
- 72. Pick and choose what works for you. #postpsd
- 73. There is no magic formula. There is only Zuul.
- 74. Thanks! @jeremyfuksa jeremyfuksa.com Thanks for being super smart: Brad Frost Andrew Carr Mike Monteiro Samantha Warren Listen to The Shakes on