Power Tools for Browser-Based Design (Artifact 2014)

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