A Very Swell Idea, Inc.

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: BoogerBall, SwellIdea

Family Style Display

Last July, the pastor of my church began talking to me about a new program he wanted to start called Family Style. The idea was for a daily devotion time shared by the whole family. Just 15 minutes a day to make a connection between the family and God through prayer and Bible reading would produce lasting benefits for individuals, their families and the church as a whole. I was excited about the idea because most churches I’ve attended have taken over the responsibility of the spiritual training of children that has been abdicated by their parents (especially their fathers). This plan gives parents the tools (Biblical devotional materials), encouragement (reinforced every week at church) and accountability (read on) needed to enable success. Pastor Tim’s desire was to encourage the whole church to participate for one year and to keep track of our progress using dimes and that’s why he was talking to me.

His idea was to have every family bring one dime to church for each devotion they did during the week (up to 5). We would then place those dimes in clear plastic tubes that could be on display at church to show our progress. Washers painted blaze orange (called “wildcards” by Tim) would serve as replacements for missed days (nobody’s perfect). As the display fills with dimes and washers we can see in a tangible way our families growing closer to Christ.

The first question he asked was if I knew where to buy clear plastic tubing in the right size for dimes and something to cap the ends with. I pointed him the the place that has everything, McMaster Carr (www.mcmaster.com). I’ve used McMaster Carr for years as a source for everything from metric fasteners to raw materials to tools. Most of my customers rely heavily on their quick delivery and low quantity requirements. From McMaster, Tim ordered 7 pieces of 1” clear acrylic tubing that were 6 feet long (click here for link). As it turns out, I already had a whole box of white plastic caps that fit perfect in the 3/4” ID tubing (if you send me a note, I will share) but you can also buy them (black color) at McMaster (click here for link).

So with the key materials in hand, my task was to come up with a way to build an interesting display. Here are my first concept sketches. The finished product was simply a refinement of these concepts based upon discoveries and choices made along the way.

Upon receiving the tubes, I discovered that they were actually a bit longer than 72”. This was a blessing in planning the cut lengths as I could ignore the width of my saw blade in my calculations. After some trial and error, I came up with a cut list resulting in 19 tubes measuring from 6” to 42” in 2” increments. A few pieces leftover could serve as a sample in presenting the idea to others. I used masking tape to protect the tubing as I cut each piece to length with a miter chop saw (my favorite power tool). Be sure to make your cuts quickly as the tubing will melt if you cut it too slowly.  Scroll to the end of this post to find a link to the PDF drawing showing a detailed cut list for the project.

Next I made a quick drawing in SolidWorks to get an idea of how to make the spacer blocks. As you can see from this drawing, each spacer block is made from standard 1 X 3 lumber which measures 3/4” X 2-1/2” and is cut to 9” long. A standard 8′ piece of 1 X 3 can make 10 spacer blocks with only a few inches of waste. This means that I needed 4 sticks of 1 X 3 to make the 36 spacer blocks. Scroll to the end of this post to find a link to the PDF drawing showing detailed plans for the clamp block.

A miter chop saw and a small drill press proved to be the perfect tools for making the spacer blocks. First I setup a stop block to assure that each of my spacer blocks were cut to the same 9” length. Then I set the saw to miter at 45° with an adjustment to my stop block and I cut the corners off of all 36 spacer blocks. Using a 1” Forstner bit and the drill press setup with a simple fixture (made from some of the leftover cutoffs), I drilled the 72 holes in the correct locations (centered 6” apart). I highly recommend using a drill press for this step to assure the holes are straight and parallel to each other (critical feature). After that I used the drill press to drill a pilot hole in the sides of the stop blocks for each clamp screw. I ended up with 2-1/2” deck screws from the local hardware store. They look good and they clamp well (in retrospect, you might consider a shorter screw as some of them broke through ever so slightly when clamped tight). A 1/8” hole for each screw is small enough to assure a good grip on the #10 size screw but large enough to keep the wood from splitting. After drilling pilot holes as deep as I could, I placed the blocks back in the chop saw for the final cut – in half. It’s important after this step to keep the matched halves together so you might consider using masking tape as a temporary tool. Before jumping into the best part of the project, assembly, I recommend placing one half of your clamp block back in the drill press and opening up the 1/8” hole to 3/16”. This guarantees your clamp blocks will actually clamp as the screw will slip through one half and grip in the other.

At this point, you may choose to apply some type of finish to your clamp blocks. Paint, wood stain or clear coat are all possible finishes for wood. We chose to keep our clamp blocks “au naturel” so we could move right on to assembly without waiting for things to dry making this a one afternoon project.

On to the best part – assembly. The first step is to cap the bottom of each clear acrylic tube. Push the cap with even pressure against a hard surface to encourage it in. These caps have barbs that hold them well in place so you can be sure that you will not lose a whole tube of dimes in an embarrassing pile on the floor should you decide to move your display (or take it to a convention like Pastor Tim). Next, assemble the clamp blocks with your fastener of choice making sure to leave them a little loose for final assembly. Finally, begin attaching the clamp blocks to the tubes in an alternating fashion, spacing them as you go.

The beauty of this display is that it is fully modular. If you are concerned about the overwhelming task of filling a huge display over a long time, only attach 5 or 6 tubes together at first. Consider alternating the sizes in a random way rather than a steady increasing progression. I found that it is possible to tighten the clamp blocks to a point that the assembly is rigid but it can also be pushed, pulled and twisted into new shapes without adjusting the screws. It’s quite fun to play with the thing to make unique configurations.

The practical use of our Family Style display is quite remarkable. Every week the kids go up front and place their dimes or orange washers into the tubes. The smallest and largest tubes filled first (Pastor Tim used extra caps to seal them up). The distribution of washers and dimes shows that our church is not perfect (all dimes) nor is it willing to give up (all washers). The display is a constant reminder of our spiritual growth as a church family and a continual encouragement as it slowly fills up each week. And it is fun (the kids keep changing it so it is always different)!

I couldn’t resist doing a few quick designs in SolidWorks for fun. Maybe they will inspire you. Download the assembly and give it a try yourself. If you don’t have SolidWorks 2011, make an announcement at your church and I’m sure you’ll find some engineer nerd like me that is eager to have some fun helping you.

Techincal notes – a dime is about .050” thick so every inch of display will hold 20 days of devotions.

Aside from the Family Style program, this display concept can be used to visibly track any type of growth campaign (good deeds done for the community, days sober/cigarette free/free from ______, fund raising, etc.).

It’s also important to note that this project was an undertaking of my entire family. My kids ran the chop saw and the drill press, assembled the clamp blocks and made several cool variations of the final display. Don’t miss out on this cool opportunity to spend time working with kids!

Here are some things you can download for more info:
McMasterAcrylicTubing.pdf
McMasterPlasticCaps.pdf
ClampBlock.pdf
Tubes Cut List.pdf
HeartAssy3D.pdf (3D pdf’s require newer versions of actobat reader and allow cool 3D navigation – click and drag in the window)
DimeDisplaySW.zip (2M)

Tags: SwellIdea

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: BoogerBall, SwellIdea