Redesigning This Blog Based on Components

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.

Design Workflow

Over the last year, I have made it a goal to continue to refine my design process. Iterating on design includes the process and tools as well as the art that you are creating. As a user experience and user interface designer, I have be able to work efficiently. These are the tools that I use on a day-to-day basis:

Sketch

I’ve used many programs over the years: Photoshop, Illustrator, Fireworks, etc. None really hit a sweet spot for me in terms of creating mockups, prototypes, and user interface elements. Once Adobe announced the decision to kill off Fireworks, I made the switch to Sketch. I have loved every moment of it.

The app is completely vector and Mac native. Thoughtful features include: multiple art boards, infinite canvas, retina support ( @2x, @3x ), SVG generation, OSX Versions support, etc. Highly recommended.