Downloaded 68 times
Uploaded byStephen Hay
Power Tools For Browser-Based Design
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.
More Related Content
Similar to Power Tools For Browser-Based Design
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.
- 5.
- 7. A hammer istool. 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 ISA FUNNEL
- 10.
- 11.
- 12.
- 13. VISUAL DESIGN COMPONENTS Typography Imagery Color Layout Motion CONTENT & UI/IX{
- 14.
- 15. AND ALSO… Creatingmockups/comps “Sketching” in code Reference Documentation
- 16.
- 17. <h1>HTML</h1> It’s notperfect, 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 THECOMMAND LINE FRIGHTEN YOU.
- 22.
- 25. http://johnmacfarlane.net/pandoc/ PANDOC Pandocconverts documents in one markup format to another, and it supports lots of formats.
- 26. THAT’S A LOTOF FORMATS.
- 27. PANDOC $ pandocfoo.markdown -o foo.html
- 31.
- 32. http://emmet.io/ EMMET Emmetallows 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.
- 37. http://typecast.com/ TYPECAST Type-basedprototyping ! Great for “sculpting” structured content.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. http://www.morguefile.com/ MORGUEFILE Free-to-useimages. But if you use stock photography in your finished designs, I will hunt you down.
- 44. http://www.morguefile.com/ MORGUEFILE Free-to-useimages. But if you use stock photography in your finished designs, I will hunt you down. And I will kill you.
- 45.
- 46.
- 47. http://placehold.it/ PLACEHOLD.IT Justcall a URL and you’ve got a placeholder image.
- 48.
- 49.
- 50. http://icomoon.io/ ICOMOON Constructyour own icon font, or download a set of icons in SVG format.
- 51.
- 52.
- 53. http://www.grumpicon.com/ GRUMPICON Uethe Grumpicon to get your SVGs HD(Retina)-ready.
- 54.
- 55.
- 56. http://imageoptim.com/ IMAGEOPTIM Optimizesimages (OS X)
- 57.
- 58.
- 59. http://www.imagemagick.org/ IMAGEMAGICK Wickedcommand 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.
- 63. IMAGEMAGICK convert foo.giffoo.png
- 64. IMAGEMAGICK convert foo.giffoo.png convert foo.jpg -resize 50% foo.png
- 65. IMAGEMAGICK convert foo.giffoo.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.giffoo.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.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. https://gridsetapp.com/ GRIDSET Createweb layout grids with a GUI
- 76.
- 77.
- 78. http://bradfrostweb.com/demo/ish/ ISH. Stress-testyour responsive layout.
- 79. http://bradfrostweb.com/demo/ish/ ISH. Stress-testyour responsive layout. Don’t cry.
- 80.
- 81.
- 82.
- 83.
- 84.
- 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 “UITOOLKITS”) Bootstrap http://getbootstrap.com/ Zurb Foundation http://foundation.zurb.com/
- 93. STATIC SITE GENERATORS Jekyll Dexy + Many others
- 94. NERD MODE STATICSITE GENERATORS Jekyll Dexy + Many others
- 95. STATIC SITE GENERATORSA quick example with Dexy
- 96. STATIC SITE GENERATORSA quick example with Dexy
- 97. TEMPLATING Jinja2 Mustache + Many others
- 98. NERD MODE TEMPLATING Jinja2 Mustache + Many others
- 99.
- 100.
- 101. Tools for SKETCHINGIN CODE
- 102. BROWSER DEV TOOLS Tweak on an existing design in the browser.
- 103.
- 104.
- 105. JSBIN Very usefulplayground for HTML/CSS/JS
- 106.
- 107.
- 108.
- 109. ASCIIDOCTOR So awesomethat we should share a moment of silence.
- 112. DEXY Keep proseand code separate. !
- 113. DEXY Keep proseand code separate. ! NERD MODE
- 114.
- 115.
- 116. LEARNING The referencemanual for web-based tools is the web itself.
- 117. REFERENCE The docsfor your chosen tool WebPlatform.org Mozilla Developer Network HTML5Rocks Anything Brad Frost writes
- 118. RELAX. If somethingsolves 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.