Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Power Tools for Browser-Based Design (Artifact ...
Search
Stephen Hay
May 05, 2014
Design
6
510
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
Share
More Decks by Stephen Hay
See All by Stephen Hay
The Virtues of Low-fi
stephenhay
1
160
CSS For Good, Not Evil
stephenhay
2
1.4k
The Tail and Its Dog
stephenhay
1
300
From Deception to Clarity
stephenhay
4
630
Sculpting Text
stephenhay
4
890
The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)
stephenhay
2
550
Flexbox: One Giant Leap for Web Layout
stephenhay
6
400
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
stephenhay
9
930
Flexbox: One Giant Leap for Web Layout
stephenhay
5
160
Other Decks in Design
See All in Design
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
Rayout Pattern 01
one0
0
1.5k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.2k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
NAHO SHIMONO_Portfolio2025
nahohphp
0
120
最速[要出典]アクセシビリティチェック
magi1125
2
200
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
ZKK_001.pdf
nicholaspegu
0
1.5k
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Music & Morning Musume
bryan
46
6.3k
Adopting Sorbet at Scale
ufuk
74
9.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Scaling GitHub
holman
459
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Transcript
POWER TOOLS FOR BROWSER-BASED DESIGN Stephen Hay Artifact . Austin
. May 5, 2014
TIM “THE TOOLMAN” TAYLOR
DAVE “THE TOOLMAN” RUPERT
TOOL RULE THE It’s not about the tools.
http://psdisasters.com
None
A hammer is tool. It can be used to build
things. It can also be used to break things.
DESIGN PROCESS IS A FUNNEL
THE DESIGN FUNNEL
THE DESIGN FUNNEL
VISUAL DESIGN COMPONENTS
VISUAL DESIGN COMPONENTS Typography Imagery Color Layout CONTENT {
AND ALSO…
AND ALSO… Creating mockups/comps “Sketching” in code Reference Documentation
CONTENT Dealing with
<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.
PLAIN TEXT MARKUP Markdown reStructuredText Asciidoc (and many more!)
DON’T LET THE COMMAND LINE FRIGHTEN YOU.
MARKDOWN
MARKDOWN
PANDOC Pandoc converts documents in one markup format to another,
and it supports lots of formats. http://johnmacfarlane.net/pandoc/
PANDOC $ pandoc foo.markdown -o foo.html
PANDOC
PANDOC
EMMET Emmet allows you to construct HTML via a CSS
selector-like syntax. http://emmet.io/
EMMET Emmet allows you to construct HTML via a CSS
selector-like syntax. http://emmet.io/ NERD MODE
EMMET NERD MODE
EMMET NERD MODE
TYPOGRAPHY Dealing with
TYPECAST Type-based prototyping ! Great for “sculpting” structured content. http://typecast.com/
TYPECAST
TYPECAST
CSS
IMAGES Dealing with
MORGUEFILE http://www.morguefile.com/
MORGUEFILE Free-to-use images. http://www.morguefile.com/
MORGUEFILE Free-to-use images. But if you use stock photography in
your finished designs, I will hunt you down. 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. http://www.morguefile.com/
MORGUEFILE
MORGUEFILE
PLACEHOLD.IT Just call a URL and you’ve got a placeholder
image. http://placehold.it/
PLACEHOLD.IT http://placehold.it/330x185
PLACEHOLD.IT http://placehold.it/330x185 http://placehold.it/330x185/b58900/ffffff
ICOMOON Construct your own icon font, or download a set
of icons in SVG format. http://icomoon.io/
ICOMOON
ICOMOON
GRUMPICON Ue the Grumpicon to get your SVGs HD(Retina)-ready. http://www.grumpicon.com/
GRUMPICON
GRUMPICON
IMAGEOPTIM Optimizes images (OS X) http://imageoptim.com/
IMAGEOPTIM
IMAGEOPTIM
IMAGEMAGICK Wicked command line black magic for images. !
It’s actually a suite of tools. http://emmet.io/ NERD MODE
IMAGEMAGICK animate • compare • composite • conjure • convert
• display • identify • import • mogrify • montage • stream NERD MODE
IMAGEMAGICKNERD MODE
IMAGEMAGICK convert foo.gif foo.png NERD MODE
IMAGEMAGICK convert foo.gif foo.png convert foo.jpg -resize 50% foo.png NERD
MODE
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
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
IMAGEMAGICKNERD MODE
IMAGEMAGICKNERD MODE
IMAGEMAGICKNERD MODE
COLOR Dealing with
KULER Colors. https://kuler.adobe.com/
KULER
KULER
CSS
LAYOUT Dealing with
GRIDSET Create 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/COMPS Creating
DREAMWEAVER, PART II
DREAMWEAVER, PART II GUI tools for designing that output
code.
DREAMWEAVER, PART II GUI tools for designing that output
code. Advantage: mockup in browser
DREAMWEAVER, PART II GUI tools for designing that output
code. Advantage: mockup in browser Disadvantage: magic
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.
FRAMEWORKS Bootstrap Zurb Foundation I DON’T ENDORSE ANY OF THESE.
I’M JUST NAMING EXAMPLES. http://getbootstrap.com/ http://foundation.zurb.com/
STATIC SITE GENERATORS Jekyll Dexy + Many others NERD
MODE
STATIC SITE GENERATORS A quick example with Dexy
STATIC SITE GENERATORS A quick example with Dexy
TEMPLATING Jinja2 Mustache + Many others NERD MODE
TEMPLATES Jinja2 example
TEMPLATES Jinja2 example
CSS
SKETCHING IN CODE Tools for
BROWSER DEV TOOLS Tweak on an existing design in
the browser.
DEV TOOLS
DEV TOOLS
JSBIN Very useful playground for HTML/CSS/JS
JSBIN
JSBIN
CSS
DOCUMENTATION Producing
ASCIIDOCTOR So awesome that we should share a moment
of silence.
ASCIIDOCTOR
ASCIIDOCTOR
DEXY Keep prose and code separate. ! NERD MODE
DEXY NERD MODE
DEXY NERD MODE
LEARNING The reference manual for web-based tools is the web
itself.
REFERENCE 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