Graphic Design for Bloggers: Design Details You Should Add To Your Blog
By: Amanda Boyce

graphic details shutterstock
Follow on Bloglovin
Pinterest

graphic details shutterstock

 

Designing your blog is not an easy task, especially if you are a beginner to the graphic design world and can’t afford to hire a consultant.

But you don’t want to leave your blog bland and boring, right? What’s a blogger to do?

You get smart and strategic. Like any other project, if you look at the big picture too much, you will get overwhelmed and then freeze. Instead, break down what you want to do with your blog’s graphic design and start to think about the little details that you could handle doing on you own.

 

graphic design

These graphic design details will add personal, fun touches to your blog while also making your site more enticing to your readers.

 

  •  Customized social media sharing buttons:
    • Instead of using the generic buttons that Twitter, Pinterest, and Facebook give to you, create your own or download these buttons from a design site. They will stand out more on your site, catching your reader’s eye instead of those other more average buttons that literally every blogger has.  I recommend visiting Kira from Her New Leaf who runs a blog graphic site that is definitely worth checking out. Also, The Beauty Department has a few good examples of what you can do to customize your social media buttons. Think simple and memorable!
  • About Me Graphic:
    • Give readers a quick look into YOU, the blogger, with a small About Me Graphic. I personally love seeing a mini-blurb about the blogger in the top corners of a blog, along with a line or two about the blog. When done right, this mini blurb will entice me to click-through and get to know the blogger better. Some examples of About Me graphics that I like can be found at Note To Self, and Bri from Design Love Fest. Both reflect the personality and spirit of the blogger, which makes me want to get to know the author better. To do this, find a headshot or Instagram that best embodies you. Upload graphic into your blog’s media library, than add image to your sidebar widget. Make sure it links back to a more detailed bio page!
  • Google web fonts:
    • Break up the traditional Arial and Georgia font by incorporating Google web fonts to your site. A playful, jazzy font can make all the difference on a white blog page. You can peruse the entire collection of custom fonts and see what works with your overall blog. Now, I should warn you: adding custom fonts to your site does slow down load time so be mindful of how many custom fonts you are using. Also, too many fonts can be an eyesore to your reader. To do this, make sure your current blog design supports Web fonts. WordPress.org blogs allow you to customize fonts but for the other platforms, it depends on your theme.
  • Graphics for “Older and Newer” links:
    • You know when you scroll down to the end of a blog page and you click on “older” or “new” to find more content? Why not turn those links into actual graphics? You could use small symbols or even just a fancy font! Chances are, your reader will click on a symbol or graphic instead of text. A fun example of a blogger doing this is Julia from Lemon & Stripes. You can’t miss the “older” graphic and guess what? I did click through and perused older articles. See, it works! Just a heads-up, you do need basic CSS knowledge to add this detail to your blog. To do this, go to your theme, find the CSS document, find the <div class=”oldernewer”> tag in your CSS. Insert the link to the image you want to use in this section.
  • Blog header:
    • Creating a new blog header takes minimal time and effort yet delivers maximum impact on both readers and potential brand partners. The best blog headers are clear, small, colorful but not overly bright and incorporate a personal touch like a logo or consistent font. I think the blog header for A Piece of Toast is a good reference because it incorporates original photography from the blogging duo without being too messy and chaotic. Straight-forward and to the point. For more blog header tips, see our guide to designing your blog header. To do this, find your blog header settings, upload your appropriately-sized blog header to your blog and save changes. Don’t forget to test out your new header in ALL browsers to make sure it works.

 

Much like that last-minute jewelry addition to your outfit, these details are the best finishing touches a blogger could ask for. Go small, then work your way up until you get to a point that you’ve basically done as much as you can (without breaking your site).

 

Are there other design details you can think of? Or do you have questions about the ones listed above?

 

 

Comments

  1. Kory says:

    Yes! I think these things can make a blog much more exciting. These are things that I focus on when I’m helping others design their blog. Each element is important in it’s own way!

  2. OkikiReyes says:

    Thank you so much for this article!!! Right now I’m trying to find ways to make my blog more interesting and this article is going to help me a lot!

  3. Elaine says:

    Graphics definitely makes your site more enticing !

  4. Avatar of Lauren - Slowburn Fastburn

    I love graphic design and am always looking for ways to improve. Great tips!

    x lauren
    http://www.slowburnfastburn.com/

  5. Avatar of Bree
    Bree says:

    Great points and ideas. I am always trying to work on the design of my website, it’s an ongoing process.
    http://www.theurbanumbrella.com

  6. Avatar of Cyliaaaa
    Cyliaaaa says:

    Thanks so much for the great and practical tips! I’ve been needing to change this, but somehow haven’t done my duty. I’m busy with especially what’s displayed on my sidebar. Got the chance to finally add a recent profile picture of myself and a short message about myself. Would love to know what you think! Tomorrow I’ll be busy with creating graphics for both my sidebar and older and newer posts.

    Though I’m still trying to figure out how to manage CSS and HTML. I can’t seem to find the exact code in my extended HTML..

    If anyone can help me out with this, I’d be forever grateful!! (cylia@live.nl)

    Cylia Herbertson
    http://www.cyliaaaa.com

  7. Just curious…what kind of program are fellow bloggers using to design these elements? Photoshop? Something else that I should know about?

  8. zoe says:

    These are great tips thanks!

  9. Macblogster says:

    Thanks for all the useful info!

  10. Jennifer says:

    I totally agree with your list, especially the “customized your social media button”

    @Katarina Kovacevic : yeah you can use photoshop on that matter.

  11. Gemma says:

    I have already start customizing and the results have made such a difference to my page. The header gives my blog a much more of a professional feel.

  12. Paul says:

    Good article! a lot of valuable information for designers…..

  13. Thank you for posting this. It answered lots of questions which I had.

  14. Paul says:

    Thank you for posting this useful and informative tips!

  15. Thanks for the tips, I also wish to have my own blog, but I think I am not too skilled to do so. However, your tips will guide me whenever I start a customized blog.

  16. Blogs are as mighty as a well ran facebook page. Yet more customizable!

What do you think?