If we sat down over coffee to talk about the ins and outs of graphic design, the conversation could go in so many directions and refills would be necessary. This is a compilation of some of the most pertinent DOs and DON’Ts of website graphics that pertain to our blogs, where imagery can determine whether or not a reader comes back for more or visits in the first place.
DO Pick a Great Image
Nothing below this point will completely save a graphic if it is poor to begin with. If necessary, turn to free stock images that don’t require attribution to begin. Our CMBN stock image website is going to be a great resource for this as well in the future.
Size DOES Matter
Images display on screens at 72 ppi (pixels per inch). This is your resolution for the web, while the print standard is 300 ppi. The higher resolution you use, the larger the file and also the better the quality when you zoom in. See more about image sizes in our social media image dimensions guide.
DO Embrace White Space
There is no rule that says an image needs to be filled with characters and content. There is something beautiful about white space on a page. It helps bring clarity to your focus and also adds visual appeal.
If something about your graphic isn’t working, you can always add a filter or crop your photo to cut away anything that is detracting from your title.
Don’t Hide Important Words
Take a step back or away and then give your image a quick glance. What was the first word you saw? The second? Were they the most important ones? This is what your readers will see, too.
Is the important information too hard to read on the page? Check the following if so:
- Font – Is it TOO whimsical or TOO delicate?
- Emphasis – Are the right words displayed with importance?
- Clutter – Is there too much going on in the image? What can I cut back and do without?
- Position – Does the text detract from the focus of the image? Or does it make sense with the background?
- Size – Play around with scale of the text in comparison to the image. Adjust each line’s font size individually to shift the focus and importance of each word.
Do Use Contrasting Tones
A title should be easy to see at quick glance. If it is too similar to the background color or tone, it may not be so easy to read. White and black are definitely safe colors to use on dark and light backgrounds, respectively. However, you can also incorporate tones from the photo as well to give an overall cohesiveness.
Tip: If your image is bright and you want to use white text, or is dark and you want to use black, add a semi-transparent contrasting color layer and place it between your photo and your text. This will help the wording pop on your image and serve as a DIY filter. For more cohesiveness, you can also tint the colors to pull from a tone in your image.
Don’t Use Too Many Fonts
Although it may be trendy to go all out with typography and mix many fonts with each other, it’s actually best to keep it simple. Using more than two fonts in a graphic can bring down readability and muddle the focus of the text.
Do Use a Pair of Fonts
Best practice is to keep font pairing to two fonts and select contrasting fonts. If you want a whimsical calligraphy font, pair it with a simple sans serif type. Pair something big and bold with a more delicate italic or script. Compliment heavy and bold with light and delicate.
Don’t Stretch a Title
Think of fonts as fixed shapes. If they need to be adjusted to fill a space or fit somewhere small, it is best to change either the font size or the letter spacing. I love playing with letters on a page to give them a shape, especially a rectangle because it’s easy and clean.
However, this should never be done at the cost of the font face. When adjusting a font in some editors you can either hold the shift key while you resize or use the corner tabs on the text box to preserve the ratio of width to height to scale it cleanly.
If size and spacing doesn’t help, then try a different font! Each font is designed a bit differently and may work better for filling a space or fitting in more characters.
Stay Away From the Margin Danger Zone
In print design, margins called bleeds are cut off when a graphic is trimmed after it has been printed. A safe margin is always recommended inside the trim lines to allow for normal shifting in the printing process. Our digital shifting happens when social media platforms crop our images for us in various manners, so we have to be prepared for that.
Many times the same image will appear as a featured image on our sites and then as the featured image on Facebook when shared. For this reason, it would be safe to keep important text or imagery away from the margins of your photo in case it is cropped differently.