Slide 1

Slide 1 text

POWER TOOLS FOR BROWSER-BASED DESIGN Stephen Hay Artifact . Austin . May 5, 2014

Slide 2

Slide 2 text

TIM “THE TOOLMAN” TAYLOR

Slide 3

Slide 3 text

DAVE   “THE TOOLMAN” RUPERT

Slide 4

Slide 4 text

TOOL RULE THE It’s not about the tools.

Slide 5

Slide 5 text

http://psdisasters.com

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

A hammer is tool. It can be used to build things. It can also be used to break things.

Slide 8

Slide 8 text

DESIGN PROCESS IS A FUNNEL

Slide 9

Slide 9 text

THE DESIGN FUNNEL

Slide 10

Slide 10 text

THE DESIGN FUNNEL

Slide 11

Slide 11 text

VISUAL DESIGN COMPONENTS

Slide 12

Slide 12 text

VISUAL DESIGN COMPONENTS Typography Imagery Color Layout CONTENT {

Slide 13

Slide 13 text

AND ALSO…

Slide 14

Slide 14 text

AND ALSO… Creating mockups/comps “Sketching” in code Reference Documentation

Slide 15

Slide 15 text

CONTENT Dealing with

Slide 16

Slide 16 text

HTML

It’s not perfect, but for web designers it’s ubiquitous and easily converted to other structured formats. ! You should probably also learn CSS.

Slide 17

Slide 17 text

PLAIN TEXT MARKUP Markdown reStructuredText Asciidoc (and many more!)

Slide 18

Slide 18 text

DON’T LET THE COMMAND LINE FRIGHTEN YOU.

Slide 19

Slide 19 text

MARKDOWN

Slide 20

Slide 20 text

MARKDOWN

Slide 21

Slide 21 text

PANDOC Pandoc converts documents in one markup format to another, and it supports lots of formats. http://johnmacfarlane.net/pandoc/

Slide 22

Slide 22 text

PANDOC $ pandoc foo.markdown -o foo.html

Slide 23

Slide 23 text

PANDOC

Slide 24

Slide 24 text

PANDOC

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

EMMET NERD MODE

Slide 28

Slide 28 text

EMMET NERD MODE

Slide 29

Slide 29 text

TYPOGRAPHY Dealing with

Slide 30

Slide 30 text

TYPECAST Type-based prototyping ! Great for “sculpting” structured content. http://typecast.com/

Slide 31

Slide 31 text

TYPECAST

Slide 32

Slide 32 text

TYPECAST

Slide 33

Slide 33 text

CSS

Slide 34

Slide 34 text

IMAGES Dealing with

Slide 35

Slide 35 text

MORGUEFILE http://www.morguefile.com/

Slide 36

Slide 36 text

MORGUEFILE Free-to-use images. http://www.morguefile.com/

Slide 37

Slide 37 text

MORGUEFILE Free-to-use images. But if you use stock photography in your finished designs, I will hunt you down. http://www.morguefile.com/

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

MORGUEFILE

Slide 40

Slide 40 text

MORGUEFILE

Slide 41

Slide 41 text

PLACEHOLD.IT Just call a URL and you’ve got a placeholder image. http://placehold.it/

Slide 42

Slide 42 text

PLACEHOLD.IT http://placehold.it/330x185

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

ICOMOON Construct your own icon font, or download a set of icons in SVG format. http://icomoon.io/

Slide 45

Slide 45 text

ICOMOON

Slide 46

Slide 46 text

ICOMOON

Slide 47

Slide 47 text

GRUMPICON Ue the Grumpicon to get your SVGs HD(Retina)-ready. http://www.grumpicon.com/

Slide 48

Slide 48 text

GRUMPICON

Slide 49

Slide 49 text

GRUMPICON

Slide 50

Slide 50 text

IMAGEOPTIM Optimizes images (OS X) http://imageoptim.com/

Slide 51

Slide 51 text

IMAGEOPTIM

Slide 52

Slide 52 text

IMAGEOPTIM

Slide 53

Slide 53 text

IMAGEMAGICK Wicked command line   black magic for images. ! It’s actually a suite of tools. http://emmet.io/ NERD MODE

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

IMAGEMAGICKNERD MODE

Slide 56

Slide 56 text

IMAGEMAGICK convert foo.gif foo.png  NERD MODE

Slide 57

Slide 57 text

IMAGEMAGICK convert foo.gif foo.png  convert foo.jpg -resize 50% foo.png  NERD MODE

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Slide 60

Slide 60 text

IMAGEMAGICKNERD MODE

Slide 61

Slide 61 text

IMAGEMAGICKNERD MODE

Slide 62

Slide 62 text

IMAGEMAGICKNERD MODE

Slide 63

Slide 63 text

COLOR Dealing with

Slide 64

Slide 64 text

KULER Colors. https://kuler.adobe.com/

Slide 65

Slide 65 text

KULER

Slide 66

Slide 66 text

KULER

Slide 67

Slide 67 text

CSS

Slide 68

Slide 68 text

LAYOUT Dealing with

Slide 69

Slide 69 text

GRIDSET Create web layout grids with a GUI https://gridsetapp.com/

Slide 70

Slide 70 text

GRIDSET https://gridsetapp.com/

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

ISH. Stress-test your responsive layout.  http://bradfrostweb.com/demo/ish/

Slide 73

Slide 73 text

ISH. Stress-test your responsive layout.  Don’t cry. http://bradfrostweb.com/demo/ish/

Slide 74

Slide 74 text

ISH

Slide 75

Slide 75 text

ISH

Slide 76

Slide 76 text

CSS

Slide 77

Slide 77 text

MOCKUPS/COMPS Creating

Slide 78

Slide 78 text

DREAMWEAVER,   PART II

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

DREAMWEAVER,   PART II Macaw Easel CoffeeCup http://macaw.co/ https://www.easel.io/ http://www.coffeecup.com/ I DON’T ENDORSE ANY OF THESE. I’M JUST NAMING EXAMPLES.

Slide 83

Slide 83 text

FRAMEWORKS Bootstrap Zurb Foundation I DON’T ENDORSE ANY OF THESE. I’M JUST NAMING EXAMPLES. http://getbootstrap.com/ http://foundation.zurb.com/

Slide 84

Slide 84 text

STATIC SITE   GENERATORS Jekyll Dexy + Many others NERD MODE

Slide 85

Slide 85 text

STATIC SITE GENERATORS A quick example with Dexy

Slide 86

Slide 86 text

STATIC SITE GENERATORS A quick example with Dexy

Slide 87

Slide 87 text

TEMPLATING Jinja2 Mustache + Many others NERD MODE

Slide 88

Slide 88 text

TEMPLATES Jinja2 example

Slide 89

Slide 89 text

TEMPLATES Jinja2 example

Slide 90

Slide 90 text

CSS

Slide 91

Slide 91 text

SKETCHING IN CODE Tools for

Slide 92

Slide 92 text

BROWSER DEV TOOLS Tweak on an existing design   in the browser.

Slide 93

Slide 93 text

DEV TOOLS

Slide 94

Slide 94 text

DEV TOOLS

Slide 95

Slide 95 text

JSBIN Very useful playground for HTML/CSS/JS

Slide 96

Slide 96 text

JSBIN

Slide 97

Slide 97 text

JSBIN

Slide 98

Slide 98 text

CSS

Slide 99

Slide 99 text

DOCUMENTATION Producing

Slide 100

Slide 100 text

ASCIIDOCTOR So awesome that we should   share a moment of silence.

Slide 101

Slide 101 text

ASCIIDOCTOR

Slide 102

Slide 102 text

ASCIIDOCTOR

Slide 103

Slide 103 text

DEXY Keep prose and code separate. ! NERD MODE

Slide 104

Slide 104 text

DEXY NERD MODE

Slide 105

Slide 105 text

DEXY NERD MODE

Slide 106

Slide 106 text

LEARNING The reference manual for web-based tools is the web itself.

Slide 107

Slide 107 text

REFERENCE WebPlatform.org Mozilla Developer Network HTML5Rocks Anything Brad Frost writes

Slide 108

Slide 108 text

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.

Slide 109

Slide 109 text

THANK YOU! @stephenhay