Code Literacy for Designers

Future of Web Design, London 2012

Jonathan Berger, Pivotal Labs

Hi!

I'm @jonathanpberger

• My background is in

  • philosophy and then
  • design and now
  • development

• I read and write code every day to build products at @pivotallabs

Who are you?

(Show of hands)

Whose primary role is

Designer?

Whose primary role is

Product Owner?

Whose primary role is

Developer?

The Plan

1. Argue that "Literacy" is a useful way to discuss becoming technical,

2. Argue that Technical literacy helps Designers (and teams),

3. Share my story about becoming literate.

Part 1:

"Coding As Literacy"

Why "Coding as Literacy"?

• It's a good way to talk about coding, which is often treated as a binary.

INTERLUDE

Jeff says...

"To those who argue programming is an essential skill we should be teaching our children, right up there with reading, writing, and arithmetic:

can you explain to me how Bloomberg would be better at his day job of leading the largest city in the USA if he woke up one morning as a crack Java coder? "

Jeff says...

"Please don't advocate learning to code just for the sake of learning how to code.

Or worse, because of the fat paychecks. Instead, I humbly suggest that we spend our time learning how to …"

Jeff says...

• "Research voraciously, and understand how the things around us work at a basic level.
• Communicate effectively with other human beings.
• These are skills that extend far beyond mere coding and will help you in every aspect of your life."

No silver bullets

If you work in a technical medium,

TECHNOLOGY IS POWERFUL

BUT

Learning hard technical skills is

SCARY

Remember

Literacy != Fluency

Getting technical doesn't have to be a

full-time commitment

A True Story

I gave a "Git for Designers" talk

• The speaker before me talked typography to a rapt audience
• ...and when Ryan said 'Git...', the room emptied(!)
• He also said:

"We don't hire designers who can't code."

Part 2:

How does Code Literacy Help Designers?

My Thesis

High levels of code literacy correlate with more sustainable projects and more successful outcomes.

Making is good for projects

• Small details are important, especially to the user. They fall by the wayside.
• There's a whole class of things for which it takes more time to explain it than to do.
• This is tech literacy's sweet spot for designers and PO's and leads to a dramatic increase in think-make-check speed.

Making is good for teams

• Lend a helping hand to development work at the edges,
• Avoid resource bottlenecks,
• Build respect and camraderie, reduce "us-vs.-them"

Making is good for individuals

• Building things feels awesome
• "Instead of telling someone else how to paint, you get to hold the brush."

Overview

Where can literacy help?

• Designer, PO: Better tactical design choices and execution, more team bandwidth,
• Principal: better strategic design choices, more realistic estimates, better analytical tools.
• Developer: uhhh...

Overview

Where can literacy hurt?

• Design, PM, Principal: time / opportunity cost, overstepping bounds, loss of innocence
• Developer: tunnel vision can skew priorities

In general, more literacy is better

(no matter what the role)

but...

Never forget:

Sometimes design is an ineffable value-add and code needs to take the backseat.

Preserve the ability / reserve the right to stay innocent and come up with crazy ideas that the Technically Literate deem impossible.

INTERLUDE

Let's talk about

Fear

• Lane Halley: "UX Designers are more scared of Developers than of Business People".
• Josh / Jeff of Proof: Developers deliver code, designers deliver sketches.

The Definition of stress:

Responsibility without power

Fear Driven Design

• We have a lot of people yelling at us
• We don't have much power over the end product

Fear is healthy.

Overcome it.

Part 3:

Becoming literate

I started as

a self-taught designer

I worked on Spot.Us and

found Agile and fell in love.

What is

agile?

Agile

Pivotal Tracker

Agile

Pairing

Agile

Testing

Agile

Sustainable Pace

I wanted to bring Agile to design.

I found Pivotal, and

they needed an Agile designer

Sweet!

I started working with 2 pairs of developers.

They would type code

I would use Adobe for mocks

Learning #1

In-browser Mockups

with basic CSS, HTML, and a templating framework (Erb)

Learning #2

TDD and Story Writing

using Cucumber. This helped my UX and UI practice enormously.

Learning #3

Basic Tools

Setting up an environment, Bundler, Rake, etc., let me run locally.

Learning #4

Git

So I could contribute small fixes, mostly copy and CSS.

But

I was breaking a lot of tests

Learning #5

Rspec and Capybara

So I run tests and make some fixes.

Now I could commit code

without breaking the build

:-)

Learning #6

JQuery and the DOM

So I could make better in-browser mocks and make more changes

Learning #7

More Ruby, which led to ORMs and REST and HTTP verbs.

That's a mouthful.

Learning #8

By now, I was doing development regularly

and starting to bring my Design practice back to it. Personas in cuke!

Learning #∞

Still learning every day

Meta-learnings

Rules I Learned

About Learning Technical Things

• Learn what the web is built of (internet architecture),
• Immersion/osmosis is a powerful teaching tool,
• It's critically important to do things and get feedback, not just read about them.

Tastes I cultivated around

Learning Technical Things

• Tools are important (but don't obsess over them),
• Develop the sense of when to ask for help and when to tough it out,
• Develop the sense of smell of knowing when to accept Magic, and when you have to really learn How Things Work.

PLAY!

is fun

What Next?

Learn Something! Learn Rails! Or Sinatra.

Courses

• https://lynda.com
• https://Method.ac
• https://CodeYear.com
• https://Railstutorial.org
• https://getHopscotch.com
• https://teamtreehouse.com/

Regular Series

• https://rubyrogues.com
• https://rubyshow.com
• https://peepcode.com
• https://railscasts.com

Resources

• https://stackoverflow.com
• https://rubyonrails.org
• https://jqueryui.com
• https://jquery.com
• https://forrst.com

Thanks!

https://jonathanpberger.com,

jonathanpberger@gmail.com,

@jonathanpberger on twitter, github, forrst, flickr, etc etc etc

https://jonathanpberger.com/talks for this deck in HTML (with links).

Bonus!

(Wherein I try to show examples if there's time.)

Views

CSS

HTML

Erb

Haml / Slim

Sass

Test-Driven Development & Story Writing using

Cucumber

Given I am a logged in user

When I click "add to cart"

Then the item should added to in my cart

And my Total Price should go up

Basic Tools

Bundler

Rake

Brew

Version Control

Git

Testing

Rspec

Capybara

Webdriver

Interaction

JQuery

DOM

Back-end

Ruby

ORMs

REST

HTTP