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/