Alternative Design Workflows in a "PostPSD" Era

45 %
55 %
Information about Alternative Design Workflows in a "PostPSD" Era
Design

Published on March 11, 2014

Author: 3rdmartini

Source: slideshare.net

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.

Alternative Design Workflows in a “PostPSD” Era Jeremy Fuksa • @jeremyfuksa • SXSW Interactive 2014

I will give you safe passage
 in the wasteland.

PostPSD? #postpsd

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.

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

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

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

http://theshak.es/1q48lzR

(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

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

#postpsd presentations

Add a comment

Related presentations

Related pages

Schedule | sxsw.com

Alternative Design Workflows in a "PostPSD" Era. ... As responsive design and ... Jeremy will share how a new design workflow has worked for his ...
Read more

Jeremy Fuksa

Alternative Design Workflows in a "PostPSD" Era. As responsive design and progressive enhancement become mainstream design practices, the decades old ...
Read more

Express Yourself - Let’s Make Mistakes - Mule Radio ...

Express Yourself. with Jeremy Fuksa ... Alternative Design Workflows in a “PostPSD” Era @ SXSW ... He also writes about design, paints words, ...
Read more

Alternative Forms for SharePoint Lists and Workflows ...

... InfoPath was pulled into this new role as SharePoint’s form-design ... connected to workflows. 2. Alternative forms ... from your mobile forms ...
Read more

Handling Serious SharePoint Workflow in a Post InfoPath Era

Handling Serious SharePoint Workflow in a Post InfoPath Era. ... 2016 needs to look at the alternatives. ... design forces a developer ...
Read more

The Post-PSD Era - Brad Frost Web | Web Design, Speaking ...

Are we entering the Post-PSD Era of web design? ... (which is what psd to code workflow ... Why the sensational “Post PSD-Era” headline when you ...
Read more

Overview - Workflow Connect

Workflow Connect solutions lets you document, ... Workflow and Process design tool deployed across 270 industries in over 60 countries. Absolutely FREE ...
Read more