Looking for Design Inconsistencies and lack of communication in your images
One of my favorite presentations at this year’s BigSky DevCon was by Workiva, discussing their need and process to develop a stylesheet for their web service. They had found a multitude of design inconsistencies. The presenter discussed their steps to correcting that issue.
Because of my everyday work, my design skills are getting better, but not good enough to call myself a graphic artist. Of course, if I were working with a graphic artist, I wouldn’t be doing all these little nit-picky tasks. I would just be coding the artist’s design. But even a graphic artist goes through various iterations and refinement steps when creating a website design.
As an example of the fine tuning work that goes into graphic design, let’s look at all the little issues with the 8 boxes under the banner. These are what Kahuna calls “Feature Boxes.” Feature boxes are actually a type of navigation. They take you into specific Posts on a website. But, they are navigation that includes an image and text from the Post.
FINDING IMAGES THAT COMMUNICATE
Because the Feature Boxes are navigation, each image should communicate what the viewer can expect to receive for clicking the link.
- The original boxes had a camera icon type image. To make each box represent a category, I wanted each box to have a different image that would represent a category. That is, the camera icon delivered no meaning. I want the images to deliver meaning.
- I found out that screenshots generally don’t communicate a category topic. Screenshots do help illustrated specific text.
- In the same theme as #2, all images can have multiple meanings, so I found that just an image wasn’t enough. I need to identify the category message with text.
- At this point, there is no consistency in style the images. Some of them are stock photography. One is a logo (WordPress). And, one is a photo I took (the knives). Does this matter … it does, but not as overwhelmingly as some other issues.
When elements are only considered individually, not with the whole page in mind, the images can be out of context, such as the screenshot, and not cohesive, such as the four Feature Box images not having relevance to each other.
How to Format the Text in the images
The next question is finding a format that makes the text noticeable and easy to read. It took some experimentation.
Attempt 1: Just the images.
The mix of image types: photos, stock photography and screenshots, made this an image confusion. And, as mentioned above, the images don’t deliver a clear message.
Attempt 2: Images with Text
So, I experimented with adding text to the images. To do that required a clear space on the image where it’s obvious that the text isn’t part of the image. Also, the category name is the main point, not the image, so the text needs to be large enough to not be an “also ran.” This attempt was an improvement, but it still wasn’t enough to communicate well.
Attempt 3: Moving the Text Away from the Photo
Instead of placing the category text in some clear area of the image, I moved the text to the top of the image canvas, resizing the main image as needed to fit. This brought up several other considerations about background and text colors, font sizes, etc.
My first tries at moving the text away from the image were with black text on a white background.
Side Note: To process the new image style efficiently, also requires photo manipulation software, such as Photoshop. These days, I don’t do much photo work, leaving that task to the expert graphic artists, but it’s nice to get back into it now and then. Sometimes I need to show a client how to do minor Photoshop work.
Attempt 4: Black on White or White on Black?
After creating a couple of images with black on white, I tried white on black. That made the title stand out more because the borders don’t disappear into the white background around it. But, should uniformity or the image control the background color behind the text. For example, the social media image is black icons on a white background. Should the text follow the same pattern? That is, is consistency more important than the individual image?
Attempt 5: What Size Should the Text Be?
As you can see from the examples, I had to experiment with one line or two for the longer titles, and what size should the fonts be? Should I use the same size for both one and two lines or
different sizes?
In the end, I chose 20px for two lines and 25px for one line. This fills the title area up more evenly.
What Size Should the Black Bar Be?
Setting all the title bars to black and making the fonts consistent highlighted another UI problem: the bars were not all the same height.