Power Tools for Browser-Based Design (Artifact 2014)

Various tools (some non-obvious) that designers might consider using for web 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