Your SlideShare is downloading. ×
Alternative Design Workflows in a "PostPSD" Era
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Alternative Design Workflows in a "PostPSD" Era

3,096
views

Published on

Presented at SXSW Interactive 2014. …

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

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,096
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
53
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014
  • 2. I will give you safe passage
 in the wasteland.
  • 3. PostPSD? #postpsd
  • 4. http://theshak.es/1hDROP8 Brad Frost
  • 5. http://theshak.es/1hDSqnI
  • 6. DISCLAIMER #1 (just in case Adobe Typekit ever sponsors my podcast) #postpsd
  • 7. I’m an old fart of Photoshop. A Photofart, if you will.
  • 8. It’s never been ideal
 to design in Photoshop #postpsd
  • 9. WILL IT BLEND?
  • 10. http://theshak.es/1n4tJSS
  • 11. .blended { background-image: url(ermahgerd.jpg); background-color: fuchsia; background-blend-mode: multiply; }
  • 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. A PSD is a painting of a website.” “ Mike Monteiro
  • 14. RWD mobile-home.psd 768-home.psd 800-home.psd desktop-home.psd hd-home.psd Thanks, Obama. + @2x #postpsd
  • 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. Your goal: Get into real code as quickly as possible. <html> Arrows #postpsd
  • 17. Bigger goal: Not wasting your team’s time
 and your client’s money #postpsd
  • 18. YOU ARE ENTERING A WORLD OF PAIN. #postpsd
  • 19. Enthusiasm For New Design Workflows 25 50 75 100 You Other Designers Front-End Developers Project Managers Clients
  • 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. Disposable Deliverables #postpsd ArrowsArrows
  • 22. Disposable Deliverables #postpsd
  • 23. KEEP AS MUCH WORK AS POSSIBLE. #postpsd
  • 24. #postpsd
  • 25. DISCLAIMER #2 #postpsd
  • 26. Designers (Probably you. Certainly me. Definitely Meg.)
  • 27. Live Wireframing/ Prototyping #postpsd
  • 28. http://theshak.es/1f3MmjA
  • 29. http://theshak.es/1cqso7H
  • 30. http://theshak.es/1c360Bj
  • 31. Frameworks B
  • 32. Keynote!
  • 33. http://theshak.es/1cqwOLY
  • 34. http://theshak.es/1cqx8KL
  • 35. Visual Design #postpsd
  • 36. http://theshak.es/1f3Gt5I
  • 37. Comping? #postpsd
  • 38. http://theshak.es/1kb38CD
  • 39. http://theshak.es/1kb3yZF
  • 40. http://theshak.es/1cquzYV
  • 41. http://theshak.es/1cqvhph
  • 42. http://theshak.es/WZKeVF
  • 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. Visual Coding #postpsd
  • 45. http://theshak.es/1mU056f
  • 46. http://theshak.es/1q48lzR
  • 47. (They see what you did there.) Your Teammates
  • 48. Code quality? #postpsd
  • 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. <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. <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. Is the code worth passing to devs? #postpsd
  • 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. HADOUKEN!
  • 55. A change in your habits creates possible new challenges for your team #postpsd
  • 56. Front-end devs will need copies of whatever alternate app you choose #postpsd
  • 57. (Last chance to look at me, Hector.) Your Clients
  • 58. Where are my design options? #postpsd
  • 59. How am I supposed to sell this up the chain? #postpsd
  • 60. Is this time well spent? #postpsd
  • 61. Expectations #postpsd
  • 62. Education #postpsd
  • 63. Reaction #postpsd
  • 64. We’ve only scratched the surface. #postpsd
  • 65. Pick and choose what works for you. #postpsd
  • 66. There is no magic formula.
 There is only Zuul.
  • 67. Thanks! @jeremyfuksa jeremyfuksa.com Listen to The Shakes
 on muleradio.net