Knuffke.com

View Original

A Discussion of Design (with an example!)

In this week's episode of Horizontal Transfer, Paul and I talk about design in education, and I cite the example of the logo for the show as an instance where we spent a lot of time, and went through multiple attempts, before settling on the final version. That noted, I figured I should write a bit about just what went in to the logo to demonstrate just how much deliberate took place. Here (for reference) is the logo:

So much thought over something so basic.  The hallmark of design

Design Notes

  • Font: The logo uses Futura, a classic geometric sans-serif font from early in the 20th century (and of unsurprisingly German origin). I also tried using OpenSans (a font that's in heavy rotation in my materials currently), but Futura worked better, and I was glad to have a reason to use it for something. Fun fact: That's a 1px weight black stroke around all of the letters. I know this because I tried both a 2px stroke (too fat), and a .5px stroke (too thin) before going with the 1px stroke.
  • Microphones: It can be hard to find free-use artwork for things like logos. Neither Paul nor I have super great illustrator chops (or Affinity Designer chops in my case), so it probably wasn't going to be something we made ourselves. Fortunately, there's the OpenClipArt project, which has a large variety of microphone icons to choose from, including this one. I did change the fill color once we decided on a color scheme.
  • Arrows: The arrows are one of a variety of "double arrows" that are seen in Chemistry to denote processes at equilbrium. There are a lot of different styles for this notation. I actually made the one that is used in the logo, as I couldn't find it exactly in the land of .svg arrow icons.
  • Palate: I'm not trained in color theory, but I do know a bit about colors for the web (the main rule is maximize contrast, which is why so many websites use black and white). I also know that ColourLovers exists, and that it has thousands of different palates that I can search through. So I found one that used white, black, gray, and blue, made some minor modifications, and used it both for the logo, and the overall color scheme of the horizontal transfer website.
  • Positioning: Microphones above text? Text above microphones? How much whitespace? How big should the font be? All of these questions could really only be answered by experimenting a bit and seeing what worked for my sensibilities when it was all said and done.

See what I mean when I say that more thought went in to this than anyone would ever think by looking at it? But that's the point about design. If it's done well, no one ever notices it (and I don't even think this was done all that well. "Passable attempt" is probably a more accurate representation).