DIY Blog Design

20 Flares Filament.io 20 Flares ×

A few months ago, this blog got a little spruce up and I’ve had some readers ask me who I hired to redesign the site. Here’s a little secret: I did it myself. Fo’ free (almost). I know I’m always searching for DIY blog design inspiration and links to helpful sites so I figured I’d share some here. With a non-existent budget to beautify the place, DIY was the only was to go.

DIY blog design is a new love of mine. Done properly, it’s not a total time waster. When I first embarked on the whole DIY blog design thing, it was a complete time suck. I’d start looking for graphics on Pinterest and lose all focus pinning away recipes and outfits and quotes and oh the quotes. I’d search for backgrounds and find 5 I liked in blue only to find 3 more I liked in turquoise. It was a scatterbrained disaster. I was getting nowhere.

In order to really conquer DIY blog design, I had to hatch a plan. I did some research and, sadly, have zero links to provide you. I read so many things on how to design a site, I committed it to memory and just ran with it. Here I’m detailing exactly what I did and sharing the links to the resources I used. Use them exactly or as jumping off points. Be inspired!

So here’s what I did to get the ball rolling on my DIY blog design:

Headway — The Drag & Drop Theme For WordPress

  • I purchased a premium theme. This is the only thing I paid for. It was under $100 bucks and I’m able to use it on two sites.  I toyed with free themes first and some looked really great – clean, elegant, text based and right up my alley. But I found the more time I spent fiddling with one aspect to add this or that, the more work it took to rearrange things to get everything I wasn’t fiddling with to stay the same. I ended up going with Headway Themes* because from the reviews, it seemed like the best choice for a non-techy person like myself. Drag and drop design? Booyah! It’s been a dream for the simple fact I can change one thing without affecting the rest of the site. The support forum is pretty awesome, too. I’ve asked many a newbie question and everyone’s been nothing but friendly and helpful. Is it necessary? Certainly not. I think a lot of it has to do with how much time and what kind of experience you have. I recommend Headway Themes*, but if free is for you then definitely check out these clean themes I drooled over. Install and blog away. *The Headway Themes links are affiliate links. What does that mean? If you happen to buy Headway after clicking on the link, someone somewhere will throw some money into my guitar case.

  • I studied the blogs I love and what draws me to them. Quickly, I noticed simplicity was key. I also noticed I didn’t care much for lots of color or graphics. I’m really drawn to subtle design elements. I was careful to take note of what kind of layout I was most drawn to. I like content on the left, info, product and ads on the right, a clean and easy to find navigation bar, I don’t care for any information in the footer and I appreciate and connect better with a blog when there’s a photo of the blogger. After I had this in mind, it became a hell of a lot easier to move forward with focus.

  • I created a color scheme. The only thing I knew was I liked simple, subtle colors. Offline, I’m all about bright colors but online I’m really more about the understated. I visited the blog Creature Comforts because they have a “color crush” category with unique combinations; it’s pure inspiration. I ended up choosing colors which reminded me of an old ballet photograph. I created a color palette using Colourlovers (highly addictive) and pull it up whenever I’m making changes to the site.  Some elements may not be noticeable but in some parts of my site, the font isn’t actually black, it’s the smokey color above. I don’t use it everywhere but it’s nice to have a the colors handy to keep me focused when I’m changing things around.

  • I used a free background. I debated between a plain white background and using something with texture. In the end, I went with the best of both worlds by using a free background I found online and then keeping the body, the main part of my content, on a white background. The honeycomb pattern I use as a background can be found here. It’s totally worth checking out because it comes in a whopping twenty colors in both a large and small honeycomb design. I searched for free blog backgrounds via Google but nothing was simple enough for what I wanted and a lot of the sites had that not so legit feel to them. I attempted to create a background pattern on Colourlovers using my color palette but the translation was just too literal and not at all subtle. It’s a great tool, though, and anyone who needs a background pattern should play around with it. I found my background by looking at blogs that usually offer free downloads for DIY projects and found a lot of good stuff that way.
Image by Stefanvds via Flikr.
  • I created a header. I knew I wanted a simple header with a bit of a dreamy, romantic feel so I started by spending sometime on Flikr. I wish I could remember what I searched for but whatever it was it led me to bokeh. Did you even know these little light bubbles had a name? Bokeh. I saved the image above onto my computer, uploaded it to Picnik and cropped it to the recommended header size (Headway spells it all out for you so be sure to check what size your particular theme requires or else you might end up with a distorted image). After cropping, I played around with the color so it would match my color scheme. I slapped my blog name on there and a little tag line and voila!

  • I put my mug in the sidebar. I wasn’t 110% sure if I wanted to put my face out there but I reminded myself how much more I like a blog when I can see who’s behind it so I did it. Again, Picnik to the rescue. I cropped a photo of me and a friend, added a Polaroid frame, tilted it just right and added a splash of color. I LOVE Picnik. Really. It’s free and let’s you do amazing things to images. It makes me feel all Photoshoppy without really being a Photoshop chick.

That about sums up my little DIY blog design adventure up until this point. I’d say the process took about a week only because I had to do it in short spurts. If I had been able to just sit at the computer uninterrupted, I’d say the implementing could take just a day or two. The longest and hardest part, for me at least, was finding the right inspiration and deciding on the right look for my space.

I decided to finally make this blog more personal because I realized readers need to feel welcomed not only by the content they’re reading but also by the look and feel of a blog. I know I stick around a lot longer on a blog I find visually appealing versus one that makes me want to click on through to the next blog.

Since undertaking this DIY blog design project, I’ve become a little obsessed over the visual way content is presented. While the redesign changed the way my site looked, it wouldn’t do anything if my content was just posted with little thought for how it appears visually. Here are two things I’ve been focusing on when posting content which I’ve found helps to keep my content up to speed with new fashionable digs.

  • If you’re going to use an image, then make sure it’s sharp and clear. Some free for use stock images can look kinda fake and staged (well, cause they are) and the poor quality comes across. It can totally ruin the reader’s experience. It’s not to say you won’t find good free stock images but be sure to look around. My personal method? Flikr it up then Picnik it. I’ve searched the Creative Commons but usually have better luck doing a regular search for something then just clicking around. Time consuming? Yes. Worth it? Most definitely. Here and there, if the owner of the image allows it, I’ll alter the image in Picnik to get the mood just right for a post. Looking for images? I collect images I find on Flikr with an attribution license on Pinterest. Use away!
  • If you’re not big on using images or just don’t have the time, then be sure to take the time to bold and italicize text and carefully break up your content. I usually write an entire piece out and then go back and read it out loud. If there’s something I would emphasize when I’m talking, then I make sure it stands out while someone’s reading it. It’s tricky, though, because there have been times when I’ve found myself making every other line bold. I like to step back and make sure it looks visually balanced and appealing. So orchestrating your text can mean a lot of things: bold text, italicizing just one word, paragraphs, isolating a single phrase, and sometimes, just leaving it alone.

My DIY blog design project has been really fulfilling. I think in another life I’d go study graphic design because it’s absolutely hypnotizing for me. I get excited every time I see my little site. And the best part? Knowing I did it myself…booyah!

20 Flares Twitter 1 Facebook 18 Pin It Share 1 Filament.io 20 Flares ×

14 Comments on DIY Blog Design

  1. Lisa Quinones-Fontanez
    29 September, 2011 at 4:51 pm (3 years ago)

    That’s great! And I love your design. I am thinking of a blog makeover myself…

    Reply
  2. Lisa
    29 September, 2011 at 9:01 pm (3 years ago)

    It looks fabulous! Not busy but very elegant and simple. I, too, have done my blog headers in the past but I use Adobe Photoshop. Thx for sharing!

    Reply
  3. Justice Jonesie
    29 September, 2011 at 9:37 pm (3 years ago)

    This is awesome and you did a fantastic job! I need a new header and I’m tempted to do it myself but can only imagine the mess I’ll make. AY!

    Reply
  4. Sheri
    29 September, 2011 at 9:55 pm (3 years ago)

    Carla, this looks great. Thanks for the great tips. I’m in the process of finding something that works right and now I have more notes to go from. Thanks again.

    Reply
  5. Unknown Mami
    29 September, 2011 at 10:57 pm (3 years ago)

    You did a great job.

    I used to be on Blogger and when I switched to WordPress I did the move and design myself. I’m glad I did because I learned a lot and I enjoyed it. Sure there were glitches along the way, but now I know and understand so much more than if someone else did it for me. Plus, I can afford me.

    Reply
    • Carla
      29 September, 2011 at 11:14 pm (3 years ago)

      LOL I love that – I can afford me!

      Reply
  6. Sujeiry, 1st Lady of Love
    29 September, 2011 at 11:13 pm (3 years ago)

    I actually did the same for my site when I started. I bought a template for about $50, tweaked the colors (the color scheme of black, fuchsia and white came from my logo) and added the header. But, eventually, I wanted my site to have the feel of an online magazine. I wanted readers to know what I was about and what I offered, Pepa Power™ mission included, at first glance. So, I hired someone to add some features. It was affordable. Only $150! In total, my site costs $200. Not too shabby :-)

    Reply
    • Carla
      29 September, 2011 at 11:16 pm (3 years ago)

      I think a lot of people don’t know how affordable updating your blog design can be. And the return is priceless!

      Reply
  7. YvonneInLA
    30 September, 2011 at 12:24 am (3 years ago)

    It looks really good. I’m glad you included the photo, it’s my favorite element. You’ve inspired me. My blog needs a kick in the pants.

    Reply
  8. theartmuse
    30 September, 2011 at 2:39 pm (3 years ago)

    First off, congrats! Even with step by step guidance, putting together your site is always lot more difficult than what you envision it to be like in your head. It’s like, the ideas flow in, but darn it, HOW do I execute it! Never easy.

    I love the look. I’m super drawn by sites that are light with simple design. Let the content speak for itself. Great, great job!

    Reply
  9. Mercedes @BeChicMag
    30 September, 2011 at 10:42 pm (3 years ago)

    Great tips, Carla!! I need to start learning how to do these DIY Designs.

    Reply
  10. Presley's Pantry
    1 October, 2011 at 1:13 pm (3 years ago)

    Thanx for the inspiration….I’m about to give my site a make over! It is needed!

    Reply
  11. Yoly de Cuponeando
    1 October, 2011 at 4:58 pm (3 years ago)

    Good job! I love, love Headway themes. Thank your for sharing those resources. Now, I need to find the time to work on them.

    Reply

Leave a Reply

CommentLuv badge

20 Flares Twitter 1 Facebook 18 Pin It Share 1 Filament.io 20 Flares ×