The document discusses various tools that can be used for browser-based web design, including markdown, Pandoc, Emmet, Typecast, Morguefile, Placehold.it, Icomoon, Grumpicon, Imagemagick, Kuler, Gridset, Ish, Dreamweaver, frameworks like Bootstrap and Foundation, static site generators like Jekyll and Dexy, templating with Jinja2, browser dev tools, Jsbin, Asciidoc, and Dexy for documentation. It encourages learning from online references and experimenting with different tools to solve problems.

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

2. TIM
“THE TOOLMAN”
TAYLOR
http://disney.wikia.com/wiki/Tim_Allen

3. DAVE
“THE TOOLMAN”
RUPERT

4. THE
TOOL RULE
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. IT’S NOT LITERALLY
DESIGNING IN THE
BROWSER.

9. DESIGN PROCESS
IS A FUNNEL

10. THE DESIGN FUNNEL

11. THE DESIGN FUNNEL

12. VISUAL DESIGN
COMPONENTS

13. VISUAL DESIGN
COMPONENTS
Typography
Imagery
Color
Layout
Motion
CONTENT & UI/IX{

14. AND ALSO…

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

16. Dealing with
CONTENT/UI

17. <h1>HTML</h1>
It’s not perfect, but for web designers it’s
ubiquitous and easily converted to
(and from) other structured formats.

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

19. THE COMMAND LINE
http://www.flickr.com/photos/evdaimon/337754011/

20. THE COMMAND LINE
http://www.flickr.com/photos/evdaimon/337754011/

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

22. MARKDOWN

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

26. THAT’S A LOT OF
FORMATS.

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

31. NERD MODE

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

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

36. Dealing with
TYPOGRAPHY

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

38. TYPECAST

39. TYPECAST

40. Dealing with
IMAGES

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

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

43. http://www.morguefile.com/
MORGUEFILE
Free-to-use images.
But if you use stock photography in your
finished designs, I will hunt you down.

44. http://www.morguefile.com/
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.

45. MORGUEFILE

46. MORGUEFILE

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

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

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

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

51. ICOMOON

52. ICOMOON

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

54. GRUMPICON

55. GRUMPICON

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

57. IMAGEOPTIM

58. IMAGEOPTIM

59. http://www.imagemagick.org/
IMAGEMAGICK
Wicked command line
black magic for images.
!
It’s actually a suite of tools.

60. http://www.imagemagick.org/ NERD MODE
IMAGEMAGICK
Wicked command line
black magic for images.
!
It’s actually a suite of tools.

61. IMAGEMAGICK
animate • compare • composite •
conjure • convert • display • identify •
import • mogrify • montage • stream

62. IMAGEMAGICK

63. IMAGEMAGICK
convert foo.gif foo.png

64. IMAGEMAGICK
convert foo.gif foo.png
convert foo.jpg -resize 50% foo.png

65. 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

66. 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 OMGWTF MODE

67. IMAGEMAGICK

70. Dealing with
COLOR

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

72. KULER

73. KULER

74. Dealing with
LAYOUT

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

76. GRIDSEThttps://gridsetapp.com/

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

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

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

80. ISH

81. ISH

82. CSS

83. Creating
MOCKUPS/COMPS

84. DREAMWEAVER,
PART II

85. DREAMWEAVER,
PART II
GUI tools for designing that output code.

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

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

88. DREAMWEAVER,
PART II
Macaw
http://macaw.co/
Easel
https://www.easel.io/
CoffeeCup
Antetype
http://www.coffeecup.com/
http://www.antetype.com

91. FRAMEWORKS
(OR “UI TOOLKITS”)
Bootstrap
http://getbootstrap.com/
Zurb Foundation
http://foundation.zurb.com/

93. STATIC SITE
GENERATORS
Jekyll
Dexy
+ Many others

94. NERD MODE
STATIC SITE
GENERATORS
Jekyll
Dexy
+ Many others

95. STATIC SITE
GENERATORS A quick example with Dexy

96. STATIC SITE
GENERATORS A quick example with Dexy

97. TEMPLATING
Jinja2
Mustache
+ Many others

98. NERD MODE
TEMPLATING
Jinja2
Mustache
+ Many others

99. TEMPLATES Jinja2 example

100. TEMPLATES Jinja2 example

101. Tools for
SKETCHING IN
CODE

102. BROWSER DEV TOOLS
Tweak on an existing design
in the browser.

103. DEV TOOLS

104. DEV TOOLS

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

106. JSBIN

107. JSBIN

108. Producing
DOCUMENTATION

109. ASCIIDOCTOR
So awesome that we should
share a moment of silence.

112. DEXY
Keep prose and code separate.
!

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

114. DEXY

115. DEXY

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

117. REFERENCE
The docs for your chosen tool
WebPlatform.org
Mozilla Developer Network
HTML5Rocks
Anything Brad Frost writes

118. 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.

119. THANK YOU!
@stephenhay