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


BeaUtiful ExampleS


FONT-ICON


All SVG perks

Design: once, update: never


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


It's a technical requirement:
smaller images + less requests

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

Use tools !

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

  1. clone
  2. add
  3. commit
  4. push

Isn't dropbox enough?


NOPE

  1. Open dropbox folder
  2. Copy file
  3. Open project folder
  4. Paste file
  5. Commit to project
 

bit.ly/fromdev

@ArnaudRinquin

Thanks for creating Beautiful products 
WE ♥ TO BUILD

From: DEV To: DESIGNERS With: LOVE

By Arnaud Rinquin

Made with Slides.com

From: DEV To: DESIGNERS With: LOVE

  • 4,643