Guest Post: Getting a Great Blog Design on Any Budget

If you are a blogger (or considering becoming one), blog design is something that is likely always on your mind.  Bloggers are constantly trying to refresh their design because it’s the easiest way to breathe new life into a site and keep both our readers–and ourselves!–engaged.  Whenever I am feeling unmotivated or start to lose some of my drive to blog, I first look at my design and start tweaking things.  I changed my own design recently, as you can see, but I am still not satisfied and soon it will probably look completely different.  Again.

When looking at my blog one of my biggest motivators has been my friend Casee Marie.  Her design work for her own blog, The Girl Who Stole the Eiffel Tower (and now her latest endeavor, Literary Inklings) has always seemed so effortless and such a perfect reflection of her personality and content.  That is something I am still searching for myself, so I really look up to her and her sheer genius when it comes to blog design.

Which is why I am thrilled to bring you this guest post by Casee Marie… I know you’ll love it as much as I do!

**********


Hello, Beautifully Invisible readers! I’m incredibly grateful to B for allowing me the opportunity to share my ramblings on blog design with you all. I’ve been privileged to receive great feedback on the designs of my blogs, and while this doesn’t make me any kind of authority on the subject I did want to share some of my thoughts, tips and tricks for getting your own great blog design – whatever your budget! These tips are primarily verbal; this isn’t necessarily a how-to, but more of an inspiration guide. For a bit more hands-on fun I’ll include some of my favorite resources as well!


Recognize exactly what you’re capable of – and what you’re not. Whatever you decide your best element of design is – if you can write a witty quip for your sidebar, or perhaps if you’ve got an eye for color – there’s a good chance you can work with it. For writers, learning to work with typography will give you the opportunity to make your writing into graphic design; for color lovers…we’ll talk about how you can work your magic a little later. If you’re not sure where your abilities really are, jot off an e-mail to a blogger friend and ask what they think you should focus your blog’s design on. (Just don’t ask me, ’cause I’m terrible at that sort of thing.)


When I was customizing the layout for my new literature blog (both of my sites run the Thesis theme) I was a constant visitor to The Bookworms (designed by Forever Design Studio) and The Ballroom Blog (designed by Jennifer Wu), two book-related blogs whose designs I especially adore. But you’ll notice that what I came up with on Literary Inklings doesn’t look a thing like them. The key is recognizing what you like – the softness of a color palette, the use of sidebar content, the openness of the entries. Then you can determine how to apply that inspiration to your design. Don’t be afraid to take a trip (or two or three) around the blogosphere to dredge up the inspiration!


A pixelated, low-quality header image will bring your blog’s entire look down. Resizing social networking icons through HTML code will make them look warped and awkward. (Making sure your images are the proper dimensions before you apply them will also help your blog load faster!) In my experience, both .JPG and .PNG files help images hold their quality; of course, programs like Photoshop generate high resolution imagery, but you can likely still create great images through freeware. I do recommend staying away from MS Paint, though, as you can literally see the quality dissipate on the image as soon as you save it. If you’re dealing with photography, make sure the pictures are the highest quality you can achieve and resize them in a program that will allow you to constrain the proportions (as in, it will do the math for you so you can resize an image without losing its shape).


Beyond the fact that you’ll be avoiding infringing on any artists’ copyrights, having a completely original blog design will help you to build your unique brand. If you don’t think you have the resources or ability to make an entire design yourself, you could always work with a designer! Get creative – if you can’t afford to pay someone, maybe you could work out a special sponsorship package in exchange for an original header image. (Keep in mind, though, that for a lot of blog designers their work may be their sole means of income so think carefully on it and don’t underestimate the importance of what they do!) For The Girl Who Stole the Eiffel Tower‘s design, I couldn’t draw an Eiffel Tower by myself so to create the one in my logo I took a picture of an Eiffel Tower I own and worked it into clipart through Photoshop!


If you don’t feel equipped for the task of making your own header, buttons, etc. there are still plenty of options open to you. Working with color, I think, can create a great look. Why not make color your logo with a signature shade? Or use your own photography through your design. I’ve used my Eiffel Tower collectibles a lot in my design, photographing them with shoes and books to be used in various ways, including my Facebook timeline. Set yourself a nice bright, clean (preferably white) space and construct a little environment that reflects your blog (make sure to avoid showing any brand names, magazine editorials etc.). Incorporate your blog’s name, snap a picture, and you’ll have a header image! No fancy graphics needed.


Over-the-top designs can be fabulous when they’re done in the most practical way (for example: Delightfully Tacky). Look at your blog as if you’re a potential reader seeing it for the first time, or ask a friend to look at it objectively, and make sure your content is presented in a way that’s clear, legible and inviting. My best advice is that you can play around with header images and background patterns as much as you like, but keeping with a white content background and dark, dark grey text will keep your blog’s most important element free from feeling cluttered. (I’m not partial to flat-out black text on a white background unless you’re incorporating heavy black contrasts as a theme in your design. Otherwise black can look a little harsh!)


Who says you even want a header image? Or what if you want to put your header image in your sidebar? Or at the bottom of the blog? (Okay, I might not recommend that one, but you get the idea.) There’s no single formula to follow in order to have a nice blog design. So long as your design relays your brand, what you’re about, and maintains a convenient, practical aesthetic for readers you really can’t go wrong. That should be enough to inspire our creativity, right?

Graphics, fonts and accessories
Font Squirrel – A great resource for fonts, everything available on Font Squirrel is free to use for commercial projects. (Each download includes the artist’s license so you can better understand their terms. Most request/require credit, which you can give in your footer or on a Resources page.)

Stock Exchange – If you really want to use images in your design, Stock Exchange is a great source for free stock photos. Be sure to double-check the availability restrictions set by the owner to make sure you’re handling the photo in the right way. For example, the owner of this photo asks to be notified whenever their work is used publicly.

ColourLovers – For those wanting to focus their design on color alone, ColourLovers is a must-have resource. Browse color palettes for inspiration, or to find colors that will work best for you. You can also find seamless patterns, perfect for background use. (Again, be sure to credit clearly – contacting the creator for use of patterns is especially appropriate, I think.)

Note: When working with colors the easiest way to go about it is to use the HEX codes. (For example, you’ll find the HEX codes for this palette under the individual colors further down on the page.) HEX codes are the HTML variant of color and are most often used in template and theme editors, such as Thesis on WordPress and Blogger’s template system. Because of the infinite number of colors in the HEX system, a resource like ColourLovers is perfect for building a palette that will compliment your content.

Pugly Pixel – Pugly Pixel is a fantastic design blog and a great resource for building your blog’s design. Browse the Freebies and Tutorials or the marketplace for inexpensive accessories. The Blog Bling Kit is an amazing grouping of some of the best of Pugly Pixel as well.

Photo-editing programs and softwares
PhotoFiltre – FREE! – While it doesn’t have a ton of capabilities, PhotoFiltre is an easy, quality way to optimize and resize your images, and a simple program for beginning your experimentation with graphic design.

PhotoImpression – $39.99 USD – I don’t remember much about this program, although as I recall I graduated to it from MS Paint when I was first teaching myself graphic design.

Paint Shop Pro X4 Ultimate – $59.99 USD (sale) – I love this program and would recommend it to anyone. It’s easy to use and experiment with and offers top elements like editing layers. This is a great step down monetarily from Photoshop without sacrificing performance.

And there you have it: my complete thoughts – or, a rather big portion of my thoughts – on blog design and how to make yours unique. I hope this was helpful, inspiring or at the very least an entertaining use of time for you readers. If you have any queries or just want to chat about blog design, feel free to drop me an e-mail!

Thanks for reading!

– Casee Marie

Fonts used in this post: Diner, Deftone Stylus, Windsong, HenryMorganHand.

 

**********

If you haven’t already done so, check out Casee Marie’s blogs here: The Girl Who Stole the Eiffel Tower and Literary Inklings
and follow her via Bloglovin’ here, Facebook here and twitter here.

{ 41 comments… add one }

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Jason May 31, 2012, 7:24 PM

    Hi I really liked this post, I loved what you said in your opening paragraph. It’s so true that we as bloggers are constantly improving the designs of our blog. I know for myself I spend more time on blog design and marketing my blog than actually writing content for it.

    I loved the post too I especially like the way that you listed helpful resources at the end, I was already aware of a few of these but will certinaly be looking at if not useing some of the others you have listed. Thanks for the great post, Jason

    Reply
  • anthea March 31, 2012, 1:11 PM

    Great advice and suggestions! Thanks L)

    Reply
  • Trexcy March 22, 2012, 4:49 PM

    It’s really great to consider the budget when choosing a kind of a thing, you will consider the quality and its effectiveness provided on your stuff, not just mean it’s frugal it’s already the best…

    Reply
  • Katelyn March 19, 2012, 11:09 PM

    For me, the best quality of a theme is base also in a cost on how it design, so why you should choose for a cheaper one if you can bought for a theme with a high cost but very indeed in different phases…

    Reply
  • Arash Mazinani March 17, 2012, 8:13 AM

    I’m fortunate enough to have photoshop so any image editing etc I do in there. But one thing that always puzzled me is some of the really cool and quirky social media icons people have.

    Like B’s on this blog they all are hi res and fit into the theme’s colour scheme perfectly… but where did you get them? I mostly use the free ones from the various different sites but they usually have bloglovin missing or instagram etc

    Reply
  • carly March 16, 2012, 2:15 AM

    Just in time for my next project! I can foresee myself spending most of my weekend reading Pugly Pixel and tinkering with PhotoFiltre. 🙂

    Reply
  • Daisymay March 15, 2012, 12:31 PM

    I am slowly altering my blog design at the moment. After having it the same for nearly 2 years I thought it was about time for a spruce, but with no money to pay someone I am just trying to do the best I can with my own skills and basic html I am picking up as I go along. Lucky the hubby is a great photographer and can do some photo editing but Im still not quite happy with it. would love some feedback though? I am waiting on adding 4 pages on a link bar under header. losing the list of welsh bloggers in my side bar (as intend to have a page for reading list type of thing) and want to change my title fonts and about me section on side. But its a slow process. Thanks for all the helpful links will have to try a few myself
    Daisy Dayz

    Reply
  • Al March 15, 2012, 5:47 AM

    Stumbled across this blog while searching for ways to improve my own blog. You give some nice tips and I will definitely keep some of the things you’ve mentioned in mind while working on it!

    Reply
  • Abbey N March 14, 2012, 1:27 PM

    Great advice! With great visual appeal. This article alone was inspiring 🙂 Thank you!

    Reply
  • Bella Q March 14, 2012, 6:46 AM

    great info and post!

    Reply
  • alyson March 13, 2012, 4:23 PM

    What a great resource! I had help for my header however I’m now trying to learn more design techniques in Photoshop Elements… definitely a slow, yet rewarding process! Even just creating a circle, no joke, made me feel pretty cool!

    Reply
  • SACRAMENTO March 13, 2012, 3:58 PM

    I felt in love with the disign of my blog, and , like everything else in life, there must be much better options, but it is very much me. So I never wanted to change.
    Thank you for all your advise.
    I have discovered a new and kind wold in the blogosphere, and that is fantastic.
    XXXXXXXXXXXXXXXXXXXXX

    Reply
  • FASHION TALES March 13, 2012, 3:36 PM

    Wow, really insightful post. I have been pondering about re-designing my header once again, but I like a very simple and sleek appeal, (for me I don’t want all of the frills) lol. I love this post so much and will be bookmarking this one as well. I miss paint Shop … totally forget about that programme and ColourLovers! Good tips! Thank you.

    Reply
  • Queenie20 March 13, 2012, 5:00 AM

    I really love you ideas and designs.. Thanks for sharing.. I will definitely follow you tips! 🙂

    Reply
  • Cathy35 March 13, 2012, 4:03 AM

    I really enjoy photo editing.. Thanks for the awesome tips! I will always keep those on mind! 🙂

    Reply
  • A Brit Greek March 12, 2012, 1:56 PM

    This is such an amazingly resourceful and inspiring post!!! I’ve already stumbled this for others to check out and also will be bookmarking for the tips and other sites to check out for design purposes! Thank you ladies for such a brilliant post! Off to Tweet this now!

    Much love,
    x.o.x.o

    Reply
  • Courtney March 12, 2012, 1:21 PM

    This is an awesome post! Thanks so much for the resources at the end.

    My advice? If you have a question–google it! Most basic design questions can be answered by simply asking 🙂

    Reply
  • Nnenna March 12, 2012, 12:36 PM

    Yay, this post is so awesome Casee with so many helpful tips and tricks! I still remember when I was making the move to Wordpress and you were so helpful with answering of my silly little questions! Out of the blogs I read, you have two(!) of the most well-designed blogs, in my humble opinion 🙂 As you know, I just recently felt the need to refresh my blog design and I hope it reflects some of the things you mentioned here 🙂

    Reply
  • Casee Marie March 12, 2012, 12:01 PM

    Thanks again for being the willing and able host for this mammoth thing, B! And for your very kind words. “Sheer genius” is sheer flattery!

    Reply
    • Beautifully Invisible March 12, 2012, 1:17 PM

      It was my pleasure – delighted to have you guesting on BI again, and you are a genius in my opinion!

      In case this is helpful, here are a few additional resources that may be of interest to you (and others):

      Design/Color:
      Color Hunter or Pictaculous: Both of these sites create a color palette for you based on the image you upload. I always check these when determining which font colors to use with my header images.

      Hex Color Scheme Generator: This site is very useful for creating color schemes AND determining hex color values.

      Photo-editing programs:
      Pixlr: This is a great free web-based photo editing software. It offers similar functionality to Adobe Photoshop, which is what I use at home.

      Pixlr-o-matic: This is an off-shoot of Pixlr, and essentially functions a lot like instagram. It has tons of filters that allow you to create instagram type images on your PC. No iphone needed!

      Gimp: Another great free software which offers a lot of functionality… I actually used to use this before I purchased Photoshop.

      Fonts:
      I generally use font-squirrel as well, but will also occasionally check dafont for more ideas.

      Mostly, though, I love my Photoshop. Will be checking out the links you provided as well. 🙂

      Reply
      • Casee Marie March 14, 2012, 3:44 PM

        Brilliant additions, B, thanks! I’ve heard of Gimp, but I haven’t tried it myself yet. And I used to use Dafont all the time, but some of the fonts on there have restrictions/are only available for personal use – I’m never sure if a blog with advertising revenue counts as personal or commercial, so I try to opt for free commercial-use fonts just to be safe. (:

        Reply
  • Lanaya March 12, 2012, 11:25 AM

    Photo editing for me is kinda fun.. Making picture more beautiful.. 🙂 Thanks for this info!

    Reply
  • Marissa March 12, 2012, 10:15 AM

    Great post, Casee! I hired a friend to redesign my blog a few weeks ago, and it’s amazing how it has reinvigorated and re-inspired me. I was feeling pretty blah about blogging for a while, and the redesign made all the difference. I hope this doesn’t sound spammy, but this friend has started doing blog redesigns at incredible rates, so if anyone is interested: http://www.kirstenstoddard.com/

    Reply
    • Casee Marie March 12, 2012, 12:13 PM

      Thanks, Marissa! And not spammy at all – I loved your redesign (and I’m pretty much obsessed with the design of her site!). I always say that we, as editors, are the ones who see our blogs the most (especially if you’re like me and preview your posts half a million times for proof-reading purposes) so it becomes our main creative space, so to speak. And sometimes just changing the view in a slump will give us an entirely fresh perspective!

      Reply
  • Juju @ Tales of Whimsy.com March 12, 2012, 8:58 AM

    That’s some awesome advice!

    Reply
  • THE-LOUDMOUTH March 12, 2012, 7:22 AM

    Thank you for the inspiration, Casee! I’m definitely saving this one for future use. I always wondered where people found their unique fonts and cute little graphics. I also know I should invest in a better photo-editing program because right now I use Irfanview and even MS Paint — yikes!

    Reply
    • Casee Marie March 12, 2012, 12:09 PM

      Yay, my pleasure! I don’t think I’ve ever heard of Irfanview. I started out using MS Paint in the very-very beginning; I think, though I’m no whiz with software, it supports a more limited number of colors which is why it can pixelate easily. So it seems to really depend on what exactly you’re doing with it. (Embarrassing, but when I first started I was about…thirteen, I think, drawing little pixel cartoon dolls. It worked fine for that!)

      Reply
  • Jo March 12, 2012, 1:54 AM

    Great fantastic prep post for beginners! I suggest also Google Web Fonts since they have great fonts that are easy to install at no cost whatsoever!

    Reply
    • Casee Marie March 12, 2012, 12:05 PM

      Thanks so much, dear, and for the added suggestion. I don’t think I’ve checked out Google Web Fonts yet, so that’s definitely going on my list! (Oh, and I’m on Vista since just December – I started downloading .TTF fonts in the last month or so, and I was pretty flabbergasted when I realized the installation process consisted of Right Click > Install. Almost too easy!)

      Reply