The Complete List of Resources I Used To DIY My Blog Design

Blogging, Debt Repayment

Affiliate links and non-affiliate links are used throughout this post. For any affiliate link you click on, a commission or fee will be paid to WMSB if you make a purchase. No additional cost will be passed to you and everything in this post was actually used by me or almost used by me. Thank you for your support.
The Complete List of Resources I Used to DIY My Own Blog Design
It’s official! My blog design is finished!

I decided to try it myself because I didn’t know exactly what I wanted yet, and I also didn’t want to spend a lot of money on it. I’m a few months away from paying off my credit cards (I’d be done next month if I hadn’t bought a new macbook or a flight home, but both of those were totally worth it). For these reasons I couldn’t see spending $300, $500 or even $1,500 on a whole new blog design.

Back in the day of live journal and blogger I wasn’t too bad at designing graphics and basic HTML. I am totally out of practice, and a lot has changed since then, but I figured I would dedicate some time and energy to a DIY blog design, and if it was horrible then I’d go back to my original one while I saved for a professional’s help.

I am so pleased to tell you right now that I’m OBSESSED with my new design! A little later in this post I’m going to share with you where I got every element, but first, let’s walk down memory lane.

I started Where My Soul Belongs in December of 2012 after re-branding and moving from Blogger. This is what it looked like:
The Complete List of Resources I Used to DIY My Own Blog Design

In the beginning I didn’t have the ad above my “About Me” image, and the menu items have changed here and there, but it was otherwise basically the same. I have always loved that design. It was done by my friend Jac who no longer does blog design, but we met IRL at the first Influence Conference so that has always felt really special to me. I have a thing for butterflies and that style has represented me for a long time. But lately I’ve felt like it was time for a change.

Like I said before, I really didn’t know what I wanted. I liked the floral water color look, and the swatch-y water color look. I also loved my colors and didn’t want to have to go through and rebrand all of the photos, so I stuck to design ideas that were the same colors. So the first couple hours of my design process went into brainstorming what I really wanted from a design.

Ultimately, I determined that not only did I want to upgrade my header and graphics, I no longer loved the layout of the blog itself. I saw so many fancy sites out there and I wondered how much coding went into making them. That’s when Stephanie taught me about Themes. I know WordPress emails me about Themes, and there are Themes settings. But I had no idea what they were or what their purpose was. (If you don’t either, it’s like the format of your layout, basically. You can learn more about themes here.) She told me about all of the ones she’s saved from Creative Market’s free weekly goods, so I started peeking around at them. I couldn’t believe that a whole new blog layout was that easy!

Stephanie also told me that once I found one I liked, she could help me install it, but that it was super easy. I didn’t believe her, until I finally found THE ONE and read the directions. It really so easy! It’s a little too easy, in fact, because then I rushed to install it last weekend without having a graphic design done that I loved. But I didn’t even care.

I got to work on a new graphic design. I created one that was OK. I liked it, but I didn’t love it. So I installed it for awhile while I really dedicated myself to finding the “THAT’S THE ONE” design like I found in the theme.
How I DIY's My Own Blog Design on WordPress
You can see I added the flower to my signature and had planned to incorporate it into my graphics in other ways as well.

How I DIY's My Own Blog Design on WordPress
But since I still wasn’t totally in love, I went back to the internet.

I spent a few more hours perusing Creative Market, Pinterest and Google, looking at what was available, deciding what I wanted, and trying to imagine what it would look like in my head. You can see all of the resources I’ve “favorited” while looking for the right elements here.

Finally, I found EXACTLY what I wanted. Read more below to see the final reveal (if you’re not already viewing this in your full web browser)!

How to Setup a Blog on WordPress

First, I highly recommend switching to WordPress. I was on Blogger for years, and yes it’s an easy-to-use interface. However, WordPress gives you so much more functionality AND you own your content vs. Google owning your content. I’ve witnessed those horror stories you hear with my own eyes as friends had their sites shut down for breaking some Blogger rule that Google didn’t even tell them about. It took me a couple weeks to get used to WordPress and get over the fear of making the wrong choice, and now I’d never look back!

You will then need hosting. For most of my time blogging, I used SiteGround. I LOVED it. They have incredible customer service and I really wish I had bought the longest plan possible to take advantage of their new customer rate. Unfortunately, I did not. As long as you sign up as a new customer, it’s only $3.95 a month!

I currently use Bluehost. I made the switch about 6 months ago when SiteGround wouldn’t price match their new customer rate (I heard at a conference that they will regularly do this and it was frustrating to me that they wouldn’t) and I could no longer justify the expense of a fancier hosting that I actually didn’t need. As it turns out, even in hosting you really get what you pay for. But now that I’ve gotten past the setup on my own, aka with J’s brother’s help, (BlueHost charges for that, SiteGround doesn’t) and through the kinks, my only issues are that it’s really hard to edit within your cPanel so I can’t change the max image load size and I can’t figure out how to change the return address when emails are sent from my blog in reply to comments, etc. One day I’ll figure those things out. Anyway, if you’re looking for a shorter term host, or one that will still be cheaper at the end of your hosting subscription, check out Bluehost. Just be aware that if you need a lot of customer service, they’re going to charge you and you’d be better off with SiteGround.

How to Do Your Own Blog Design on WordPress

OK, onto the pretty parts! Let’s talk about this particular design!

The Theme

I spent hours on each step, but I’m so glad I did. First, it took me a couple of days of searching to find just-the-right-theme. You can buy themes all over the place, including etsy. But I really liked the setup of Creative Market so I started there. I found a variety of of themes that I liked, but suddenly, one night, I came across Felicity. And I literally shouted out loud to an empty house, “This is it! This is the one!” You can also use Felicity on Blogger if you don’t want to make the switch.

Themes that were in my “I really like this!” pile were also: Stephanie; Alexandra; Enamored; and Zarya. You can see that they had some similar features to Felicity, but when I looked at Felicity it had all of the different elements I loved from each one. I am still so thrilled about it!

Next, I started looking for design elements that would make WMSB stand out.

The Fonts

I was shocked at how opinionated I was about fonts. Thankfully, font sites these days allow you to preview common words you use. It turns out that I prefer rounded W’s. I narrowed my choices to Wilfur and Reusk. To choose, I asked a non-blogger, but blog-reader, what she thought. Together, we selected Wilfur. I bought the font and now I’m not allowed to look at fonts anymore because they’re so temping and I can’t redesign everything just to change my font haha. I also downloaded the free google font Raleway, as that’s a key font in this theme, and I liked the way they looked together.

The Graphic Elements

Like I said, I liked the water color flower design, but I couldn’t find exactly what I wanted. I eventually learned that you can change the colors of overlays in picmonkey. Simply pick “Use Your Own” overlay in that section of PicMonkey and then change the color. Now I no longer had to look for elements that were the exact colors I wanted to use! Bam!

I bought this set of hand drawn design elements for $5 and that’s how I came up with Design Option 1. It was OK, but not perfect.
The Complete List of Resources I Used to DIY My Own Blog Design

Again, I went back to the “drawing board” and decided to try out some free elements I discovered on Pinterest before I spent more money. I hoped I would either find something perfect or at least have a better idea of what I wanted. I found this free cacti illustration set and LOVED it, but it didn’t fit my brand.
The Complete List of Resources I Used to DIY My Own Blog Design
I grew up in the desert but I write about the PNW now and I thought it might confuse readers and new visitors to see cacti in my header, and then read about boating. You can download these free Cacti elements, and more gorgeous freebies, at Gold and Berry.

I went back to Creative Market and began searching overlays for pacific-northwest-friendly terms. That’s when I found this geometric design set by Hannah! It was basically exactly what I wanted, but the mountain here is a volcano, so it looks slightly different. I decided to contact her directly and talk about a semi-custom illustration. I’m so glad I did!! She did an incredible job capturing Mount Rainier and was wonderful through the process while I decided what colors to use. I instagram about Mt. Rainier all the time so you’ve probably seen it before. I would highly recommend her illustration, logo and design services! In the end, I chose colors that were similar, but slightly different, than the last ones. And when she sent me the final illustrations I actually became a bit emotional! I’d found it!

Once I received her final images, I got to work in PicMonkey creating the header. After 42 (literally) versions, moving the wording all around, changing the size of Mt. Rainier, and adding and deleting a tag line, I asked J his opinion and then came to a perfected design.
The Complete List of Resources I Used to DIY My Own Blog Design I literally spent 3 hours on this stage alone, but knowing I had EXACTLY what I wanted without also torturing some poor designer (and incurring extra design draft fees), it was totally worth it!

Social Media Templates for Pinterest Friendly Images

Then I started looking up how to create a template for my post header/feature images that will make creating pinterest-friendly images even easier. That’s when I found Holly McCaig! She has AMAZING templates on Creative Market and I insist that you go check them out! I found some free resources on her blog that helped me create my own. I’m currently using a free trial of Pixelmator, which is .psd friendly. After a lot of moving overlays around, changing colors, and choosing how I wanted the fonts to look, I came up with a few templates that I’ll use to create a consistent look around WMSB! I started with the carosel photos on top of the design and am working my way backwards through the archives.

After 4 hours of figuring out how to make these overlays, finding a software that is Mac & .psd Friendly and won’t break the bank (HELLO 30 day free trial!), and choosing how I wanted them to look, I can now update the photos in a matter of seconds. Seriously, seconds. Holly charges about $25 for a full pack of designs, but now has smaller options for only $5. If she had those $5 packs available two weeks ago, I would have bought them for sure and saved myself the headache. But if you have a shop or want a bigger variety of options, the larger packs are also a steal. The consistent image alone is priceless and I feel like it has transformed WMSB from a standard lifestyle blog to more of a magazine format.

Here’s an example of one such image:

The Laundry Room Remodel That Made Me Cry: Diary of a First Time HomeOwner

click here to read the post

At that point, I was officially done with my design!!

So without further ado, here is the final product!

Homepage

The Complete List of Resources I Used to DIY My Own Blog Design

Topic Archives

You can see that I have not updated all 360 of my post images, but I’ll get there!
The Complete List of Resources I Used to DIY My Own Blog Design

Archives by Date

I chose a different layout by date because I figured this was more appropriate for scrolling, whereas if someone is searching for posts on a specific topic, that layout is more friendly for a quick glance.
The Complete List of Resources I Used to DIY My Own Blog Design

Work With Me Page

I felt like this new design created a cleaner, crisper work with me page as well!
The Complete List of Resources I Used to DIY My Own Blog Design

So that’s it! I hope this was helpful to all of you who are curious about doing a blog design on your own! In the end I’m certain I saved money by not outsourcing it, but the time I spent was time that took away from writing on my blog. As a childless person it was easier for me to set aside the time on Saturday and Sunday mornings to work on things. And like I said above, I may have paid for the design if I wasn’t so close to paying off my credit cards. There are a LOT of great reasons to use a professional for this sort of thing, but if you’re just not able to right now, please know it’s possible to have an awesome looking blog on a budget!

I’d absolutely love to hear your thoughts, opinions, constructive criticsm or if you’ve found anything that just doesn’t work properly. Let me know in the comments or send me an email. Thank you!

Also, until April 30, 2016, celebrate 100,000 page views with me and enter to win one of two Starbucks gift cards by filling out the reader survey!

Previous Story
Next Story

15 Comments

  • Reply
    Erin
    April 27, 2016 at 12:49 pm

    Thanks so much for posting this! I’m brand new to blogging and paid for a basic template, but have been struggling my way through HTML & CSS. I’ve been able to make a few changes & additions on my own, but all of your resources are super helpful!

    • Reply
      Brittany
      April 28, 2016 at 11:40 am

      Oh good, I’m so glad to help, Erin! Good luck with your blog! It’s a pain to sludge through the learning process but once you know it, it’s so helpful!

  • Reply
    Rachael
    April 27, 2016 at 7:56 pm

    SO EXCITING!!! This looks amazing and I’m beyond impressed that you did this yourself. You’re such a rockstar!
    Rachael recently posted…How to Prep for an Awesome Week

    • Reply
      Brittany
      April 28, 2016 at 11:39 am

      Thanks, chica! And thanks for all the moral support while I was in the design process!

  • Reply
    Robyn Proctor
    April 28, 2016 at 5:43 am

    Congrats on your new blog design! I’m not currently on WordPress but I’ll keep your information in mind in case I ever make the switch.
    Robyn Proctor recently posted…How Old Is Your Child?

    • Reply
      Brittany
      April 28, 2016 at 11:39 am

      Great, I’m glad to help! And thank you!

  • Reply
    Paragon2Pieces
    April 28, 2016 at 10:39 am

    The new design is lovely. It’s been a lot of fun to watch your blog evolve over the years.
    Paragon2Pieces recently posted…Hospice; Advanced Care Directives; and Saying Goodbye

    • Reply
      Brittany
      April 28, 2016 at 11:38 am

      Awww! Thanks, friend!

  • Reply
    stephanie
    April 28, 2016 at 3:32 pm

    LOVING this. i love this so very much. <3

  • Reply
    Susannah
    April 29, 2016 at 3:32 pm

    Woohoo! This is SUCH a great list and I really love your design!!

  • Reply
    dawn
    April 30, 2016 at 7:19 pm

    It looks great! I love how the colors from your header image continues with your photo for your posts. I did a big theme change a few months ago, but haven’t gotten back to tweaking it. Now I feel motivated to get it done.

  • Reply
    April Progress and May Goals - Where My Soul Belongs
    May 2, 2016 at 7:12 am

    […] the week that I was re-doing my blog design, there were times I would get really excited, and buy an element or illustration, before […]

  • Reply
    Jen @ Noting Grace
    May 5, 2016 at 1:41 pm

    LOVE this new design! I’m so hesitant to switch to wordpress, but this makes it not AS scary (ish). Truly lovely and a great tutorial. Thanks for the inspiration!

  • Reply
    Nereyda Gonzalez
    May 9, 2016 at 11:42 am

    Really great post! Pinned under Nereyda1003 :)
    I need to do more work with my graphics on my blog, especially on Pinterest.

  • Reply
    Farrah
    May 25, 2016 at 10:10 am

    I love this! That’s so awesome that you did this all by yourself! I just customized the crap out of a ready-made layout, but I’ve been thinking of doing a revamp once I have a bit of spare time again. Pinning this! <3
    Farrah recently posted…My First Blogger Meetup

  • Leave a Reply

    CommentLuv badge