Design of the Web (2017)

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

DREW POWERS NAME DESIGNER, FRONT-END DEV PROFESSION COMPANY ENVY LABS

Slide 3

Slide 3 text

1996

Slide 4

Slide 4 text

2017

Slide 5

Slide 5 text

WHAT IS “DESIGN?”

Slide 6

Slide 6 text

DIETER RAMS (BRAUN)

Slide 7

Slide 7 text

GOOD DESIGN… 1. …IS INNOVATIVE 2. …MAKES A PRODUCT USEFUL 3. …IS ☆ A E S T H E T I C ☆ 4. …MAKES A PRODUCT UNDERSTANDABLE 5. …IS UNOBTRUSIVE 6. …IS HONEST 7. …IS LONG-LASTING 8. …IS THOROUGH 9. …IS ENVIRONMENTALLY-FRIENDLY 10. …IS AS LITTLE DESIGN AS POSSIBLE

Slide 8

Slide 8 text

EVERYBODY GOOD DESIGN IS FOR (IT DOESN’T STOP AT DEVELOPMENT) 01

Slide 9

Slide 9 text

DESIGNER DEVELOPER UI DESIGN INFORMATION ARCHITECTURE (IA) ANIMATIONS DATA ARCHITECTURE PROTOTYPING CODE ARCHITECTURE VERSION CONTROL SERVER PERFORMANCE USER PERFORMANCE

Slide 10

Slide 10 text

HOW TO MAKE A POORLY-DESIGNED SITE • TAKE OVER 2 SECONDS TO DELIVER CONTENT • DON’T MAKE IT MOBILE-FRIENDLY • NO ANIMATION, OR FAR TOO MUCH • WASTE MOBILE USERS’ DATA • DON’T GIVE IMMEDIATE USER FEEDBACK • CONFUSING / MISSING ERROR MESSAGES

Slide 11

Slide 11 text

INTENTIONAL GOOD DESIGN IS (IT ALL DEPENDS) 02

Slide 12

Slide 12 text

BROCHURE SITE

Slide 13

Slide 13 text

BROCHURE SITE

Slide 14

Slide 14 text

WEB PRODUCT

Slide 15

Slide 15 text

MULTI-PLATFORM PRODUCT

Slide 16

Slide 16 text

BRAND / MARKETING AGENCY WEB EXPERIENCE AGENCY PRODUCT COMPANY CORPORATION

Slide 17

Slide 17 text

INFORMED GOOD DESIGN IS (NO ONE EVER DESIGNED A BAD SITE BECAUSE THEY “KNEW TOO MUCH”) 03

Slide 18

Slide 18 text

2017 2016 2015 2014 Everybody now uses command-line interfaces (CLIs) for building. Grunt, Gulp, etc. The rise of React and ES6 PWA-fest and VS Code “JavaScript Fatigue” A BRIEF RECAP OF WEB DEVELOPMENT (ACCORDING TO DREW’S MEMORY) Node.js, NPM, React, Babel, and the infamous start of

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

QUICK FAQs • YES, DREAMWEAVER IS DEAD • NO, AI / WYSIWYG BUILDERS DIDN’T TAKE ANY JOBS • NO, DESIGNERS DON’T NEED TO CODE • NO, DEVELOPERS DON’T NEED TO LEARN DESIGN • YES, FLASH IS ALSO DEAD • NO, WORDPRESS WILL NEVER TAKE OVER • NO, ONE LANGUAGE DIDN’T “WIN” (BESIDES MAYBE JAVASCRIPT) • NO, EVERYBODY FORGOT ABOUT THE SEMANTIC WEB • YES, THERE’S MORE JS THAN EVER (BUT THIS IS GOOD! TRUST ME) • NO, JAVA AND JAVASCRIPT ARE 2 DIFFERENT THINGS

Slide 21

Slide 21 text

TWITTER.COM/FRONTENDORLANDO/ LISTS/ FRONT-END-DEVELOPERS GITHUB.COM/SINDRESORHUS/AWESOME KEEPING UP

Slide 22

Slide 22 text

TOOLS GOOD DESIGN REQUIRES GOOD (USE WHATEVER YOU LIKE, AS LONG AS IT PRODUCES RESULTS) 04

Slide 23

Slide 23 text

⚠ WARNING ⚠ OPINIONS AHEAD

Slide 24

Slide 24 text

BIGGEST LIFE-CHANGER

Slide 25

Slide 25 text

MAKES CODING A DELIGHT VS CODE

Slide 26

Slide 26 text

OH MY ZSH + HYPER.IS LOVE YOUR TERMINAL

Slide 27

Slide 27 text

SKETCH FRAMER DESIGN FOR WEB + MOBILE ANIMATION + RAPID PROTOTYPING

Slide 28

Slide 28 text

DASH NOW YOU CAN ACTUALLY CODE OFFLINE

Slide 29

Slide 29 text

IT WILL CHANGE IN3YEARS

Slide 30

Slide 30 text

FUNCTIONAL GOOD DESIGN IS (IF IT DOESN’T WORK WELL, IT’S NOT DESIGNED WELL) 05