Branding is not easy

It took me nearly as long to settle on the branding and art direction for the website as it did for me to learn the Ghost platform, build a custom theme and deploy that theme to the production website.

The challenge

It starts with my sense of integrity. I have a set of moral and artistic values that can sometimes slow me down if I am left entirely to my own devices. This is especially prevalent in anything involving creative expression. If I make something, it will be uniquely mine in every way that is practical. I’ve been like this all my life, even going back to the smallest of art projects or writing assignments in school.

So, naturally, for something as personal as my first company and the blog reflecting my career, the branding for this website is no exception. Clip-art or other kinds of free art wasn’t going to be good enough. However, I don’t have the resources to hire a professional graphic designer. This is the reminder that in these early days I am a one-man show. If the business needs something, I’m the one who will do it. So, whatever art style I settled on would need to be sustainable above almost all else.

While I created the layout for the website, I used some temporary graphics, most of which I didn’t keep as they were just a giant X or something similar.

However, in those few weeks that I spent refining the website layout, behavior and color scheme, I kept making doodles on my white board so I would have some options to choose from. I knew I was going to have difficulty settling on an art style and even more difficulty implementing one that met my criteria.

So, what were my criteria? These are my literal hand-written criteria with some added notes for you readers in the parentheses:

• Uniqueness/originality (to make the website memorable)
• Consistency in art style (throughout the website)
• Graphics that are simple but also relatable (my goal is to share knowledge and to teach some tough concepts. I could use dragons and skeletons for everything, but I suspect that kind of a theme would alienate some of my target audience)
• Small file sizes (for the graphics)
• A good experience for large screens (laptop/desktop computers) and small screens (phones/tablets)
• Easy for me to create (I can’t spend more time on graphics than writing content)

The last bit has been on my mind for weeks. I have never made graphic design a priority in my career. My skills lie elsewhere. While I understand the theory and the software tools, I lack experience and practice. Speed was going to be my problem.

AI-generated art was not an option

I played with a few generative AI tools for some inspiration, but I made an early decision that I would not use AI-generated art beyond a brainstorming phase. I’ll write a separate blog post for that. Suffice to say I will not used generative AI for any of my content or products.

As with everything, I put the work in up-front

I categorized my needs and created some placeholder graphics to test my assumptions about how the images would behave in different locations on a page and across screen sizes. After a short amount of time, I had my problem space mapped out.

• Graphics as the “featured image” on all posts need to look good as the thumbnail version in a list of posts and in the larger version when looking at the post. These need to avoid fine detail, and they all need to be created with the same dimensions. This also means the images must scale without much loss of visual information. I would use vector graphics and export to both PNG and WEBP.
• Graphics used for topic pages would meet the same criteria as “featured image” for posts.
• Graphics used within a post, as a part of the content, did not need to shrink down to a thumbnail, so they could be larger and have more fine detail.
• Graphics within a post could be one of two sizes to give me flexibility. I do not want to be stuck with just large or just medium sized images.
• All image files must be 100-300 KB in size at max.

I created test posts in my local copy of the website with images in between various sections of fake text. I created a fake series of posts and multiple topics. Then, I loaded up those test posts and topics with test images of different sizes.

I settled on a 16:9 ratio using 320 px as the height for featured images and 640 px as the height for the large images inside a post. Then I tested with borders and drop-shadows. I tested positioning of thumbnails. I looked at everything on multiple screens. I settled on the sizes, the image types, the positioning, etc. All told, this took a couple of days to get the way I wanted.

This was the easy part.

I am not an artist

Knowing theory and tools and techniques is good and well until you need to create something from scratch. I found that I was quite adept at creating things I didn’t like.

I tried stick figures with an attempt at some unique personality traits (looked weird, definitely memorable). I tried 2D images with textures and shading (looked decent but took a long time). I thought about creating 3D figures that I could pose in different ways, but this would take longer than I wanted.

I was focused on a “cast of characters” approach, and I spent days and days creating figures with faces and memorable features. But, the more I tried, the more I realized I am terrible at drawing people. Memorable? Yes! But, not really in the way that I wanted.

Because I’m humble, here’s a sampling of my various attempts at creating an art style.

The more I tried to “find my style” the more I felt like I was spinning in circles. The illustration in the middle of that montage of horrible ideas really sums up how I was feeling.

I was obviously not working to my own strengths, and I was spending too much time hoping that I would spontaneously get better.

Time to step away and reassess

As with many creative and technical endeavors, sometimes you have to step away from a problem in order to get a clear perspective. After multiple iterations on a theme for the art/graphics, I took a middle of the week 2 day break. I am my own boss. I’m allowed to do that, apparently!

After the break, I started doodling on my white board, again. I have a rolling white board in my home office. Why? White boards are my medium of choice for brainstorming and for teaching. I love the freedom of a white board: draw anywhere; erase anything; mix up the colors. It’s not as flexible as some software tools, but it’s faster to just … draw with your hands on a real surface.

I’ve used a white board as a creative tool and a teaching tool in many offices for many years. I’ve used a white board to teach non-technical stakeholders technical concepts. I’ve used a white board to plan out system architecture with other senior engineers. I have drawn white board diagrams that outlasted my stay at a company.

White boards are kinda my thing.

So, that was a real “duh” moment. This website is a blog about my career and a teaching tool. What better theme to represent me than the tool I have used for my entire career?

Introducing: the white board theme

So, late last week (I am writing this on 24 July), I pivoted away from a “cast of characters” to a more practical art style based on white boards! It took me one day to create a template, complete with a watermark stating the copyright. Rather than a heavy focus on character illustrations, I could mix words and illustrations and still have an engaging graphic to use in a short amount of time. Score!

The white board theme gave me some cool advantages. I had a nice built-in outline (the edge of the white board), some simple graphics tucked into the corners to add some visual interest — and something I can use to hide easter eggs in later. No matter what I did, I would have consistency among all the graphics I produced. Otherwise, I had a nice, juicy blank background to add stuff.

Sticking with my standard mode of operation, I created two templates with the same width/height ration but of different dimensions: one size for featured images and the resulting thumbnails, and the other (larger) size for use within a post.

Then, I tested a few new graphics with these templates to make sure they worked with my existing website layout. Everything worked nicely. The time spent up front to determine the image sizes I would use ensured that the shift in direction was seamless. Creating templates of the two sizes and starting any new graphic with one of those templates eliminates any surprise re-sizing or scaling problems

The lessons learned

While this task took longer than I wanted, I did finish it in a reasonable amount of time, and met my goals. And, I am happy with the outcome. I drew on years of experience to make that happen.

So, while not new to me, it is always worth repeating these lessons that I applied to this tase:

• Start with a goal in mind
• Give yourself a time box for testing and proving concepts
• When you are “stuck” on a creative problem of any kind, step away to give your brain a break
• Focus on your strengths

I gave myself time to think about the problem space for a while before I started the actual work, which gave me the freedom to refine my criteria. And, while the doodles I made along the way, before I started the work, didn’t yield any results, they kept me moving and gave me a starting point when ready to focus on the task. And, who knows? If I had more experience with graphic design, meaning if I was better at translating ideas to finished graphics, some of those initial concepts may have worked out.

If I had not given myself a time box or if I had chosen the stubborn approach, I likely would have taken much longer creating the character designs and never would have been happy with whatever I ended up with.

Here’s a bonus lesson:

• Keep the work that you don’t use

I kept almost everything that I didn’t use. Some I kept for reference material as I figured out how to do something in the software tools I am using; I might need to remember a technique even if the particular image I learned it with won’t be used anywhere. Some I kept just for the humor of how bad they were. I do the same thing with code, and I do the same thing with content that I write. Failures are rarely a complete waste of time if you learn to look at them the right way.