Tips for Laying out Blog Posts

Today Katrina of Pugly Pixel is going to share six content style tips for bloggers: In 10 Blog Layout Tips, we shared ten ideas you can use to optimize your blog's overall layout. In this article, we're going to share six tips for presenting the images in your blog posts. Although our point of reference will be smaller (a single post versus the entire blog page), many of the concepts in 10 Blog Layout Tips can be applied to your blog posts. Considering that a blog post occupies at least half of the screen, each post deserves the same meticulous care that you give to your overall blog design. Vertical alignment, white space, and typography are still considerations when designing and arranging your post layouts. After all, it's your posts that are key in getting your message across to your readers. 

1. A MEMORABLE & ENGAGING COVER IMAGE First impressions matter. When I come to a blog and the first thing I see is a Wow! picture, I immediately want to read more. Your first image should be your very best image, and it deserves extra care with cropping, contrast, and color. The image above is just that kind of striking image --- Elsie's stripes contrast with the colorful background, and both Elsie and Jeremy are making great eye contact. It's the kind of picture that draws you in to read more. 

Quick tip: Look for pictures with eye contact. And if there are no people in the photos, look for contrasting colors, geometric shapes, lines, or patterns --- use a picture that will give your reader a small sparkle of surprise.2. PHOTO CAPTIONS: 

When I scan through a magazine or newspaper, my eyes are immediately drawn to the images. The next thing I look for, quite automatically, are the captions. If I'm on bus or a train, I don't usually read, at least not right then and there. I usually just stick to looking at the images and reading the captions. It's just the way I "speed read" and I do the same for blogs, especially if I'm on the go and reading on my iPhone. So, my second tip for you is this: unless your post is intended to be a reflective and quiet post, add captions to your images. If your photos are related to the text, your captions can become a summary for your post. And, if your photos are unrelated to the post or to each other (as in a links loved post or an Instagram summary post), your captions can tell a short story quickly. 

Quick tip: There are many ways you can add captions to your photos. For starters, you can use a conventional caption, a line of text directly beneath the photo in a font slightly smaller than your post text. Or, you can use an image-editing application like Photoshop Elements to place captions directly on your photos. If you have access to a graphics tablet, you might want to try adding captions in your very own handwriting. This can be very charming, as you can see in Elsie and Emma's post on how to add handwriting to your images.3. COLLAGES:

If you have a group of images, organize them into a collage. For example, if you have a "My Weekly Faves" post with many images, or a post with a strong visual theme, you can use a collage to organize multiple images into a single coherent image. Collages add visual interest and they also have a practical side effect: they save bandwidth! As you may recall from Tip #9 in Blog Layout Tips, "a fast loading page is always a good thing." By using a collage, all of the images that you would feature separately in your post will be efficiently consolidated into a single image, speeding loading time. But more importantly, collages can add lots of visual interest to your images.  

Quick Tip: Collages can be laid out in many ways. You can use rectangular grids, circular patterns, or you can lay them out as free-style magazine-inspired layouts. When the items in your collage are arranged free-style, enumerate them so that your readers can easily identify the items in your collage with numbered links in your caption.4. PHOTO LAYOUT TEMPLATES:

If you have a regular blog feature, weekly or monthly, or you are putting up a special series of posts, use a photo layout template. For example, you might have a monthly interview series that could benefit from a signature look. A customized photo layout will differentiate your weekly and monthly features from your regular posts. When you use a consistent style for these special blog posts, you are telling your readers, "this is a special article --- read it!"

Quick Tip: You can use an image-editor to rotate your photos and images and arrange and layer them in various ways. Some good image editors for this job are Photoshop CS or Photoshop Elements, which both offer 30-day trial downloads. So, when you create a nice layout, save it as a layered PSD file for future use (don't flatten it!).5. CLIP ART:

I love the simplicity of an unadorned photo, but sometimes we want to help a photo stand out. We could accomplish this by using Photo Layouts as in Tip #4, but for many pictures there is a simple solution: clip art. You can achieve a cute effect by simply using a vintage shipping tag as a blog label, or you can add a few sprinkles of sequins and confetti clip art here and there. Clip art can be fun and it can add a lot of charm to your blog posts. By the way, clip art sometimes gets a bad rap when people think of those bit-mapped images from the 90's, but modern clip art can be really cool, so don't listen to the clip art haters.

Quick Tip: The secret of clip art is to use it sparingly. Clip art is supposed to enhance a photo, not overwhelm it. My favorite places for free, high quality clip art are The Graphics Fairy and Fuzzimo. But, there's an even better free clip art resource: your own photos! You can use your image-editing program to extract objects from your own pictures.

6. FONTS:

I love fonts. I'll admit that browsing through font sites for hours and hours is one of my guilty pleasures. At one time I used (and abused) all sorts of fun fonts in my blog post layouts. For me it was the more fonts the merrier! But recently, I've decided to limit my fonts to a select few. Why did I do this? Well, using an abundance of fonts on each page made my blog look messy in the same way that too many colors can look messy (Tip #7 from 10 Blog Layout Tips). So, I chose a couple of super readable text fonts for the posts, and to keep things fun, I picked a few choice decorative fonts to use in my Photo Layouts. Elsie and Emma have some choice fonts, as well --- can you guess what they are? 

Quick Tip: There are lots of free fonts out there for you to indulge in. Some of my favorite font resources are Font Squirrel, Dafont, and even MyFonts, which has a broad collection of freebies. The best way to learn about fonts is to test them on your photos to see if they work with the rest of your page, and with each other. Choose a simple font for your watermark and then go wild with the others. A good guideline is to limit your fonts to three (besides the banner and headline fonts in your blog).

We hope you guys enjoyed these quick tips! -Katrina

*All photos by Arrow & Apple

Comments

[Aizzing]

Really helpful tips! Bookmarking this for reference. :)
Thanks!

Aizzing
www.icingandwrite.com

[Blytheponytailparades]

Clip art is always so fun! It's one of my favorite things to use.

[Laura Meitzler]

Great post! Thank you for sharing these wonderful tips. I like the idea of having a consistent layout and font for a regular blog feature :) xxo

[Melissa @ Best Friends For Frosting]

This is so helpful. I am in the process of doing this right now on my website. Thank for the tips PP & ABM! XO

[Janine Vincent of CHICKYTHING]

I love you katrina!!!

[Stefani]

Great tips. I like the idea of photo captions, I will have to try using those more often.

[Anoushka]

Thanks for your advice! Highly appreciated.

[Ashley]

Nice... loved this! Thanks for sharing.

-ashley

[Mimi Finerty]

Great tips for all bloggers whatever your style. Thanks for sharing!

[Julia]

I love Pugly Pixel and it's so nice to have Katrina write a feature here! So many helpful tips and resources!

[Kim~whatpeggysaid]

Thanks for these great tips- so helpful, especially to those of us new to blogging x

Kim~ whatpeggysaid.com

[Veronique]

Absolutely amazing post and writing

Xx

[tianna @ Suffocated Bliss]

Very helpful. Love both this blog and Pugly Pixel. I'll be bookmarking this one.

- tianna :)

[alinor]

great tips, thanks for sharing!
great question, what is the font you're using for your post titles Elsie & Emma??

[elsie]

Alinor, it's Gotham.
:)

[Nini]

Thank you for sharing these great tips!
Merrily Merrily,

Nini
http://ninilopette.blogspot.com/

[A Splash of Ida]

I love this post! After almost a year of blogging, I still need tips like these ones! I love the fact that you explained every tip in detail and gave examples. It's very helpful! :-) Now, I need to start using these wonderful tips to make my blog posts even more interesting! :-)

xoxo
Ida

http://asplashofida.blogspot.com

[Emily V]

Wonderful tips! Thanks so much for sharing :)

xx Emily

http://outintosparks.blogspot.ca

[luba]

great helpful tips ! thank you so much for sharing !

XX Luba
Well Living Blog
http://very-well-living.blogspot.com

[tiffany.]

good stuff here.

xo.
http://dropsofjupiterBLOG.com