Extreme Theme Makeover - WordCamp Reno 2013

Whether you need to create something totally unique for your client on a budget, build a site that “doesn’t look bloggy,” or just want something that has that “wow” factor, theme customizations are a great time-saving, cost-effective option. Why reinvent the wheel when you can just make it beautiful?

Transcript

1. EXTREME
   THEME
   MAKEOVER
   

   View Slide

2. MEGAN GRAY
   Designer
   wordpresser
   Beach bum
   @houseofgrays | itsmegangray.com | 10up.com
   

   View Slide

3. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   CUSTOMIZING off-the-shelf THEMES
   it’s not cheating. it’s winning.
   »
   » When you’re just beginning
   

   View Slide

4. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   CUSTOMIZING off-the-shelf THEMES
   it’s not cheating. it’s winning.
   »
   » When you’re just beginning
   »
   » When you’re short on time, budget,
   or resources
   

   View Slide

5. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   CUSTOMIZING off-the-shelf THEMES
   it’s not cheating. it’s winning.
   »
   » When you’re just beginning
   »
   » When you’re short on time, budget,
   or resources
   »
   » When you want to work smarter,
   not harder
   

   View Slide

6. use both halves
   to control creative chaos.
   

   View Slide

7. eat your vegetables first.
   

   View Slide

8. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   good DESIGN SOLVES PROBLEMs
   It doesn’t make problems prettier.
   »
   » People don’t visit sites for the design
   

   View Slide

9. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   good DESIGN SOLVES PROBLEMs
   It doesn’t make problems prettier.
   »
   » People don’t visit sites for the design
   »
   » Always begin with a plan
   

   View Slide

10. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    good DESIGN SOLVES PROBLEMs
    It doesn’t make problems prettier.
    »
    » People don’t visit sites for the design
    »
    » Always begin with a plan
    »
    » Make it smart before you make it pretty
    

    View Slide

11. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    HAVE A PLAN
    Design without a plan is just doodling.
    1. Take inventory of your content
    (present & future)
    

    View Slide

12. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    HAVE A PLAN
    Design without a plan is just doodling.
    1. Take inventory of your content
    (present & future)
    2. Define required features
    

    View Slide

13. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    HAVE A PLAN
    Design without a plan is just doodling.
    1. Take inventory of your content
    (present & future)
    2. Define required features
    3. Complete a creative brief
    

    View Slide

14. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    you need help
    Get it early and often.
    1. Find a trusted WordPress consultant
    

    View Slide

15. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    you need help
    Get it early and often.
    1. Find a trusted WordPress consultant
    2. Share your plan
    

    View Slide

16. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    you need help
    Get it early and often.
    1. Find a trusted WordPress consultant
    2. Share your plan
    3. Preventing fires > Putting them out
    (or watching your site burn)
    

    View Slide

17. do a warm up lap.
    

    View Slide

18. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    find your Inspiration:
    It feels like a cold slap in the face, by the way.
    »
    » Consult the creative brief
    

    View Slide

19. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    find your Inspiration:
    It feels like a cold slap in the face, by the way.
    »
    » Consult the creative brief
    »
    » Sources: Everywhere. Magazines. Internet.
    

    View Slide

20. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    find your Inspiration:
    It feels like a cold slap in the face, by the way.
    »
    » Consult the creative brief
    »
    » Sources: Everywhere. Magazines. Internet.
    »
    » Save it for later: Pinterest, Gimme Bar
    

    View Slide

21. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    shopping for themes
    It’s like dating. Kind of*.
    »
    » Find one that comes from a good family
    *Dating is awful. Theme shopping is mostly pleasant.
    

    View Slide

22. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    shopping for themes
    It’s like dating. Kind of*.
    »
    » Find one that comes from a good family
    »
    » Don’t expect it to change after you buy it
    *Dating is awful. Theme shopping is mostly pleasant.
    

    View Slide

23. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    shopping for themes
    It’s like dating. Kind of*.
    »
    » Find one that comes from a good family
    »
    » Don’t expect it to change after you buy it
    »
    » You’ll know when you find the one.
    *Dating is awful. Theme shopping is mostly pleasant.
    

    View Slide

24. you may now open photoshop
    

    View Slide

25. View Slide

26. designers are a
    maddening combination
    of competitiveness
    and insecurity.
    -mike monteiro
    

    View Slide

27. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    the design process
    (The parts nobody talks about)
    At least once in every good design process, you may:
    »
    » Doubt yourself
    

    View Slide

28. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    the design process
    (The parts nobody talks about)
    At least once in every good design process, you may:
    »
    » Doubt yourself
    »
    » Rage Quit your computer
    

    View Slide

29. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    the design process
    (The parts nobody talks about)
    At least once in every good design process, you may:
    »
    » Doubt yourself
    »
    » Rage Quit your computer
    »
    » Delete everything and start over
    

    View Slide

30. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    the design process
    (The parts nobody talks about)
    At least once in every good design process, you may:
    »
    » Doubt yourself
    »
    » Rage Quit your computer
    »
    » Delete everything and start over
    Everyone does this. This is Good.
    

    View Slide

31. keep going.
    

    View Slide

32. Inspiration
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    design in the details
    Think big, work small.
    1. Color Palette
    2. Typography
    3. Background
    4. Header
    5. Navigation
    6. Content Area
    7. Sidebar
    8. Footer
    

    View Slide

37. 4
    5
    8
    6 7
    3
    AaBbCc
    1
    2
    Color Palette
    Typography
    Background
    Content Sidebar
    Header
    Navigation
    Footer
    

    View Slide

38. Carolyna Pro
    Josefin Slab
    5
    6
    7
    8
    1
    2 3
    4
    

    View Slide

39. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    designers’ block
    How to smash it.
    »
    » You can always afford 5 minutes
    

    View Slide

40. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    designers’ block
    How to smash it.
    »
    » You can always afford 5 minutes
    »
    » Play
    

    View Slide

41. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    designers’ block
    How to smash it.
    »
    » You can always afford 5 minutes
    »
    » Play
    »
    » Revisit your inspiration
    

    View Slide

42. learn to code
    (you can do it)
    

    View Slide

43. goodie bag
    

    View Slide

44. graphics
    »
    » TheInkNest.com
    »
    » CreativeMarket.com
    »
    » iStockphoto.com
    colors
    »
    » color.hailpixel.com
    »
    » colourlovers.com
    »
    » kuler.adobe.com
    textures
    »
    » lostandtaken.com
    »
    » subtlepatterns.com
    »
    » flickr.com
    typography
    »
    » typecast.com ($)
    »
    » typekit.com ($)
    »
    » google webfonts
    

    View Slide

45. learnin’
    »
    » codeschool.com
    »
    » codeacademy.com
    »
    » dontfeartheinternet.com
    »
    » lynda.com
    »
    » hackdesign.org
    organizaiton
    »
    » teuxdeux.com
    »
    » workflowy.com
    »
    » app.weekplan.net
    inspiration
    »
    » real life!
    »
    » puglypixel.com
    »
    » dribbble.com
    »
    » pinterest.com
    »
    » webcreme.com
    »
    » awwwards.com
    

    View Slide

46. work smarter.
    

    View Slide

47. have a plan.
    

    View Slide

48. stick to the plan.
    

    View Slide

49. keep going.
    

    View Slide

50. be fearless.
    -andrea rennick
    

    View Slide

51. this is the best job
    in the world!
    let’s do it right.
    -MIKE MONTEIRO
    

    View Slide

52. @houseofgrays
    speakerdeck.com/houseofgrays
    

    View Slide