Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014
-
Upload
jeremy-fuksa -
Category
Design
-
view
106 -
download
1
description
Transcript of Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014
![Page 1: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/1.jpg)
Alternative Design Workflows in a “PostPSD” Era
Jeremy Fuksa • @jeremyfuksa • WordCamp KC 2014
![Page 2: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/2.jpg)
I will give you safe passagein the wasteland.
![Page 3: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/3.jpg)
PostPSD?#postpsd
![Page 4: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/4.jpg)
![Page 5: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/5.jpg)
![Page 8: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/8.jpg)
DISCLAIMER #1(just in case Adobe Typekit ever sponsors my podcast)
#postpsd
![Page 9: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/9.jpg)
I’m an old fart of Photoshop.
A Photofart, if you will.
![Page 10: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/10.jpg)
![Page 11: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/11.jpg)
It’s never been ideal to design in Photoshop
#postpsd
![Page 12: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/12.jpg)
WILL IT BLEND?
![Page 14: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/14.jpg)
.blended { background-image: url(ermahgerd.jpg); background-color: fuchsia; background-blend-mode: multiply; }
![Page 15: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/15.jpg)
CSS3 Blend Modes
Chrome 31 Chrome 34 Firefox 24 Firefox 29 IE 10 Opera 17 Opera 21 Safari 6 Safari 7
16%16%
100%
75%
0%
100%
25%
100%
75%
http://theshak.es/1c378Vn
Browser Support as of July 11, 2014
![Page 16: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/16.jpg)
A PSD is a painting of a website.”
“
Mike Monteiro
![Page 17: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/17.jpg)
![Page 18: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/18.jpg)
RWD mobile-home.psd 768-home.psd 800-home.psd
desktop-home.psd hd-home.psd
Thanks, Obama.
+ @2x
#postpsd
![Page 19: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/19.jpg)
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
![Page 20: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/20.jpg)
Your goal:Get into real code as quickly as possible.
<html>
Arrows
#postpsd
![Page 21: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/21.jpg)
Bigger goal:Not wasting your team’s time
and your client’s money
#postpsd
![Page 22: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/22.jpg)
YOU ARE ENTERING A
WORLD OF PAIN.
#postpsd
![Page 23: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/23.jpg)
Enthusiasm For New Design Workflows
25
50
75
100
You Other Designers Front-End Developers Project Managers Clients
![Page 24: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/24.jpg)
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
![Page 25: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/25.jpg)
Disposable Deliverables
#postpsd
ArrowsArrows
![Page 26: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/26.jpg)
KEEP AS MUCH WORK AS POSSIBLE.
#postpsd
![Page 27: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/27.jpg)
#postpsd
![Page 28: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/28.jpg)
DISCLAIMER #2
#postpsd
![Page 29: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/29.jpg)
Designers(Probably you. Certainly me. Definitely Meg.)
![Page 30: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/30.jpg)
Live Wireframing/Prototyping
#postpsd
![Page 31: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/31.jpg)
http://theshak.es/1f3MmjA
![Page 32: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/32.jpg)
http://theshak.es/1cqso7H
![Page 34: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/34.jpg)
http://theshak.es/1c360Bj
![Page 35: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/35.jpg)
FrameworksB
![Page 37: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/37.jpg)
Keynote!
![Page 40: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/40.jpg)
Visual Design
#postpsd
![Page 41: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/41.jpg)
http://theshak.es/1f3Gt5I
![Page 42: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/42.jpg)
![Page 43: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/43.jpg)
![Page 44: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/44.jpg)
Comping?
#postpsd
![Page 47: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/47.jpg)
http://theshak.es/1cquzYV
![Page 48: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/48.jpg)
http://theshak.es/1cqvhph
![Page 50: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/50.jpg)
http://theshak.es/1cquzYV
• 100% Vector • Easy export of @2x images • Easy SVG export • CSS3 properties are one click away • $79.00 on Mac App Store
![Page 51: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/51.jpg)
Visual Coding
#postpsd
![Page 52: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/52.jpg)
http://theshak.es/1mU056f
![Page 53: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/53.jpg)
![Page 55: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/55.jpg)
![Page 56: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/56.jpg)
(They see what you did there.)Your Teammates
![Page 57: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/57.jpg)
Code quality?
#postpsd
![Page 58: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/58.jpg)
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>
![Page 59: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/59.jpg)
<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
![Page 60: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/60.jpg)
Is the code worth passing to devs?
#postpsd
![Page 61: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/61.jpg)
A change in your habits creates possible new challenges for your
team
#postpsd
![Page 62: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/62.jpg)
Front-end devs will need copies of whatever alternate app you
choose
#postpsd
![Page 63: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/63.jpg)
(Last chance to look at me, Hector.)Your Clients
![Page 64: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/64.jpg)
Where are my design options?
#postpsd
![Page 65: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/65.jpg)
How am I supposed to sell this up the chain?
#postpsd
![Page 66: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/66.jpg)
Is this time well spent?
#postpsd
![Page 67: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/67.jpg)
Expectations
#postpsd
![Page 68: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/68.jpg)
Education
#postpsd
![Page 69: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/69.jpg)
Reaction
#postpsd
![Page 70: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/70.jpg)
![Page 71: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/71.jpg)
We’ve only scratched the surface.
#postpsd
![Page 72: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/72.jpg)
Pick and choose what works for you.
#postpsd
![Page 73: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/73.jpg)
There is no magic formula.There is only Zuul.
![Page 74: Alternative Design Workflows in a Post-PSD Era - WordCamp KC 2014](https://reader035.fdocuments.in/reader035/viewer/2022070304/54c79a344a7959820a8b45b6/html5/thumbnails/74.jpg)
Thanks!@jeremyfuksa
jeremyfuksa.com
Thanks for being super smart:
Brad Frost Andrew Carr
Mike Monteiro Samantha Warren
Listen to The Shakes on