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
2. Never took Computer Science class

QUICK INTRODUCTION
2. Never took Computer Science class
3. Never won an Award

QUICK INTRODUCTION
We’re Hiring
(shameless plug)

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 THE
MASTERS
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 arsenal
of technique

“Oh heck yeah
that’s easy…”

“Oh heck yeah
that’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 projects
in iterations

Get feedback often

Condition yourself to accept
criticism

Take their advice

Take their advice
- especially now while you can

STEAL FROM OTHERS FIRST
STEAL FROM OTHERS
FIRST

Nothing is original anymore

A little weight
off your
shoulders
#phew

It should be our quest to produce
more quality work

Inspiration Boards

Inspiration Boards
AKA: sources to STEAL from!

Mood Boards

Take notes of what you
liked and why it works

Mood Boards
Stylized icon @ angle

Mood Boards
Clean navigation but
we should include 2
more links

Mood Boards
we should include 2
more links
Awesome photo
Love the mix of tape
letters and font

Mood Boards
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

It works for a reason
( they did something right )

Deconstruct
what 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
Now it’s time to go from good
to GREAT!

ROLL YOUR OWN
Crazy bad mojo – right?

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
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
( Aaron James Draplin)

ROLL YOUR OWN
Notice the solid color
on the slides

ROLL YOUR OWN
on the slides
Easy to read
san-serif font

ROLL YOUR OWN
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 it
your own.
https://answers.yahoo.com/question/index?qid=20100123160859AASb4Sf

ROLL YOUR OWN
We as humans
steal shit.

ROLL YOUR OWN
We as artists
steal shit.

ROLL YOUR OWN
To truly be GREAT…

ROLL YOUR OWN
Take what you learned…

STEAL THIS! A Practical Guide to Web Design and Development

More Related Content

Similar to STEAL THIS! A Practical Guide to Web Design and Development

Recently uploaded

STEAL THIS! A Practical Guide to Web Design and Development