stop looking for unicorns
TRANSCRIPT
-
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/ -
8/10/2019 Stop Looking for Unicorns
2/32
Designers & CodeSouthWired 2014
Part I.
Searching for Unicorns
uxunicorn.com
http://uxunicorn.com/ -
8/10/2019 Stop Looking for Unicorns
3/32
Designers & CodeSouthWired 2014
Creating great work is a
turbulent process
Flickr @MattysFlicks
https://flic.kr/p/ofaVC1
Designers & CodeSouthWired 2014
https://flic.kr/p/ofaVC1 -
8/10/2019 Stop Looking for Unicorns
4/32
Designers & CodeSouthWired 2014
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
http://uxunicorn.com/ -
8/10/2019 Stop Looking for Unicorns
5/32
Designers & CodeSouthWired 2014
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 -
8/10/2019 Stop Looking for Unicorns
6/32
Designers & CodeSouthWired 2014
Should designers learn to code?
Should developers learn to design?
Most designers agree.
But why?
#pureevil, Shoreditch, London
-
8/10/2019 Stop Looking for Unicorns
7/32
Designers & CodeSouthWired 2014
Codehelps designers
Communicate ideas
Command respect with developers
Understand possibilities & constraints Maintain design vision
But theres something else.
unsplash.com
http://unsplash.com/ -
8/10/2019 Stop Looking for Unicorns
8/32
Designers & CodeSouthWired 2014
We have a need to
launch great products.
unsplash.com
Designers & CodeSouthWired 2014
http://unsplash.com/ -
8/10/2019 Stop Looking for Unicorns
9/32
Designers & CodeSouthWired 2014
The Designerconjures the best user experience.
superfamous.com
The Developerensures that everything works.
Both share responsibility
for launching great products.
Designers & CodeSouthWired 2014
Both also share the blame
for failure.
http://superfamous.com/ -
8/10/2019 Stop Looking for Unicorns
10/32
Designers & CodeSouthWired 2014
Specialize
unsplash.com
Designers & CodeSouthWired 2014
Be a team of experts.
Find unique skills that
strike balance.
http://unsplash.com/ -
8/10/2019 Stop Looking for Unicorns
11/32
Designers & CodeSouthWired 2014
Magnify
pexels.com
Designers & CodeSouthWired 2014
Learn skills that magnify your craft.
Developers who deeply understand
design will know to call out design pitfalls.
http://pexels.com/ -
8/10/2019 Stop Looking for Unicorns
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.
http://unsplash.com/ -
8/10/2019 Stop Looking for Unicorns
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/ -
8/10/2019 Stop Looking for Unicorns
14/32
Designers & Code
SouthWired 2014
Part II.
Examples
uxunicorn.com
http://uxunicorn.com/ -
8/10/2019 Stop Looking for Unicorns
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/ -
8/10/2019 Stop Looking for Unicorns
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/ -
8/10/2019 Stop Looking for Unicorns
17/32
Designers & Code
SouthWired 2014
Part III.
Tools for Unicorns
cheezburger.com Needs attribution
http://cheezburger.com/ -
8/10/2019 Stop Looking for Unicorns
18/32
Designers & Code
SouthWired 2014
Part III. Tools for Unicorns
A. Collaboration
-
8/10/2019 Stop Looking for Unicorns
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
-
8/10/2019 Stop Looking for Unicorns
20/32
Designers & Code
SouthWired 2014
2. Trello & Kanban Boards
Tools for Unicorns: Collaboration
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/ -
8/10/2019 Stop Looking for Unicorns
21/32
Designers & Code
SouthWired 2014
3. Slack
Tools for Unicorns: Collaboration
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/ -
8/10/2019 Stop Looking for Unicorns
22/32
Designers & Code
SouthWired 2014
Part III. Tools for Unicorns
B. Prototype Pipeline
-
8/10/2019 Stop Looking for Unicorns
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
-
8/10/2019 Stop Looking for Unicorns
24/32
Designers & Code
SouthWired 2014
5. Github
Tools for Unicorns: Prototype Pipeline
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
-
8/10/2019 Stop Looking for Unicorns
25/32
Designers & Code
SouthWired 2014
6.Jekyll
Tools for Unicorns: Prototype Pipeline
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
-
8/10/2019 Stop Looking for Unicorns
26/32
Designers & Code
SouthWired 2014
7. Sass
Tools for Unicorns: Prototype Pipeline
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
-
8/10/2019 Stop Looking for Unicorns
27/32
Designers & Code
SouthWired 2014
8. Bootstrap & Foundation
Tools for Unicorns: Prototype Pipeline
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
-
8/10/2019 Stop Looking for Unicorns
28/32
Designers & Code
SouthWired 2014
9. npm, Bower, Grunt
Tools for Unicorns: Prototype Pipeline
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
-
8/10/2019 Stop Looking for Unicorns
29/32
Designers & Code
SouthWired 2014
Part III. Tools for Unicorns
C. Prototype Production
-
8/10/2019 Stop Looking for Unicorns
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/ -
8/10/2019 Stop Looking for Unicorns
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
-
8/10/2019 Stop Looking for Unicorns
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