Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Alternative Design Workflows in a "PostPSD" Era

Jeremy Fuksa
March 11, 2014
Design
0
54

Alternative Design Workflows in a "PostPSD" Era

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.

Jeremy Fuksa

March 11, 2014
Tweet

Other Decks in Design

See All in Design
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
decksh object reference
ajstarks
2
910
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
Portfolio 2023.07.28
helemarudesu
0
570
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
0
350
The Fight
euralisw
0
110
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
700
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
71
5.1k
Become a Pro
speakerdeck
PRO
9
4.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Design by the Numbers
sachag
274
18k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Build your cross-platform service in a week with App Engine
jlugia
224
17k
Clear Off the Table
cherdarchuk
82
310k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Building Your Own Lightsaber
phodgson
97
5.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
103
6.6k
What's in a price? How to price your products and services
michaelherold
237
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k

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. None
  5. None

  6. http://theshak.es/1hDROP8 Brad Frost

  7. http://theshak.es/1hDSqnI

  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.
  10. None

  11. It’s never been ideal
 to design in Photoshop #postpsd

  12. WILL IT BLEND?

  13. http://theshak.es/1n4tJSS

  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
  17. None

  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.psd desktop-home.psd hd-home.psd mouth-crimes.psd dark-fister.psd pole-strap.psd fart-clamp.psd gangnam.psd dribbbler.psd cursus.psd fringilla.psd wiggler.psd bart-schedule.psd fat-lick.psd who-farted?.psd random-act.psd mule-radio.psd podcaster.psd the-shakes.psd wang-doodler.psd cursus.psd fringilla.psd wiggler.psd bart-schedule.psd fat-lick.psd who-farted?.psd random-act.psd mule-radio.psd podcaster.psd the-shakes.psd wang-doodler.psd stinky-dog.psd rwd-hero.psd nervousness.psd sxsw-pics.psd self-loathing.psd hot-carl.psd laser-cats.psd mangled.psd you-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

  25. Disposable Deliverables #postpsd Arrows Arrows

  26. KEEP AS MUCH WORK AS POSSIBLE. #postpsd

  27. #postpsd

  28. DISCLAIMER #2 #postpsd

  29. Designers (Probably you. Certainly me. Definitely Meg.)

  30. Live Wireframing/ Prototyping #postpsd

  31. http://theshak.es/1f3MmjA

  32. http://theshak.es/1cqso7H

  33. http://theshak.es/1c360Bj

  34. Frameworks B

  35. Keynote!

  36. http://theshak.es/1cqwOLY

  37. http://theshak.es/1cqx8KL

  38. Visual Design #postpsd

  39. http://theshak.es/1f3Gt5I

  40. None
  41. None

  42. Comping? #postpsd

  43. http://theshak.es/1kb38CD

  44. http://theshak.es/1kb3yZF

  45. http://theshak.es/1cquzYV

  46. http://theshak.es/1cqvhph

  47. http://theshak.es/WZKeVF

  48. 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

  49. Visual Coding #postpsd

  50. http://theshak.es/1mU056f

  51. None

  52. http://theshak.es/1q48lzR

  53. None

  54. (They see what you did there.) Your Teammates

  55. Code quality? #postpsd

  56. 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>

  57. <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

  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.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

  59. Is the code worth passing to devs? #postpsd

  60. 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

  61. HADOUKEN!

  62. A change in your habits creates possible new challenges for

    your team #postpsd

  63. Front-end devs will need copies of whatever alternate app you

    choose #postpsd

  64. (Last chance to look at me, Hector.) Your Clients

  65. Where are my design options? #postpsd

  66. How am I supposed to sell this up the chain?

    #postpsd

  67. Is this time well spent? #postpsd

  68. Expectations #postpsd

  69. Education #postpsd

  70. Reaction #postpsd

  71. None

  72. We’ve only scratched the surface. #postpsd

  73. Pick and choose what works for you. #postpsd

  74. There is no magic formula.
 There is only Zuul.

  75. Thanks! @jeremyfuksa jeremyfuksa.com Listen to The Shakes
 on muleradio.net! Thanks

    for being super smart: Brad Frost Andrew Carr Mike Monteiro Samantha Warren