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.

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
48. More Shapes More Colors Big Photographs Layers Nick Pettit, Treehouse http://blog.teamtreehouse.com/the-future-beyond-flat-design
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