stop looking for unicorns

8/10/2019 Stop Looking for Unicorns

1/32

Designers & CodeSouthWired 2014

Designers Code

Coders Designjanzheng.com

Teach

unsplash.com

SouthWired 2014
http://unsplash.com/


2/32


Part I.

Searching for Unicorns

uxunicorn.com
http://uxunicorn.com/


3/32


Creating great work is a

turbulent process

Flickr @MattysFlicks

https://flic.kr/p/ofaVC1

https://flic.kr/p/ofaVC1


4/32


Unicorn

unicorn - yon!,korn

noun.

A designer who does many things well. Graphic Design

User Experience Design

Front-End Development

Analytics

Illustration

etc

uxunicorn.com


5/32


as they are fast and flexible.

But they are expensive, hard to find,

and in high demand.

Everyone wants unicorns,

Charlie the Unicorn, FilmCow
http://youtu.be/CsGYh8AacgY


6/32


Should designers learn to code?

Should developers learn to design?

Most designers agree.

But why?

#pureevil, Shoreditch, London


7/32


Codehelps designers

Communicate ideas

Command respect with developers

Understand possibilities & constraints Maintain design vision

But theres something else.

unsplash.com


8/32


We have a need to

launch great products.

unsplash.com



9/32


The Designerconjures the best user experience.

superfamous.com

The Developerensures that everything works.

Both share responsibility

for launching great products.


Both also share the blame

for failure.
http://superfamous.com/


10/32


Specialize

unsplash.com


Be a team of experts.

Find unique skills that

strike balance.


11/32


Magnify

pexels.com


Learn skills that magnify your craft.

Developers who deeply understand

design will know to call out design pitfalls.
http://pexels.com/


12/32

Designers & Code

SouthWired 2014

Support

unsplash.com

Designers & Code

SouthWired 2014

Cover each other.

Check each others work.

Hold each other accountable.

Sweat all the small details.


13/32

Designers & Code

SouthWired 2014

Communicate

pexels.com

Designers & Code

SouthWired 2014

Stay informed.

Let others know

when you need help.
http://pexels.com/


14/32

Designers & Code

SouthWired 2014

Part II.

Examples

uxunicorn.com


15/32

Designers & Code

SouthWired 2014

At Nurun, we created a set of in-browser, responsive

wireframes that helped us sell the idea of creating a

responsive website for our clients.

2013

AssurantSolutionswww.assurantsolutions.com
http://www.assurantsolutions.com/


16/32

Designers & Code

SouthWired 2014

At Nurun, we designed and prototyped functional

enrollment forms for rapid A/B testing on both the

mobile and desktop experience for Gas South.

2013 2014, currently in production.

Gas Southwww.gas-south.com
http://www.gas-south.com/


17/32

Designers & Code

SouthWired 2014

Part III.

Tools for Unicorns

cheezburger.com Needs attribution
http://cheezburger.com/


18/32

Designers & Code

SouthWired 2014

Part III. Tools for Unicorns

A. Collaboration


19/32

Designers & Code

SouthWired 2014

1. Stand-Up Meetings

Tools for Unicorns: Collaboration

Daily meetings that ask:

What did you do yesterday?

What will you do today? What are your roadblocks and needs?

Star Wars, Lucasfilm


20/32

Designers & Code

SouthWired 2014

2. Trello & Kanban Boards


Organizational tool

Works well in conjunction with standup meetings

1. Stuff left to do2. Stuff youre doing

3. Stuff thats done

Trello Logo & trello.com
http://trello.com/


21/32

Designers & Code

SouthWired 2014

3. Slack


Chat, email & messaging tool

Group conversations, links, attachments, private messaging.

Great for distributed teams.

The purported email killer

Slack Logo & slack.com
http://slack.com/


22/32

Designers & Code

SouthWired 2014


B. Prototype Pipeline


23/32

Designers & Code

SouthWired 2014

4. Dropbox for business

Tools for Unicorns: Prototype Pipeline

File Sharing and Asset Library

Drop asset files into a collaborative Dropboxfolder for a

live asset library. Link directly to files for immediatesynchronized changes from the design team.

Useful for building asset libraries.

Dropbox Logo


24/32

Designers & Code

SouthWired 2014

5. Github


File Sharing and Project Hub

Alternative to Dropbox.

Allows a team to perform revision control on assetsand project documents. Better with larger code projects.

Supports free static site hosting.

Github Logo


25/32

Designers & Code

SouthWired 2014

6.Jekyll


Static Site Generator

Like a CMS, but without a server.

Generates static websites by linking together content modules,which allows for very quick prototype development.

Can be published for free on Github.

Jekyll Logo


26/32

Designers & Code

SouthWired 2014

7. Sass


CSS Pre-Processor

Regular CSS can get messy pretty quickly.

Sass adds a layer of abstraction with variables, functions,and other tools. Allows for advanced frameworks and collaboration.

Lets designers quickly define new style changes.

Sass Logo


27/32

Designers & Code

SouthWired 2014

8. Bootstrap & Foundation


Front-End Frameworks

Frameworks provide designers and developers with

pre-written code and CSS to quickly build responsive prototypes.

Frameworks are quick to build, but adds bloat and slowness.

Bootstrap & Foundation Logos


28/32

Designers & Code

SouthWired 2014

9. npm, Bower, Grunt


Package Management and Automation

Tools that may help designers setup prototype environments.

npm and Bower are used to configure and duplicateenvironments, and Grunt is used to automate workflows.

Used to set up design teams and pipelines.

npm, Bower, and Grunt logos


29/32

Designers & Code

SouthWired 2014


C. Prototype Production


30/32

Designers & Code

SouthWired 2014

10. Live Styleguides

Tools for Unicorns: Prototype Production

Clickable in-browser style guides

Style guides are used by designers and developers as a guide

and gallery for existing styles. All styles, elements, animationsicons, responsive breakpoints, etc. are specced and clickable.

Read: susanjeanrobertson.com/code/style-guide-links/

Salesforce Live Styleguide Lonely Planet Live Styleguide
http://rizzo.lonelyplanet.com/styleguide/design-elements/colourshttp://sfdc-styleguide.herokuapp.com/http://susanjeanrobertson.com/code/style-guide-links/


31/32

Designers & Code

SouthWired 2014

11.AngularJS & MeteorJS

Tools for Unicorns: Prototype Production

Reactive JavaScript

Production tools that allow designers to quickly prototype

and create functional web apps and services like Twitter.

Very useful for prototyping sites that require sign up.

AngularJS logo, MeteorJS logo


32/32

Designers & Code

SouthWired 2014

Slides

janzheng.com/unicorns.pdf

Experience designer

Its me!

Read More at

digitalforreallife.com

And a shout-out to Nurun.

janzheng.com @janistanian
http://janzheng.com/http://digitalforreallife.com/http://janzheng.com/unicorns.pdf

stop looking for unicorns

Documents