Blogkeeping // Creating a graphics style guide // Elembee.com

Better late than never, right? I’m still behind from getting a new computer, but I have to say, I’m loving the new iMac! For today’s Blogkeeping, I thought occasionally I would do posts Q+A style, so here’s a question recently submitted:

Marie saysI’d really love to put together a blog graphics style guide for Code it Pretty to give my posts a more consistent look (and save myself some graphic design headaches), but honestly I don’t know where to start. I’d LOVE to read your thoughts on the subject!

So, as you might have guessed, I’m a little OCD when it comes to my post graphics. This is why I always put together the graphics for guest posts — if I were to send a style guide to a guest poster, it would probably be 10 pages long, and they’d run in the other direction (and I believe in making things as easy as possible for guest bloggers since they’re doing you a favor). However, you don’t have to be super OCD like me to create a style guide and keep your graphics consistent. Here are a few considerations:

Choose a standard width

I know you’ve heard this before, maybe even from me, but I have to say it again: making your images one consistent width (preferably the width of your content) is the quickest, easiest way to make a statement with your graphics. You don’t even need fancy software — simply drag your photo into PicMonkey and resize. If you aren’t sure how wide your content column is, you can find out with Chrome — right click on a paragraph, Inspect Element, and it will open the code for your site below. The paragraph line will be highlighted in the code, then you can hover over it, and the entire paragraph will be highlighted on the page with a measurement in pixels, the first being the width. If you do nothing else with your graphics, do this. Scroll down any blog with consistent width photos, and you will see just how much of an impact it makes — it can take a blog from scrapbook to editorial. In fact, if you have really great original photography or a fantastic eye for images, you can probably stop here and call it a day.

A word of warning: do not enlarge photos to fit your width. When you enlarge a photo, it has to make up for the added space, so it basically takes one small box of color and makes it larger, which makes your image blurry. The more you enlarge it, the more blurry it will be. If you’re only enlarging by about 50 pixels, you’re probably fine — it still won’t look as great as the original, but it shouldn’t be too noticeable. Any more than that, and you should find a different image, or pair it with another image in a collage to fill out the width.

Choose a small set of fonts

Post graphics are a great place to mix in another font or two beyond what’s in the rest of your blog design, but don’t go crazy. I think a good starting point is something for titles, something for subtitles or less important text, and a fun accent. You don’t have to use every font in your overall blog design, but pick at least one of them for consistency, and make sure anything you add has a similar look and feel. Also consider using different weights and styles of your blog design fonts — for example, Arapey regular is the font used for my logo and post titles, but I usually use the italic version in my post graphics to maintain look and feel but still keep things interesting.

Choose a small set of design elements

Depending on your content, you might also consider choosing a few design elements. For example, when you create a product roundup, how do you want to display the numbers? Do you want to use the actual numbers, or spell out the words? Do you want to use type only, or do you want to use a shape behind them? If you use lines, do you want them to be solid or dotted, thick or thin? If your original photography is the star of the show, you might consider leaving most of your images free from type and other design elements to encourage pinning and sharing. Consider setting a standard for your lead image instead to introduce the story — maybe your first image is always a certain size, with the post title styled a certain way, and the rest of your photos are clean. Or, maybe you want to tell the story within your graphics — I love how Mr. Bazaar incorporates a number of design elements to give his graphics a more magazine-type feel and experience, and it’s not overwhelming because he is consistent in how he uses them.

Set standards for colors

How do you want to incorporate color in your posts? I personally always use white type on photos or colored backgrounds, or I pull a matching color from the photo. This is the only column I always use colors from my blog design, because it’s related to the work I do, and I also think it would be too overwhelming to use my colors in every single one of my posts since they are so bright. For other posts that don’t use photos, like Grammar Time or Just My Type, I just pull a color scheme I like and use it as a way to share color inspiration, since that’s also related to the mission of my blog. If your blog design has a neutral, or pretty minimal color scheme, you might pick a couple of accent colors that you always use in your graphics. Maybe, like Lauren, you pick one color and stick to it. Or maybe, like Jess, you always use a white box with cut out letters — simple, but effective.

Create templates for regular columns

Once you’ve established your graphics width and what fonts, design elements, and colors you want to use, look at your regular columns, and think about if and how you can use a standard design and layout for each of them. Not only will this help with consistency, it will also make the process of creating your graphics a lot quicker. Think about creating logos for different columns — Lauren does a great job with this, as she has different logos for her Purchases column, Luxe or Less, and Lauren Loves. They all use the same fonts and one standard color for consistency, but she mixes up the shapes and type arrangement to keep things interesting.

You’ve probably noticed that I always use square layouts — I probably won’t stick with that forever, but I found my graphics were getting really long, and by limiting myself to squares, it forced me to edit down the amount of images I use. The pleasant side effect of that decision was that it now takes me a lot less time to create my layouts. Maybe you don’t want to use square graphics, but consider a standard layout where appropriate. For example, if you do a monthly Instagram roundup, then maybe it should always be a grid of squares with a particular header. I use the GuideGuide extension for Photoshop (a must download!) and enter columns and rows for my grids with 5px space between each, so there is always even spacing between any photos in my layouts.

Once you’ve established where standard graphics will work in your content, create files with most of the design elements in place, so all you have to do is insert the content — this saves SO much time. For example, for a roundup graphic, you might create a template that already has the logo for the column and a set of numbers typed out on your chosen design element, so you can just insert the products and move the numbers around. Because I use specific grids in my layouts, I even have templates that already have the grids set, and I drew rectangles where I want to insert photos. When it’s time to create a new layout, I simply click the box I want to place it in, place the photo, which adds it as a new layer above the box, then right click the image layer and create a clipping mask, and adjust sizing and placement from there. If there is anything in your graphics that always stays the same, create a template for it, and it will save you time later.

Set standards for choosing (and crediting) images

Last, consider setting standards for the type of images, and possibly even the number, you choose to feature, and how you credit them, or how you edit your photos if you use original photography. Personally, I don’t care how much I love a photo, if there is type I didn’t add to it, I won’t use it (for example, scans from magazines). Just because you have endless space on the internet doesn’t mean you should use it. Pick your favorites, then go back and pick your real favorites to feature. Consider how you will credit your images — you are crediting, right? Pinterest and Tumblr are not sources. The src-img bookmarklet can usually help you find the proper source, otherwise, don’t use it. Will you list credits as numbers at the bottom of your post? Or spell out the source directly underneath the photo? I personally prefer to spell out the source to encourage people to go to the original — who’s actually going to click on a number? If you use original photos, consider editing them the same way for consistency — maybe you always use the same Photoshop action.

Experiment with one thing at a time

Post graphics can be a great way to experiment and evolve your brand with little impact or commitment, so bend the rules if you need to. Every time I’ve redesigned my blog, I started with changing my graphics a little, which eventually inspired the rest of the changes. Now, things will look chaotic, and you’ll probably confuse you readers if you do something completely different in one post. But trying one new font for a little while, or incorporating a new design element is a great way to add some interest to your blog design if you’re getting bored with it.

What are some ways you’ve established a style guide for your graphics?

P.S. Want to submit a question? Right this way! (Click on the “I am interested in…” box and choose “Asking a Blogkeeping Question.”)