Tips for Laying out Blog Posts

Blog layout tipsToday 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.Tips for blog layouts2. 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.Blog post layout tips3. 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.Tips for bloggers4. 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!).Tips for blog post layouts5. 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.
Making your blog post content stand out6. 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 SquirrelDafont, 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
  • Thanks for sharing,
    I dont know why my blog pages look so messy, its about fonts, paragraphs, or themes…
    any idea?

    https://teslateb.ir/

  • Super helpful and well written article. Thanks so much! (…that kinda sounds like generic spam but I promise you I’m not ;p)

  • This is great. I’m a new blogger (literally just launched today) so it’s great to have these tips so well laid out and easy to understand 🙂 loves! Keep up the great content!

  • I am very enjoyed for this blog. I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.

  • Thanks for the great tips! I wish I could take a photography and graphic design class from you. You have so many great ideas!
    http://ohtheplaceswesee.com

  • Thanks so much for the tips!
    I always love your photographs. Beautiful!

  • Best blogging tips ever!! Though they do require pretty skillful use of Photoshop which I have yet to master!! Hehe

    -Stephanie
    @LaminLouboutins.blogspot.com

  • Thanks for the tips. I am going to experiment with adding captions to my photos.

  • Great post! Thank you for sharing to us…

    http://www.brendawatson.com/digestive-conditions/irritable-bowel/

  • thankyou i really appreciate this post! i just started blogging so this helps! maybe one day you have time you can check mine out and email me any suggestions! thx!!

  • Hindi ako na magkano ng isang online reader upang maging matapat ngunit ang iyong site ay talagang Nice, panatilihin ito up! Kukunin ko sige at i-bookmark ang iyong site upang bumalik mamaya. Lahat ang best.pretty mga mahalagang bagay-bagay, pangkalahatang tingin ko ito ay karapat-dapat ng isang bookmark, salamat

  • This is just great! I do really enjoy this kind of articles.I was very pleased to find this site.I wanted to thank you for this great read!!Thanks for your post.

  • Great tips! I never thought about adding clip art to photos, looking forward to trying that!

    http://thecraftingklutz.blogspot.com/

  • Thanks for the tips! It leads to another question I have…how do you create more interaction with readers in a blog? I have readers but never hear from them and I’d love to meet some new friends? How to go about it?

    Thanks,
    Christi

    stylishadventures.blogspot.com

  • Is this where I leave my Blue Q comment? I want the Ice Cream Money coin purse! Yay! Please forgive if this is posted in the wrong place.

  • can anyone tell me how bloggers number collages? like this: http://bleubirdvintage.typepad.com/blog/2012/03/we.html
    thanks!

  • I have a question related to your post “10 Blog Layout Tips” (the comment box was closed). Do you know of a tutorial about aligning your pictures and text in a blog post using blogger? I remember seeing one once, but I forgot to bookmark the page. That would be so much help! 🙂

  • Thank you so much for the tips! As a complete newbie to the blogging world I appreciate all the help I can get 🙂

  • Gahh I knew these things, but was in serious need of a refresher. Thanks all!

  • Great post. As a newbie blogger, all this info is super interesting and more than helpful!! Muchos gracias x

  • I love the idea of using photo templates to enhance weekly features! I will definitely be implementing these tips into my own blog, thanks!

    Kelly

    http://pixelbaby.net

  • hi claire, i’ve used sumopaint and it works pretty good. essentially, you would need any image-editing app that handles layers. oh, another reader also suggested picmonkey.

  • hi margarita, if you’re just getting started, use sumopaint. once you outgrow that free application, consider moving up to PS Elements. You can accomplish all of your blogging tasks with PSE.

  • @katherine: hi, you would need an image-editing application like photoshop cs or elements to create collages. there are free applications like sumopaint which work well enough.

  • fun post and tips! love this blog! it is truly inspiring and reminds me of how my sister and i are always trying to come up with new ideas and crafty projects!

    quick question, what do you recommend as far as using fonts in a product you want to sell (invites, greeting cards, etc.)? how would we know what we can use without getting into any trouble and respecting the font creator?

    thanks so much!

    xoxo nina

  • Agree to everything here. I think pictures are SO important for most blogs (not saying that everyone has to be a professional photographer though). Putting your best image first is great also if visitors are coming in from Bloglovin’, for example. Next to the headline, that image is the first thing we see and it should really draw attention to the post.

    I love when you share tips and advices like this!

  • Thank you so much for this post! I am defiantly going to have to bookmark this post in particular. I mean I have this blog on my blogroll but this post in particular is just so useful!

  • Gosh this post (well, this blog in general, but especially this post) makes the urge to buy a fancy camera so much stronger! MY favorite part about reading blogs are the photos.

    My blog is more text based, because I think I’m a relatively good/funny writer, but I’d love for my photos to be at the same level for a more well-rounded experience.

    Great advice!
    www.radmagiclove.com

  • This is such a great post. I will definitely use these tips on my blog. xx

    howtowindowshop.blogspot.com

  • thanks again for a great post, and for everything, I am learning more from you than you know and I think I am growing my blog and my brand quite well as a result, so thanks mate.

  • You guys always amazing posts and tutorials! Thanks for this one, it’s really great and helpful.

    By the way, click here to visit my blog and participate in my giveaway – you can get a bracelet from Gogo Philip’s newest collection!

  • Thank you for such a GREAT TIP! this is extremely helpful 🙂

    xoxo,

    Irina
    http://socialbliss.com

  • Wow – love all of this! Great tips:)

    Love,
    Stephanie May*

    http://www.maydae.com

  • This is such a great post, thank you. Super useful 🙂 How do you create photo collages? Are there any free websites that will do this?

  • I have Pugly Pixel layout on my blog and I love it!! Thanks for these great tips Katrina!!

  • GREAT tips! Needed this. YOU always have the BEST pics!
    XOXO
    -Daisy Nguyen from PS BANANAS fashion blog:
    http://psbananas.com
    BLOGLOVIN
    FACEBOOK

  • Thanks for sharing! This was awesome 🙂

    xoxo Sarah
    theantiquepearl.blogspot.com

  • thanks so much for the practical tips! i am always looking for ways to improve and you have provided some valuable insight. i’m getting on it…

  • I am just starting a blog and it is nice to have some good tips to make it better!

  • Katrina’s the genuine article, i’m an avid fan of hers and love the recent collaborations between all you girls!! it’s the best to see faved bloggers doing their thing like rockstars but even better is when they give back to the blogging community. Elsie, Emma & Katrina all do that and it’s appreciated to no end.

    i’ve learned so much through Katrina’s space over the years and count my lucky stars she’s around! cheers all – xo

  • Great post! I found a couple of great resources for bloggers as far as stock images and editing.
    http://photopin.com/ for free stock images. Just copy the photo credit form onto your site to give proper credit to the photographer.

    And http://www.picmonkey.com/ is a fantastic photo editor for people who are not quite ready for Photoshop. Like me. 🙂 SUPER easy to use and lots of great fonts, effects and clip art.

  • SUCH a great post! Thanks Katrina! It’s so easy to get think sometimes that people don’t notice all the little extras put into a blog…but you are right, that’s what makes people stay and look around. Great post! Thanks for the tips and reminders!

  • Thank you so much for these great tips. I am looking to update my blog and improve my photos.
    I appreciate all your great tips and tutorials.

  • Thanks so much for a super helpful post! It’s so great to know the behind-the-scenes of creating beautiful images and layouts.

    I’d love to know your thoughts on Photoshop vs. Photoshop Elements. I know that Photoshop has tons of options and tools. But I’m a total novice. I just want to be able to create pretty collages for my blog — without getting too confused. 🙂 Which would you suggest? Thank you!

  • Great post and so useful! I will admit I am guilty of the over use of fonts. There are just so many nice ones out there! I love Katrina’s blog am so glad she gets featured here, I am looking forward to her next post 🙂

    Becky K.
    http://pixiwishesforeheadkisses.wordpress.com/

  • such a helpful post, so lovely of you that you share all these tips and tricks with us! Really appreciate it!

    http://bravebrunette.blogspot.com

  • So helpful, thank you! Consider these tips pinned 🙂

  • Along with the Beautiful Mess e-course I am working with these are great tips to incorporate. Thank you! I got lost on both clip-art sites you mentioned, there was sooooo much gorgeous stuff on there. For instance, I have been looking for the perfect Polaroid images to use and I finally found them. I will reread this post in the future. No wait, I will print it out and put it in my binder! (I wonder how hubbie will feel if I tacked those prints in the bathroom for an everyday reminder… Hmmmm…).

  • Love love love this post. So helpful! Thanks ladies! I will for sure check all these recommended sites out and love all the tips!

    Erica xx

    www.ericabelliocreations.blogspot.com

  • thanks for the share.
    also loved elsie’s post on “THOUGHTS ON PUBLIC VS. PRIVATE” — i have been thinking about that more than usual these past weeks….

  • I love taking photos and this is a great post for me. Hope to be putting some of these into practice soon.

    Love reading these posts on blog how tos and your everyday working styles. Super interesting!

    x Elena
    http://www.randomlyhappytoday.blogspot.com

  • I love this post. A Beautiful Mess is my favorite site 🙂 I can spend hours reading your posts, explore new things and use tips. The best thing from all this is that the tips are really original and helped my blog grow further. Thank you Emma, Elsie and the rest of the writers for sharing your knowledge. Don’t know what to do without A Beautiful Mess
    xoxo Veronique

    http://www.veer-blog.blogspot.com

  • yes, i am book marking as well. it’s funny how you see these things done by other bloggers but forget to try it yourself. for me it has to be a conscious reminder.

    in love with the sequin clip art but where did those ones come from? fuzzimo?

    thanks!

  • Katrina! What a wonderful post… so many good tips, thank you so much!

    http://rivercitysammon.com

  • This is so amazing! You guys help me so much! Name That Dress and win $50 with CopperEtiquette

  • great helpful tips ! thank you so much for sharing !

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

  • I know this might be a silly question but my computer recently crashed that had nice photo editing software on it and now I am using a hand me down laptop with no nice extras when it comes to photos. Are there any free downloads/online editing programs I could use to create collages, add text, and do some basic but interesting editing!

    Help Me!
    -Danielle

  • Wonderful tips! Thanks so much for sharing 🙂

    xx Emily

    http://outintosparks.blogspot.ca

  • 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

  • Thank you for sharing these great tips!
    Merrily Merrily,

    Nini
    http://ninilopette.blogspot.com/

  • Very helpful tips! I am just inching into the blogging world so this info is awesome!

    Www.oncewhispered.com

  • totally agree with the tips! i’ve been experimenting with collages! fun!

  • These are such brilliant tips! And beautiful photos to go with them.
    I was wondering if you’d consider doing a post on free photo editing software, as Photoshop is just so expensive, and Picnik recently closed.
    www.styleisalwaysfashionable.blogspot.com

  • I enjoyed this very much! Thank you for sharing! While I can only apply about 3 of these tips at a time, I’m glad I have this resource to go back to!

  • This is a great post. Can you give us more information on how to make a collage with your photos? Thanks

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

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

    – tianna 🙂

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

    Kim~ whatpeggysaid.com

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

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

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

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

  • 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

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

  • Really helpful tips! Bookmarking this for reference. 🙂
    Thanks!

    Aizzing
    www.icingandwrite.com

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