Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
POWER TOOLS FOR 
BROWSER-BASED 
DESIGN Stephen Hay 
Artifact . Providence . 20140929
TIM 
“THE TOOLMAN” 
TAYLOR 
http://disney.wikia.com/wiki/Tim_Allen
DAVE 
“THE TOOLMAN” 
RUPERT
THE 
TOOL RULE 
It’s not about the tools.
http://psdisasters.com
A hammer is tool. 
It can be used to build things. 
It can also be used to break things.
IT’S NOT LITERALLY 
DESIGNING IN THE 
BROWSER.
DESIGN PROCESS 
IS A FUNNEL
THE DESIGN FUNNEL
THE DESIGN FUNNEL
VISUAL DESIGN 
COMPONENTS
VISUAL DESIGN 
COMPONENTS 
Typography 
Imagery 
Color 
Layout 
Motion 
CONTENT & UI/IX{
AND ALSO…
AND ALSO… 
Creating mockups/comps 
“Sketching” in code 
Reference 
Documentation
Dealing with 
CONTENT/UI
<h1>HTML</h1> 
It’s not perfect, but for web designers it’s 
ubiquitous and easily converted to 
(and from) other structur...
PLAIN TEXT MARKUP 
Markdown 
reStructuredText 
Asciidoc 
(and many more!)
THE COMMAND LINE 
http://www.flickr.com/photos/evdaimon/337754011/
THE COMMAND LINE 
http://www.flickr.com/photos/evdaimon/337754011/
DON’T LET THE COMMAND 
LINE FRIGHTEN YOU.
MARKDOWN
http://johnmacfarlane.net/pandoc/ 
PANDOC 
Pandoc converts documents in one 
markup format to another, and it 
supports lo...
THAT’S A LOT OF 
FORMATS.
PANDOC 
$ pandoc foo.markdown -o foo.html
NERD MODE
http://emmet.io/ 
EMMET 
Emmet allows you to construct HTML 
(and CSS) via a CSS selector-like syntax.
http://emmet.io/ NERD MODE 
EMMET 
Emmet allows you to construct HTML 
(and CSS) via a CSS selector-like syntax.
Dealing with 
TYPOGRAPHY
http://typecast.com/ 
TYPECAST 
Type-based prototyping 
! 
Great for “sculpting” structured content.
TYPECAST
TYPECAST
Dealing with 
IMAGES
http://www.morguefile.com/ 
MORGUEFILE
http://www.morguefile.com/ 
MORGUEFILE 
Free-to-use images.
http://www.morguefile.com/ 
MORGUEFILE 
Free-to-use images. 
But if you use stock photography in your 
finished designs, I...
http://www.morguefile.com/ 
MORGUEFILE 
Free-to-use images. 
But if you use stock photography in your 
finished designs, I...
MORGUEFILE
MORGUEFILE
http://placehold.it/ 
PLACEHOLD.IT 
Just call a URL and you’ve got a 
placeholder image.
PLACEHOLD.IT 
http://placehold.it/330x185
PLACEHOLD.IT 
http://placehold.it/330x185 
http://placehold.it/330x185/b58900/ffffff
http://icomoon.io/ 
ICOMOON 
Construct your own icon font, or 
download a set of icons in SVG format.
ICOMOON
ICOMOON
http://www.grumpicon.com/ 
GRUMPICON 
Ue the Grumpicon to get your SVGs 
HD(Retina)-ready.
GRUMPICON
GRUMPICON
http://imageoptim.com/ 
IMAGEOPTIM 
Optimizes images (OS X)
IMAGEOPTIM
IMAGEOPTIM
http://www.imagemagick.org/ 
IMAGEMAGICK 
Wicked command line 
black magic for images. 
! 
It’s actually a suite of tools.
http://www.imagemagick.org/ NERD MODE 
IMAGEMAGICK 
Wicked command line 
black magic for images. 
! 
It’s actually a suite...
IMAGEMAGICK 
animate • compare • composite • 
conjure • convert • display • identify • 
import • mogrify • montage • strea...
IMAGEMAGICK
IMAGEMAGICK 
convert foo.gif foo.png
IMAGEMAGICK 
convert foo.gif foo.png 
convert foo.jpg -resize 50% foo.png
IMAGEMAGICK 
convert foo.gif foo.png 
convert foo.jpg -resize 50% foo.png 
convert input.png -colorspace RGB 
+sigmoidal-c...
IMAGEMAGICK 
convert foo.gif foo.png 
convert foo.jpg -resize 50% foo.png 
convert input.png -colorspace RGB 
+sigmoidal-c...
IMAGEMAGICK
Dealing with 
COLOR
https://kuler.adobe.com/ 
KULER 
Colors.
KULER
KULER
Dealing with 
LAYOUT
https://gridsetapp.com/ 
GRIDSET 
Create web layout grids with a GUI
GRIDSEThttps://gridsetapp.com/
http://bradfrostweb.com/demo/ish/ 
ISH.
http://bradfrostweb.com/demo/ish/ 
ISH. 
Stress-test your responsive layout.
http://bradfrostweb.com/demo/ish/ 
ISH. 
Stress-test your responsive layout. 
Don’t cry.
ISH
ISH
CSS
Creating 
MOCKUPS/COMPS
DREAMWEAVER, 
PART II
DREAMWEAVER, 
PART II 
GUI tools for designing that output code.
DREAMWEAVER, 
PART II 
GUI tools for designing that output code. 
Advantage: mockup in browser
DREAMWEAVER, 
PART II 
GUI tools for designing that output code. 
Advantage: mockup in browser 
Disadvantage: magic
DREAMWEAVER, 
PART II 
Macaw 
http://macaw.co/ 
Easel 
https://www.easel.io/ 
CoffeeCup 
Antetype 
http://www.coffeecup.co...
FRAMEWORKS 
(OR “UI TOOLKITS”) 
Bootstrap 
http://getbootstrap.com/ 
Zurb Foundation 
http://foundation.zurb.com/
STATIC SITE 
GENERATORS 
Jekyll 
Dexy 
+ Many others
NERD MODE 
STATIC SITE 
GENERATORS 
Jekyll 
Dexy 
+ Many others
STATIC SITE 
GENERATORS A quick example with Dexy
STATIC SITE 
GENERATORS A quick example with Dexy
TEMPLATING 
Jinja2 
Mustache 
+ Many others
NERD MODE 
TEMPLATING 
Jinja2 
Mustache 
+ Many others
TEMPLATES Jinja2 example
TEMPLATES Jinja2 example
Tools for 
SKETCHING IN 
CODE
BROWSER DEV TOOLS 
Tweak on an existing design 
in the browser.
DEV TOOLS
DEV TOOLS
JSBIN 
Very useful playground for HTML/CSS/JS
JSBIN
JSBIN
Producing 
DOCUMENTATION
ASCIIDOCTOR 
So awesome that we should 
share a moment of silence.
DEXY 
Keep prose and code separate. 
!
DEXY 
Keep prose and code separate. 
! 
NERD MODE
DEXY
DEXY
LEARNING 
The reference manual for web-based 
tools is the web itself.
REFERENCE 
The docs for your chosen tool 
WebPlatform.org 
Mozilla Developer Network 
HTML5Rocks 
Anything Brad Frost writ...
RELAX. 
If something solves a problem for you, 
don’t be afraid to add it to your toolbox. 
! 
Part of the fun of web desi...
THANK YOU! 
@stephenhay
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Power Tools For Browser-Based Design
Upcoming SlideShare
Loading in …5
×

Power Tools For Browser-Based Design

3,041 views

Published on

My talk at Artifact Conference 2014. This particular deck is from the conference in Providence.

Published in: Design
  • Be the first to comment

Power Tools For Browser-Based Design

  1. 1. POWER TOOLS FOR BROWSER-BASED DESIGN Stephen Hay Artifact . Providence . 20140929
  2. 2. TIM “THE TOOLMAN” TAYLOR http://disney.wikia.com/wiki/Tim_Allen
  3. 3. DAVE “THE TOOLMAN” RUPERT
  4. 4. THE TOOL RULE It’s not about the tools.
  5. 5. http://psdisasters.com
  6. 6. A hammer is tool. It can be used to build things. It can also be used to break things.
  7. 7. IT’S NOT LITERALLY DESIGNING IN THE BROWSER.
  8. 8. DESIGN PROCESS IS A FUNNEL
  9. 9. THE DESIGN FUNNEL
  10. 10. THE DESIGN FUNNEL
  11. 11. VISUAL DESIGN COMPONENTS
  12. 12. VISUAL DESIGN COMPONENTS Typography Imagery Color Layout Motion CONTENT & UI/IX{
  13. 13. AND ALSO…
  14. 14. AND ALSO… Creating mockups/comps “Sketching” in code Reference Documentation
  15. 15. Dealing with CONTENT/UI
  16. 16. <h1>HTML</h1> It’s not perfect, but for web designers it’s ubiquitous and easily converted to (and from) other structured formats.
  17. 17. PLAIN TEXT MARKUP Markdown reStructuredText Asciidoc (and many more!)
  18. 18. THE COMMAND LINE http://www.flickr.com/photos/evdaimon/337754011/
  19. 19. THE COMMAND LINE http://www.flickr.com/photos/evdaimon/337754011/
  20. 20. DON’T LET THE COMMAND LINE FRIGHTEN YOU.
  21. 21. MARKDOWN
  22. 22. http://johnmacfarlane.net/pandoc/ PANDOC Pandoc converts documents in one markup format to another, and it supports lots of formats.
  23. 23. THAT’S A LOT OF FORMATS.
  24. 24. PANDOC $ pandoc foo.markdown -o foo.html
  25. 25. NERD MODE
  26. 26. http://emmet.io/ EMMET Emmet allows you to construct HTML (and CSS) via a CSS selector-like syntax.
  27. 27. http://emmet.io/ NERD MODE EMMET Emmet allows you to construct HTML (and CSS) via a CSS selector-like syntax.
  28. 28. Dealing with TYPOGRAPHY
  29. 29. http://typecast.com/ TYPECAST Type-based prototyping ! Great for “sculpting” structured content.
  30. 30. TYPECAST
  31. 31. TYPECAST
  32. 32. Dealing with IMAGES
  33. 33. http://www.morguefile.com/ MORGUEFILE
  34. 34. http://www.morguefile.com/ MORGUEFILE Free-to-use images.
  35. 35. http://www.morguefile.com/ MORGUEFILE Free-to-use images. But if you use stock photography in your finished designs, I will hunt you down.
  36. 36. 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.
  37. 37. MORGUEFILE
  38. 38. MORGUEFILE
  39. 39. http://placehold.it/ PLACEHOLD.IT Just call a URL and you’ve got a placeholder image.
  40. 40. PLACEHOLD.IT http://placehold.it/330x185
  41. 41. PLACEHOLD.IT http://placehold.it/330x185 http://placehold.it/330x185/b58900/ffffff
  42. 42. http://icomoon.io/ ICOMOON Construct your own icon font, or download a set of icons in SVG format.
  43. 43. ICOMOON
  44. 44. ICOMOON
  45. 45. http://www.grumpicon.com/ GRUMPICON Ue the Grumpicon to get your SVGs HD(Retina)-ready.
  46. 46. GRUMPICON
  47. 47. GRUMPICON
  48. 48. http://imageoptim.com/ IMAGEOPTIM Optimizes images (OS X)
  49. 49. IMAGEOPTIM
  50. 50. IMAGEOPTIM
  51. 51. http://www.imagemagick.org/ IMAGEMAGICK Wicked command line black magic for images. ! It’s actually a suite of tools.
  52. 52. http://www.imagemagick.org/ NERD MODE IMAGEMAGICK Wicked command line black magic for images. ! It’s actually a suite of tools.
  53. 53. IMAGEMAGICK animate • compare • composite • conjure • convert • display • identify • import • mogrify • montage • stream
  54. 54. IMAGEMAGICK
  55. 55. IMAGEMAGICK convert foo.gif foo.png
  56. 56. IMAGEMAGICK convert foo.gif foo.png convert foo.jpg -resize 50% foo.png
  57. 57. 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
  58. 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 OMGWTF MODE
  59. 59. IMAGEMAGICK
  60. 60. Dealing with COLOR
  61. 61. https://kuler.adobe.com/ KULER Colors.
  62. 62. KULER
  63. 63. KULER
  64. 64. Dealing with LAYOUT
  65. 65. https://gridsetapp.com/ GRIDSET Create web layout grids with a GUI
  66. 66. GRIDSEThttps://gridsetapp.com/
  67. 67. http://bradfrostweb.com/demo/ish/ ISH.
  68. 68. http://bradfrostweb.com/demo/ish/ ISH. Stress-test your responsive layout.
  69. 69. http://bradfrostweb.com/demo/ish/ ISH. Stress-test your responsive layout. Don’t cry.
  70. 70. ISH
  71. 71. ISH
  72. 72. CSS
  73. 73. Creating MOCKUPS/COMPS
  74. 74. DREAMWEAVER, PART II
  75. 75. DREAMWEAVER, PART II GUI tools for designing that output code.
  76. 76. DREAMWEAVER, PART II GUI tools for designing that output code. Advantage: mockup in browser
  77. 77. DREAMWEAVER, PART II GUI tools for designing that output code. Advantage: mockup in browser Disadvantage: magic
  78. 78. DREAMWEAVER, PART II Macaw http://macaw.co/ Easel https://www.easel.io/ CoffeeCup Antetype http://www.coffeecup.com/ http://www.antetype.com
  79. 79. FRAMEWORKS (OR “UI TOOLKITS”) Bootstrap http://getbootstrap.com/ Zurb Foundation http://foundation.zurb.com/
  80. 80. STATIC SITE GENERATORS Jekyll Dexy + Many others
  81. 81. NERD MODE STATIC SITE GENERATORS Jekyll Dexy + Many others
  82. 82. STATIC SITE GENERATORS A quick example with Dexy
  83. 83. STATIC SITE GENERATORS A quick example with Dexy
  84. 84. TEMPLATING Jinja2 Mustache + Many others
  85. 85. NERD MODE TEMPLATING Jinja2 Mustache + Many others
  86. 86. TEMPLATES Jinja2 example
  87. 87. TEMPLATES Jinja2 example
  88. 88. Tools for SKETCHING IN CODE
  89. 89. BROWSER DEV TOOLS Tweak on an existing design in the browser.
  90. 90. DEV TOOLS
  91. 91. DEV TOOLS
  92. 92. JSBIN Very useful playground for HTML/CSS/JS
  93. 93. JSBIN
  94. 94. JSBIN
  95. 95. Producing DOCUMENTATION
  96. 96. ASCIIDOCTOR So awesome that we should share a moment of silence.
  97. 97. DEXY Keep prose and code separate. !
  98. 98. DEXY Keep prose and code separate. ! NERD MODE
  99. 99. DEXY
  100. 100. DEXY
  101. 101. LEARNING The reference manual for web-based tools is the web itself.
  102. 102. REFERENCE The docs for your chosen tool WebPlatform.org Mozilla Developer Network HTML5Rocks Anything Brad Frost writes
  103. 103. 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.
  104. 104. THANK YOU! @stephenhay

×