From discovery to planning to coding to delivery. This short presentation was given at WP Bootcamp Austin 2015.

1. HOW TO THEME
A Design Workflow for WordPress
#wpbootcamp

2. JOEL G GOODMAN
PRINCIPAL, BRAVERY MEDIA
#wpbootcamp

3. Bravery is a design and web strategy agency based
in Austin, TX. We craft memorable experiences
with colleges, universities, & startups.

4. @JOELGOODMAN
BRAVERYMEDIA.CO | @BRAVERYMEDIA
#wpbootcamp

5. HOW TO THEME
A Design Workflow for WordPress
#wpbootcamp

6. TOOLS OFTHE TRADE
#wpbootcamp

7. #wpbootcamp

8. #wpbootcamp

9. #wpbootcamp

10. #wpbootcamp

11. #wpbootcamp

12. #wpbootcamp

13. DESIGN THINKING
#wpbootcamp

14. Whether you use a framework, create
child themes, or roll your own…

15. Know what’s possible within the
structure you’re using.
#wpbootcamp
DESIGN THINKING

16. Find out what your client wants their
visitors to feel and experience.
#wpbootcamp
DESIGN THINKING

17. #wpbootcamp abookapart.com

18. Design patterns, not pages.
#wpbootcamp
DESIGN THINKING

19. #wpbootcamp patternlab.io

20. Design patterns will fit into most
WordPress theme structures.
#wpbootcamp
DESIGN THINKING

21. DESIGN TOOLS
#wpbootcamp

22. Sketch, Photoshop, Illustrator, Gimp,
whatever…

23. Use presets and variables as much
as you can.
#wpbootcamp
DESIGN TOOLS

24. #wpbootcamp
SKETCH [MAC ONLY]
sketchapp.com
Sketch is built primarily for web and app designers
It takes a web-first approach to interface design
You can copy CSS values right out of the interface
Still doesn’t do everything Photoshop does.

25. #wpbootcamp
ADOBE PHOTOSHOP
adobe.com/creativecloud
Photoshop in Creative Cloud has gotten a lot better
Art boards for different layouts in the same file
Reusable objects using Libraries
Industry standard

26. #wpbootcamp
AVOCODE
avocode.com
Avocode does versioning for design files
Generates CSS and Sass rules for easy copy + paste
Supports setting up Sass variables in the interface
Plugins for Photoshop and Sketch

28. CODING
#wpbootcamp

29. Setup a dev WP instance someplace.
#wpbootcamp
CODING

30. #wpbootcamp
REMOTE DATABASE HOSTING
digitalocean.com/?refcode=7e7a6eabc4cd

31. Choose a code editor that works for you…

32. I like code editors that think in
projects… so I use Sublime Text.
#wpbootcamp
CODE EDITORS
sublimetext.com

33. #wpbootcamp
CODEKIT [MAC ONLY]
incident57.com/codekit
CodeKit auto-compiles Sass, Javascript, Ruby, etc.
The built-in web server auto-updates your code
changes on-the-fly.
Lots of Sass and JS libraries included

34. #wpbootcamp
PLATFORM AGNOSTIC ALTERNATIVE
prepros.io

35. #wpbootcamp
USING SASS
sass-lang.com
Sass lets you set variables and reuse them
Mixins let you automate style patterns
You can use regular CSS with SCSS (Sassy CSS)
Helps keep your code DRY (Don’t Repeat Yourself)

36. #wpbootcamp
SASS TOOLKITS
bourbon.io
Choose a toolkit or framework that works for you
I use Bourbon + Bourbon Neat from thoughtbot
Others include: Compass, Bootstrap, Foundation, etc.
They take care of lots of presets for you

37. #wpbootcamp
SASS & WORDPRESS
underscores.me
Most parent themes & frameworks use some sort of
CSS preprocessor (LESS or Sass)
My base theme is based on _s (Underscores)
_s already uses Sass, so it’s a matter of retrofitting &
customizing to my needs.

39. #wpbootcamp

40. #wpbootcamp

41. DELIVERYOUR THEME
#wpbootcamp

42. If you can recommend managed
hosting, do it!
#wpbootcamp
DELIVERY

43. @JOELGOODMAN
BRAVERYMEDIA.CO | @BRAVERYMEDIA
#wpbootcamp