modern ux, ui, and front-end tools
DESCRIPTION
TRANSCRIPT
Modern UX, UI & Front-end tools
Making sense of what's around us to improve our design, development, and collaborative efforts.
Alan%Roy,%UXD%&%Front1end%development
Twi$er:(@alanontheweb
A better tool doesn’t make a better craftsman, but a good tool makes
working a pleasure.
—"Oliver"Reichenstein
Tackling)analysis)paralysis
When we have a tried and true process that we're comfortable with, it can be daunting to invest time in something new without understanding its payoff.
Burnout can also happen in a rapidly changing industry like ours. So what can we do to mitigate all that noise?
Rather than trying to know everything, it's more important to identify the right things to pursue. The rest is simply becoming better at what we already know how to do.
Not to mention, the more efficient you are at your work, the more time you will have to
develop yourself in other areas of your life.
In the beginner’s mind, there are many possibilities. But in the
expert’s, there are few.
—"Zen"Master"Shunryo"Suzuki
Process
• Always start by researching your field.
• Pick a new process for something you're already comfortable with.
• if#you#design#in#Photoshop,#try#designing#with#Sketch#or#in#the#browser.#If#you're#an#expert#with#CSS,#try#picking#up#Sass,#etc.
• commit to learning the ins and outs of that process.
• Align these efforts towards your next project (very important!)
• Evaluate results past the initial learning curve.
Design tools
UX,$UI$and$rapid$prototyping
• Style Tiles, Mural.ly (mood boards)
• Sketch 3 (game changer)
• Pixate (game changer)
• Marvel, Flinto
• Invision, UXPin, Balsamiq
• Macaw, Pinegrow, Webflow, Framer JS
• Quartz Composer / Origami, Avocado by IDEO
Sketch'3
• Artboards & the infinite canvas
• Auto save / iCloud backups
• Everything vector, easy exporting, 2x retina, and SVG
• Layer groups, symbols, and styleguides
• Grids, layout generators, spec measurements, dynamic buttons
• Typography, golden ratios, gradients, copy as CSS
• Wixel userflows & wireframes
More%on%Sketch
• Sketch Toolbox - Plugin Manager
• Sketch 3 overview
• Sketch resources
• Sketch tutorials
• Even more Sketch tutorials
• Sketch neat features
• Sketch plugins & add-ons
Pixate'preview
• Modern interaction design
Marvel'demo
• Desktop demo
• Tablet demo
• Phone demo
Front-end tools
Editors,)frameworks,)preprocessors,)etc
• Brackets, Sublime Text, Atom
• Polymer / Web Components (Custom tags, encapsulation, interoperability across the web)
• Foundation, Bootstrap
• Sass, Bourbon, Neat, OOSASS
• Chrome workspaces & Source maps
• GruntJS, Codekit 2, - Takana SASS Live Editor
Sublime(/(Brackets(demo
• Live reload
• Integrated Git functions
• Integrated Bower Components
• Quick Placeholder imgs
• Quick edit
• Color picker
• Emmet
• Code formatters
• Jump to word / file (cmd+R, cmd+P)
• Comp to Code
• Brackets Responsive
Sass$Demo
• Nesting
• Variables
• Mixins
• Extends
• Placeholders
• + Bourbon / Compass
Chrome'extensions'&'tools'demo
• Source maps & workspaces
• Device emulation
• In-browser Sass editing through workspaces
• Chrome Vox accessibility (sticky mode CMD+CMD)
• Page speed (part 1), (part 2), (Another article)
• Page audits
Codekit(demo
• New projects, frameworks
• Pre-processing, code checks
• file minification, nesting, etc.
• Autoprefixer, Bless
• multi-device server
• assets / bower
• kit, HAML, Jade, Etc. templatling (HTML includes)
Cool$CSS$stuff
• Shapes
• multi-columns
• Flexbox
• Masks / Clipping
• vh, vm, vmin, vmax
• Filters
• Picture (pictureFill 2)
CSS#shapes#demo
Cool$JS$stuff
• AniJS
• AniJS Studio
• BounceJS
• Famo.us
• Responsive Elements
Cool$miscellaneous$stuff
• HTML to SVG, Paparazzi, Page Layers,
• Iconizr, Codepen, CSS animate, Tridiv
• Project Parfait, Avocode
• SVG optimizer, Img Alpha, Compressor.io
• Red Pen, Trello, Sourcetree
• Font Prep, Can I Use
• Slack, Deckset
More%cool%miscellaneous%stuff
• GoNative.io
• Dash
• Ember app
• Skala Preview
Extra&Ar(cles
• http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
• http://blog.brackets.io/2014/04/17/css-shapes-editor/
• http://www.forbes.com/sites/anthonykosner/2014/02/15/web-apps-raise-the-ceiling-above-html5-as-famo-us-recreates-facebooks-paper/