STEAL THIS! A Practical Guide to Web Design and Development

QUICK INTRODUCTION

People call me “GONZ”

QUICK INTRODUCTION

1. Never went to Art School

QUICK INTRODUCTION

1. Never went to Art School2. Never took Computer Science class

QUICK INTRODUCTION

1. Never went to Art School2. Never took Computer Science class3. Never won an Award

QUICK INTRODUCTION

SOME CLIENTS

QUICK INTRODUCTION

We’re Hiring(shameless plug)

WARNING:

So why this session?

It’s my GOAL to accelerate the evolution of junior designers and

developers from good to GREAT!

I will even give you the “take away” up front

“learn from the masters” “steal from others first”

and “roll your own”

Thanks for Attending- Good Bye -

Thanks for Attending- Good Bye -

#joking

LEARN FROM THEMASTERS

LEARN FROM THE MASTERS


It’s OK to be a Padawan


We are in the CRAFT Industries


There is technique to CRAFT


VS. CRAFTART


VS. CRAFTART( debate continues )


Build your arsenalof technique


“Oh heck yeahthat’s easy…”


“Oh heck yeahthat’s easy…”

Full orange beard


For Designers:– Color theory– Layout & composition– How to produce textures– Design patterns– Software tricks– User interface trends


For Developers:– Syntax– arrays();– Functions () {}– Frameworks– Preprocessors– Hacks


Practice your CRAFT!


Practice your CRAFT!Make lots of stuff


On the job…


Ask a lot of questions


Develop your projectsin iterations


Get feedback often


Condition yourself to accept criticism


Take their advice


Take their advice- especially now while you can

STEAL FROM OTHERS FIRST



Nothing is original anymore


A little weightoff your shoulders#phew


It should be our quest to produce more quality work


Inspiration Boards


Inspiration BoardsAKA: sources to STEAL from!


Mood Boards


Take notes of what you liked and why it works


Mood BoardsStylized icon @ angle



Clean navigation but we should include 2 more links




Awesome photo

Love the mix of tape letters and font




Awesome photo

Love the mix of tape letters and font

Looks like they used JavaScript to maximize the image on first load to keep content above fold


It works for a reason( they did something right )


Deconstructwhat you admire


Do you like how the main photo is

responsive and always full screen height?


View the source code!( find out how they did it )


Use Firebug!

Ah hah!


Minimized Code?


( gross )


( gross )

www.jsbeautifier.org

Eureeka! I get it now!!!


Incorporate what you learned into your own

projects


Creative gears should now be firing on all

cylinders


“The secret to creativity is knowing how to hide your sources.”- Einstein

ROLL YOUR OWN

ROLL YOUR OWN

ROLL YOUR OWN

Now it’s time to go from good to GREAT!

ROLL YOUR OWN

Crazy bad mojo – right?

ROLL YOUR OWN

STEAL THIS?

ROLL YOUR OWN

This is what they don’t want us to tell you

ROLL YOUR OWN

I stole this this whole thing.

ROLL YOUR OWN

ROLL YOUR OWN

Every bit of data I shared…

ROLL YOUR OWN

Was shared with me…

ROLL YOUR OWN

From my surroundings…

ROLL YOUR OWN

From my mentors…

ROLL YOUR OWN

From my predecessors…

ROLL YOUR OWN

- This Guy

ROLL YOUR OWN

- This Guy( Aaron James Draplin)

ROLL YOUR OWN

Notice the solid color on the slides

ROLL YOUR OWN


Easy to read san-serif font

ROLL YOUR OWN


Easy to read san-serif font

Header & Footer Lockups

ROLL YOUR OWN

To merely copy is to take an existing

interpretation and not run away with it.

https://answers.yahoo.com/question/index?qid=20100123160859AASb4Sf

ROLL YOUR OWN

To steal an idea is to take something of value

and make ityour own.

https://answers.yahoo.com/question/index?qid=20100123160859AASb4Sf

ROLL YOUR OWN

We as humanssteal shit.

ROLL YOUR OWN

We as artistssteal shit.

ROLL YOUR OWN

To truly be GREAT…

ROLL YOUR OWN

Take what you learned…

ROLL YOUR OWN

Roll your own!

STEAL THIS! A Practical Guide to Web Design and Development

Internet

Transcript of STEAL THIS! A Practical Guide to Web Design and Development