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
2. TIM “THE TOOLMAN” TAYLOR
3. DAVE 
 “THE TOOLMAN” RUPERT
4. TOOL RULE THE It’s not about the tools.
5. http://psdisasters.com
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