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


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

Made with Slides.com