$30 off During Our Annual Pro Sale. View Details »

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.

Stephen Hay

May 05, 2014
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. POWER TOOLS FOR
    BROWSER-BASED
    DESIGN Stephen Hay
    Artifact . Austin . May 5, 2014

    View Slide

  2. TIM “THE TOOLMAN” TAYLOR

    View Slide

  3. DAVE 

    “THE TOOLMAN”
    RUPERT

    View Slide

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

    View Slide

  5. http://psdisasters.com

    View Slide

  6. View Slide

  7. A hammer is tool.
    It can be used to build things.
    It can also be used to break things.

    View Slide

  8. DESIGN PROCESS
    IS A FUNNEL

    View Slide

  9. THE DESIGN FUNNEL

    View Slide

  10. THE DESIGN FUNNEL

    View Slide

  11. VISUAL DESIGN
    COMPONENTS

    View Slide

  12. VISUAL DESIGN
    COMPONENTS
    Typography
    Imagery
    Color
    Layout
    CONTENT
    {

    View Slide

  13. AND ALSO…

    View Slide

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

    View Slide

  15. CONTENT
    Dealing with

    View Slide

  16. HTML
    It’s not perfect, but for web designers it’s
    ubiquitous and easily converted to other
    structured formats.
    !
    You should probably also learn CSS.

    View Slide

  17. PLAIN TEXT MARKUP
    Markdown
    reStructuredText
    Asciidoc
    (and many more!)

    View Slide

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

    View Slide

  19. MARKDOWN

    View Slide

  20. MARKDOWN

    View Slide

  21. PANDOC
    Pandoc converts documents in one
    markup format to another, and it
    supports lots of formats.
    http://johnmacfarlane.net/pandoc/

    View Slide

  22. PANDOC
    $ pandoc foo.markdown -o foo.html

    View Slide

  23. PANDOC

    View Slide

  24. PANDOC

    View Slide

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

    View Slide

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

    View Slide

  27. EMMET NERD MODE

    View Slide

  28. EMMET NERD MODE

    View Slide

  29. TYPOGRAPHY
    Dealing with

    View Slide

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

    View Slide

  31. TYPECAST

    View Slide

  32. TYPECAST

    View Slide

  33. CSS

    View Slide

  34. IMAGES
    Dealing with

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  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/

    View Slide

  39. MORGUEFILE

    View Slide

  40. MORGUEFILE

    View Slide

  41. PLACEHOLD.IT
    Just call a URL and you’ve got a
    placeholder image.
    http://placehold.it/

    View Slide

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

    View Slide

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

    View Slide

  44. ICOMOON
    Construct your own icon font, or
    download a set of icons in SVG format.
    http://icomoon.io/

    View Slide

  45. ICOMOON

    View Slide

  46. ICOMOON

    View Slide

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

    View Slide

  48. GRUMPICON

    View Slide

  49. GRUMPICON

    View Slide

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

    View Slide

  51. IMAGEOPTIM

    View Slide

  52. IMAGEOPTIM

    View Slide

  53. IMAGEMAGICK
    Wicked command line 

    black magic for images.
    !
    It’s actually a suite of tools.
    http://emmet.io/
    NERD MODE

    View Slide

  54. IMAGEMAGICK
    animate • compare • composite •
    conjure • convert • display • identify •
    import • mogrify • montage • stream
    NERD MODE

    View Slide

  55. IMAGEMAGICKNERD MODE

    View Slide

  56. IMAGEMAGICK
    convert foo.gif foo.png

    NERD MODE

    View Slide

  57. IMAGEMAGICK
    convert foo.gif foo.png

    convert foo.jpg -resize 50% foo.png

    NERD MODE

    View Slide

  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

    View Slide

  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

    View Slide

  60. IMAGEMAGICKNERD MODE

    View Slide

  61. IMAGEMAGICKNERD MODE

    View Slide

  62. IMAGEMAGICKNERD MODE

    View Slide

  63. COLOR
    Dealing with

    View Slide

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

    View Slide

  65. KULER

    View Slide

  66. KULER

    View Slide

  67. CSS

    View Slide

  68. LAYOUT
    Dealing with

    View Slide

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

    View Slide

  70. GRIDSET
    https://gridsetapp.com/

    View Slide

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

    View Slide

  72. ISH.
    Stress-test your responsive layout.

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

    View Slide

  73. ISH.
    Stress-test your responsive layout.

    Don’t cry.
    http://bradfrostweb.com/demo/ish/

    View Slide

  74. ISH

    View Slide

  75. ISH

    View Slide

  76. CSS

    View Slide

  77. MOCKUPS/COMPS
    Creating

    View Slide

  78. DREAMWEAVER, 

    PART II

    View Slide

  79. DREAMWEAVER, 

    PART II
    GUI tools for designing that output code.


    View Slide

  80. DREAMWEAVER, 

    PART II
    GUI tools for designing that output code.

    Advantage: mockup in browser

    View Slide

  81. DREAMWEAVER, 

    PART II
    GUI tools for designing that output code.

    Advantage: mockup in browser
    Disadvantage: magic

    View Slide

  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.

    View Slide

  83. FRAMEWORKS
    Bootstrap
    Zurb Foundation
    I DON’T ENDORSE ANY OF THESE.
    I’M JUST NAMING EXAMPLES.
    http://getbootstrap.com/
    http://foundation.zurb.com/

    View Slide

  84. STATIC SITE 

    GENERATORS
    Jekyll
    Dexy
    + Many others
    NERD MODE

    View Slide

  85. STATIC SITE
    GENERATORS A quick example with Dexy

    View Slide

  86. STATIC SITE
    GENERATORS A quick example with Dexy

    View Slide

  87. TEMPLATING
    Jinja2
    Mustache
    + Many others
    NERD MODE

    View Slide

  88. TEMPLATES
    Jinja2 example

    View Slide

  89. TEMPLATES
    Jinja2 example

    View Slide

  90. CSS

    View Slide

  91. SKETCHING IN
    CODE
    Tools for

    View Slide

  92. BROWSER DEV TOOLS
    Tweak on an existing design 

    in the browser.

    View Slide

  93. DEV TOOLS

    View Slide

  94. DEV TOOLS

    View Slide

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

    View Slide

  96. JSBIN

    View Slide

  97. JSBIN

    View Slide

  98. CSS

    View Slide

  99. DOCUMENTATION
    Producing

    View Slide

  100. ASCIIDOCTOR
    So awesome that we should 

    share a moment of silence.

    View Slide

  101. ASCIIDOCTOR

    View Slide

  102. ASCIIDOCTOR

    View Slide

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

    View Slide

  104. DEXY NERD MODE

    View Slide

  105. DEXY NERD MODE

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  109. THANK YOU!
    @stephenhay

    View Slide