Around the end of June, I decided it was time to redesign my blog. On a flight back from Disney in Orlando, Florida, I opened up Sketch and began crafting a new design.

This is what I came up with:

I’ve always built my WordPress theme from scratch. I like having as little code as possible, speed, and hand-crafting custom CSS. I’m not against frameworks, I just choose not to use one for my own site. More on that in a future post.

Then I let the design sit for a week. Great.

I was also stuck on what I wanted the mobile layout’s navigation to look like. I still have work to do on that. That’s fine. Ship it. Iterate. Repeat.

Evolving the Approach

In the past, I would have taken my own mockup, put it in Zeplin, and then start coding out the CSS from the top down. However, this time, I decided to try something different: I would look at the code as components. With this task, I was not only creating the HTML/CSS but also cleaning up the PHP & HTML that makes up the current theme.

The site would consist of: the main template structure, a blog template, the main navigation, a blog topic navigation, the search bar, a social media cluster, and the blog post content area.

To build momentum, I started out with the smaller components. Doing that ends up being a quick win, which gives you a boost of creative energy. Then repeat and knock out another; repeat it again.

Social Media Block

This is one of my favorites. It went through two iterations. The technique for building the shadow for the div ended up being exactly what I wanted. Worked out so well.

FontAwesome was used for the icons. Just the other day, they released 30 more icons for the set. I then updated this component with the new social icons that were included: Snapchat, new Instagram logo, etc.

Main Navigation

Pretty straight forward. Before the blog categories were nestled under this menu. Now they are separate. That works better for me. Future ideas for this: animation on click and reveal Snapcode on hover of my picture. However, to get it out quickly, this was enough.