New design!

Welp, here it is. I’ve been talking about a new design of this blog for what seems like a year. It’s about time I actually ship something. So I did… all in one night.

It’s based off of the base theme I’ve been creating for many months, Happy. While I’m overall pretty pleased with the direction the Happy theme is going, I’ve delayed redesigning this site because I keep tinkering with the base theme. Well, forget that. It was beyond time to replace my previous, very outdated theme.


This color scheme is definitely outside of my very small comfort zone. But I’ve liked DarkSlateGray ever since I saw it on the 147 Colors website, and this color scheme is just a lighter version of that. So we’ll see how it stands the test of time.

For typography, the body font is Adobe’s Source Sans Pro. It’s the same font that ships with the Happy theme (though I may remove having any embedded font in that theme), and I’ve like it for a long time.

The headlines are Trocchi, which I didn’t discover until I saw Rafal Tomal’s Typespiration site. I’ve always liked slab fonts, but they feel too harsh sometimes, and this one seems just right with its little round bits. And I’m sure that summation tells any real typography dorks just how little I know about it. But when I saw the demo on Typespiration paired Trocchi with Source Sans Pro, I was sold.

I certainly look forward to any design feedback y’all may have. I’m not a designer. So this is me – out there – on a limb.

Oh, Content

I’ve added two new sections to the site: My work and My toolset. Neither is filled out yet (you don’t expect that in one night too, do you?), but I’m excited about both.

The section for work will obviously be a simple portfolio. A relatively boring but necessary thing for someone that advertises themselves as a consultant.

For the toolset section, I plan to host reviews, or something like that, for the development tools, plugins, and services that I use in my workflow. Hopefully it will be a good opportunity to share with people what I use to make websites, and also offer a way to monetize this space a little bit. So, when I mention one of my tools in a blog post, I can link to one of the items in the toolset, which will give a thorough description of the item, and a disclosed affiliate link. That way, affiliate links I use are honest, and people gain some insight about what I’m linking in my blog posts. Hopefully it’s a win, win.

The about section is also going to get a makeover. I at least put a picture on that page to try to be a bit more personal.

Plenty to do

In addition to lots of content review, I’ve got plenty else that still needs work around here.

For one, all my feature images were designed around a 580px max width. So I’ll need to go back my more popular articles to make them not look so bad with the new wider layout. I also need to give some love to single post styling, especially for image and heading margins, and list styles. They are all still the Happy base styles, which are intentionally light.

I also need to create a custom page template for the homepage. The sidebar is pointless on the homepage, and I want to feature feeds from my portfolio and toolset in some way. But I wanted to go ahead and get version 1 out of the way. And I’d rather fill out that content first anyway before putting it on the homepage.

I’m aiming to make December a big month for my personal projects, and this is step one. So keep an eye out, because I’m not done with announcements yet!

18 thoughts on “New design!

  1. I can relate, as Ifind myself constantly putting my own redesigns / improvements on the back burner. I like your new theme so far – clean, simple and functional.

  2. Hey Brian,

    I dig it. I really like how clean and open it is and you’ve got the spacing looking way nice.

    I think my only suggestion would have to do with font colors. A little more contrast in the nav (lighter text against the green background) and having the body/comment area text be a bit darker would really make the text stand out.

    Just my two cents 🙂

    Great work as always!

    1. Thanks Ryan,

      That’s consistent feedback. I bumped the body from #747474 to #616161 and the titles from the body color to what my coworker calls “Printer’s black” – #231F20

      I have to rethink the nav color a bit to re-do it. But you aren’t the only one to say so. I just didn’t want it to be primary. I’ll stew on it : )

  3. I need to taste this a little bit longer. Maybe I’ll read your posts again to get some quality time with a new look.

    By the way, when is Happy published in or or is it?

    1. Sounds awesome, Sami : ) Look forward to your report!

      I’m in “strip it down” mode with Happy. It’s gotten tested pretty well in the wild (like right here), and now I’ll be taking out what I haven’t been using, and further refining some styles to make it even easier to child theme. It’s definitely going on .org – but I doubt Theme Hybrid. I’ll probably put a less generic design as my contribution there, as it’s more in line w/ what Justin’s been doing.

  4. Two thumbs up on the redesign. I always love it when developers start to embrace typography as much as they do functionality. Though the two are independent of one another, combined they are powerful and I think you have done a good job with the pairing.

    If I were to be totally nit-picky, I would say that the line measures on desktops far exceeds the comfort zone of 45-75 characters. Trust me, I struggle with this all of the time when dealing with media queries. If you are interested, this article is a great primer and I am alway referring back to it.

    Oh, and for future reference, the “round bits” you are referring to are called terminals 😉

  5. Hello… very nice tutorial, i have a question….when you start a theme you build on top of the theme or start from scratch??? i noted that (by cloning your happy repository locally) there is a lot of files on revision 0…, you copied them from the base theme or posted all in the first revision?? i am a beginner in theme design and i want to know what is better to start with…. copying the base theme and building on top or building all from scratch???.
    Thanks in advance for the reply.

Leave a Reply