how to theme: a design workflow for wordpress
TRANSCRIPT
HOW TO THEMEA Design Workflow for WordPress
#wpbootcamp
JOEL G GOODMANPRINCIPAL, BRAVERY MEDIA
#wpbootcamp
Bravery is a design and web strategy agency based in Austin, TX. We craft memorable experiences
with colleges, universities, & startups.
@JOELGOODMANBRAVERYMEDIA.CO | @BRAVERYMEDIA
#wpbootcamp
HOW TO THEMEA Design Workflow for WordPress
#wpbootcamp
TOOLS OF THE TRADE
#wpbootcamp
#wpbootcamp
#wpbootcamp
#wpbootcamp
#wpbootcamp
#wpbootcamp
#wpbootcamp
DESIGN THINKING
#wpbootcamp
Whether you use a framework, create child themes, or roll your own…
Know what’s possible within the structure you’re using.
#wpbootcamp
DESIGN THINKING
Find out what your client wants their visitors to feel and experience.
#wpbootcamp
DESIGN THINKING
Design patterns, not pages.
#wpbootcamp
DESIGN THINKING
Design patterns will fit into most WordPress theme structures.
#wpbootcamp
DESIGN THINKING
DESIGN TOOLS
#wpbootcamp
Sketch, Photoshop, Illustrator, Gimp, whatever…
Use presets and variables as much as you can.
#wpbootcamp
DESIGN TOOLS
#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.
#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
#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
CODING
#wpbootcamp
Setup a dev WP instance someplace.
#wpbootcamp
CODING
#wpbootcamp
REMOTE DATABASE HOSTING
digitalocean.com/?refcode=7e7a6eabc4cd
Choose a code editor that works for you…
I like code editors that think in projects… so I use Sublime Text.
#wpbootcamp
CODE EDITORS
sublimetext.com
#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
#wpbootcamp
PLATFORM AGNOSTIC ALTERNATIVE
prepros.io
#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)
#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
#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.
#wpbootcamp
#wpbootcamp
DELIVER YOUR THEME
#wpbootcamp
If you can recommend managed hosting, do it!
#wpbootcamp
DELIVERY
@JOELGOODMANBRAVERYMEDIA.CO | @BRAVERYMEDIA
#wpbootcamp