Category Archives: Design

Tell Me When It’s Over

I have been building websites since the late 1990’s.  In fact, it’s a horribly embarrassing fact that has a snapshot of my site from 1998.  Consider it one of the more “colorful” pieces of my portfolio.

Over the years I minimally improved it, though I maintained my devotion to the almighty animated gif.

In more recent years, I have been teaching web design in Dreamweaver and WordPress.  I built the latest incarnation of my site in Dreamweaver.  After working on a variety of projects over the years building and editing websites at my former place of employment, I feel qualified to add that to my repertoire of skills.  And thus, over the last month or so I’ve found myself delving deeply into designing and building a website in WordPress for my friend Bryce (this is not the website; it’s still a work in progress).

I find the work filled with small rewards, like when I successfully modify a piece of php code to do what I want it to do.  These are surrounded by great periods of anguish as I struggle to customize a sidebar, resize a dropdown menu, and remove an errant bullet.  You know, those things that should be easy but are in fact surprisingly baffling.

I am slowly overcoming obstacles to pull the site into place, but there’s one overwhelming conceptual obstacle that can drag down even my most productive day.  As the child calls forth from the rear bench seats of the automobile, so too do I find myself wondering “Are we there yet?”

At what point can I decide that a project is complete?  On a simple level, a clear statement of the objectives can make it much clearer to determine when those objectives have been met.  This is the reason it’s always important with any contracted project to draft a list of milestones to accomplish.  You always want to make sure that you and your stakeholders (the people who care that the project gets accomplished) are on the same page as to what you’re trying to do.

Space Jam Website

The pinnacle of modern web design.

However, that’s rarely enough.  For instance, let’s say one of the goals is “A professional-looking site with the most recent information about the client’s projects.”  I can see 3 big potentials for ambiguity in there:  What determines whether a page is “professional-looking” or not?  What is the relevant unit of measurement for whether something should be included in the recent information?  Which projects should be included, and how should they be prioritized?  These are all open to debate, and can open up an endless back-and-forth between myself and the client as to whether any of the criteria have been met.

Unfortunately, the client is not the only person with whom I can debate whether the site is complete.  Forgoing well-meaning spouses, professional colleagues, and amateur professionals (“There’s this great font called Comic Sans that you should use”), my biggest issues come from myself.  Perhaps the page is well-aligned, the header image is sharp, and the color scheme is pleasing.  But isn’t there more that I could do to improve it further?  Isn’t there ALWAYS something more I could work on?

This comes up in realms outside of web design as well.  For instance, when I record a song, I often experiment by adding different instruments and using different arrangements.  At some point, though I would like to release the song.  So at what point is the recording completed?

So as not to get trapped in a Zeno-esque paradox in which nothing is moving and nothing is ever accomplished, we have to at some point declare our projects finished.  I already mentioned being as clear as possible in the statement of the objectives.  After that, clear communication with the stakeholders of the project is essential.  Ultimately, I believe it comes down to the integrity of all parties.  I as the web designer have to put forth a good-faith effort to accomplish the goals of the project with as much skill as possible.  At the same time, I have to recognize that there’s always more I could do, and forgive myself for not devoting all the time I could ever have to infinite improvement.  The clients for whom I am working need to be critical in ensuring they are receiving the product they want, while also understanding that the project could go on infinitely.  But the infinite project benefits no one, so it is in everyone’s best interest to allow it to complete at some point.

This is something I have to remind myself as I delve deeper in to the world of building sites for other people.  I must acknowledge that it’s ok for me to finish the site and have it not be the best site ever built by anyone ever.  As long as I hold myself to a high standard and check in with the client along the way to make sure they’re getting what they’re wanting.  I think this is the only way I can actually get anything done without going insane and threatening to turn this thing around and cancel the family vacation.

With that, I am calling this post officially over.

Check please!


Expertise for Non-Experts

While I’m known for my tuba playing and my very pretty face, I often have to utilize skills that fall outside of my expertise.  Sometimes that just means I’ll have to work on these tasks for longer than an expert in the field would have.  Often though, I find a fresh perspective that someone mired in the everyday tasks of these skills will overlook.

Last Thursday I had a show playing sousaphone in the Red Hot Ramblers.  We are a trio that play traditional (20’s) jazz and we have a monthly show at a quirky neighborhood bar.  Lately we’ve had a lot of requests for our Facebook page, but as a fledgeling group, we haven’t gotten that far yet.  For our show last Thursday, I made it a priority to get a photo of the band so we can start raking in those Facebook page likes.  While on a break, the three of us lined up in front of the beer cooler at the venue, someone pulled out their iPhone, and we got a few shots.  The following day, I was emailed the photo which looked like this:

dark image

I really liked the backlighting of the beer case as a bright focal point contrasting with the three of us standing in front.  Of course, the problem was that we were pretty much indistinguishable because of the shadows on our faces caused by the contrast of the backlighting.  Not much of a publicity photo for that reason.  But I really liked it as a start, so I decided to take it into Photoshop and see what I could do.

My experience with Photoshop is comprised of three elements: I teach a basic Photoshop class, I build posters in it, and I try to make the most ridiculous mashups possible for my own amusement.  My point being that I really don’t have formal training in either Photoshop or design.  I do however, have an eye for what I find aesthetically pleasing (or displeasing).  I also have a sense of playfulness with the projects I do and tenacity to keep trying things until they work in a way I like.  Hey, if it works for recording music, why not try it here!

First I tried adjusting the overall lighting levels, but the picture became too washed out or discolored.  The problem was that I wanted the lighted case to be vibrant without losing the darker areas:

too dark picture

The background is vibrant, but the foreground is invisible.

So I the separated the darker areas into their own layer and placed them on top of the vibrant background.  I cropped the photo and took out something that probably no one will notice, unless you’re from Pottsville, PA.

fancy background, normal foreground

Ah, the faces are back. (not AAAAAAAHHHH, the faces are back!!!!)

We’re still too dark here, so I changed the exposure for just the foreground:

faces exposed

Even more facial features

We look too purple in here, so I made some shifts to our color balance.  Notice how the background layer (the beer case) doesn’t change, just us fellas:

Now with balanced colors

Purple has been defeated!

Looking much better!  The last thing was our trombone player Larry’s bowtie.  It was a beautiful blue striped one, but in the low light, it came out as grey.  That would not stand!  I isolated it, made it it’s own layer, and pumped up the blue:

Final picture

Introducing Blue Tie and the Red Hot Ramblers!

So granted, I used some of the more advanced tools such as the histogram, adjustment layers and quick selection tool, but I used them in a trial and error fashion.  Were I a professional photographer, I might have dived right into a set of tools and performed some standard touch-ups.  But because I was testing it all along the way and seeing certain combinations of tools for the first time, I was constantly re-evaluating my process as I went.  What I lacked in know-how was made up for with a fresh perspective and a lack of preconceived notions.

A lot of organizations are starting to experiment with including employees from one department in projects that don’t directly relate to their department.  The idea is that by including an outsider’s perspective, everyone benefits from a re-evaluation of some of the project’s central tenants.  In my place of employment I’m actually working as an “outsider” in a current project.  We’re looking to revamp our means for faculty and students to communicate and share content, so rather than having only people intimately familiar with the product, they’re looking for my input as well.  I don’t know what’s possible, what’s impossible, or what has or hasn’t been tried before, so I have a unique insight that is unfettered by previous work.  It’s also exciting for me, because I get to step outside my traditional role into something new and potentially exciting.  After a while, if I’m just doing the same things or variations on them, my capacity for new creative thought gets diminished.

So yes, we need our experts.  We’ll always need people who are able to perform their tasks with laser focus and perform them well.  It’s also important to include the outsiders, the amateurs, the students, sometimes even the antagonists when we’re hunting for new ideas and perspectives.  Sometimes when you don’t know what you can’t do, you end up achieving in ways you never thought possible.

Confidential to Tricky in Eki-eki-stam-stam:  It meant quite a lot to me that you came out to see my show and quite a lot more than you told me you were a lurker on my blog.  It was delightful catching up; next time we’ll have to play some games.  Let me know when you sneak back to town and we’ll do a Barcade run.

I Don’t Want to Be Your Friend

If you read my post last week about The Naming of Things you’ll remember that I held off on divulging the name of my album, instead presenting a list of potential names.  I’m excited to reveal the name of album today.  If you haven’t guessed it from the title of this post, the album is called “I Don’t Want to Be Your Friend,” and the CD release is on 8/25 in Philadelphia.  I liked the double entendre of the name, how it evokes both humor and sadness, and the fact that it’s a jarring album title.  It’s also a quote from one of the songs.  Today, though, I want to talk less about the album and more about the design of the cover, because it took me the better part of a week to put it together.  That might not seem like much time, but I’m not the strongest designer, so I was once again traveling through unfamiliar territory.

When I was deciding on album titles, I had pared it down to either “I Don’t Want to Be Your Friend,” or “To Entertain and Wow Us.”  I knew at the time that whatever the cover art was going to be would determine which one I should choose, as well as the tone of the album.  I was leaning towards the former title and was discussing it with my girlfriend Katie.  I asked her what a graphical representation of “I Don’t Want to Be Your Friend” would look like, and at first we talked about a photo of my looking sullen, or a palm held up turning people away.  We got a little more abstract, and that’s when she came up with the idea of the broken heart necklace, the kind that usually reads “Best Friends,” and that you share with your best friend (when you’re 8 anyway) so each of you has half.  The visual of a heart necklace saying something so unusual really made an impact on me.

Split Heart

The perfect heart!

The next step was finding the heart necklace.  I’m not an amazing Photoshopper/Illustratorer, so I can’t create that kind of image from scratch.  My first inclination was to get an actual pendant made and have it professionally photographed.  I pored through Etsy and found plenty of the necklaces I was looking for. However, the fonts tended to be more blockish and less like script (cursive with flourishes).  I found one vendor who had script, but she told me that the script pendants were pre-etched, meaning she could only use the stock phrases like “Best Friends,” or “I Love You.”  The Etsy necklaces were also mostly copper or silver, and I really wanted a gold one.  I decided to check on Amazon, where I found the perfect necklace design that I wanted.  There were two problems, though.  The heart pendant had no text on it, and the necklace was 24k gold and cost almost $300.

I decided to use the zoom preview tool on Amazon and take a screenshot so I could add the text myself in Photoshop.  Even with the photo zoomed in though, I couldn’t get a version that would be high enough resolution for an album cover.  Here’s where I got sneaky (I probably just did the same thing designers do all the time, but because it was the first time I did it, I get all gushy about it).  I opened the picture in Adobe Illustrator and converted it from a pixel-based image (made up of millions of tiny little dots) to a vector image (made up of mathematical calculations).  This allowed me to make it as large as I wanted without really losing resolution, though some of the colors were affected a bit.  Once it was big enough, I brought it to Photoshop and put it on a nice red background.  Like a so:

Heart and background

Heart and Red

Next I needed to add the text in.  Never one to be satisfied with the default fonts on my computer, I went in search of the perfect script font.  It needed to be fancy enough to look elegant, but not so twisty that it couldn’t be read.  I browsed one of my favorite font sites, Dafont, and looked through their script section, eventually settling upon Tangerine. I used a darker version of the color of the heart to make it look like it was made from the same metal as the heart, and added a beveled effect.  Here’s how it ended up:

Heart with text

Heart with added Tangerine text

In Photoshop it looked great, but as you can see, when it’s exported, the font is too light.  It also looked too light when it was printed.  So I duplicated the text, and made the duplicated text darker.  The effect was to have the interior of the letters stand out more, as if there were more shadows and the etching was deeper, or perhaps it changed the metal in some way.

heart with darker text

Heart with inset darker text

Also on the cover, I needed to have “Neon and Shy” there.  I’ve been using a font called Bebas for the header of my website and my flyers, and it made sense to continue to use it for my band name here. So I added it in at the bottom, the same way it appears on all my materials:

Neon and Shy regular

The standard look

Ah, but this was not just any regular piece of promotional materials.  This was the big cheese, the cat’s pajamas, the bees knees (sorry, too many 20’s jazz gigs lately)!  It’s like when you see Star Trek on TV versus Star Trek on the big screen.  They take the regular logo and spruce it up a bit.  So I did the same with mine, adding some beveling and shadow:

Fancy Neon and Shy

Oooh, bevelly!

Once added in with the heart, the front cover was finished:

CD Cover

The finished cover

I spent an equal amount of time on the back, interior, and CD face, playing with different fonts and tweaking the overall look.  Want to see how those ones turned out?  Well I guess I’ll see you on August 25th at the CD release!

I do want to bring this back to what I was mentioning earlier: doing graphic design work is like so many things, within our grasp, but terrifying to reach for.  Many of us haven’t done free-form art projects since middle school, so jumping in and trying to make something meaningful can be daunting.  Just remember that the same doubts you have are the doubts experienced by so many talented professional artists, and that fun and expression are key to the creative process.  In designing the packaging for your own products, you are in the fortunate position of being your own client.  Work in such a way that you meet your needs and have fun in the process, and you’re sure to create something that others can admire as well.

%d bloggers like this: