Building the Web in 2018

Slide 1

Slide 1 text

BUILDING THE WEB IN 2018 Frontend Conference 2013 Roger Dudler Founder @ Frontify

Slide 2

Slide 2 text

Thanks @dns_roots

Slide 3

Slide 3 text

@ROGERDUDLER, 29 LIVING IN ST. GALLEN DEVELOPER & DESIGNER PREVIOUSLY @NAMICS NOW @FRONTIFY

Slide 4

Slide 4 text

The Web Speciﬁcation Engine

Slide 5

Slide 5 text

WHY 2018?

Slide 6

Slide 6 text

2016? 2020? “Hhmm... Too close, they will remember what I said...” “Too far away, no one will care, because they can’t prepare today...”

Slide 7

Slide 7 text

PREDICTIONS Thanks @lejoe

Slide 8

Slide 8 text

Flying Policemen? WTF?

Slide 9

Slide 9 text

Flying Firefighters? Jetpacks!!

Slide 10

Slide 10 text

Drones? We can do that!

Slide 11

Slide 11 text

House-Building Machines? Yay!

Slide 12

Slide 12 text

The Make-Up Machine? Build This! Now!

Slide 13

Slide 13 text

AND NOW?

Slide 14

Slide 14 text

“In the next 25 years, changes will come from the unknown working in their bedrooms and garages” The Guardian

Slide 15

Slide 15 text

“Compared to 2004, people are much more unsure about the future.” Surveys

Slide 16

Slide 16 text

CATEGORIES Trend Hot Vision 0-1 year 1-3 years 3-5 years

Slide 17

Slide 17 text

REALTIME WEB Hot

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Meteor meteor.com $11M

Slide 20

Slide 20 text

Pusher pusher.com $1M

Slide 21

Slide 21 text

Intercom intercom.io $6M

Slide 22

Slide 22 text

NO BACKEND Trend OR BAAS Backend as a Service

Slide 23

Slide 23 text

Firebase firebase.com $7M

Slide 24

Slide 24 text

Parse parse.com $7M

Slide 25

Slide 25 text

WEB COMPONENTS Trend

Slide 26

Slide 26 text

Templates Decorators Custom Elements Shadow DOM Imports

Slide 27

Slide 27 text

Polymer Project www.polymer-project.com

Slide 28

Slide 28 text

Brick mozilla.github.io/brick

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

IN-BROWSER DESIGN Hot

Slide 31

Slide 31 text

webﬂow.com webflow webflow.com

Slide 32

Slide 32 text

macaw.co Macaw macaw.co

Slide 33

Slide 33 text

divshot.com Divshot divshot.com

Slide 34

Slide 34 text

Perfect for Small Sites, One Pagers Great for Flat Design Challenge for Large, Complex Projects What happens to Creativity?

Slide 35

Slide 35 text

TOUCH DEVELOPMENT Vision

Slide 36

Slide 36 text

Touch Develop Microsoft Research

Slide 37

Slide 37 text

Coderpad Personal Project

Slide 38

Slide 38 text

IN-BROWSER DEVELOPMENT Trend

Slide 39

Slide 39 text

Tridiv tridiv.com

Slide 40

Slide 40 text

THE PERFECT IDE Trend

Slide 41

Slide 41 text

Light Table Kickstarter Project

Slide 42

Slide 42 text

MULTI-SCREEN & ASIDE CONTENT Vision

Slide 43

Slide 43 text

Ubiquity Era Microsoft Research

Slide 44

Slide 44 text

Fabio Basile, ﬀfabs.com

Slide 45

Slide 45 text

Charles Treece

Slide 46

Slide 46 text

BEYOND FLAT Vision

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

More Shapes More Colors Big Photographs Layers Nick Pettit, Treehouse http://blog.teamtreehouse.com/the-future-beyond-ﬂat-design

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

DEVDES Trend

Slide 51

Slide 51 text

Development Techniques applied to Design

Slide 52

Slide 52 text

Modular Design (Design Systems) (Front-End) Style Guides Custom Design Environments? Design Builds? Automated Design Testing? Quality Assurance?

Slide 53

Slide 53 text

PAGELESS DESIGN Trend

Slide 54

Slide 54 text

Act 3 CTA Act 2 Act 1 TELL A STORY http://bit.ly/15K5fWG

Slide 55

Slide 55 text

1. Uses story to compel visitors to action 2. Seamless, intuitive and easy to digest 3. Emotionally satisfying (interaction) 4. eﬃcient iterations (a/b testing, etc.) 5. encourages sharing based on blog post by Nathan Weller

Slide 56

Slide 56 text

PRINT AGENCIES DIGITAL AGENCIES Trend

Slide 57

Slide 57 text

BIGGEST CHALLENGE

Slide 58

Slide 58 text

VARIETY

Slide 59

Slide 59 text

PUT YOURSELF INTO POLE POSITION

Slide 60

Slide 60 text

KEEP UP-TO-DATE

Slide 61

Slide 61 text

Kickstarter kickstarter.com

Slide 62

Slide 62 text

LEARN & TEACH

Slide 63

Slide 63 text

Treehouse teamtreehouse.com

Slide 64

Slide 64 text

Codecademy codecademy.com

Slide 65

Slide 65 text

PublicBeta publicbeta.co

Slide 66

Slide 66 text

Clarity.fm clarity.fm

Slide 67

Slide 67 text

Read, Learn, Experiment, Use, Teach!

Slide 68

Slide 68 text

THE FUTURE IS YOU!

Slide 69

Slide 69 text

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