Design & Thesis Theme Framework for WordPress

Complimentary presentation for my session at WordCamp Jabalpur 2011. About design and how to implement it on Thesis

Transcript

1. Design & Thesis Theme
   Framework for
   WordPress
   by @kingSidharth
   #wcjbp, #design & #thesiswp
   for WordCamp Jabalpur 2011
   

   View Slide

2. How much can a bad
   design cost you?
   Guess?
   

   View Slide

3. How much can a bad
   design cost you?
   $300,000,000
   http://bit.ly/300mbad
   

   View Slide

4. Part 1:
   Design
   Part 2:
   Implement in Thesis
   

   View Slide

5. Design
   Part 1:
   

   View Slide

6. What are we designing?
   

   View Slide

7. What are we designing?
   • A personal website...
   • ... for a developer that...
   • ... servers as a blog, ...
   • ... online portfolio & collection of projects.
   (Example)
   

   View Slide

8. Whom are we designing
   for?
   • Fellow developers.
   • Prospect clients / employers.
   

   View Slide

9. What do they want?
   • Fellow developers: Tech., Projects you work
   with and your “call me ;)”
   • Prospect clients / employers: Problem
   solving skills and expertise.
   

   View Slide

10. Design time.
    Wireframes &
    Screw Photoshop Rant
    Live Magic Demystification Show
    

    View Slide

11. That’s how it’s done!
    

    View Slide

12. Implement in Thesis
    Part 2:
    

    View Slide

13. Why the hell do I like
    thesis so much?
    

    View Slide

14. Front-end of Thesis
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. Thesis Backend Options
    (Live Demo)
    

    View Slide

19. CSS Basics
    Tags: a{ color: white; }
    Classes: .links { color: white; }
    ID’s: #home_link { color: white; }
    Pseudo IDs : #header_area #logo { color: white; }
    

    View Slide

20. Design with hooks
    /custom_sample
    custom_function.php
    custom.css
    

    View Slide

21. Coding the Design
    (Live Demo)
    

    View Slide

22. Finishing Touches in
    Photoshop
    

    View Slide

23. git init
    

    View Slide

24. Questions?
    

    View Slide

25. Namasté
    King Sidharth
    UX Designer, Public Speaker
    @kingSidharth
    www.KingSidharth.com
    www.64Notes.com
    king@kingsidharth.com
    

    View Slide

26. Photo Credits
    • http://www.flickr.com/photos/jking89/
    

    View Slide