A project I’ve wrapped up recently also has the distinction of being the first job I’ve gotten from a blog reader, P.K. I was asked to design a logo for Gear Desk, a (beta) directory for high-end build-it-yourself audio gear (updated 8/24 – sorry, P.K.!).

P.K. had some specific ideas initially and asked for some sketches involving either a dial/knob or a power button. My first round of sketches stayed within the boundaries he had defined. In our first conversation, he had also mentioned that a bonus would be to have a business card that looked like audio equipment with the logo, so I sketched a few possibilities for how the logo shape might integrate on a business card.

After round 1, the power button idea was thrown out altogether and I was asked to play more with the dial/knob shape.

P.K. tended to like minimalistic, clean shapes. While he liked 6a and 6b, he was afraid that it was too abstract and didn’t really say “gear.” This was true of most of the knob shapes – taken without any context, it could be difficult to figure out what the shape was. P.K. gave me carte blanche to find a new direction for the logo, agreeing to an extra round of sketches.

I went back to the original photos of high-end gear and audio equipment that P.K. had originally provided, doing some sketches of the ones that looked nice and trying to distill elements that would really speak “gear.” Some of the notes I made below: “Rounded corners look more high-class (like ipod)” “Feet really help make it look like ‘gear’” “Dials by themselves do not communicate ‘gear’” I sketched out a few more ideas, basing them on actual pieces of equipment but simplifying the shapes.

After looking at this round of sketches, P.K. felt comfortable letting me run with three options and creating digital versions.

P.K. really liked the simplicity of #1, but thought a “dimple” would make the knob look more like a knob, and less like a projector lens. I did one more round of digital sketches, along with some color samples so that he could see what it looked like with color.

After a few more screenshots with different fonts and colors, we finally ended up with a logo that we were both happy with. The final logo used a “tick” instead of a dimple, which we thought helped to make it look more like a knob (and less like a projector lens highlight), incorporated the rounded corners and feet to make the box look more like equipment, and used a clean serif font for a more “expensive” feel.

P.K. was great to work with. It was a new experience for me as he was the first of my clients to use IM and was able to give me instant feedback. I appreciated that he was very open throughout the whole process, willing to scrap our original ideas and go in a totally different direction — which thankfully worked out!

Now I just need to take the time to update my portfolio…

Last night I did a quick-and-dirty switch to the WordPress Sandbox theme and copied, tweaked, and hacked at my CSS to get it into a rough working condition. I think it took about an hour and a half, in between watching kittens play and selling off a chair to a Craigslist person, so I’m talking very quick and dirty! It mostly works in Firefox right now, although I noticed some text spacing issues with IE6 (apart from the non-png transparency issues), but please leave a comment if you notice anything else funky. One thing new is that I have TWO sidebars to play with (right now one is mostly hidden) so I get to figure out what I want to do about that! And I might change the color, because although I like the blue on its own, it clashes a bit with the teal WordPress Admin bar when I’m logged in (which is all the time).

I do like the background effect that I ended up with, however — less “messy” than my corriehaffly.com site, so I’m thinking about switching the corriehaffly.com site now!

Anyway – don’t be surprised if you see things moving about frequently. Or just stick to your RSS reader and wait until I ask for official bug testing.

Update: I changed to teal from blue and played with sidebar stuff and gave myself a new headline (“This is my blog. I can be wordy. But I take cute photos of kittens, so it’s all good.”). Now I need to get to work, so I’ll leave this as-is for now!

Previous rounds: v1, v2, v2.1

As I mentioned in my August goals review, I was going to try to carve out time on 8/13 to work on getting my new web site design up.

And I did!

www.corriehaffly.com

The rest of this week, I’m going to try to commit an hour each day to clean things up.

• The older HTML is a bit sloppy, and I want to make it a little bit more semantic (using strong instead of bold, for example).
• I changed “services and rates” to just “rates” and “portfolio” to “work,” so the page titles (and file names?) will need to reflect this change.
• I need to weed older stuff out of my portfolio and add some newer projects.
• I might switch to the larger thumbnail (bottom of the home page) for the main work page.
• I want to think about what else I can do for the right column and dividing sections. Something with the headings? Some sort of divider? It’s missing something, but I’m not sure what quite yet. Maybe more fun/whimsy.
• I want to think of more clever things to put in the talk bubble for each section.

I can’t say that I love this new design (whereas I do love my Custom Shadow Box design), but it will do for now.

One thing checked off my monthly goal tracker sheet! I finally designed business cards and placed an order for 250. I paid extra money for printing on the back side and for glossy paper; I’m excited to see how they turn out.

The next time I wake up and can’t go back to sleep, I’m designing a brochure.

I am very very very excited to announce that my new “side business” is finally opening its virtual doors. VERY.

Introducing Custom Shadow Box at www.customshadowbox.com!

Business plan? What business plan?

The [rather uncreatively named] business is meant to be a side project for me. I enjoy working with my hands, and this is an opportunity to try to get some additional income while doing something else I love. I’m not expecting a high volume of orders because of the price point, so I expect to show a loss at the end of this year (for the shadow box side business part, anyway). The startup costs weren’t high, but I did invest a nice chunk of change into professional photography in addition to fictitious name filing fees.

Nevertheless, this has been a great (albeit sometimes frustrating) way to learn about selling tangible product in California, which involves getting a reseller license, dealing with sales tax, and all that fun stuff. Making the web site was also a great learning opportunity. More about that in a bit.

Beginnings

It started with a wedding present given to my sister back when she got married. A friend had arranged the invitation artistically in a small shadow box with silk floral accents that matched the colors of the invitation. I always thought it was a cool idea, but it wasn’t until my coworker got married that I finally tried it out. Their invitations were wrapped in orange vellum with a gorgeous patterned ribbon. My coworker had gerbera daisies in her wedding, so I picked some silk flowers that matched the invitation and put it together.

Fast forward to sometime last year. I was brainstorming ways that I could develop alternative streams of income. By this time, I’d created some shadow boxes to display my own wedding photos and invitations and created a couple more for other friends, as several of my friends were conveniently getting married. I played with the idea of making custom shadow boxes for money and sketched out some pricing ideas. Come 2007, I decided that one of my main goals for the year would be to get this new business idea up and running.

Process

First, the logo. Below, you can see the logo evolution. I started with a simple 3D box shape created in Illustrator and eventually made the frame “thicker” to give it some depth. While I liked the inner shadow effect (large upper right), I eventually moved the shadow in front of the box so that I could do cool things with Jason Gaylor-inspired flowers. I liked my original wild tangle of flowers (third row left), but when reduced to logo size it was too hard to tell what they were (my sister Angela’s feedback), so I simplified the shapes for the actual logo itself. I didn’t want the time I spent on the crazy flowers to go to waste, however, so you’ll see that they show up in other parts of the site.

My original logo and web site design color was teal, but my graphic designer sister said that I should pick more neutral colors so that the site wouldn’t clash with my product pictures. Above you can see my attempts at choosing other colors. Eventually I figured out that it would work best to have the shadow box mark in one color and the text and the rest of the site to be in another color. I also made the page titles green to add some additional oomph (that’s a technical term, by the way).

The web site design went very smoothly. I used my wild flower mass as a page background and already had in mind the kind of feel and style I wanted for the web site, which I’d describe as clean and web 2.0-ish.

The web site development, on the other hand, was a fun learning experience and challenge:

• I tried to use as-clean-as-possible HTML for the markup. I generally suffer from divitis so this was my attempt to use as few divs as possible. (Note – I don’t think the site validates 100% quite yet. Still working out some of the kinks.)
• I bought DOM Scripting by Jeremy Keith and then completely redid the gallery page to use better markup, with a fancy Javascript file controlling the application of classes.
• I also used DOM scripting to get the order page more interactive, with prices highlighting as you select options and the bottom invoice amount automatically updating as you “build” your shadow box.
• I got to experiment with a totally new illustration style. More below.

There are still some challenges with the order page that I haven’t figured out how to deal with. There’s something about my script that won’t allow me to automatically put the focus on a text field after selecting a radio button (such as Calligraphy Options). Also, if you leave the page and then go back to the order form, the radio buttons are selected but the Javascript stuff has all been reset so the prices aren’t highlighted and the order total is “$0.” Not sure what to do about that either. If you’re a Javascript expert and would like to provide some tips or want to monkey around with my code, please do!

The next step was to get some product photography. I had put in some temporary pictures into my gallery of older shadow boxes I had created and photographed. Some of the photographs were okay (such as the one used on the home page which had removable glass) but the photos of black frames were generally not usable because of reflections on the glass. I chose Bonnie Anglin from Anglin Art and Design because of her experience with product photography, although I think I offered her a new challenge with photographing glass-faced picture frames! You can see her great results on the gallery page; she took all the photos except the first one and the third one.

At about this point, I also decided that I wanted to put some illustrations on the how it works page, which was text-heavy and boring. I didn’t think my typical comic style would work, so I contacted Paige Pooler to see if she was available. Unfortunately, she wasn’t, but I was inspired to try out a different style of illustration and see how far I could take it. You may remember my first attempts; that specific portrait ended up on my about page. The other illustrations took a while to complete because of a bout of procrastination, but I’m very very pleased with how they turned out. Notice that I managed to incorporate the wild-flowers in the illustrations as well. See the other illustrations on the how it works page.

Using code culled from other projects, I finished up the web site by getting the order form to work, then actually shipped shadow boxes (long-belated wedding presents) to test the shipping price. US Priority Mail ended up being the most cost-efficient way to ship. I ordered boxes from Uline although I still need to find a source for bubble wrap (Office Max will do for now).

And this morning, I went live!

Next steps, and how you can help!

Things I still need to do:

• research bubble wrap costs and find a source
• create business card and brochure
• create invoice template
• finish baby shadow boxes for friends (need to add baby photo) and take photographs for gallery

How you can help:

• Kindly spread the word! Word of mouth, blogs, anything will help.
• Provide feedback about the general business idea, site, and price point.
• See a typo? Let me know!

I made some custom Outlook stationery with my new logo:

Making your own custom Outlook stationery is pretty easy if you know some basic HTML and CSS. All you have to do is make a really simple web page and move the .html and graphic files into a specific Documents and Settings folder. Here’s what I did:

1. Design a very basic tables-based web page.

The more basic, the better. Complex layouts might break depending on the email client the recipient uses. Some email clients aren’t very good with interpreting CSS, so you’ll want to go back to old-school tables instead of using fancy divs. My stationery basically has two one-cell tables — one with extra padding for the body of the email, and one to hold the footer info. (Put a paragraph tag inside the email body table cell to reserve some space for the actual email.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="emailgraphic" width="340" height="110" border="0">
<!-- you can substitute text here, instead, if you want a text footer... or a do a combination of text and images -->
</td>
</tr>
</table>
</body>
</html>

2. Apply CSS to style the email and table cells.

Basic CSS seems to work pretty well with emails, so I add some styles to the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style text="text/css">
body { background: #ececec; margin: 0px; padding: 0px; color: #000; font: 10pt Verdana, sans-serif; }
.address { background: #fff url('emailbg.gif') repeat-x top; font: 8pt Verdana, sans-serif; }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
<p> </p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="address">
<img src="emailgraphic" width="340" height="110" border="0">
<!-- you can substitute text here, instead, if you want a text footer... or a do a combination of text and images -->
</td>
</tr>
</table>
</body>
</html>

My table cell now has a background graphic applied (to give the illusion of the shorter white strip) and some basic font and color properties defined.

For the record, these are what my two email graphics look like:

Main email graphic

Table cell background graphic

3. Add an inline style to the body tag.

Sometimes Outlook won’t recognize the body font that you’ve specified (I haven’t really tried to figure out why) and will use your default Outlook font instead. But adding an inline style to the body tag will usually fix this, if that bothers you:

<body style="font: 10pt Verdana" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

4. Move files into Outlook stationery folder.

Now, move your HTML file and image files into your Outlook stationery folder. Mine is under C:\ Documents and Settings\ yourprofile\ Application Data\ Microsoft\ Stationery.

You might want to name the HTML file so that you can recognize it, as Outlook uses the file name as the “title” of the stationery.

5. Set up Outlook to use the stationery.

If you want to use this stationery as your default stationery, go to Tools > Options.

Click the Mail Format tab.

Click the Stationery Picker button and find your new stationery (by file name) in the list.

Or, use multiple stationery.

I have multiple stationery for different email accounts. You can go to Actions > New Mail Message Using… > More Stationery… which brings you to the Stationery picker. The cool thing is after picking your stationery this way, Outlook makes a shortcut in the New Mail Message Using… menu so that you can select it more easily.

If you don’t know basic HTML/CSS, then the first two steps might not be so easy for you! You are welcome to start with my code and tweak it by referencing w3schools or the free online HTML and CSS resource of your choice. Or, contact me and I can make the changes for you for a reasonable fee.

The HTML code is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. Graphics belong to me, obviously!

They came!

Previous rounds: v1, v2

I started out with similar color choices as v1…

Green:

Blue:

Purple:

Teal:

Then I started thinking about a seasonal design…

Summer:

Fall:

Winter:

Spring:

I think I could come up with the scripting to add the proper stylesheet for my normal web site, but I’m not completely sure yet how I’d do it for the blog (currently hosted at wordpress.com). In any case, I think I’m ready to start building out the HTML and CSS and graphics and tweak as I go!

Second round… (see round 1)

I started with this new idea:

v2.0

The new speech bubble text reads: “I whip web sites into submission, but I’m nice to everyone else.”

I moved the Featured Work down and tried adding little comics. I liked this a little bit better; having the Featured Work on top made the design feel too top-heavy since the logo is so huge. I also moved the speech bubble to the top of the header and reduced the amount of text inside.

It seemed a bit busy to me, so I tried pumping in more white space in the main content area and bumping the header bar a few sizes larger:

v2.1

With circles… (this could work if I decided to go with a different color)

v2.1b

I like the basic idea of this one better than v1.0, so I think it’s just a matter of tweaking the colors and balance to work for me. I’m also not committed to the Photoshopped circle/leaf clusters.

At this rate, maybe I’ll have a new web site design by the end of next month.

Update 7/7: Follow the design process… The story continues with Web site design v2.1 colors

Now that I’ve picked a logo and have a business card order placed, it’s on to revamping my current web site. I’m going to treat myself like a client and come up with at least one other design idea — but here’s a peek at the first one and my experiments with five different colors…

Note on this last one: I’m going to probably have different photos/colored boxes on each page, so I was trying out a different color with the pink background.

I’m going to see if I can inject more “whimsy” into the next design. Not feeling overly inspired yet, however, and I only want to stare at kittens all day. Might have to give this another month.