Fast Design Decision-Making for the Everyday Developer

Fast Design Decision-Making for the Everyday Developer

Cbfa54275010d81ff786ef9b2a711d38?s=128

Julie Ann Horvath

December 01, 2012
Tweet

Transcript

  1. SUPER FAST DESIGN DECISION-MAKING

  2. @ @ NRRRDCORE

  3. I’M A DESIGNER BUT IT’S A LITTLE COMPLICATED

  4. I BUILD THINGS A LITTLE LESS COMPLICATED, RIGHT?

  5. None
  6. & EARLY & OFTEN FRESH SHIPPING DAILY.

  7. NOT THIS KIND, THOUGH.

  8. A WEBSITE’S DESIGN SHOULD START WHERE IT’S GOING TO LIVE.

  9. LESS ABOUT ME AND MORE ABOUT FAST DESIGN...

  10. MORE ABOUT YOU AND DEVELOPER FRIENDLY DESIGN TOOLS...

  11. PARTS FOR A FASTER DESIGN PROCESS. 3 3

  12. 3 3 STEPS BUILD, DEPLOY, & ITERATE.

  13. START SIMPLE TO FIND THE RIGHT DIRECTION...

  14. START SIMPLE TO FIND ANY DIRECTION, REALLY...

  15. START ON PAPER I KNOW WHAT YOU’RE THINKING, PAPER...

  16. DON’T FEAR THE BLANK CANVAS

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

  18. THE BASICS WHAT’S IN A CSS “FRAMEWORK”?

  19. THE ANSWER PROBABLY A LOT OF STUFF YOU DON’T NEED

  20. PICK AND CHOOSE THE PARTS THAT’LL BE USEFUL...

  21. PICK AND CHOOSE THE PARTS THAT ADDRESS AN ACTUAL NEED.

  22. BE CHOOSEY OR, USE THE FRAMEWORK AS A FOUNDATION

  23. EVENTUALLY YOU’LL WANT TO RIP OUT WHAT YOU’RE NOT USING.

    * *
  24. GRIDS CAN BE REALLY USELESS

  25. None
  26. GRIDS BUT THEY CAN HELP YOU FORMAT CONTENT.

  27. 960.GS THE ORIGINAL GANGSTER

  28. 960.GS THE ORIGINAL BOOKMARKLET

  29. None
  30. FRESH POTS SOME GRIDS COME BAKED INTO FRAMEWORKS.

  31. BOOTSTRAP SKELETON FOUNDATION & &

  32. THEY’RE FLEXY THEIR GRIDS ARE FLUID, FOR ALL OF YOUR

    MOBILE THINGS.
  33. None
  34. MEDIA QUERIES ARE REALLY, REALLY AWESOME. @ @

  35. CONDITIONAL CSS BASED ON THE WIDTH OF THE DEVICE.

  36. None
  37. ... PATTERN LIBRARIES CONSTANTLY IMPROVE THE WAY YOU WRITE MARKUP

    ...
  38. None
  39. None
  40. None
  41. VISUAL PATTERNS DRIBBBLE BUCKETS CAN HELP...

  42. None
  43. DRIBBBLE.COM/NRRRDCORE/BUCKETS

  44. None
  45. None
  46. CSS3EXP.COM/MOON

  47. ICON FONTS SAVED MY LIFE * *

  48. span.mega-icon.mega-icon-blacktocat

  49. .mega-icon.mega-icon-blacktocat

  50. SASS/SCSS WHY SHOULD YOU CARE?

  51. THE COMMUNITY IS OPINIONATED, THE COMPUTER DOESN’T CARE.

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

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

  54. SASS/SCSS HANDLES ERRORS LIKE A CHAMP.

  55. None
  56. WORK WITHIN CONSTRAINTS WHEN YOU’RE DESIGNING, BUILDING... * *

  57. STYLEGUIDES AREN’T JUST FOR COLOR PALETTES

  58. None
  59. KSS

  60. None
  61. WARPSPIRE.COM/KSS/STYLEGUIDES

  62. PROTOTYPING IS EASY WHEN YOU WRITE CODE.

  63. GISTS A LIGHT-WEIGHT PROTOTYPING TOOL.

  64. STAY LIMBER YOU CAN DO MORE WITH GISTS THAN YOU’D

    EXPECT.
  65. None
  66. None
  67. None
  68. None
  69. None
  70. PULL REQUESTS ARE AN AWESOME DESIGN TOOL.

  71. JULIEANNHORVATH.COM/RESOURCES

  72. THANK YOU WARM GUN ’12 & 500 STARTUPS