Building a Design Environment

Building a Design Environment

Cbfa54275010d81ff786ef9b2a711d38?s=128

Julie Ann Horvath

October 15, 2012
Tweet

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