Building a Design Environment

Transcript

1. None

2. @NRRRDCORE MOST PLACES ON THE INTERNET

3. I’M JULIE I DESIGN & BUILD STUFF AT GITHUB

4. I’M JULIE I’M A DESIGNER WHO WRITES CODE

5. THE TALK* HACKING A DESIGN ENVIRONMENT

6. THE TALK* WHAT’S A DESIGN ENVIRONMENT

7. THE PROCESS* BECAUSE FUCK PHOTOSHOP

8. MY PROCESS* HAPPENS IN THE BROWSER

9. MY PROCESS* HAPPENS IN CODE

10. MY PROCESS* HAPPENS (MOSTLY) IN CODE

11. STATUS QUO PIXEL-PERFECT PHOTOSHOP COMPS

12. RESPONSIBLE FOR PIXEL-PERFECT PHOTOSHOP COMPS

13. END PRODUCT IS A PICTURE OF A WEBSITE

14. “A WEBSITE’S DESIGN SHOULD START WHERE IT’S GOING TO LIVE.”

    MEAGAN FISHER
15. None

16. THINGS N’ STUFF

17. CSS3 IS FUCKING BEAUTIFUL

18. None

19. RETINA IS FUCKING BEAUTIFUL

20. RETINA CAN BE EASIER

21. ASSETS THAT SCALE WITH ICON FONTS

22. 4X FOR DETAIL

23. SASS/SCSS YOUR NEW BEST FRIEND

24. SASS/SCSS WORK FUCKING FASTER

25. border-top-color: lighten($gray, 10%);

26. border-bottom-color: darken($gray, 10%);

27. SASS/SCSS HANDLES ERRORS LIKE A CHAMP

28. None

29. INCONSISTENT GOING FROM COMPS TO THE BROWSER

30. DON’T PANIC DO THE WORK NOW INSTEAD OF LATER

31. None

32. NO SURPRISES OH SHIT THIS LOOKS AWFUL

33. ZEN MODE DO IT ALL AT THE SAME TIME

34. DEBUG CSS NEEDS MORE WEB INSPECTOR

35. DEBUG JS NEEDS MORE CONSOLE

36. WHY JS? THE INTERACTION LAYER

37. DON’T DIE SOFTWARE CRASHES SUCK

38. DESIGNERS ASK YOUR DEVS FOR COMMIT ACCESS

39. DEVELOPERS GIVE YOUR DESIGNERS COMMIT ACCESS

40. MORE TRUST GIVE YOUR DESIGNERS COMMIT ACCESS

41. TEACH YOUR DESIGNERS THEY MIGHT BREAK SOME THINGS

42. TRUST YOUR DESIGNERS THEY MIGHT SURPRISE YOU

43. TRUST YOUR DESIGNERS BUT LIKE, IN A GOOD WAY

44. PROBLEM? YES, PROBLEM

45. COMMAND + S ZERO RISK TO WHAT YOU’RE WORKING ON

46. COMMAND + R ZERO RISK TO WHAT YOU’RE WORKING ON

47. DESIGN TOOLS FOR BUILDING REAL WEBSITES

48. DESIGN TOOLS FOR BUILDING REAL APPS

49. DESIGN TOOLS FOR BUILDING REAL TOOLS

50. VERSION CONTROL IS AN AWESOME DESIGN TOOL

51. VERSION CONTROL HELPS YOU MANAGE ASSETS

52. VERSION CONTROL TRACK CHANGES TO YOUR CODE

53. VERSION CONTROL TRACK CHANGES TO YOUR DESIGN

54. GITHUB TRACK CHANGES TO YOUR DESIGN

55. IMAGE DIFFING IS AN AWESOME DESIGN TOOL

56. None
57. None
58. None
59. None

60. PROTOTYPING IS PRETTY AWESOME

61. PROTOTYPING IS EASY WHEN YOU WRITE CODE

62. GISTS A LIGHT-WEIGHT PROTOTYPING TOOL

63. ABUSING GISTS USING THE HELL OUT OF THEM

64. WAT WHAT’S IN A GIST?

65. IN A GIST YOU CAN DO MORE THAN YOU’D EXPECT

66. None
67. None
68. None
69. None
70. None

71. A FOUNDATION YOU DON’T HAVE TO START FROM SCRATCH

72. BOOTSTRAP YOU DON’T HAVE TO START FROM SCRATCH

73. CSS IS REUSABLE DON’T WRITE THE SAME CODE TWICE

74. CSS IS REUSABLE CAN YOU MAKE IT BETTER?

75. ALWAYS YOU CAN ALWAYS MAKE IT BETTER

76. ALWAYS YES, YOU FUCKING CAN

77. PUT IT OUT THERE GET MORE EYES ON YOUR CODE

78. CHANCES ARE IF YOU CAN’T, SOMEONE ELSE CAN

79. IF IT’S NOT REUSABLE SET IT ALL ON FIRE AND

    START AGAIN

80. PATTERN LIBRARIES ARE TOTALLY A THING

81. PATTERN LIBRARIES ARE REALLY FUCKING AWESOME

82. PATTERN LIBRARIES CONSTANTLY IMPROVE YOUR CODE

83. PATTERN LIBRARIES LEARN FROM PAST YOU

84. PATTERN LIBRARIES LEARN FROM EACH OTHER

85. None

86. STYLEGUIDES KIND OF SUCK, DON’T THEY

87. CONSIDERATIONS THINGS TO THINK ABOUT INSTEAD

88. None

89. USE THE WEB TO MAKE THE WEB

90. USE THE WEB NO, REALLY

91. None

92. BUT BUT BUT COMMAND LINE TOOLS ARE HARD

93. BUT BUT BUT GIT IS SO CONFUSING

94. WE CAN HELP GITHUB FOR MAC & WINDOWS

95. None

96. THE FUTURE* BECAUSE FUCK PHOTOSHOP

97. THE FUTURE* HOPEFULLY A MUCH BETTER ONE

98. THE FUTURE* HOPEFULLY A MUCH BETTER ONE

99. None

100. LET’S TALK JULIE @ GITHUB DOT COM

101. LET’S TALK @NRRRDCORE