DIY vs. Professional Blog Design {Part 1}

In the short four months that Charming Imperfections has existed, it's gone through a lot of face lifts. I began knowing very little about blog design and figured my blog would do well using the free themes from blogger. This didn't last long as I perused through more and more blogs and realized one of the things that brought me back to them was their beautiful design. While content is still the most important aspect of blogging, I would argue that design ranks high also. DIY vs. Profressional blog design Part 1

DIY Design

So, what did I do with my cookie cutter blog design? At first, I wasn't willing to invest any money in this blog as I wasn't sure I would ever see a return, so a professional design wasn't even an option. I figured there wasn't anything design related that I couldn't Google about and learn how to do. I set out to put together a DIY blog design that I hoped would stack up against some of the bigger blogs I admired. Doing so would involve learning about html and css coding, creating images on Picmonkey.com, and spending countless hours that could have been used for writing posts.

What's involved in DIY design?

Well, here is what I learned about DIY website design: it's not easy. If you don't have a background in coding or design like I didn't, you can expect to spend many hours just learning the basics. Like I said before, that is all time you could be spending writing amazing posts.

Blogger

Now, if you use Blogger as a platform you will be doing some different things than if you are creating a self hosted Wordpress site. I started with Blogger, so here are some of the things you can expect to spend your time on when creating a DIY Blogger design:

  • Creating a background image in PicMonkey* or Canva (both are great programs!)
  • Making your header image

DIY vs. Professional Blog design.

  • In some cases: creating a menu image then uploading it to image-maps so that you can embed clickable links into it (sounds less complicated than it is)

DIY vs. Professional Blog design

  • Using this process for any social media icons, about page, footer images, or sidebar items you want in your design. It's not hard once you get the hang of it, but it's extremely time consuming.

The pictures below are just a small representation of all the icons, logos, menu items, etc. that I worked so hard on. If you are doing a DIY design, this is the type of stuff you can expect to be creating...all by hand...on your own.

DIY design

The most helpful website to me during this DIY Blogger design was Somewhat Simple. If you are considering going this route, I definitely recommend checking out her tutorials.

Wordpress (self hosted)

After a few months of working with Blogger, I decided to put my big girl pants on and switch over to a self hosted Wordpress.org site. I'm so glad I made the switch, but it was not done without hours of frustration, stress, and, yes, some tears, but that is for another post. Still not willing to put money into the design of my blog, I uploaded a free theme and began to learn CSS coding in order to tweak it the way I wanted it to look. If you are using Wordpress and wanting to do a DIY design here are some things involved in that:

  • Searching for widgets that will hopefully achieve what you have envisioned. This is the first place I would look when trying to incorporate a new element into your design such as images in the sidebar, social media icons, and adding your logo.
  • Try to use your theme in your favor. There are some decent free WordPress themes out there, and if you can customize things like color, layout, and background without going into coding, go for it!

themes

  • CSS Coding. When all else fails you'll have to get your hands dirty in the ol' CSS coding. This involves:
    • Accessing your website's server. I use FileZilla.
    • Opening the files using a text editor. Mine is Sublime Text 3.
    • Right clicking on the element you want to change and selecting "inspect element". From there you can manipulate the element to look how you want.
    • Find the line that represents the element you just manipulated, repeat exactly the code you put into the element inspector on your site, and save.
    • (I realize this isn't nearly enough information to constitute an actual tutorial. I just wanted to give you an idea of what is involved.)

The possibilities with CSS are endless if you are willing to put the time and effort into it. It can be really fun to create beautiful designs using only words (or maybe I'm just nerdy enough to think that's fun), but it's not for everyone, and I was soon realizing, it wasn't for me.

Worth it?

The past four months of learning how to create a DIY blog design were difficult to say the least. Despite the hard work I put in to educating myself and implementing what I learned, I could never get past looking cheap and homemade. Now, do I regret it? Not at all! I'm so glad for the skills I've acquired for the random times that they are still needed. I'm glad for that DIY time in my blog's life, but I'm also grateful its over!

Which brings me to the current design....which you will have to read about tomorrow in Part 2 of this series: DIY vs. Professional Blog Design. Can't wait to see you there!

*This post contains affiliate links which are noted by an (*). I never recommend a product or service that I don't already use and love. Thanks for helping me keep Charming Imperfections going!