Download as PDF, PPTX
Uploaded byJeremy Fuksa
Alternative Design Workflows in a "PostPSD" Era
The document discusses alternative design workflows in a 'post-PSD' era, emphasizing the need for designers to transition quickly to code and streamline their processes to save time and resources. It highlights the importance of new design tools and approaches while acknowledging the challenges they pose for teams and clients. Ultimately, it encourages professionals to explore various methods and pick what suits them best while dismissing the idea of a one-size-fits-all solution.
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Alternative Design Workflows in a "PostPSD" Era
- 1. Alternative Design Workflows ina “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014
- 2. I will giveyou safe passage in the wasteland.
- 3.
- 6.
- 7.
- 8. DISCLAIMER #1 (just incase Adobe Typekit ever sponsors my podcast) #postpsd
- 9. I’m an oldfart of Photoshop. A Photofart, if you will.
- 11. It’s never beenideal to design in Photoshop #postpsd
- 12.
- 13.
- 14. .blended { background-image: url(ermahgerd.jpg); background-color:fuchsia; background-blend-mode: multiply; }
- 15. CSS3 Blend Modes Chrome29 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
- 16. A PSD isa painting of a website.” “ Mike Monteiro
- 18. RWD mobile-home.psd 768-home.psd800-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 intoreal code as quickly as possible. <html> Arrows #postpsd
- 21. Bigger goal: Not wastingyour team’s time and your client’s money #postpsd
- 22. YOU ARE ENTERING A WORLDOF PAIN. #postpsd
- 23. Enthusiasm For NewDesign Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients
- 24. Enthusiasm For NewDesign 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
- 25.
- 26.
- 27. KEEP AS MUCH WORKAS POSSIBLE. #postpsd
- 28.
- 29.
- 30. Designers (Probably you. Certainlyme. Definitely Meg.)
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. 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
- 50.
- 51.
- 53.
- 55. (They see whatyou did there.) Your Teammates
- 56.
- 57. Adobe Edge Reflow <divid="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>
- 58. <body class="body indexclearfix"> <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/[email protected]" data-srcmax992="images/letsmakemistakes-186x186.jpg" data-srcmax992at2x="images/[email protected]" data-srcmax768="images/letsmakemistakes-118x186.jpg" data-srcmax768at2x="images/[email protected]" data-srcmax480="images/letsmakemistakes-112x113.jpg" data-srcmax480at2x="images/[email protected]" data-srcmax320="images/letsmakemistakes-112x113.jpg" data-srcmax320at2x="images/[email protected]"> <img src="images/pixel_recess-icon-112x112.png" data-rimage data-src="images/pixel_recess-icon-226x226.png" data-srcat2x="images/[email protected]" data-srcmax992="images/pixel_recess-icon-186x186.png" data-srcmax992at2x="images/[email protected]" data-srcmax768="images/pixel_recess-icon-118x118.png" data-srcmax768at2x="images/[email protected]" data-srcmax480="images/pixel_recess-icon-112x112.png" data-srcmax480at2x="images/[email protected]" data-srcmax320="images/pixel_recess-icon-112x112.png" data-srcmax320at2x="images/[email protected]"> <img src="images/bigwebshow-112x112.jpg" data-rimage data-src="images/bigwebshow-226x226.jpg" data-srcat2x="images/[email protected]" data-srcmax992="images/bigwebshow-186x187.jpg" data-srcmax992at2x="images/[email protected]" data-srcmax768="images/bigwebshow-117x118.jpg" data-srcmax768at2x="images/[email protected]" data-srcmax480="images/bigwebshow-112x112.jpg" data-srcmax480at2x="images/[email protected]" data-srcmax320="images/bigwebshow-112x112.jpg" data-srcmax320at2x="images/[email protected]"> <img src="images/theeastwing-112x112.jpg" data-rimage data-src="images/theeastwing-224x225.jpg" data-srcat2x="images/[email protected]" data-srcmax992="images/theeastwing-185x186.jpg" data-srcmax992at2x="images/[email protected]" data-srcmax768="images/theeastwing-118x118.jpg" data-srcmax768at2x="images/[email protected]" data-srcmax480="images/theeastwing-112x112.jpg" data-srcmax480at2x="images/[email protected]" data-srcmax320="images/theeastwing-112x112.jpg" data-srcmax320at2x="images/[email protected]"> </body> Macaw
- 59. <body class="body indexclearfix"> <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 codeworth passing to devs? #postpsd
- 61. 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
- 62.
- 63. A change inyour habits creates possible new challenges for your team #postpsd
- 64. Front-end devs willneed copies of whatever alternate app you choose #postpsd
- 65. (Last chance tolook at me, Hector.) Your Clients
- 66. Where are mydesign options? #postpsd
- 67. How am Isupposed to sell this up the chain? #postpsd
- 68. Is this timewell spent? #postpsd
- 69.
- 70.
- 71.
- 73. We’ve only scratchedthe surface. #postpsd
- 74. Pick and choosewhat works for you. #postpsd
- 75. There is nomagic formula. There is only Zuul.
- 76. Thanks! @jeremyfuksa jeremyfuksa.com Listen to TheShakes on muleradio.net