alternative design workflows in a "postpsd" era
DESCRIPTION
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.TRANSCRIPT
Alternative Design Workflows in a “PostPSD” Era
Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014
I will give you safe passagein the wasteland.
PostPSD?#postpsd
DISCLAIMER #1(just in case Adobe Typekit ever sponsors my podcast)
#postpsd
I’m an old fart of Photoshop.
A Photofart, if you will.
It’s never been ideal to design in Photoshop
#postpsd
WILL IT BLEND?
.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
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
FrameworksB
Keynote!
Visual Design
#postpsd
http://theshak.es/1f3Gt5I
Comping?
#postpsd
http://theshak.es/1cquzYV
http://theshak.es/1cqvhph
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
(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/[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
<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
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 Shakeson muleradio.net