STEAL THIS! A Practical Guide to Web Design and Development

383 views
326 views

Published on

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.

Published in: Internet, Technology, Business
1 Comment
2 Likes
Statistics
Notes
  • by far the best presentation I have found on SlideShare! BTW I stole it too...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
383
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

STEAL THIS! A Practical Guide to Web Design and Development

  1. 1. QUICK INTRODUCTION People call me “GONZ”
  2. 2. QUICK INTRODUCTION 1. Never went to Art School
  3. 3. QUICK INTRODUCTION 1. Never went to Art School 2. Never took Computer Science class
  4. 4. QUICK INTRODUCTION 1. Never went to Art School 2. Never took Computer Science class 3. Never won an Award
  5. 5. QUICK INTRODUCTION
  6. 6. SOME CLIENTS
  7. 7. SOME CLIENTS
  8. 8. SOME CLIENTS
  9. 9. SOME CLIENTS
  10. 10. SOME CLIENTS
  11. 11. SOME CLIENTS
  12. 12. SOME CLIENTS
  13. 13. QUICK INTRODUCTION We’re Hiring (shameless plug)
  14. 14. WARNING:
  15. 15. WARNING:
  16. 16. So why this session?
  17. 17. It’s my GOAL to accelerate the evolution of junior designers and developers from good to GREAT!
  18. 18. I will even give you the “take away” up front
  19. 19. “learn from the masters” “steal from others first” and “roll your own”
  20. 20. Thanks for Attending - Good Bye -
  21. 21. Thanks for Attending - Good Bye - #joking
  22. 22. LEARN FROM THE MASTERS LEARN FROM THE MASTERS
  23. 23. LEARN FROM THE MASTERS It’s OK to be a Padawan
  24. 24. LEARN FROM THE MASTERS We are in the CRAFT Industries
  25. 25. LEARN FROM THE MASTERS There is technique to CRAFT
  26. 26. LEARN FROM THE MASTERS VS. CRAFTART
  27. 27. LEARN FROM THE MASTERS VS. CRAFTART ( debate continues )
  28. 28. LEARN FROM THE MASTERS Build your arsenal of technique
  29. 29. LEARN FROM THE MASTERS
  30. 30. LEARN FROM THE MASTERS
  31. 31. LEARN FROM THE MASTERS
  32. 32. LEARN FROM THE MASTERS “Oh heck yeah that’s easy…”
  33. 33. LEARN FROM THE MASTERS “Oh heck yeah that’s easy…” Full orange beard
  34. 34. LEARN FROM THE MASTERS For Designers: – Color theory – Layout & composition – How to produce textures – Design patterns – Software tricks – User interface trends
  35. 35. LEARN FROM THE MASTERS For Developers: – Syntax – arrays(); – Functions () {} – Frameworks – Preprocessors – Hacks
  36. 36. LEARN FROM THE MASTERS Practice your CRAFT!
  37. 37. LEARN FROM THE MASTERS Practice your CRAFT! Make lots of stuff
  38. 38. LEARN FROM THE MASTERS On the job…
  39. 39. LEARN FROM THE MASTERS Ask a lot of questions
  40. 40. LEARN FROM THE MASTERS Develop your projects in iterations
  41. 41. LEARN FROM THE MASTERS Get feedback often
  42. 42. LEARN FROM THE MASTERS Condition yourself to accept criticism
  43. 43. LEARN FROM THE MASTERS Take their advice
  44. 44. LEARN FROM THE MASTERS Take their advice - especially now while you can
  45. 45. STEAL FROM OTHERS FIRST STEAL FROM OTHERS FIRST
  46. 46. STEAL FROM OTHERS FIRST
  47. 47. STEAL FROM OTHERS FIRST Nothing is original anymore
  48. 48. LEARN FROM THE MASTERS A little weight off your shoulders #phew
  49. 49. STEAL FROM OTHERS FIRST It should be our quest to produce more quality work
  50. 50. STEAL FROM OTHERS FIRST Inspiration Boards
  51. 51. STEAL FROM OTHERS FIRST Inspiration Boards AKA: sources to STEAL from!
  52. 52. STEAL FROM OTHERS FIRST Mood Boards
  53. 53. STEAL FROM OTHERS FIRST Mood Boards
  54. 54. STEAL FROM OTHERS FIRST Mood Boards
  55. 55. STEAL FROM OTHERS FIRST Mood Boards
  56. 56. STEAL FROM OTHERS FIRST Mood Boards
  57. 57. STEAL FROM OTHERS FIRST Take notes of what you liked and why it works
  58. 58. STEAL FROM OTHERS FIRST Mood Boards Stylized icon @ angle
  59. 59. STEAL FROM OTHERS FIRST Mood Boards Stylized icon @ angle Clean navigation but we should include 2 more links
  60. 60. STEAL FROM OTHERS FIRST Mood Boards Stylized icon @ angle Clean navigation but we should include 2 more links Awesome photo Love the mix of tape letters and font
  61. 61. STEAL FROM OTHERS FIRST Mood Boards Stylized 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
  62. 62. STEAL FROM OTHERS FIRST It works for a reason ( they did something right )
  63. 63. STEAL FROM OTHERS FIRST Deconstruct what you admire
  64. 64. STEAL FROM OTHERS FIRST Do you like how the main photo is responsive and always full screen height?
  65. 65. STEAL FROM OTHERS FIRST View the source code! ( find out how they did it )
  66. 66. STEAL FROM OTHERS FIRST Use Firebug! Ah hah!
  67. 67. STEAL FROM OTHERS FIRST Minimized Code?
  68. 68. STEAL FROM OTHERS FIRST ( gross )
  69. 69. STEAL FROM OTHERS FIRST ( gross ) www.jsbeautifier.org Eureeka! I get it now!!!
  70. 70. STEAL FROM OTHERS FIRST Incorporate what you learned into your own projects
  71. 71. STEAL FROM OTHERS FIRST Creative gears should now be firing on all cylinders
  72. 72. STEAL FROM OTHERS FIRST “The secret to creativity is knowing how to hide your sources.” - Einstein
  73. 73. ROLL YOUR OWN ROLL YOUR OWN
  74. 74. ROLL YOUR OWN Now it’s time to go from good to GREAT!
  75. 75. ROLL YOUR OWN Crazy bad mojo – right?
  76. 76. ROLL YOUR OWN STEAL THIS?
  77. 77. ROLL YOUR OWN This is what they don’t want us to tell you
  78. 78. ROLL YOUR OWN I stole this this whole thing.
  79. 79. ROLL YOUR OWN
  80. 80. ROLL YOUR OWN Every bit of data I shared…
  81. 81. ROLL YOUR OWN Was shared with me…
  82. 82. ROLL YOUR OWN From my surroundings…
  83. 83. ROLL YOUR OWN From my mentors…
  84. 84. ROLL YOUR OWN From my predecessors…
  85. 85. ROLL YOUR OWN - This Guy
  86. 86. ROLL YOUR OWN - This Guy ( Aaron James Draplin)
  87. 87. ROLL YOUR OWN Notice the solid color on the slides
  88. 88. ROLL YOUR OWN Notice the solid color on the slides Easy to read san-serif font
  89. 89. ROLL YOUR OWN Notice the solid color on the slides Easy to read san-serif font Header & Footer Lockups
  90. 90. 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
  91. 91. 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
  92. 92. ROLL YOUR OWN We as humans steal shit.
  93. 93. ROLL YOUR OWN We as artists steal shit.
  94. 94. ROLL YOUR OWN To truly be GREAT…
  95. 95. ROLL YOUR OWN Take what you learned…
  96. 96. ROLL YOUR OWN Roll your own!

×