Site Redesign in the Open

This post is part of a series on the open redesign of using atomic design and Pattern Lab.

It’s time for another reboot of

I put a lot of time into the current tumblr site - especially in crafting the masthead. But I find it limiting, and reactionary, crafted from one idea with little creative room to grow. It was essentially a one-off idea, not an identity I want to associate myself with or build a brand on. There was no system backing the concept, or allowing a cohesive vision to be designed, iterated on, or maintained.

So it’s time to start over - and this time to do it in the open. What comes will be a reflective exercise in branding, atomic design, and process. Along the way I will try to share insights, challenges, and little tips along the way. I encourage a discussion.

My goals include:

As for now, the site it rather bare-bones - but intentionally so. We’ll probably start with a description of the development environment.

Update 1: The Development Environment is built with Jekyll and hosted on Github Pages. I’ve enjoyed the simplicity of static-page generators since learning of them. Writing in Markdown is a dream, with its basic styling support keeping everything semantic and clean. Staying simple means I can work fast and keep complexity low. The Github Pages user and project structure allows me to build and deploy projects, labs, and smaller sections as fully version-controlled, open source repositories all under my custom domain name.

I’ll be using SASS, grunt, and patternlab node to supplement jekyll. A major part of the redesign will be utilizing atomic design principles to build a sustainable, consistent, and maintainable platform. This instance of patternlab is housed as an ignored sub-directory of the main site. I’ll be talking more about this setup soon.

I’m using Sublime Text and the gem SourceTree to develop and manage code.

Update 2: Pattern Lab + Jekyll FTW

Read how I’ve integrated Pattern Lab and Jekyll with as little coupling as possible yet created a one-way DRY workflow that is driven with atomic design principles.

Update 3: Creating a Content Inventory

Read how I’ve defined what content I want to include on the site upfront, with an eye toward relevance and structure.

Update 4: Style Tile Version 0.0

I’ve hosted the first version of a style tile on the site, available for viewing here. For the curious, my implementation is a blend of Samantha Warren’s and Sparkbox’s — not as polished as Warren’s and not yet as interactive as sparkboxes. I plan to iterate on these style tiles - stay tuned!

Update 5: Style Tile Iterations

Read how I’ve used Style Tile Iterations to explore the look and feel of the site and then extract them into my instance of pattern lab node. I had to strike a balance between design and development layout - one that resulted in what you see now.

Originally posted 12/21/14 - Brian Muenzenmeyer - Follow me on Twitter