Throughout the entire presentation, I had the voice of a very good friend and colleague playing back through my head saying “Audience, audience, think of your Audience!” From the reaction of the crafters in the virtual classroom with me, there was alot of confusion as to what all this stuff had to do with them… new or existing Etsy shop owners looking for startup advice.

Towards the end of the seminar, Jeffrey offered the following as the top 3 things that new crafters and artists should do as they embark upon making a business out of selling their art.

1. Get a logo (which Jeffrey previously acknowledged as being in the neighborhood of $500-$1000)
2. Get a rubber stamp made of your logo (and stamp it everywhere)
3. Get a website

There is validity to what Jeffrey was saying, especially for startup companies -  I can say this because I already have an understanding of  branding, design, and corporate identity. Others that were present with me in the webinar - artists and crafters of handmade goods - left the seminar with more questions than answers.

Clearing it All Up

When all is said and done, a logo and a brand are two different things.  Yes, they both come together to work FOR you, but they are not the same thing.  To put it succinctly, a brand reflects how a company or organization wishes to be perceived by its customers… what feelings does the company wish to invoke? A successful brand showcases the company’s purpose and why it is what it is.  Some brand attributes one may wish to include as part of their identity include caring, honesty, humor, professionalism, intelligence, sophistication, reliability, and trustworthiness.  Notice most of these are intangible feelings or ideals.

But… what about a logo?

The power behind a logo is that

1. It stays the same
2. It is easy to remember and provides instant recognition to the intended audience
3. It can easily be used across multiple mediums (print, online, signage, etc)

The logo is the constant that helps to support a brand.  It is instantly recognizable, and (if done correctly) it will invoke the brand attributes for its company or organization.  On a large scale, a logo is an integral part of a successful branding campaign, however can a  brand be built on a smaller scale and without the up-front cost or expense associated with professional logo design?

Author’s Note: This article is not intended to dissuade you from seeking out the work of a professional designer to shape your  image.  I do, however, wish to offer techniques and solutions for those that may be starting out and may not be able to spare the up-front cost of developing a traditional brand and  logo.

It’s All About the Image

A customer needs to be comfortable in order to be convinced to spend money… especially online.  No, this doesn’t mean they need bunny slippers and a cup of coffee (although it may help ), but it does mean they need to be assured that their money is going to a legitimate place.

Lets take a side-by-side comparison of the recent Etsy store remodel of my friend and colleague, Christina from Just Envelopes.  She specializes in beautiful and quality handmade cards, which, as a former scrapbook store owner myself, hold a very special place in my heart.

I have experienced her craftmanship and attention to detail first hand, and her cards are exquisite, however you would never guess by looking at the “Before” shot of her store (you may click the photos below for larger versions):

Etsy Store: Before

Her banner was simply an off-center  photograph of some scrapbook paper and her avatar is the same thing shrunk down to near-illegible quality.

Whats more, her business card (personal information has been removed) had a completely different look and feel:

Just Envelopes Business Card (Before)

This sort of mixed message is exactly what you don’t want to do.  The memorablility of such a “confused” identity is severely diminished.  Is Christina the one with the Blue-ish Etsy banner?  The one with the green leafy business card?  The diluted imagery is unmemorable, unremarkable, and easily forgotten… all of the feelings you don’t want your brand to invoke.

Her store has undergone a drastic change over the last few weeks:

Just Envelopes Etsy Storefront: After

Her banner incorporates imagery of what she does - adorning sophisticated and velvetty papers with ribbon embellishments. Copper scrolled fontwork artfully illustrate her store name. Her avatar nicely coordinates without being redundant. It showcases consistent imagery, but is canted on the diagonal to make it stand out on the page.

And what about the Business card?

Just Envelopes Business Card - After

It now promotes the same memorable imagery of her site.  This sort of cohesive branding professionally showcases what Christina does, but more importantly it is indicative that she took the extra time and care to make her customers feel comfortable shopping with her.  This attention to detail reflects positively on her, and her craftables.  She really doesn’t have a logo in the traditional sense, but she does now have a brand.

Wrapping it Up

As a paper artist on Etsy, Christina has LOADS of opportunity to stand out from the crowd.  Why not turn the business card into a functional piece of art?  Clip the corner with a hole punch, add an eyelet and some trailing fibers, turn it into an artist trading card that shows off her skill.

Speaking from experience from my former scrapbook store owner days, you will be noticed if you take extra time to package your orders… wrap everything in printed tissue paper, available by the thousands for pennies per sheet. Maybe toss in a few pieces of candy or extra handmade craftables that aren’t quite perfect, but still pretty.  The point is, the creativity of the Etsy marketplace lends itself nicely to such extra touches and it is these touches that will catch the eyes of customers and leave them with happy thoughts of their shopping experience with you.

Jazz up your image and spice up your packaging! Take a step back and put yourself in your customers’ shoes… you already take pride in your craftables, why not take charge of your storefront and identity?  It won’t set you back the $500-$1000 that a logo would, but it will keep your customers coming back, and hopefully with friends.

Authors Note: As I mentioned, Christina is a friend and colleague and has given me permission to use her identity in this article.  Rest assured, no Christina’s were harmed in the making of this posting

Jamal Edmonds - Logo Design

When I was first approached to design a logo for Jamal Edmonds, I jumped at the chance.  Jamal, a hair artist out of Washington, D.C., came to me looking for a stylish logo that was masculine and edgy, and bonus points if I could make it metallic. I had previously seen samples of his amazing work on facebook and the web, and was honored to have the opportunity to brand him.

Jamal has great fun with the “Alter-Ego” concept of his name - his salon is aptly named Salon Lamaj (which is actually “Jamal” backwards).  I incorporated this into his logo… see if you can find the L in the metallic symbol above his name (hint, theres actually 2 J’s and 2 L’s and an E hidden in those intertwined silver letters =)

There are no less than 294859847 design blogs out and about on the web.  Heck, most of those are already part of my RSS arsenal.  Beautilitarian Design will focus on the integration of design and function/usability on the web.  It will educate you on best practices for building beautiful but usable websites, provide insight and commentary on how others do it well, and show that something utilitarian (say, for example, Search Fields), can still be beautiful.  There will also be sections dedicated to marketing and branding aesthetics, organizing your content and writing for the web, and of course, random musings about the online experience.

Web usability and aesthetic design have always held a fascination for me.  Journey with me as we harmonize form and function with the Beautilitarian Design Blog.

Visit http://www.beautilitarian.com to subscribe to receive launch updates via RSS, but until then, whet your appetite with our temporary home here on Jazzyfinch Design.

Kindest Regards,
Michele

Why, though, does that little box have to be so boring? Can a search box be beautiful while still keeping its utility intact? Can it seamlessly integrate into a site design without losing the attention of people that are looking for it?

Author’s Note: I myself am guilty of treating the search fuction as a utilitarian object.  It’s there, and its ugly, but it doesn’t have to be that way.

The Basics of Search Box Interface Design

From a user perspective, the beauty of the search field is that it is a known quantity.

• You know how it should behave.
• You know and understand how to use it.
• It is (or should be) always there for you.

People expect to easily find “the box,” type stuff in, and click the button.  From there, they will be able to quickly browse to their information of choice from the resulting page.

Futz with any of these known quantities and the user experience can be disrupted. Sure, just because you don’t include a “Search” button, fire and brimstone won’t rain down from above, but for that instant, you will have jerked your website visitor out of their zen state of surfing nirvana and made them have to fend for themselves. The end of the world? No, but nonetheless it can be a jarring experience.

But, Can It Be Beautiful?

So, we have the basics of search field utility down. The question now becomes, can it be beautiful?

Here are some examples of search boxes that push the envelope. All are beautiful, some function better than others, but they all have one underlying principle:  they have all been given care and attention. It is little details like this that make the difference between a good design and a great one.

Nobody pushed these search boxes off into a corner (well, some did but it was on purpose!).

Wordpress Themes by Evan Eckard

My “Search Box” curiosity began when I first started playing with the  Cellar Heat wordpress theme by Evan Eckard. Evan’s attention to detail with this theme (in fact, with all of his themes) is second to none.

Cellar Heat Wordpress Theme - Search Box

The Cellar Heat search field features a transparent PNG background (complete with IE6 hack) and blends beautifully with the rest of the site. It is certainly not your ordinary search box, and its expected location in the top right of the page allows him to relax the rules of “look for the white box to type into”.

For a more eye-candy, be sure to check out the coordinating comment fields Evan integrates into his Cellar Heat design.

Another eyecatching Search is from Eckard’s Notepad Chaos Theme, available for download from Smashing Magazine.

Chaos Wordpress Theme - Search Box

Again, expectedly tucked in the top right corner of the page, the box features beautiful background detail, a notepad scribble and surprisingly structured button. Oh, and don’t forget the Post-Its!

So, armed with my mouse at the ready, I fired up LittleSnapper and proceeded to visit my daily design and inspiration sites, this time with the fresh perspective of focusing on the search fields. Some were the expected utilitarian white boxes we have come to know and expect. Some might surprise you.

Apple Inc.

www.apple.com - Search Box

As a recent convert from PC to Mac, the iconical Apple Website holds a special place in my heart. I have been to the site many a time, however I never gave the search function much thought or attention. Not so surprisingly, their search field mimics that of the OSX Finder. Clean, familiar, Beautilitarian.

VectorTuts and Family

VectorTuts - Search Box

VectorTuts, NetTuts, PSDTuts, heck, the whole Envato family is a main staple in my inspirational lineup.  Their sites are incredibly well-designed, beautiful to look at and navigate, and easy to follow. Not surprisingly, their Search function follows suit with a seamless  integration into their look and feel. There is no true “Search” button, but one can click on the icon, (which seems fairly self-explanatory) or just hit enter.

I Love Typography

The I Love Typography site is beautiful in its whitespace. At first glance, however, there is no search box to be found!

I Love Typography - Search Box

A quick once-over of their incredibly lengthy homepage reveals it tucked away at the bottom of one of the sidebars - not exactly ideal placement, but there is a “Search” link up in the top horizontal menu for those afraid to scroll.

The box itself LOOKS like your standard plain white box, but look closely… a subtle dotted border around the box, a crisp, austere search button. It blends beautifully with the site, even if it is not immediately apparent.

Dzineblog

Dzineblog - Search Box

Dzineblog.com takes a unique approach to searching. In fact,  it isn’t really a box, but a search line. All traces of the “box model” have been removed, along with the search button.

The instructions clearly state to hit enter to complete your search, but clicking inside the box removes the instructions, and you will be hardpressed to get those instructions back without closing your browser window or navigating to a new page.  It is a beautiful design, but a bit quirky to use if you aren’t paying attention.

Tutorial9

Tutorial9 - Search Box

The search box for Tutorial9 is right there, almost “in your face” but quite beatifully. The exaggerated size with softly rounded corners ease it into the user experience, and the punchy little icon gives you that visual cue even before you see the accompanying search button. Tutorial9’s search box is definitely Beautilitarian.

Spoongraphics Blog

Before I finish out part 1 of this series, I just had to give a tip of the virtual hat to the Spoongraphics Blog.

Spoongraphics Blog - Search Box

The search box implementation here is stellar… beautiful, cohesive look and feel, expertly integrated into the site,  easy to use and  fun to look at. The input text is right aligned - something that you don’t usually see in your standard search box. All in all, a truly Beautilitarian piece.

Wrapping It Up

So, preliminary research shows that there is hope for those bland and boring search boxes. Part 2 of this series will follow along as I  continue through my RSS favorites, checking out how the experts dress up the search function.

In the meantime, have you been inspired by a search box lately?  Please share in the comments!

EcoEnvironments Logo

EcoEnvironments is a company based in Cincinnati, Ohio that specializes in high-end installations of heating and cooling systems for environmentally-conscientious homeowners.  This logo was derived from the following brand attributes, which were identified by the customer during the design process:  feminine, modern, elegant, refined, secure, subtle.

UMUC Gear E-Commerce Website

March 2009
The University Continuing Education Association awarded the UMUC Gear website a gold medal in the category of “Most Improved” as part of their annual “Marketing and Publications Awards”. The site, designed by Michele Foerst of jazzyfinch Design was extensively redesigned in early 2008 to more closely match the visual identity of UMUC.

Under the employment of UMUC, Michele served as the lead designer for the project, and worked closely with Mary Jane Isles, Julie Strobel Epstein and Kelly Myers, also of UMUC. Event Rebels provided the shopping cart functionality and integration support.

The redesign completely transformed the UMUC Gear site from a static page with no visual appeal to an interactive shopping cart with extensive features and seasonal appeal and since launch has increased sales by nearly 700%.

For more on the UMUC Gear redesign, including seasonal screenshots, click here. Or, you can visit the redesigned UMUC Gear site at www.umuc.edu/umucgear .

Holiday-themed Homepage for UMUC Gear

The UMUC Gear store had historically been a neglected website.  Its original design was static, outdated, and just plain unloved!  The main goals of the redesign were to:

• align the gear store with UMUC’s evolved web presence
• enhance the shopping experience with an online shopping cart system
• provide seasonal appeal to drive customers to certain products as needed

As part of the redesign, the site was designed completely in CSS, then handed off to a third party vendor for integration into their shopping cart system.

The homepage of the site is updated monthly to advertise sales and discounts and to drive sales towards targetted merchandise.  (see examples)

UMUC Gear Fall Theme

Valentines Theme

UMUC Gear Spring Theme

Since its redesign in early 2008, the UMUC Gear Store has brought in over $70,000 in sales, compared to less than $10,000 in the previous year.

Visit the updated UMUC Gear store at http://www.umuc.edu/umucgear.

Commencement 2009 - UMUC

This year’s site incorporates the logo, a unique color scheme, and special little touches like custom icons, callout boxes, and even cross-marketing with the UMUC Gear store. The site was created using Illustrator and coded using CSS for both presentation and layout.

Visit the 2009 UMUC Commencement site at http://www.umuc.edu/commencement/adelphi09.

EPA Student Club - UMUC

Working closely with the club, the site was designed with a clean, fresh feeling in mind. Not your ordinary “go green” site, the 3 Rs is a relaxing visual experience with a spa-like feel.

This site was conceptualized in Photoshop, and created using CSS for both presentation and layout.

Visit the Pathways to the Three Rs site at http://www.umuc.edu/gogreen.

National Leadership Institute - UMUC

The National Leadership Institute at UMUC is dedicated to corporate training for business executives. Redesigned in early 2008, the site was branded to match UMUC’s visual identity, while maintaining its own distinct look to appeal to corporate executives.

The site was designed using CSS both for style and layout, and calls in common elements from page to page using server-side includes to modularize information.

Visit the NLI website at http://www.umuc.edu/nli.