Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Power Tools for Browser-Based Design (Artifact 2014)

Power Tools for Browser-Based Design (Artifact 2014)

Various tools (some non-obvious) that designers might consider using for web design.

Stephen Hay

May 05, 2014
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. A hammer is tool. It can be used to build

    things. It can also be used to break things.
  2. <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.
  3. PANDOC Pandoc converts documents in one markup format to another,

    and it supports lots of formats. http://johnmacfarlane.net/pandoc/
  4. EMMET Emmet allows you to construct HTML via a CSS

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

    selector-like syntax. http://emmet.io/ NERD MODE
  6. CSS

  7. MORGUEFILE Free-to-use images. But if you use stock photography in

    your finished designs, I will hunt you down. http://www.morguefile.com/
  8. 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/
  9. ICOMOON Construct your own icon font, or download a set

    of icons in SVG format. http://icomoon.io/
  10. IMAGEMAGICK Wicked command line 
 black magic for images. !

    It’s actually a suite of tools. http://emmet.io/ NERD MODE
  11. IMAGEMAGICK animate • compare • composite • conjure • convert

    • display • identify • import • mogrify • montage • stream NERD MODE
  12. 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
  13. 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
  14. CSS

  15. ISH

  16. ISH

  17. CSS

  18. DREAMWEAVER, 
 PART II GUI tools for designing that output

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

    code.
 Advantage: mockup in browser Disadvantage: magic
  20. FRAMEWORKS Bootstrap Zurb Foundation I DON’T ENDORSE ANY OF THESE.

    I’M JUST NAMING EXAMPLES. http://getbootstrap.com/ http://foundation.zurb.com/
  21. CSS

  22. CSS

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