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

TOOL RULETHE

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

CONTENT/UIDealing with

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

PLAIN TEXT MARKUPMarkdown

reStructuredText

Asciidoc

(and many more!)

THECOMMANDLINE

http://www.flickr.com/photos/evdaimon/337754011/

THECOMMANDLINE

http://www.flickr.com/photos/evdaimon/337754011/

DON’T LET THE COMMAND LINE FRIGHTEN YOU.

MARKDOWN

PANDOCPandoc converts documents in one markup format to another, and it supports lots of formats.

http://johnmacfarlane.net/pandoc/

THAT’S A LOT OF FORMATS.

$ pandoc foo.markdown -o foo.html

PANDOC

NERD MODE

EMMETEmmet allows you to construct HTML (and CSS) via a CSS selector-like syntax.

http://emmet.io/

EMMETEmmet allows you to construct HTML (and CSS) via a CSS selector-like syntax.

http://emmet.io/NERD MODE

TYPOGRAPHYDealing with

TYPECASTType-based prototyping

!

Great for “sculpting” structured content.

http://typecast.com/

TYPECAST

TYPECAST

IMAGESDealing with

MORGUEFILEhttp://www.morguefile.com/

MORGUEFILEFree-to-use images.

http://www.morguefile.com/

MORGUEFILEFree-to-use images.

But if you use stock photography in your finished designs, I will hunt you down.

http://www.morguefile.com/

MORGUEFILEFree-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/

MORGUEFILE

MORGUEFILE

PLACEHOLD.ITJust call a URL and you’ve got a placeholder image.

http://placehold.it/

PLACEHOLD.IThttp://placehold.it/330x185

PLACEHOLD.IThttp://placehold.it/330x185

http://placehold.it/330x185/b58900/ffffff

ICOMOONConstruct your own icon font, or download a set of icons in SVG format.

http://icomoon.io/

ICOMOON

ICOMOON

GRUMPICONUe the Grumpicon to get your SVGs HD(Retina)-ready.

http://www.grumpicon.com/

GRUMPICON

GRUMPICON

IMAGEOPTIMOptimizes images (OS X)

http://imageoptim.com/

IMAGEOPTIM

IMAGEOPTIM

IMAGEMAGICKWicked command line black magic for images.

!

It’s actually a suite of tools.

http://www.imagemagick.org/

IMAGEMAGICKWicked command line black magic for images.

!

It’s actually a suite of tools.

http://www.imagemagick.org/NERD MODE

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

IMAGEMAGICK

IMAGEMAGICKconvert foo.gif foo.png

IMAGEMAGICKconvert foo.gif foo.png

convert foo.jpg -resize 50% foo.png

IMAGEMAGICKconvert 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

IMAGEMAGICKconvert 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

IMAGEMAGICK

COLORDealing with

KULERColors.

https://kuler.adobe.com/

KULER

KULER

LAYOUTDealing with

GRIDSETCreate web layout grids with a GUI

https://gridsetapp.com/

GRIDSET https://gridsetapp.com/

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.

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

ISH

ISH

CSS

MOCKUPS/COMPSCreating

DREAMWEAVER, PART II

DREAMWEAVER, PART IIGUI tools for designing that output code.

DREAMWEAVER, PART IIGUI tools for designing that output code.

Advantage: mockup in browser

DREAMWEAVER, PART IIGUI tools for designing that output code.

Advantage: mockup in browser

Disadvantage: magic

DREAMWEAVER, PART IIMacaw

Easel

CoffeeCup

Antetype

http://macaw.co/

https://www.easel.io/

http://www.coffeecup.com/

http://www.antetype.com

FRAMEWORKS (OR “UI TOOLKITS”)

Bootstrap

Zurb Foundation

http://getbootstrap.com/

http://foundation.zurb.com/

STATIC SITE GENERATORSJekyll

Dexy

+ Many others

STATIC SITE GENERATORSJekyll

Dexy

+ Many others

NERD MODE

STATIC SITE GENERATORS A quick example with Dexy

STATIC SITE GENERATORS A quick example with Dexy

TEMPLATINGJinja2

Mustache

+ Many others

TEMPLATINGJinja2

Mustache

+ Many others

NERD MODE

TEMPLATES Jinja2 example

TEMPLATES Jinja2 example

SKETCHING IN CODE

Tools for

BROWSER DEV TOOLSTweak on an existing design in the browser.

DEV TOOLS

DEV TOOLS

JSBINVery useful playground for HTML/CSS/JS

JSBIN

JSBIN

DOCUMENTATIONProducing

ASCIIDOCTORSo awesome that we should share a moment of silence.

DEXYKeep prose and code separate.

!

DEXYKeep prose and code separate.

!

NERD MODE

DEXY

DEXY

LEARNINGThe reference manual for web-based tools is the web itself.

REFERENCEThe docs for your chosen tool

WebPlatform.org

Mozilla Developer Network

HTML5Rocks

Anything Brad Frost writes

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.

THANK YOU!@stephenhay