Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Shifting Nature of FED Role


Published on

FITC events. For digital creators.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at

The Shifting Nature of FED Role
with Ron Edelen

Over the past few years, there has been more emphasis on the capabilities of a front-end “themer” who implements re-usable systems, over a front-end designer (FED) who challenges the norm and strives for something novel. The responsive design revolution has made the web increasingly more complex to design, forcing us to embrace standardization and find opportunities for reducing labour in order to increase profit. The resulting trend: front-end development is more effectively executed by a robot.

History shows us that automation leads to a shift in the nature of labour. Wether or not you share my belief in a robot take-over, I will share techniques that may change your current perception of the FED role. I will also show practical examples of rapid experimentation, giving you the unfair advantage moving forward. As soon as you label something, you stop thinking about what else it can be.


A look at the state of the industry and how the future of FED requires us to provide more value than just arranging boxes and text on a screen.


Front-end developers, interactive designers, motion designers, UX designers, UI designers.


Basic knowledge of FED best practices and frameworks.


The fast pass to badass is embracing automation of development tasks so that you can free up time to pioneer new challenges
Layout building skills is no longer a differentiator, how design is valued these days and the massive importance of animation
Learn how to recognize when we are too reliant on automation frameworks, e.g. responsive web design as your only mobile strategy is a waste of time
Walk away with techniques for using WebGL, WebVR, three.js and other frameworks to create rich, interactive content, shifting the role of FED from layout to content creation
Tools and tips for experimentation and re-invention, how to invent visual and interactive methodologies that have the potential to become new standards

Published in: Internet
  • Login to see the comments

  • Be the first to like this

The Shifting Nature of FED Role

  1. 1. Hello. @ronede| en The Shifting Nature of Front—End Dev
  4. 4. VW GOLF GTI
  5. 5. / I, ,/ .. -2 SERIOUSLY, / WASH voun cAR. _,
  6. 6. .. ... :9.a«r. V I. ,
  7. 7. . .l_. N $4. I. ._. ... wl. ., . §n . . _ ta. . N ‘D C ‘ l x . run a t . a a . V . Q e . I ll. ‘
  8. 8. MY NAME IS RON The Shifting Nature of Front-End Dev @ronedelen ron. edelen@myjive. com
  9. 9. Christopher Butler Noah Stokes “The Bleak Future ofFED. ” “The Web Has Lost lt’s Soul. ”
  10. 10. BIG Trend sssssssssssssss an
  11. 11. TREND #1 The web is (pretty much) standardized.
  12. 12. We are obsessed with conventions. Predictability allows us to avoid user confusion and is an essential part of interacting with information successfully. Good user case. Excellent business case.
  13. 13. YOUR WEBSITE ls mus your: l weasne / / WE’R IQUE / A / N / I b ‘t a business and that you're different to all of your competitors, look like this. .. (1 V mills: casn Dave Ellis Always Three Columns ‘All websites Look the Sam you could have lour Have a CD9 man above The parlaet plate to talk columns here but you one of these columns If about your services won't You'll have three, you're really feeling Because co-rncraentally, like everyone else especlally creauve you have three of them, r II someone are own the copyright to thls layout. ll that were even posslele, lhey‘d be rlthl
  14. 14. “Front-end design techniques are stabilizing and are headed toward commoditization. ”
  15. 15. Mind the GAP. / Product Dev & Custom Web Experience (high cost) Everything Else (nominal monthly fee) i. e. Squarespace + Shopljjz
  16. 16. The Divide A more customized web—full of unique, contextual experiences. vs A ever expanding baseline of functionality that will serve many people very well, but little flexibility or scalability beyond that.
  17. 17. BIG Trend sssssssssssssss an
  18. 18. TREND #2 Web experience management is becoming automated.
  19. 19. if: uua Wehslles Digital Assets campaigns Community A 4‘ . . . . . . lnbox Users Tools Tagging mm: CREDIV: dncs. adnbe, :om
  20. 20. HARD DATA Empirical data should answer specific questions.
  21. 21. THE RESULT Web management automation minimizes need for iterative front-end development tasks.
  22. 22. BIG Trend sssssssssssssss an
  23. 23. TREND #3 Web development is becoming information logistics. — Christopher Butler, The Future of Web Development is Information Logistics htt s: www. newfan | ed. com web-develo ment—is-information-lo istics
  24. 24. Orchestrating Information "Five years from now, a whole lot of web people are going to feel like fools for spending so much time fussing over how pages look on phones and no time thinking about how the data got on the page. " - Christopher Butler, The Future of Web Development.
  25. 25. No more closed systems. As web platforms become more complex, the use of AP| s is becoming more central to web development.
  26. 26. What is Driving This Shift? ssssssssssssssss n i
  27. 27. CAUSE #1 Profits Decrease Human Resources Recent global KPI study showed cost of labour increasing year over year at billable rates decreased.
  28. 28. CAUSE #2 Predictability Standardization and Conventions Predictability allows us to avoid user confusion and is an essential part of interacting with information successfully.
  29. 29. Some Things to Consider TREND #1: Your Job is Becoming a Commodity O P P 0 R T U NIT Y You are in a position as a visual developer to provide a unique perspective of how the web is shaped.
  30. 30. 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 / It The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position: */ div { —ms—transfonn: transl. ate(50px,100px): /an IE 9 : o:/ —webk1t—transfonn: trans1.ate(50px,100px): /a< Safari n= / transfonn: trans1ate(50px,100px): } / t The following example skews the <d1'v> eleanent 20 degrees along the Y-axis: */ div { —Ins—transfonn: skevlY(20deg): /1: IE 9 ml —webkit—transfonn: skevIY(20deg); /tr Safari : o=/ transfonn: skewY(20deg):
  31. 31. out As = D.'f? lIII, ".= -' -1;! rs‘ 1?-‘st-r"‘i. f~»*"*: “*f; * ii ‘ j jxa-_iai: o; -*l': luy):9l ‘law’ it! ‘($1,026 "it-mi 415234 1. m= .m1s—-‘toga J 3912+! acl;1,il: .¢: ti—i, -rill: -ei‘. _‘li': )(uns : ~I; i=n_n'1L§a‘-. Iii . .1"-i1i11i—ijIll3lil-'j'3!, l!JJL-‘sliltflllll Q2.) 1 n-1-: ii1-i : l'«}1I]s):0i. Zltllff
  32. 32. ¥? _______ BATMAN: People are slaves to a lifeless, would you have me do? boxy internet, Alfred. What ALFRED PENNYWORTH: Endure, Master Wayne. Keep using CSS3 Transforms. They'll hate you for it, but that's the point of Batman, he can be the outcast. He can make the choice that no one else can make, the right choice.
  33. 33. IVI/ -TRlX ll :07 "“ '" SCREENSAVER EQUIPMENT 23 MIN CHANNELS Pi7r‘F ‘-l’P DR JOHNNY EIEPP MEI Learn about best practices in Sports Medicine and how Matrix is at the forefront. EVENT TECHNOLOGY ABOUT WEBSITE LOGO rename $14,520 nomxrso
  34. 34. Some Things to Consider TREND #2: Web Management Automation will minimize need for ongoing front-end development. OPPORTUNITY There is an ever growing hunger for new, rich and exciting content. As a creative technologist, you can provide unmatched value as a content creator.
  35. 35. ans. <-3,. -3,. .: ;.. ._m. g «IL? -_I liiiguquluiivalaulliwlgl wt-, i'§i ’l= ,lIll"E"" -l. I,III)Ii “ _ I , uni . L». .l a’= w|-- : i '13.‘; j_I_d= Iji: "iii; q,-}v{fixiv)Iiin. r§-I-lgl J1 ; =Ia; (-rmin: Wii-iiiijialtl-sityliiiizlfil-P‘ K‘-, l,E*‘= I"| 'M= i-liia‘i-1'? ‘ "§’1gI: ,t= "". (=): t"1l-s_1.~¢¥‘ in 4r.1ii. « ii-. =i’i= »"-is A. -I -m--xiii-i. -13+‘ ‘i§'Al= l-'fil= l'vl' ~- 1 I 1 1 131‘ 1 5! i'“<. ‘ 1iE'/ -I E4"-I-inI'ir«. IZlnl= |e"'~4_'li, l,'r 1 flu 1:‘l: u'J. '1l : Jll"£"'T. ‘ll£‘Ifl"I. I-'L£L‘t. I.lIfllI(_l‘. "‘&£1!l'J. ’l'. 'h mi 4.1-1 . ~n-e»“°, L-rfiid-aia. .iin)i.41<‘k4L~tq «it» 2:11 .1i-= o"; '|.1A:1i ‘ . iiL]n¢']-4"-41-14 4-11 .1--i-_«v": 'I-1A‘: aa-;1=i-qgmii ‘1.~t'~.4;. 4.1-I : sve'4I~1l3=Iulr= i-:1: - ii-‘gun jg! HIL1-| nij_-i‘r 5-17-i .1_u_-u= v“-'I~1Iir-1"; -s 414 E-{L15 _u’r pm-iii}
  36. 36. 211:! 131'. ) i. l:r, I 1,372 $5‘. ism LII? » 1,3131 157/ 13!? ‘ thin 1, E I’/ J in I}. in 2: it it _: !.I! :!« i_E| .f it 1:. fiuu-if1i_t-iii = .Ini1iii= ,ii(= .lC> = { ‘l . r Killlililrlcifl iilllliiltlli i-am-it= .wC) :4, . -_lIIIeIIV= .u‘0l~1Ii ‘no’! == =~ l — ‘l= .lIll‘elf-_b. Jl°l°_ iii er-taint-eugx-i-11:0-.1-iii bi réiiiéteiasii--iaixaiawi sir-1-.1-ta. fliillliléliiil ‘ii , J -1: . 'iI'iu_q @ic_iiiiéiIe-.51-1.3.3-.1-iingv J Al 7 ill Slit
  37. 37. _ 1“ NEXT TALK Badass Nlgtion Design for Front-end Developers Tomorrow, Sept 16th. 4:45-5:30pm Room 801B suamrr
  38. 38. Some Things to Consider TREND #3: We are heading towards an age of information logistics. OPPORTUNITY Become more confident and comfortable doing some backend development tasks.
  39. 39. Michael Chatten Director of Emerging Technology, Myjive “Embrace the AP]. ”
  40. 40. “Technology inspires art. Art challenges technology. " — John Lasseter
  41. 41. Become Specialized.
  42. 42. Designers Should Design, Coders Should Code HERES WHY YOU NEED SOMEONE WHO UNDERSTANDS CODE BUT DOESN'T NECESSARILY LIVE IN lT WRITTEN av Marcin Treder, Ryan Thomas Riddle, and Jerry Cao It's an old argument: should designers code? And it , ,m, ,m, O,, gets a lot of people up in arms, some in favor while De-siziiifiesr others not so much We've even chimed in before Frail/73$ Mmuiiivg or s‘ v 2 3 in 4 t . F#Sl'©MPANY I / FIND our HOW ' a. .j. .V/9‘ TRENDING HAPPENING NOW 0 Winds Of Change At Dyson
  43. 43. Empathy. “Do not seek praise, seek criticism. " — Paul Arden It's Not How Good You Are, It's How Good You Want to Be.
  44. 44. Lovem ipsum dolor sit amet. consectelur adipiscing elil. sed do eiusmod lempor incididunt ut Ialzore et dolore. m! uV‘)4 anus vlmo. ucumc Ann ANCULAIIS lvru| uun§-snv My) IVE
  45. 45. "':7:h‘I{Q~“l. ‘ Q1/l H 0 co? r@3Iz(. )Ie: IcIi: lI:3Ir(: %myjive. com