Power Tools For Browser-Based Design
14 likes3,267 views
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.
Ad
More Related Content
Similar to Power Tools For Browser-Based Design (20)
More from Stephen Hay (20)
Ad
Recently uploaded (20)
![Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/halsteadssoftwarescienceputnamsmodel1-250502175814-4c85707e-thumbnail.jpg?width=560&fit=bounds)
![Download Chimera Tool Setup V42.47.0924 [Latest Version]](https://cdn.slidesharecdn.com/ss_thumbnails/artificialintelligence4-250505221011-8e660a4e-thumbnail.jpg?width=560&fit=bounds)
Ad
Power Tools For Browser-Based Design
- 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.
- 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
- 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
- 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.
- 37. http://typecast.com/ TYPECAST Type-based prototyping ! Great for “sculpting” structured content.
- 38. TYPECAST
- 39. TYPECAST
- 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.
- 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
- 72. KULER
- 73. KULER
- 75. https://gridsetapp.com/ GRIDSET Create web layout grids with a GUI
- 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
- 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
- 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
- 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.