Designers & Developers

transcript

DESIGNERS & DEVELOPERSANDRÉ LUÍS | LEIHLA PINHO

ANDRÉ LUÍS

@andr3

meet.andr3.netSoftware Engineer @ Seedrs

LEIHLA PINHO

@leihla

twitter.com/leihla

Design Director @ Seedrs

WHAT ARE WE DOING HERE?

c Randall Munroe (xkcd)

JD Lasica

ERIK SPIEKERMANN

THE PROCESS

DESIGN

DEVELOPMENT

JD Lasica

DESIGN

DEVELOPMENT

JD Lasica

DEVELOPERS

DESIGNERS

BETTER TOGETHER

DEVELOPERSACT I

Jason Scott

NOT ALL DEVELOPERS ARE CREATED EQUAL

Jason Scott

BACK END FRONT END DEVELOPER DEVELOPER

Ruby on Rails

MySQL (DATABASES)

Nginx (WEBSERVER)

JAVASCRIPTIN THE BROWSER

EXAMPLE

Ruby on Rails

MySQL (DATABASES)

Nginx (WEBSERVER)

EXAMPLE

Ruby on Rails

MySQL (DATABASES)

Nginx (WEBSERVER)

EXAMPLE

Ruby on Rails

MySQL (DATABASES)

Nginx (WEBSERVER)

EXAMPLE

Ruby on Rails

MySQL (DATABASES)

Nginx (WEBSERVER)

EXAMPLE

THE OLD DAYS…

barkbud

NOWADAYS…

Wireframes and mockups are orientations — never the full puzzle.

Developers will find holes that need to be filled. How will they be filled?

DESIGNERSACT II

KNOW YOUR MEDIUM

brad_frost

• Should designers code?

• Understand the limitations

• Explore capabilities

brad_frost

DESIGN THE INVISIBLE

• Design for the ugly

• Design the edge cases

• Explain flows & interactions

SCOTT HURFF

AWKWARD UI

SCOTT HURFF

Awkward UI is a missing loading indicator. It's forgetting to tell your customer where something went wrong… It's a graph that looks weird with only a few data points.

THE UI STACK

Ideal State

Empty State

Error State

Partial State

Loading State

BETTER TOGETHER

ACT III

LET’S TALK

“HELP ME UNDERSTAND”

Help me understand why that’s a problem for you?

You see… high density screens need bigger images, so we can’t

use just one image. We need multiple sizes (…)

Oh! Ok…

Use an app that allows notes and feedback.

invisionapp.com

SHARED VOCABULARY

• Define your own language

• Design a system

• Build a common styleguide

0.5rem

1.5rem

2.5rem

extra-small

medium

“Large margin after that box.”@include after-margin(large);

DELIVERABLES

LOW-FIDELITY WIREFRAMES

HI-FIDELITY MOCKUPS

INTERACTIVE PROTOTYPE

TIME SPENT

FIDELITY

JOHN GRUBER

linkletter

THE AUTEUR THEORY OF DESIGN

linkletter

Quality of any creative collaborative endeavour, approaches the level of taste of who has control.

JOHN GRUBER

linkletter

RESULT

linkletter

RESULT

CO-OWNERSHIP

DESIGNING IN THE BROWSER

DECIDING IN THE BROWSERDAN MALL

• Animations for Form Validation Messages

• Use Flexbox or limit characters in description?

• Minor breakpoints on layout quirks.

DEVELOPMENTDESIGN

DESIGN & DEVELOPMENT

PRODUCT

THANK YOU

Leihla Pinho

André Luísme@andr3.net

leihla@gmail.com

C bnaLICENSED UNDER

PHOTOS REUSED UNDER

https://www.flickr.com/photos/barkbud/5200856828/

https://www.flickr.com/photos/jdlasica/10723373716

https://www.flickr.com/photos/zeldman/16553808072

https://www.flickr.com/photos/54568729@N00/9636183501

https://www.flickr.com/photos/brad_frost/10413043603/

https://www.flickr.com/photos/linkletter/15129966789/