Design of the Web (2017)

Design thinking, applied to development. Can code be designed well? Can it be designed poorly?

This served as the introductory talk for the Weekend Code Warriors meetup, helping students find their way into coding careers, or people transitioning from unrelated industries. A high-level overview of thinking, tools, and what to expect in your first job.

Transcript

2. DREW POWERS NAME DESIGNER, FRONT-END DEV PROFESSION COMPANY ENVY LABS
5. WHAT IS “DESIGN?”
6. DIETER RAMS (BRAUN)
7. 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
8. EVERYBODY GOOD DESIGN IS FOR (IT DOESN’T STOP AT DEVELOPMENT) 01
9. DESIGNER DEVELOPER UI DESIGN INFORMATION ARCHITECTURE (IA) ANIMATIONS DATA ARCHITECTURE PROTOTYPING CODE ARCHITECTURE VERSION CONTROL SERVER PERFORMANCE USER PERFORMANCE
10. 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
11. INTENTIONAL GOOD DESIGN IS (IT ALL DEPENDS) 02
12. BROCHURE SITE
13. BROCHURE SITE
14. WEB PRODUCT
15. MULTI-PLATFORM PRODUCT
16. BRAND / MARKETING AGENCY WEB EXPERIENCE AGENCY PRODUCT COMPANY CORPORATION
17. INFORMED GOOD DESIGN IS (NO ONE EVER DESIGNED A BAD SITE BECAUSE THEY “KNEW TOO MUCH”) 03
18. 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
20. 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
21. TWITTER.COM/FRONTENDORLANDO/ LISTS/ FRONT-END-DEVELOPERS GITHUB.COM/SINDRESORHUS/AWESOME KEEPING UP
22. TOOLS GOOD DESIGN REQUIRES GOOD (USE WHATEVER YOU LIKE, AS LONG AS IT PRODUCES RESULTS) 04
23. ⚠ WARNING ⚠ OPINIONS AHEAD
24. BIGGEST LIFE-CHANGER
25. MAKES CODING A DELIGHT VS CODE
26. OH MY ZSH + HYPER.IS LOVE YOUR TERMINAL
27. SKETCH FRAMER DESIGN FOR WEB + MOBILE ANIMATION + RAPID PROTOTYPING
28. DASH NOW YOU CAN ACTUALLY CODE OFFLINE
29. IT WILL CHANGE IN3YEARS
30. FUNCTIONAL GOOD DESIGN IS (IF IT DOESN’T WORK WELL, IT’S NOT DESIGNED WELL) 05
31. GOOGLE RAIL MODEL LIGHTHOUSE PERFORMANCE MADE EASY A MASTERCLASS IN PERFORMANCE
32. PASSIONATE GOOD DESIGN IS (IF THIS IS YOUR DREAM, THEN ACT LIKE IT) 06
33. SAUL BASS (DESIGNED ALL YOUR FAVORITE LOGOS, PROBABLY)
34. PASSION ≠ WORKAHOLISM
35. THANKS! 06 @an_ennui