From: DEV

TO: DESIGNERS

WITH: ♥

bit.ly/fromdev

@ArnaudRinquin

Know Your Dev

Things we suck at:

picking colors and pixels from png
photoshop and friends

Things we don't like:

not being consulted for feasibility / cost
renders first driven design

Things we love:

product workflows
edge cases specifications
errors, loaders, notifications integration

Say no! to color picker and ruler

Write down project global specs

Margins, Padding

Colors

Font-size

Fixed width, 100%

Stick left, right

Y U NO USE SASS?!

$blue: #000050$font-family: Helvetica, sans-serif$font-size: 13px$big-font-size: 18px
$normal-margin: 10px
title  font-size: $big-font-size  color: $blue*
  font-family: $font-family  font-size: $font-size
p
  margin: $margin

SVG All thE THINGS!

Support transformations

Lighter

Responsive

Retina

Ugly example

@codepen - hovering effects on a kiwi

BeaUtiful ExampleS

@codrops - Animated SVG Icons

@codrops - SVG Drawing Animations

FONT-ICON

All SVG perks

Design: once, update: never

demo

Your go-to tool: fontastic.me

Mother EFFING HSL(A)

#40BF40 vs hsl(120, 50%, 50%)

hue, saturation, lightness

"Make it a bit 25% lighter"

#9FDF9F vs. hsl(120, 50%, 75%)

Protip: "Young Guys Can Be Messy Rascals" or "ROY G BIV"

SPRITE

twitter.com icons = 1 image

It's a technical requirement:

smaller images + less requests

Don't let us do it... we are bad at it

Use tools !

instantsprite, wearekiss.com/spritepad

Twitter icons sprite

Learn GIT

new_dashboard-render_v2_final.png

N E V E R A G A I N

try.github.io - Github.app

only 4 words to remember

clone
add
commit
push

Isn't dropbox enough?

NOPE

Open dropbox folder
Copy file
Open project folder
Paste file
Commit to project