STEAL THIS! A Practical Guide to Web Design and Development

Post on 23-Aug-2014

120 views 6 download

Tags:

description

This session would be geared to junior designers and developers who want to find creative inspiration improve their development skills. Too often, as artists (designers and coders alike), we strive to create originality in everything we do and thus come to a small creative block where progress is limited and projects become dull. When working with junior developers - I always tell them “steal from others first”, “learn from the masters” and “roll your own.” This advice has spurred many creative projects and usually always breaks new ground for the designer/developer working on the project. - Create quality work - Make mistakes - Keep getting better - Finding Inspiration for design - Finding Inspiration for code - Creating Mood Boards and Snippet cheat sheets - Steal from masters - Don’t Copy Acme Co - Craft your own - A look at Brand Logo thiefs (some funny stuff) - When in Doubt Roll your own - Tools of the trade: Firebug! - Debug like a ninja! (keep it simple) - Deconstructing Awesomeness - Deconstructing PDFs, Photoshop files, Drupal Modules, etc.

Transcript of 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

SOME CLIENTS

SOME CLIENTS

SOME CLIENTS

SOME CLIENTS

SOME CLIENTS

SOME CLIENTS

QUICK INTRODUCTION

We’re Hiring(shameless plug)

WARNING:

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

LEARN FROM THE MASTERS

It’s OK to be a Padawan

LEARN FROM THE MASTERS

We are in the CRAFT Industries

LEARN FROM THE MASTERS

There is technique to CRAFT

LEARN FROM THE MASTERS

VS. CRAFTART

LEARN FROM THE MASTERS

VS. CRAFTART( debate continues )

LEARN FROM THE MASTERS

Build your arsenalof technique

LEARN FROM THE MASTERS

LEARN FROM THE MASTERS

LEARN FROM THE MASTERS

LEARN FROM THE MASTERS

“Oh heck yeahthat’s easy…”

LEARN FROM THE MASTERS

“Oh heck yeahthat’s easy…”

Full orange beard

LEARN FROM THE MASTERS

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

LEARN FROM THE MASTERS

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

LEARN FROM THE MASTERS

Practice your CRAFT!

LEARN FROM THE MASTERS

Practice your CRAFT!Make lots of stuff

LEARN FROM THE MASTERS

On the job…

LEARN FROM THE MASTERS

Ask a lot of questions

LEARN FROM THE MASTERS

Develop your projectsin iterations

LEARN FROM THE MASTERS

Get feedback often

LEARN FROM THE MASTERS

Condition yourself to accept criticism

LEARN FROM THE MASTERS

Take their advice

LEARN FROM THE MASTERS

Take their advice- especially now while you can

STEAL FROM OTHERS FIRST

STEAL FROM OTHERS FIRST

STEAL FROM OTHERS FIRST

STEAL FROM OTHERS FIRST

Nothing is original anymore

LEARN FROM THE MASTERS

A little weightoff your shoulders#phew

STEAL FROM OTHERS FIRST

It should be our quest to produce more quality work

STEAL FROM OTHERS FIRST

Inspiration Boards

STEAL FROM OTHERS FIRST

Inspiration BoardsAKA: sources to STEAL from!

STEAL FROM OTHERS FIRST

Mood Boards

STEAL FROM OTHERS FIRST

Mood Boards

STEAL FROM OTHERS FIRST

Mood Boards

STEAL FROM OTHERS FIRST

Mood Boards

STEAL FROM OTHERS FIRST

Mood Boards

STEAL FROM OTHERS FIRST

Take notes of what you liked and why it works

STEAL FROM OTHERS FIRST

Mood BoardsStylized icon @ angle

STEAL FROM OTHERS FIRST

Mood BoardsStylized icon @ angle

Clean navigation but we should include 2 more links

STEAL FROM OTHERS FIRST

Mood BoardsStylized icon @ angle

Clean navigation but we should include 2 more links

Awesome photo

Love the mix of tape letters and font

STEAL FROM OTHERS FIRST

Mood BoardsStylized icon @ angle

Clean navigation but we should include 2 more links

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

STEAL FROM OTHERS FIRST

It works for a reason( they did something right )

STEAL FROM OTHERS FIRST

Deconstructwhat you admire

STEAL FROM OTHERS FIRST

Do you like how the main photo is

responsive and always full screen height?

STEAL FROM OTHERS FIRST

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

STEAL FROM OTHERS FIRST

Use Firebug!

Ah hah!

STEAL FROM OTHERS FIRST

Minimized Code?

STEAL FROM OTHERS FIRST

( gross )

STEAL FROM OTHERS FIRST

( gross )

www.jsbeautifier.org

Eureeka! I get it now!!!

STEAL FROM OTHERS FIRST

Incorporate what you learned into your own

projects

STEAL FROM OTHERS FIRST

Creative gears should now be firing on all

cylinders

STEAL FROM OTHERS FIRST

“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

Notice the solid color on the slides

Easy to read san-serif font

ROLL YOUR OWN

Notice the solid color on the slides

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!