SlideShare a Scribd company logo
Alternative Design Workflows
in a “PostPSD” Era
Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014
I will give you safe passage

in the wasteland.
PostPSD?
#postpsd
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
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.
Alternative Design Workflows in a "PostPSD" Era
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%
http://theshak.es/1c378Vn
Browser Support as of March 1, 2014
A PSD is a
painting of
a website.”
“
Mike Monteiro
Alternative Design Workflows in a "PostPSD" Era
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-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
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’re using a billable project to try it out
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
Alternative Design Workflows in a "PostPSD" Era
Alternative Design Workflows in a "PostPSD" Era
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
• $49.99 on Mac App Store
Visual Coding
#postpsd
http://theshak.es/1mU056f
Alternative Design Workflows in a "PostPSD" Era
http://theshak.es/1q48lzR
Alternative Design Workflows in a "PostPSD" Era
(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>
<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>
<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
<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
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
• 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
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
Alternative Design Workflows in a "PostPSD" Era
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

More Related Content

Alternative Design Workflows in a "PostPSD" Era

  • 1. Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 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
  • 14. .blended { background-image: url(ermahgerd.jpg); background-color: fuchsia; background-blend-mode: multiply; }
  • 15. 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
  • 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
  • 27. KEEP AS MUCH WORK AS POSSIBLE. #postpsd
  • 30. Designers (Probably you. Certainly me. Definitely Meg.)
  • 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
  • 55. (They see what you did there.) Your Teammates
  • 57. 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>
  • 58. <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
  • 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. 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
  • 63. A change in your habits creates possible new challenges for your team #postpsd
  • 64. Front-end devs will need copies of whatever alternate app you choose #postpsd
  • 65. (Last chance to look at me, Hector.) Your Clients
  • 66. Where are my design options? #postpsd
  • 67. How am I supposed to sell this up the chain? #postpsd
  • 68. Is this time well spent? #postpsd
  • 73. We’ve only scratched the surface. #postpsd
  • 74. Pick and choose what works for you. #postpsd
  • 75. There is no magic formula.
 There is only Zuul.