Creative ideasworth spreadingPETE

2©2013 PETER MAYER

PREPARING DESIGN FILES FOR THE WEB02.27.13Keegan Brown & Matt Kyte

PETE

3©2013 PETER MAYER

WHY?

4©2013 PETER MAYER

CREATIVE CONTROL

5©2013 PETER MAYER

AGILITY

6©2013 PETER MAYER

HAPPYDEVELOPERS!

7©2013 PETER MAYER

IT'S ALIVE!

THE WEB MOVESWhether you Want it to or not!

8©2013 PETER MAYER

THE WEB IS ORGANICWhat you Build today May Be different toMorroW

9©2013 PETER MAYER

IT'S A BuNCH OF BOxESand they're all ConneCted

10©2013 PETER MAYER

11©2013 PETER MAYER

GuIDLINES

THINk IN PIxELS(and perCentages too)

12©2013 PETER MAYER

uSE GRIDSso We Can Build those little Boxes

13©2013 PETER MAYER

IMAGE FORMATS

14©2013 PETER MAYER

15©2013 PETER MAYER

GIF256 Colors MaxsiMple gradientsflat Color graphiCsgraphiC textsiMple aniMation

16©2013 PETER MAYER

jPEGfull Colorno transparenCyadjustaBle CoMpressionphotosillustrationsCoMplex graphiCs

17©2013 PETER MAYER

PNGfull Colorfull transparenCyno CoMpressionlayering transparent effeCts

18©2013 PETER MAYER

PREPPING YOuR PSD

19©2013 PETER MAYER

72ppirgBall units to pixelsgrids and guides1000px Min Width

20©2013 PETER MAYER

DESIGN FLOW

CONSERVE ENERGYdon't reinVent the Wheel

21©2013 PETER MAYER

LAYER COMPSlayer CoMps are goodWe liKe layer CoMpsyou should use layer CoMps

22©2013 PETER MAYER

uSE WEB FONTSyou May loVe this font But the internet hates it

23©2013 PETER MAYER

uSE HOSTED FONTS(only if your life depends on it)

24©2013 PETER MAYER

THE WEB IS INTERACTIVEBut psds aren't

25©2013 PETER MAYER

26©2013 PETER MAYER

CAVEATS

WE CAN'T CONTROL TExTLAYOuT

27©2013 PETER MAYER

kEEP IT IN THE BOx

28©2013 PETER MAYER

29©2013 PETER MAYER

ONE MORE THING...

IGNORE EVERYTHING WE juST SAID(sort of, But not really)

30©2013 PETER MAYER

WeB resourCes

peteramayer.com

html.adobe.com

2012.dconstruct.org

time.com

bradfrost.github.com/this-is-responsive/

css3generator.com

css3please.com

caniuse.com

31©2013 PETER MAYER

32©2013 PETER MAYER

PETEthanK you