BoogerBall

Branding the Ball – Redefining the Logo

OldBoogerBallNewBoogerBall

Have you ever created something that you thought was a very swell idea but then, when you stepped back to take a look, your eventual reaction was, “What have I done?” Or maybe you’re oblivious, like me, and it takes the discerning eye of someone else to open yours. Well, this happened to me awhile back.

First, an aside.  I attended a manufacturing trade show some time ago.  I came across a plastics company that was giving away books.  Most companies give away a squishy ball with their name on it or a pen with a sample of the product they sell glued to the end or a pocket protector with their logo on it.

LogoPocketProtector

I’m a sucker for free stuff at shows because it makes me feel like Santa Claus when I get home after the show with a bag of candy bars, engraved pens and interesting product samples to present to my kids.  Not only did American Plastic Molding Corp replace their product sample give-away with a free book (an unique offering in itself), but it was a book called, “Our Toilets are Not for Customers”.

OurToiletsAreNotForCustomers

Good book; full of anecdotal stories about customer service; written by the owner of AMPC, Floyd Coates.  The book worked better than any squishy ball or candy bar ever could because it gave me a glimpse of what the owner stood for and his company’s values.  I did some business with APMC because of that book and I recommend them for plastic injection molding.  But that’s not the point of this aside.  After reading Floyd’s book, I got excited about publishing my own book (“How to Make a BoogerBall, a Story about Life, Product Development and Keeping Your Nose Clean).  I got so excited, I decided to contact the author to seek his advice about getting published.  True to the image of the customer oriented man I read about in his book, Mr. Coates called me back.  I was so overjoyed to talk to him that I took his call on my cell phone in a dressing room in Bloomingdales at the Mall of America and I took copious notes on a piece of cardboard that comes inside a dress shirt (found on the floor).  He gave me lots of good advice including the name of his printing company, but it was after I directed him to BoogerBall.com and he (and his wife, Anne) read the story that my eyes were opened (finally the point of this lengthy aside).  Floyd said that he liked the story but his wife had trouble looking at it because the BoogerBall looked too real.  “It’s really gross.”

I never thought of my story as being particularly repulsive.  Wacky, funny, ridiculous, but not gross.  It’s not real.  It’s just rubber cement.  Then I got an email from a guy who took me up on my request to send in a picture.  The photo he sent was of a small, smooth, round ball the size of a quarter.  It was somewhat green and looked a little gooey.  It was a real ball of real boogers.  It was so gross to me that I almost hurled on the computer keyboard just looking at it.  My eyes are now opened.  The BoogerBall idea is fun, wacky, interesting, and very gross – especially if you think even for a second that it could be real.

My goal for this project is to teach people something they don’t know, to entertain and to enlighten but not to disgust.  While I can’t ‘not show’ the BoogerBall while telling the story of how it’s made, I can soften the gag reflex by not using a photo of it in the ubiquitous logo.  So this lesson contains various tools and methods for refining our BoogerBall logo.  Let’s make it less gross, more fun, less realistic and more stylized.  It’s true that this product is on the fringe of societal appeal (there are only so many 12 year old boys out there), but with a less realistic logo, we might be able to bring it slightly closer to main stream (by not grossing out their mothers).

I used the following techniques to convert a photograph of the BoogerBall into a stylized vector graphic suitable for use as a logo.  Each of these methods has its roots in my past.  These are tools that I have found useful.  This means that you may conversely find them trite, redundant or obsolete and you may also find them useful but they seem to make sense to me.

The first problem is to simplify the photograph into a stylized line drawing.  The second problem is to create a digital version of the line drawing.  The third task is to create a vector version of the digital drawing.  The final step is to complete the logo with color and line weights.

BoogerBallNotebookI like to work in the real world as much as possible; pushing pencil and paper instead of pushing electrons.  This is why this post was first written out longhand in my notebook.  So, I began with a printed copy of the BoogerBall photo.  The desire is to have a line drawing with maximum contrast (black lines on white paper) to facilitate the future steps.  To accomplish that, I created what can be thought of as poor-man’s carbon paper.  You see, way back in the olden days, in order to make a duplicate copy of a typed letter, a typist would use a piece of black, chalky “carbon paper” sandwiched between two pieces of paper.  Poor-man’s carbon paper is a technique we played with in elementary school.  You scribble on the back of a piece of paper with a dark pencil or crayon.  Turn it over and place it over another piece of paper.  Anything drawn on the first page will be, in turn, transferred to the second page.  The more shading you do to build up the “carbon”, the darker the transferred drawing will be.  So, I shaded the back of my photo good and dark and then traced a simplified version of the BoogerBall over the photo.

TracedVersionCarbonPaperTechnique

The traced drawing transferred to a clean piece of paper.  The result is a drawing with high contrast and cartoon styling (I made the boogers bigger with a little less detail) that is ready for the next step.

CarbonCopy

 

Simple scanning converts the line drawing into a digital image for tracing.  You can also use your phone to take a picture of the drawing and email it to yourself.  (I can’t believe I just wrote that – it’s like saying you can also use your elbow to pick your nose – it doesn’t seem possible.)  Once you get the line drawing back to digital format, you’re ready for the next step – vector conversion.

Now, there are a number of ways to trace a line drawing to make a vector version.  If you use Adobe Illustrator (AI), you can use the trace tool to do the job.  Being an engineer and a CAD guy, I find that I am not as comfortable with the free form artistry of manipulating vectors in AI.  I seem to spend extra time trying to make it mathematically perfect which is not always easy to do in Illustrator.  Because I have thousands of hours of AutoCAD experience, my favorite technique is to put the image into a 2D CAD program.  Draftsight is my latest tool of choice because it is an AutoCAD clone so my skills are still relevant and because it is free.   DraftSightI own a license of AutoCAD but I can load Draftsight on all of my computers and teach its use to others more easily because it’s a free download (which, I’m sure, is part of Dessault’s marketing plan and I’m playing right along).  Like AutoCAD, Draftsight lets you load a reference to an image file for tracing and that’s just what we are going to do.

I recommend placing your image file on a different layer from your tracing vectors so they can be easily isolated by turning layers on or off.    LayerControlAnother good use for layers is to isolate different colors.  In addition, the use of layers will help simplify our design.  Our BoogerBall will eventually consist of multiple boogers in different shades of green.  Rather than have every little splotch of color be its own closed vector shape that needs to be created and filled with color, we can create a large background shape of a single color and then layer the smaller booger shapes of differing color on top.  All of the little spaces and gaps in-between will be filled with the background color.   BoogerBallLayersBecause AI will import layers along with geometry from a DWG file, you can begin organizing and separating the different colored shapes on different layers now and save yourself some tedious work later.

I use two tracing methods in Draftsight that eventually converge to produce the desired result.  The goal is to have closed geometric shapes that can easily be filled with color in AI.  The first method is to use the arc command many times in succession to trace a booger.  The CAD tool will automatically repeat the last command if Enter or the Space Bar is pressed so after making one arc on the path, it’s easy to keep going.  Hitting Enter or Space again causes the first point of the arc to be a continuation of the last point of the previous arc making both arcs tangent to each other (a smooth looking transition).  Because of this, you can quickly trace an organic (curvy) object by making one arc and then repeating Enter, Enter, Click, Click as many times you need to complete the path.  The resulting geometry will be many small arcs as separate entities.  BoogerBallArcsWhile AI has tools to convert this to one path (Pathfinder), the CAD tool can do it just as quick (you’re already here, anyway) by choosing the PEDIT command.  PEDIT will convert the first arc you select into a Polyline (a single continuous entity made from many).  Using the Join option, you can add all of the remaining arcs to the path.  With the Close option, you can be confident that the final result is a closed Polyline (i.e. one that can be filled with color in AI).  The alternate method for creating a closed, curvy shape is to use the PLINE command which creates a multifaceted Polyline of small, straight line segments as you make clicks along the desired path.  Again, use Close to be sure the Polyline is completely closed.   BoogerBallPlineThen use PEDIT and either the Fit Curve or the Spline Curve option to make the path smooth.  This second method will be faster than the first because you are just making a bunch of short line segments and letting the CAD tool make the curves, but you will have less control over the final outcome, especially where your booger shapes make sharp corners or tight reversing turns.  As you repeat this process, you will eventually trace all of your boogers onto different layers and you will be ready for color and fine tuning in AI.

BoogerBallFitCurveBoogerBallSplineCurve

 Importing your vector BoogerBall into AI is as simple as closing Draftsight (be sure to SAVE) and opening the DWG file in AI.  The Options box that pops up gives you the opportunity to scale your image, or center it on the Artboard.   DXF-DWG OptionsI recommend experimenting with these options.  Be sure to leave the Merge Layers option unchecked so all that extra work you did to isolate layers in Draftsight isn’t lost in translation.  After the file is opened and you SAVE it to a new AI file, it’s fairly easy to isolate a layer at a time, select all of the booger shapes, and choose a fill color to fill them.

NewBoogerBall

Within just a few moments, you can have a complete BoogerBall design that’s exactly what we are looking for, a stylized vector graphic suitable for use as a logo that doesn’t excite the gag reflex of our “real” BoogerBall.   I did a little extra work to integrate the Wordmark and added a little stylized shadow.  Now we can move on to bigger and better things like building a fun WordPress website and earning traffic to it.

 

 

 

 

 

BoogerBallFinishedLogo

 

Update:  After working on this one post for over a year I’ve come to realize that the opening sentence applies to this post and the whole BoogerBall concept. I am moving on to a new subject – a new project that has many more redeeming qualities and an infinite range of learning opportunities (with more posts to illuminate them). Look for future posts about Engineering For Everyone, an educational program I have been developing. You’re probably saying, “Thank goodness, that was really too gross!”

Update#2: I just learned last week that Floyd Coates passed away after a battle with cancer. I will miss him as he inspired me to keep going with my writing. I look forward to greeting him in Heaven some day.

Tags: , , ,

Monday, March 18th, 2013 CAD, Engineering For Everyone, Product Development, Swell Ideas Comments Off on Branding the Ball – Redefining the Logo

Branding the Ball – a WordPress website

I mentioned in a previous post that “I’m not an expert but I have learned that for my customers, creating a website powered by WordPress has been the best balance of cost versus capability versus self maintainability. I can build it and they can maintain it, both with relative ease and aesthetic excellence. [snip] So BoogerBall.com will become a WordPress blog site and that is a story for a future post.” Here is that post!

I am a builder. I can’t escape it. It’s how God fit me together when he jumbled up some creativity, problem solving skill and passion to help others. After building many websites from scratch (mostly for customers that have moved on), I’ve learned that there are tools out there that can make it easier. WordPress is one of those tools. When you understand how WordPress (WP) works and learn your way around customizing it with Themes, Widgets, Plugins and Settings, you can coax it very quickly to produce a very functional, connected and professional website (www.swtuts.com is a WP site that I admire). My goal for every customer is to make them look good while using my skills to meet their technical needs. WP helps me reach this goal every time AND results in a website that anyone can customize/edit.

Installing WP on my server is easy because each hosted site has a selection of available tools called the EasyApps Collection. While WP is famous for its 5 minute install (which requires setting up the database and uploading the files manually), the EasyApps installation script on my host makes it even easier. When you initiate the script, it asks you a few simple questions and then builds a smooth sailing, easy editing, quick customizing, wonderful website in just a few minutes (sorry for the alliteration there, I got carried away).

First, WP needs to install in a folder on your web server and you need to choose a name for that folder. The default is “/wordpress”. I usually change it to something more generic like “/site” or something very specific to the site I’m building. The folder may come up from time to time in working with and sharing your site so you do want to choose carefully. Consider a link http://BoogerBall.com/wordpress/the_original_story.htm vs. the same link to http://BoogerBall.com/savem/the_original_story.htm. The former tells the world what tool you use to manage your site. The latter keeps it simple and adds some intrigue to your link. For BoogerBall.com, I will choose “bb/” as it is short and sweet and relevant (and not too gross).

Next, choose a login and password. This script creates both an SQL database and an initial WP admin user with the same credentials. Because WP is a database driven tool, your site loads fast and information you add to it can be used in many unique ways. Behind the scenes, it may seem more complex than a simple html site, but up front it is much simpler to manage (consider the work of changing the look of a simple html site – page by page vs. the simplicity of installing a new theme in WP – in seconds the whole site has a fresh look).

If your host has a script like mine, you will immediately want to upgrade your WP install to the latest version. WP has instructions on their site how to do this. If you’ve installed version 2.7 or later, the updates are automated (click and wait a moment). If not, you will need to use ftp to upload and download the latest files. For ftp, I recommend an easy tool called FileZilla – its free and it has a cool name that makes me think of a giant green lizard breathing fire into my website – making things happen. You will also need a text editor for a step or two.

Some people use WP as simply a blog tool. They have a regular “www…” site and then have a link to their blog “www…/blog”. I prefer to use the blog tool as the entire site, taking advantage of all of its cool features. To do this, you will need to configure WP to run from the root folder of your site so www… connects directly to the WP pages. This simple tutorial makes that possible.

As WP is primarily a blog tool, it’s prudent to understand how you might make it work for a fully featured website. Content on a WP site takes two forms, Posts and Pages. Pages are designed to be mostly static info that doesn’t change very often. Most WP themes have a menu bar that automatically makes a button for each Page. For the sites that I’ve helped launch, Pages are used for the About page, a Contact page, a Calendar (linked to a Google Calendar) or other basic but important information. Posts are designed to be the primary authoring tool for the WP site. Some of my customers use Posts to share what’s new or to document a monthly report. Articles such as this one are perfect for Posts. Posts are sorted on a WP site by date so they produce a running history of the content you’ve added. Posts have the ability to be organized with Categories and Tags which further extend the navigation possibilities. If you are selling something, each item may be placed on its own Post and each Post can have a Category (For Sale or Sold) which will help sort the content. There are many possibilities, but understanding Pages and Posts will help you make the most of WP.

WP has many additional features that make it a powerful ally in web design. Plugins are one of those features. Many free plugins exist that you can install directly inside your WP control panel. Some favorites that I use are Image Widget, Simple Hit Counter, Secure and Accessible PHP Contact Form and Subscribe To. If I have helped with your site, you already should have these installed. Themes are another one of those features. You can download and install new themes in a flash from inside WP. If you’re code savvy, you can customize a theme using the built-in Edit Themes tool. I usually find a theme that looks swell, download it and customize it to make it more swell. Another feature that makes WP a cool tool are just the basic WP settings that give you a whole host of controls over your site (including automatic search engine registration). Best of all, each of these features will be the subject of a future post (so much to say, so few keystrokes).

So there it is. It took me more time to ink out the words of this post (yes, I do write all of my posts on paper before “going online” – call me obsolete) than it took me to turn BoogerBall.com into a fully functional, searchable, Google savvy website. Now all I need is content and creating quality content is where your time should be spent. WordPress makes that possible.  Now that BoogerBall.com has its start as a WordPress site, the next step is to customize it.

Tags: ,

Thursday, July 28th, 2011 Product Development Comments Off on Branding the Ball – a WordPress website

Branding the Ball – The Word Mark

Once your product has a compelling name, the next logical step is to extend the name into a compelling logo.  Our product is a story, “How to Make a BoogerBall“, and its primary delivery vehicle is the website, BoogerBall.com.  The focus for our discussion about logo design, therefore, will be a logo for BoogerBall.com.

In learning how to design logos for several customers, I continue to research logo design and I have found that there are some basic fundamental requirements for an effective logo.  You’ll notice that I did not say “good logo”.  This is intentional because the judgment of logo design is an entirely subjective thing.  I’ve designed a logo or two that were very effective.  I thought they were “good” but my customer did not. 

Here are the essentials:  an effective logo should be simple (representing the very essence of the product or service), memorable (unique in it’s market segment), re-creatable by others (skilled in the craft), scalable (legible at the size of a postage stamp and at the size of a billboard), use as few colors as is reasonable (the more colors, the more cost), and be recognizable both in color and Black & White.  Each of these general requirements has a rich history linked to the processes of printing, publishing, digital presentation and advertising.

A logo may be made of two different elements, namely the Mark and the Word Mark.  The Mark is a graphic of some type.  It may or may not include text elements.  The Word Mark is some amount of text that usually accompanies the Mark.  This logo has a Mark represented by the tilted “K” and a Word Mark represented by the text “Kirk Builders”.  Some logos are only made of one of these elements.  Often the desire is that the Mark becomes recognizable even without the Word Mark.  The challenge is to balance all of these fundamental requirements and actually design an effective logo.

So armed with this knowledge, where do I start?  Always start with what you know.  BoogerBall.com is a website whose purpose is to feature a story about how to make a BoogerBall.  The concept was developed from the mind of a guy with no sisters who was barely 20 when he became the father of a four year old girl.  He thought it would be fun to tease her about saving his boogers and 14 years alter he was still enjoying the idea of saving his boogers in a big BoogerBall for his daughter.  The original story appeals to people on two different levels:  first, as an actual step-by-step instruction about how to really make a BoogerBall and second as an absurd fantasy about what would happen if you actually saved your boogers for 14 years.  Both levels of appeal speak directly to one demographic – 12 year old boys.  Only a 12 year old boy would take pleasure in the thought of saving boogers in a BoogerBall for 14 years to give it to a girl, and only a 12 year old boy would have the interest in actually exploring how to produce a BoogerBall from household materials (alas, at heart, I am still a 12 year old boy).

Now, what does that all mean to the point of our logo design effort?  Well, it seems prudent that the logo feature an image of the BoogerBall itself as the Mark and the word BoogerBall(.com) as the Word Mark.  It also seems like a good idea that the logo be clean and zippy enough that a 12 year old boy would want to wear it on a shirt.

Developing a successful Word Mark starts with selecting a font (or type style).  Fonts are so important to an effective Word Mark.  The text needs to be appealing but readable, memorable but simple – the complexity of the font should not distract from the overall design of the logo.  I have collected so many fonts that it is sometimes difficult to choose just one.  I usually start with an idea (clean and zippy and appealing to a 12-year-old boy) and then jump into my favorite tool, The Font Thing.

On my computer, I have two folders of fonts.  First, like you Windows users, my c:\windows\fonts folder contains all of the fonts I’ve installed over the years. 

Second, my server has a folder 000.AVSI \800.Templates \806.Fonts that contains a host of additional fonts that I’ve purchase, downloaded for free or received through some software purchase.  The Font Thing is a tool that enables viewing samples from both folders with ease.  You can download this free tool here (if you’re running Windows 7 you should read this post about making it work on your system).  Once installed, you can type in the text you’d like to sample, adjust the sample size and scroll through every font you own.

After scrolling through hundreds of fonts I chose these six as being zippy and appealing to a 12 year old boy (me).  Using Adobe Illustrator, I started some Word Mark concepts.  With the word BoogerBall.com as the basis and the font as the main design element, we start a clean design using layers to accentuate the words.  The color green is an obvious choice for the text which is placed on the top layer.  Behind that. a layer of white that has a larger line width really makes the green text stand out.  Finally a layer of black outline at the back clearly defines the edges of the Word Mark.  Putting all these together gives some interesting choices for word marks.

An aside about color choice – this topic is worthy of its own post as there are so many ways to choose color and so many factors to consider.  In choosing the color green, I decided to return to my offset printing background and choose a common color of ink.  Many print shops offer colors of ink at no additional charge on certain days of the week.  This means that on Monday they will load up a press with Pantone® Red and Tuesday with Reflex Blue, etc.  If you want red printing you can have it for free if you can wait until Monday to have it printed.  Otherwise they will charge extra to clean out a press and put your special ink color in it.  I have a Pantone® chart (Pantone® is a brand of ink commonly used by print shops) that is one of my favorite tools to choose color.  From the chart I chose Pantone® Green as the basic color of my Word Mark.  Illustrator enables accurate color choices of Pantone® colors by using the built-in Swatch Libraries.  My basic Pantone® Green is RGB 0-168-144, CMYK 100-0-59-0.

Back to the font choice – LetterheadFonts.com produces some of my favorite fonts.  Although I’ve not had the resources to purchase many of their excellent fonts, I do own a few that I love.  Speedstyle is a font that is commonly used to write driver’s names on their race cars.  It’s just the font that I think would look clean and zippy on a shirt.

So here’s the Word Mark that I came up with.  It’s not perfect but i think it’s effective.  The next step (for another post) will be to add a graphic (the Mark) to complement the Word Mark – probably an image of the BoogerBall itself.

Tags: ,

Wednesday, January 5th, 2011 Product Development Comments Off on Branding the Ball – The Word Mark