Power Tools for Browser-Based Design (Artifact 2014)

Power Tools for Browser-Based Design (Artifact 2014)

Various tools (some non-obvious) that designers might consider using for web design.

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

May 05, 2014
Tweet

Transcript

  1. POWER TOOLS FOR BROWSER-BASED DESIGN Stephen Hay Artifact . Austin

    . May 5, 2014
  2. TIM “THE TOOLMAN” TAYLOR

  3. DAVE 
 “THE TOOLMAN” RUPERT

  4. TOOL RULE THE It’s not about the tools.

  5. http://psdisasters.com

  6. None
  7. A hammer is tool. It can be used to build

    things. It can also be used to break things.
  8. DESIGN PROCESS IS A FUNNEL

  9. THE DESIGN FUNNEL

  10. THE DESIGN FUNNEL

  11. VISUAL DESIGN COMPONENTS

  12. VISUAL DESIGN COMPONENTS Typography Imagery Color Layout CONTENT {

  13. AND ALSO…

  14. AND ALSO… Creating mockups/comps “Sketching” in code Reference Documentation

  15. CONTENT Dealing with

  16. <H1>HTML</H1> It’s not perfect, but for web designers it’s ubiquitous

    and easily converted to other structured formats. ! You should probably also learn CSS.
  17. PLAIN TEXT MARKUP Markdown reStructuredText Asciidoc (and many more!)

  18. DON’T LET THE COMMAND LINE FRIGHTEN YOU.

  19. MARKDOWN

  20. MARKDOWN

  21. PANDOC Pandoc converts documents in one markup format to another,

    and it supports lots of formats. http://johnmacfarlane.net/pandoc/
  22. PANDOC $ pandoc foo.markdown -o foo.html

  23. PANDOC

  24. PANDOC

  25. EMMET Emmet allows you to construct HTML via a CSS

    selector-like syntax. http://emmet.io/
  26. EMMET Emmet allows you to construct HTML via a CSS

    selector-like syntax. http://emmet.io/ NERD MODE
  27. EMMET NERD MODE

  28. EMMET NERD MODE

  29. TYPOGRAPHY Dealing with

  30. TYPECAST Type-based prototyping ! Great for “sculpting” structured content. http://typecast.com/

  31. TYPECAST

  32. TYPECAST

  33. CSS

  34. IMAGES Dealing with

  35. MORGUEFILE http://www.morguefile.com/

  36. MORGUEFILE Free-to-use images. http://www.morguefile.com/

  37. MORGUEFILE Free-to-use images. But if you use stock photography in

    your finished designs, I will hunt you down. http://www.morguefile.com/
  38. 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. http://www.morguefile.com/
  39. MORGUEFILE

  40. MORGUEFILE

  41. PLACEHOLD.IT Just call a URL and you’ve got a placeholder

    image. http://placehold.it/
  42. PLACEHOLD.IT http://placehold.it/330x185

  43. PLACEHOLD.IT http://placehold.it/330x185 http://placehold.it/330x185/b58900/ffffff

  44. ICOMOON Construct your own icon font, or download a set

    of icons in SVG format. http://icomoon.io/
  45. ICOMOON

  46. ICOMOON

  47. GRUMPICON Ue the Grumpicon to get your SVGs HD(Retina)-ready. http://www.grumpicon.com/

  48. GRUMPICON

  49. GRUMPICON

  50. IMAGEOPTIM Optimizes images (OS X) http://imageoptim.com/

  51. IMAGEOPTIM

  52. IMAGEOPTIM

  53. IMAGEMAGICK Wicked command line 
 black magic for images. !

    It’s actually a suite of tools. http://emmet.io/ NERD MODE
  54. IMAGEMAGICK animate • compare • composite • conjure • convert

    • display • identify • import • mogrify • montage • stream NERD MODE
  55. IMAGEMAGICKNERD MODE

  56. IMAGEMAGICK convert foo.gif foo.png
 NERD MODE

  57. IMAGEMAGICK convert foo.gif foo.png
 convert foo.jpg -resize 50% foo.png
 NERD

    MODE
  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 NERD MODE
  59. 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 NERD MODE OMGWTF MODE
  60. IMAGEMAGICKNERD MODE

  61. IMAGEMAGICKNERD MODE

  62. IMAGEMAGICKNERD MODE

  63. COLOR Dealing with

  64. KULER Colors. https://kuler.adobe.com/

  65. KULER

  66. KULER

  67. CSS

  68. LAYOUT Dealing with

  69. GRIDSET Create web layout grids with a GUI https://gridsetapp.com/

  70. GRIDSET https://gridsetapp.com/

  71. ISH. http://bradfrostweb.com/demo/ish/

  72. ISH. Stress-test your responsive layout.
 http://bradfrostweb.com/demo/ish/

  73. ISH. Stress-test your responsive layout.
 Don’t cry. http://bradfrostweb.com/demo/ish/

  74. ISH

  75. ISH

  76. CSS

  77. MOCKUPS/COMPS Creating

  78. DREAMWEAVER, 
 PART II

  79. DREAMWEAVER, 
 PART II GUI tools for designing that output

    code.

  80. DREAMWEAVER, 
 PART II GUI tools for designing that output

    code.
 Advantage: mockup in browser
  81. DREAMWEAVER, 
 PART II GUI tools for designing that output

    code.
 Advantage: mockup in browser Disadvantage: magic
  82. DREAMWEAVER, 
 PART II Macaw Easel CoffeeCup http://macaw.co/ https://www.easel.io/ http://www.coffeecup.com/

    I DON’T ENDORSE ANY OF THESE. I’M JUST NAMING EXAMPLES.
  83. FRAMEWORKS Bootstrap Zurb Foundation I DON’T ENDORSE ANY OF THESE.

    I’M JUST NAMING EXAMPLES. http://getbootstrap.com/ http://foundation.zurb.com/
  84. STATIC SITE 
 GENERATORS Jekyll Dexy + Many others NERD

    MODE
  85. STATIC SITE GENERATORS A quick example with Dexy

  86. STATIC SITE GENERATORS A quick example with Dexy

  87. TEMPLATING Jinja2 Mustache + Many others NERD MODE

  88. TEMPLATES Jinja2 example

  89. TEMPLATES Jinja2 example

  90. CSS

  91. SKETCHING IN CODE Tools for

  92. BROWSER DEV TOOLS Tweak on an existing design 
 in

    the browser.
  93. DEV TOOLS

  94. DEV TOOLS

  95. JSBIN Very useful playground for HTML/CSS/JS

  96. JSBIN

  97. JSBIN

  98. CSS

  99. DOCUMENTATION Producing

  100. ASCIIDOCTOR So awesome that we should 
 share a moment

    of silence.
  101. ASCIIDOCTOR

  102. ASCIIDOCTOR

  103. DEXY Keep prose and code separate. ! NERD MODE

  104. DEXY NERD MODE

  105. DEXY NERD MODE

  106. LEARNING The reference manual for web-based tools is the web

    itself.
  107. REFERENCE WebPlatform.org Mozilla Developer Network HTML5Rocks Anything Brad Frost writes

  108. 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.
  109. THANK YOU! @stephenhay