Building the Web in 2018

Building the Web in 2018

Have you ever thought about what web design and development will look like in a few years? Will it still be the same? Are we still writing markup in text editors and designing in tools like Photoshop? Are there any visionary approaches? I want to share my thoughts on the future and inspire you to think about it today. I’ll bring the DeLorean. You, the talent.

2c3ee78eeca048cb5d934e96dedcd977?s=128

Roger Dudler

August 29, 2013
Tweet

Transcript

  1. BUILDING THE WEB IN 2018 Frontend Conference 2013 Roger Dudler

    Founder @ Frontify
  2. Thanks @dns_roots

  3. @ROGERDUDLER, 29 LIVING IN ST. GALLEN DEVELOPER & DESIGNER PREVIOUSLY

    @NAMICS NOW @FRONTIFY
  4. The Web Specification Engine

  5. WHY 2018?

  6. 2016? 2020? “Hhmm... Too close, they will remember what I

    said...” “Too far away, no one will care, because they can’t prepare today...”
  7. PREDICTIONS Thanks @lejoe

  8. Flying Policemen? WTF?

  9. Flying Firefighters? Jetpacks!!

  10. Drones? We can do that!

  11. House-Building Machines? Yay!

  12. The Make-Up Machine? Build This! Now!

  13. AND NOW?

  14. “In the next 25 years, changes will come from the

    unknown working in their bedrooms and garages” The Guardian
  15. “Compared to 2004, people are much more unsure about the

    future.” Surveys
  16. CATEGORIES Trend Hot Vision 0-1 year 1-3 years 3-5 years

  17. REALTIME WEB Hot

  18. “Today, everyone expects everything to be up-to-date everywhere”

  19. Meteor meteor.com $11M

  20. Pusher pusher.com $1M

  21. Intercom intercom.io $6M

  22. NO BACKEND Trend OR BAAS Backend as a Service

  23. Firebase firebase.com $7M

  24. Parse parse.com $7M

  25. WEB COMPONENTS Trend

  26. <my-element></my-element> Templates Decorators Custom Elements Shadow DOM Imports

  27. Polymer Project www.polymer-project.com

  28. Brick mozilla.github.io/brick

  29. Shadow DOM Visualizer html5-demos.com/shadowdom-visualizer

  30. IN-BROWSER DESIGN Hot

  31. webflow.com webflow webflow.com

  32. macaw.co Macaw macaw.co

  33. divshot.com Divshot divshot.com

  34. Perfect for Small Sites, One Pagers Great for Flat Design

    Challenge for Large, Complex Projects What happens to Creativity?
  35. TOUCH DEVELOPMENT Vision

  36. Touch Develop Microsoft Research

  37. Coderpad Personal Project

  38. IN-BROWSER DEVELOPMENT Trend

  39. Tridiv tridiv.com

  40. THE PERFECT IDE Trend

  41. Light Table Kickstarter Project

  42. MULTI-SCREEN & ASIDE CONTENT Vision

  43. Ubiquity Era Microsoft Research

  44. Fabio Basile, fffabs.com

  45. Charles Treece

  46. BEYOND FLAT Vision

  47. None
  48. More Shapes More Colors Big Photographs Layers Nick Pettit, Treehouse

    http://blog.teamtreehouse.com/the-future-beyond-flat-design
  49. None
  50. DEVDES Trend

  51. Development Techniques applied to Design

  52. Modular Design (Design Systems) (Front-End) Style Guides Custom Design Environments?

    Design Builds? Automated Design Testing? Quality Assurance?
  53. PAGELESS DESIGN Trend

  54. Act 3 CTA Act 2 Act 1 TELL A STORY

    http://bit.ly/15K5fWG
  55. 1. Uses story to compel visitors to action 2. Seamless,

    intuitive and easy to digest 3. Emotionally satisfying (interaction) 4. efficient iterations (a/b testing, etc.) 5. encourages sharing based on blog post by Nathan Weller
  56. PRINT AGENCIES DIGITAL AGENCIES Trend

  57. BIGGEST CHALLENGE

  58. VARIETY

  59. PUT YOURSELF INTO POLE POSITION

  60. KEEP UP-TO-DATE

  61. Kickstarter kickstarter.com

  62. LEARN & TEACH

  63. Treehouse teamtreehouse.com

  64. Codecademy codecademy.com

  65. PublicBeta publicbeta.co

  66. Clarity.fm clarity.fm

  67. Read, Learn, Experiment, Use, Teach!

  68. THE FUTURE IS YOU!

  69. THANK YOU! Connect @rogerdudler 10% discount code FEC13 frontify.com