A few sneak peeks at my site redesign

Color swatches from the redesign
Pattern Library Atoms – the colors

Over the past four to six weeks, I finally started working on the redesign of this site. Last summer, when I still thought I might be freelancing, I hired my friend Clayton Gerard to design a logo. Even though freelancing isn’t for me, I still want to use the awesome logo Clayton designed, and it is the jumping-off point for the site redesign.

My ultimate goal for the site is to have a site for which I am excited to create content. I feel like the work of done so far is lending itself nicely to that goal. The colors are subtle, and the fonts are just write. There are small touches and flourishes that I find delightful, and hopefully my site visitors will too.

The post navigation from the site redesign
Pattern Library Molecule – the post navigation with code details.

I’m taking an atomic design / pattern library-based approach for the redesign. So far, it’s working really well. I spend time thinking about each atom, molecule, and organism before moving each forward to the next phase. Not only is this helping with consistency across my site design, but it’s helping me keep my code DRY (don’t repeat yourself). And frankly, I think it’s helping me make better design decisions.

Pattern Library Organisms – a post loop

I’m building the site on the half-finished Alcatraz pattern-library-navigation branch. I was excited to start testing the pattern library on a real-world project to see what improvements needed to be made. And I am making incremental improvements to Alcatraz as I go. Working on the half-finished Alcatraz branch has helped confirmed some of the decisions I’ve made. I ripped out a lot of opinionated code (styles, mostly), and it’s much easier to use as a parent theme.

I still have a ways to go before the site is complete, but I am really excited about the progress I’ve made to date. Keep an eye out for the new site in the next month or two!

Creating Themes with Atomic Design

I gave my first WordCamp talk in Sacramento last October, and it has recently been posted to WordCamp TV. In the talk I covered:

  • the basics of atomic design,
  • an ideal vs. realistic atomic design workflow,
  • strategies for building themes with atomic design.

Presentation Slides

An example of theming using Atomic design

I have had more time to experiment and create themes with atomic design since my WordCamp talk. I am actively working on adding a pattern library to Alcatraz, which will allow front-end developers to quickly style-up atoms according to a client’s style guide. There are a host of ready-made molecules that developers can modify, or give a coat of polish to bring them up to standard with a client project. I’m working on a big overhaul of Alcatraz’s navigation, and I am planning on including some organisms soon after.

View a live example of the Alcatraz pattern library (it’s very much a work-in-progress, so yes, it’s kinda ugly, 😬).