Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
From Deception to Clarity
From Deception to Clarity
Loading in …3
×
1 of 119

Power Tools For Browser-Based Design

14

Share

Download to read offline

My talk at Artifact Conference 2014. This particular deck is from the conference in Providence.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Power Tools For Browser-Based Design

  1. 1. POWER TOOLS FOR BROWSER-BASED DESIGN Stephen Hay Artifact . Providence . 20140929
  2. 2. TIM “THE TOOLMAN” TAYLOR http://disney.wikia.com/wiki/Tim_Allen
  3. 3. DAVE “THE TOOLMAN” RUPERT
  4. 4. THE TOOL RULE It’s not about the tools.
  5. 5. http://psdisasters.com
  6. 6. A hammer is tool. It can be used to build things. It can also be used to break things.
  7. 7. IT’S NOT LITERALLY DESIGNING IN THE BROWSER.
  8. 8. DESIGN PROCESS IS A FUNNEL
  9. 9. THE DESIGN FUNNEL
  10. 10. THE DESIGN FUNNEL
  11. 11. VISUAL DESIGN COMPONENTS
  12. 12. VISUAL DESIGN COMPONENTS Typography Imagery Color Layout Motion CONTENT & UI/IX{
  13. 13. AND ALSO…
  14. 14. AND ALSO… Creating mockups/comps “Sketching” in code Reference Documentation
  15. 15. Dealing with CONTENT/UI
  16. 16. <h1>HTML</h1> It’s not perfect, but for web designers it’s ubiquitous and easily converted to (and from) other structured formats.
  17. 17. PLAIN TEXT MARKUP Markdown reStructuredText Asciidoc (and many more!)
  18. 18. THE COMMAND LINE http://www.flickr.com/photos/evdaimon/337754011/
  19. 19. THE COMMAND LINE http://www.flickr.com/photos/evdaimon/337754011/
  20. 20. DON’T LET THE COMMAND LINE FRIGHTEN YOU.
  21. 21. MARKDOWN
  22. 22. http://johnmacfarlane.net/pandoc/ PANDOC Pandoc converts documents in one markup format to another, and it supports lots of formats.
  23. 23. THAT’S A LOT OF FORMATS.
  24. 24. PANDOC $ pandoc foo.markdown -o foo.html
  25. 25. NERD MODE
  26. 26. http://emmet.io/ EMMET Emmet allows you to construct HTML (and CSS) via a CSS selector-like syntax.
  27. 27. http://emmet.io/ NERD MODE EMMET Emmet allows you to construct HTML (and CSS) via a CSS selector-like syntax.
  28. 28. Dealing with TYPOGRAPHY
  29. 29. http://typecast.com/ TYPECAST Type-based prototyping ! Great for “sculpting” structured content.
  30. 30. TYPECAST
  31. 31. TYPECAST
  32. 32. Dealing with IMAGES
  33. 33. http://www.morguefile.com/ MORGUEFILE
  34. 34. http://www.morguefile.com/ MORGUEFILE Free-to-use images.
  35. 35. http://www.morguefile.com/ MORGUEFILE Free-to-use images. But if you use stock photography in your finished designs, I will hunt you down.
  36. 36. http://www.morguefile.com/ MORGUEFILE Free-to-use images. But if you use stock photography in your finished designs, I will hunt you down. And I will kill you.
  37. 37. MORGUEFILE
  38. 38. MORGUEFILE
  39. 39. http://placehold.it/ PLACEHOLD.IT Just call a URL and you’ve got a placeholder image.
  40. 40. PLACEHOLD.IT http://placehold.it/330x185
  41. 41. PLACEHOLD.IT http://placehold.it/330x185 http://placehold.it/330x185/b58900/ffffff
  42. 42. http://icomoon.io/ ICOMOON Construct your own icon font, or download a set of icons in SVG format.
  43. 43. ICOMOON
  44. 44. ICOMOON
  45. 45. http://www.grumpicon.com/ GRUMPICON Ue the Grumpicon to get your SVGs HD(Retina)-ready.
  46. 46. GRUMPICON
  47. 47. GRUMPICON
  48. 48. http://imageoptim.com/ IMAGEOPTIM Optimizes images (OS X)
  49. 49. IMAGEOPTIM
  50. 50. IMAGEOPTIM
  51. 51. http://www.imagemagick.org/ IMAGEMAGICK Wicked command line black magic for images. ! It’s actually a suite of tools.
  52. 52. http://www.imagemagick.org/ NERD MODE IMAGEMAGICK Wicked command line black magic for images. ! It’s actually a suite of tools.
  53. 53. IMAGEMAGICK animate • compare • composite • conjure • convert • display • identify • import • mogrify • montage • stream
  54. 54. IMAGEMAGICK
  55. 55. IMAGEMAGICK convert foo.gif foo.png
  56. 56. IMAGEMAGICK convert foo.gif foo.png convert foo.jpg -resize 50% foo.png
  57. 57. IMAGEMAGICK convert foo.gif foo.png convert foo.jpg -resize 50% foo.png convert input.png -colorspace RGB +sigmoidal-contrast 11.6933 -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png
  58. 58. IMAGEMAGICK convert foo.gif foo.png convert foo.jpg -resize 50% foo.png convert input.png -colorspace RGB +sigmoidal-contrast 11.6933 -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png OMGWTF MODE
  59. 59. IMAGEMAGICK
  60. 60. Dealing with COLOR
  61. 61. https://kuler.adobe.com/ KULER Colors.
  62. 62. KULER
  63. 63. KULER
  64. 64. Dealing with LAYOUT
  65. 65. https://gridsetapp.com/ GRIDSET Create web layout grids with a GUI
  66. 66. GRIDSEThttps://gridsetapp.com/
  67. 67. http://bradfrostweb.com/demo/ish/ ISH.
  68. 68. http://bradfrostweb.com/demo/ish/ ISH. Stress-test your responsive layout.
  69. 69. http://bradfrostweb.com/demo/ish/ ISH. Stress-test your responsive layout. Don’t cry.
  70. 70. ISH
  71. 71. ISH
  72. 72. CSS
  73. 73. Creating MOCKUPS/COMPS
  74. 74. DREAMWEAVER, PART II
  75. 75. DREAMWEAVER, PART II GUI tools for designing that output code.
  76. 76. DREAMWEAVER, PART II GUI tools for designing that output code. Advantage: mockup in browser
  77. 77. DREAMWEAVER, PART II GUI tools for designing that output code. Advantage: mockup in browser Disadvantage: magic
  78. 78. DREAMWEAVER, PART II Macaw http://macaw.co/ Easel https://www.easel.io/ CoffeeCup Antetype http://www.coffeecup.com/ http://www.antetype.com
  79. 79. FRAMEWORKS (OR “UI TOOLKITS”) Bootstrap http://getbootstrap.com/ Zurb Foundation http://foundation.zurb.com/
  80. 80. STATIC SITE GENERATORS Jekyll Dexy + Many others
  81. 81. NERD MODE STATIC SITE GENERATORS Jekyll Dexy + Many others
  82. 82. STATIC SITE GENERATORS A quick example with Dexy
  83. 83. STATIC SITE GENERATORS A quick example with Dexy
  84. 84. TEMPLATING Jinja2 Mustache + Many others
  85. 85. NERD MODE TEMPLATING Jinja2 Mustache + Many others
  86. 86. TEMPLATES Jinja2 example
  87. 87. TEMPLATES Jinja2 example
  88. 88. Tools for SKETCHING IN CODE
  89. 89. BROWSER DEV TOOLS Tweak on an existing design in the browser.
  90. 90. DEV TOOLS
  91. 91. DEV TOOLS
  92. 92. JSBIN Very useful playground for HTML/CSS/JS
  93. 93. JSBIN
  94. 94. JSBIN
  95. 95. Producing DOCUMENTATION
  96. 96. ASCIIDOCTOR So awesome that we should share a moment of silence.
  97. 97. DEXY Keep prose and code separate. !
  98. 98. DEXY Keep prose and code separate. ! NERD MODE
  99. 99. DEXY
  100. 100. DEXY
  101. 101. LEARNING The reference manual for web-based tools is the web itself.
  102. 102. REFERENCE The docs for your chosen tool WebPlatform.org Mozilla Developer Network HTML5Rocks Anything Brad Frost writes
  103. 103. RELAX. If something solves a problem for you, don’t be afraid to add it to your toolbox. ! Part of the fun of web design is trying out new ways of solving problems.
  104. 104. THANK YOU! @stephenhay

×