The design mantra? Retro & Vintage.

Having already designed the logo for the client, I had a clear understanding of what I visually wanted to achieve with the website. The keywords I was working with were retro, clean and vintage. Since the client’s services center around copy writing and content strategies, it really didn’t make sense to design an image heavy website that would distract from the content.

Obviously retro and vintage is something that is quite trendy these days and I didn’t want to over do it. The site needed to remain tasteful and speak in the owner’s voice and not my own. And, though I steered the direction the site would eventually take, each and every part of the site defines and personality trait of the owner, down to the raven as favicon.

My sources of Inspiration

During a particular conversation with the client, I started talking about the usage of hand drawn graphic ornaments that were prevalent in printed materials during the 19th and early 20th century. I wanted to experiment with some of these elements and bring them into the site somehow. The graphics, which would be kept to a minimum, would compliment the paper texture (mimicking the paper stock that was used during this time period) created for the tiling background.

I found endless inspiration in old text books, encyclopedias and first edition novels printed between 1800 and 1920. I started to collect all of these images and made a “mood board” that would assist me during sketching and mocking up. I loved the hand drawn etchings, the use of typography to create contrasts between type and the beautiful ornaments to dress it all up.

Hand drawn etchings

The hand drawn etchings I found in first edition novels were key points of inspiration that would lead me to the scans used as icons to differentiate each page.

Inspiration from vintage textbooks

I liked the idea of not only using these etchings, but putting them into context on the site. This would afford me the chance to have some fun with jQuery during development.

Graphic Ornaments & Typographical Variations

The use of graphic ornaments during this period were commonplace and generally used as dividers between text elements on a page or simply as ornaments in the header/footer area of a page. Also characteristic of this era in print was how typography was used to separate different areas of a page and create a hierarchy of information. This was sometimes achieved with the use of all capital letters, increasing the spacing between characters evenly with tracking or a combination of the two. I replicated the effect using the text-transform declaration and changing the letter-spacing in the CSS.

Inspiration from those who came before me

I am definitely not the first to “have at it” with this style of design. There are a slew of talented designers who have been drawn to these elements and have incorporated a variation, if not all, of these components in their own website designs in the past. In my travels for research and inspiration I also found these to be influential and my hat is tipped to all of these designers.

1. Simon Collison
2. The New York Moon
3. The Dollar Dreadful Family Library
4. The Blizzards
5. Bearskinrug
6. The Ernest Hemingway Collection

Development

The Six11Ink website is more of a brochure site than a portfolio of services.

Having fun with @font-face

I have been looking for a chance to use the @font-face declaration for some time now. The fact that it is a cross browser solution for adding rich typography to a web design has always piqued my interest. The impediment, for me, has always been the limited amount of typefaces that are freely available to use with the declaration and I never wanted to use the technique to show how “cool” I am (which I definitely am not). I needed a beautiful font and the implementation needed to make sense for the overall design.

The Six11Ink website afforded me the opportunity to finally get my hands dirty with the technique. The mock ups contained the use of League Gothic, made available by The League of Moveable Type, for the headers and page titles. This revival typeface was used in the logo and really played into the retro theme of the site. Plus, I wanted the visual contrast between a condensed, heavy sans-serif font for headlines and a serif font for body copy.

But, throughout the design process, I was wondering how I would preserve these elements once I moved into development. At first, I thought about using the image replacement technique. This would be excellent for a static website, but I couldn’t use this technique for blog posts where content is created dynamically. So, that solution was immediately abandoned with the exception of the home page heading.

Then, I was resigned to use either sIFR or Cufon as a solution. I have never worked with Cufon and wasn’t quite ready to have to learn how to on the fly. I’ve worked with sIFR before and it definitely doe the trick. But, what happens when the user is browsing with a browser that doesn’t support Flash or has javascripts disabled? All of my beautiful type will fall back to a browser safe font in the font stack. I definitely didn’t want that.

Then I wondered whether League Gothic, since it was a free download, would be available to use with the @font-face declaration? After a quick Google search I found that, not only is it available for use, but Font Squirrel even provides all of the necessary file types needed for the declaration to work in the major browsers!

Now that I have dipped my toe into the @font-face pool, I am addicted. It was not only very easy to put to use, but quite liberating. I honestly cannot wait for another project to use this declaration on in the future.

A sprinkle of jQuery for personality

I will admit that the use of jQuery for the “Did you know?” tabs in the footer of each page was a bit grandiose on my part. I wanted to inject a little personality into the site and create a connection between the etchings and their usage and placement within the site itself. During my research, I found some interesting facts about the butterfly, quill, telephone and typewriter that I didn’t know about and thought it would be interesting to share with everyone else.

This wasn’t integral to the site itself, so I opted to turn this into a “show & tell” element that would be hidden until the user chose to interact with the tab. I thought it would be entertaining but know that it is completely self serving in the end. I just hope others find it as charming as I did.

Conclusion

I have to thank the founder of Six11Ink, Jeanette Fernandez, for allowing me such freedoms in the design and development of her site. Her unwavering trust allowed me to experiment and play around with ideas and concepts that I would not normally with another client. Definitely give the site a spin and let me know what you think. I am proud of the outcome but am always interested in constructive criticism.

Launch Six11Ink

Why did we call ourselves “pixel8” in the first place?

In the Spring of 2009, when David and I began talking about this endeavor, one of the obvious topics was the name of the agency. We felt strongly about having a one word handle and  batted around a few ideas and concepts. But we kept gravitating towards “pixel8” as a name. The moniker succinctly affirmed that we are a creative agency and was perfectly playful by replacing the last syllable with the numeral “8”.

I can be incredibly stubborn when it comes to something I really like.

But, we weren’t the only ones with this ingenious idea. In fact, after a quick Google search, we came across a few entities using this label, both actively and inactively, and we were initially deflated. Does this mean we have to look at our other options? That didn’t feel right. I think I was even having an internal, childlike tantrum about the whole thing. I wanted what I wanted and, if you know me, I can be incredibly stubborn when it comes to something I really like. And I loved “pixel8” and was not readily prepared to let it go.

So, we forged forward and registered the domain, wearepixel8.com not knowing that it was going to play a role in naming the company. And, though I was insisting to everyone who would listen that our name was “pixel8”, I went as far as creating an animation for the logo on the site that said “we are pixel8”. And today, if you ask me why, I will not have a good answer for you other than I thought it was a cool idea, which is never a reason to do anything when it comes to branding!

Between the domain name and the animation, people automatically assumed our name was “we are pixel8”. And I couldn’t blame them. This was all my fault and was a direct result from me being both pig headed and not sending a consistent message through our branding.

Time to make a decision

If you have ever incorporated a company, a process that is both joyless and rewarding, you know that you must do a name search to make sure that you are not choosing something that is in use within your field of operation. Enter hurdle number one. We already knew that the name was in use, but had no idea whether the person(s) using it ever registered the company name. We could spend an unknown amount of time finding out, thus further delaying the process, or we could simply pick a new name. I was back that stubborn place again, but this time slightly more malleable in the process. So, after several discussions with our accountant and attorney, we made the decision to register ourselves as “we are pixel8, inc.” to avoid any further complications or confusion.

… we are pixel8 just felt right immediately

And, I have to tell you, we are pixel8 just felt right immediately. The name is positive, playful, forceful and slightly narcissistic and I liked that. More than that, it wouldn’t require us finding a new domain name, which I definitely did not want to do. I have to tell you that this is the ass-backwards way of choosing a name for a company that just happened to work in our favor.

Our proper new name needed a proper new logo.

We knew that the name change would require a new direction in our brand positioning. Though we loved our original logo mark, it no longer fit the name of the company and therefore would not function well as the brand identifier for the agency. Of course, this meant it was time to head back to the drawing board, deconstruct the original art and create a new logo that would better reflect, for lack of a better phrase, who we are.

We tasked ourselves with looking at the original mark with “fresh eyes” to discern what elements we felt were strong and, therefore, wanted to retain, and what elements fell short of the message we wanted to convey.

The anatomy of our first logo.

Our prototype logo was modern in feel (something we wanted to keep), complete with custom typography that created a nice linear shape. Since, at the time of its creation, our name was simply pixel8, there was no need for the additional verbiage of “we are” in the mark. But, as I mentioned before, we did incorporate the “we are” in the website logo with a talk balloon. But, again, this added to the inconsistency of what our name was and continued to confuse the user.

The “x” letter form loosely took the shape of a person when we placed a pixel shape on top of it. As for color treatment, we chose to use only two colors to exemplify our classic, uncomplicated approach to design.

After examining the mark, we decided to keep the following:

1. The modern, custom letter forms as they felt strong and commanding
2. The custom “x” with the pixel character as a brand identifier
3. Keep the logo color palette at two colors

So, basically, we were keeping everything and figuring out a way to incorporate the additional verbiage.

Version 2 is close but not a winner.

We now knew the direction we wanted to take and I started creating sketches for a new logo. I came across a version that I liked and further developed out in Illustrator. David and I felt strongly that the “talk balloon” from the original website logo could work as our official logo so I wanted to play with that concept.

The letter forms stayed the same with the exception of a new “p” and a revised “8”. We also didn’t make any changes to the color palette but chose to only apply the Cyan to the pixel shapes above the “x” and as a stem for the “p” as well as the talk balloon.

After spending some time with this iteration, we came away with the following thoughts:

1. The pixel on the stem of the “p” would get lost when the logo was reduced in size and therefore would become difficult to read. That doesn’t help with clearly defining our name.
2. The linear shape of the first logo was starting to look very “box” like, constraining, cold and impersonal in this version. Though it is definitely modern, it felt like it was spit out by a computer program and I did not want that.
3. Though the talk balloon worked on the website, it doesn’t work her as a logo. To me, it read “pixel8 we are” as opposed to “we are pixel8”. I moved this element around to several locations, but nothing worked and it was time to file this version under unusable.

With version 3, I was going in the wrong direction.

I thought that the problem was that the original letter forms needed to be reworked into less pixel like shapes. I redesigned all of the characters including the “x” to allow for better incorporation of the additional “we are” verbiage, using Helvetica Neue as the typeface. This would definitely give a nice contrast to the entire piece.

I also decided to be adventurous and opened up the color palette to include four new colors (Blue, Green, Yellow and Magenta). These shades felt more inviting than the previous Gray and Cyan.

After stepping away from this iteration, I knew immediately that this was not the right version. It absolutely hated it and I felt frustrated.

1. The new letter forms became even more box-like than the previous and no longer worked for what I was trying to achieve.
2. I needed to drop the “incorporated” from the logo as it was superfluous
3. The one aspect I liked was adding bright colors to the mark and dividing the pixel icon into four separate pixels. This felt like it should definitely be a part of the design as well as the “x” character

I think the stubborn part of my personality did not want to let go of the custom letters I spent so much time creating. But, they just did not work. The logo was becoming more and more distant and I was nowhere near the message I was trying to put across.

The fourth time was the charm

So, I went back to the beginning. I tossed everything but the “x” mark and started sketching new concepts. This time, I would tackle the mark first because it was the only element I was feeling good about. As opposed to one pixel divided into four smaller pixels, I decided to create a 3-D pixel that would use only 3 colors (Ahh, back to simplicity. This was starting to feel really good.) But what to do about the letter forms?

As I was staring at print outs of the first 3 versions, my eyes kept coming back the the “we are” in version three. By far, one of my favorite typeface is Helvetica Neue. By itself, it is clean and modern with excellent x-height in the lowercase forms. And, I asked myself, why am I trying to reinvent the wheel? The letter forms for the name is staring you right in the face.

So, I launched Illustrator and starting playing with the kerning of the letters to give it the right amount of spacing. There was some slight customization of the stem of the “p” so that it would not extend beyond the baseline of the logo mark. I also changed the color and weight of the two words for contrast. The logo now read perfectly and there was no confusion about what our name was.

1. The letter forms were now set in Helvetica Neue with kerning between the letters, slight modification of the “p” character and set in varying weights for contrast
2. I kept the shape created in version 3 as this was the best of that version
3. The pixel icon now took on a 3-D look and feel and was reduced to the 3 strongest colors from version 3

Though it took several drafts to get where we are, I had finally reached a version that I was completely happy with. The logo was still modern and linear, as in the first version, but no longer felt cold and box-like. Recognizing that I was not going to find the emotion I wanted with my custom letters also went a long way. Once I stop pursuing that concept, I found the right combination of letters to perfectly represent our name and leave no room for confusion.

2009 was interesting year for me professionally. After spending a few years as freelancers, I, along with my partner, decided to start our own design studio and marketing agency.

For me, this was born out of the frustration I felt from working alone as well as the quality of projects I was taking on as a freelancers. From our initial conversations, we knew that, with our combined talents, we could create something that would benefit not only ourselves personally, but anyone we decided to work with.

Well, after opening our “doors” in September 2009, it is time for us to look back at our first 4 months and start to establish concrete goals for ourselves in 2010.

Reduce the amount of freelancing work.

Taking on freelance projects in 2009 gave us much needed financial security but left us with what I perceived to be a catch 22.

As David and I began laying the foundations for pixel8, it was necessary for us to continue to take on small freelancing projects from time to time. This gave us much needed financial security but left us with what I perceived to be a catch 22. While this allowed for a continuation of capital inflow, as well as an opportunity to stay sharp, it also took valuable time away from focusing on our company. I tend to work 70-80 hours a week and it becomes detrimental to our brand if half of that time is spent working on anything other than pixel8.

In 2010, it has become imperative to remove the safety net and almost focus exclusively on pixel8. As frightening as this seems to me now, I know this is the only way to completely remove the freelancing title from my name and make the full segue to pixel8 being a design studio.

And trust me, I would love to be able to “rip this bandage off” immediately. But, realistically, I know that this is a gradual goal over the course of the next 12 months. For starters, I have already begun to only consider freelance projects from existing past clients. And this will be on a case by case basis. This will force David and I to spend the necessary time, energy and effort to find projects that benefit the company and not simply us personally.

Establish pixel8 as a company and not simply two freelancers.

David and I are now the co-owners of a company and have to deal with issues that were not pertinent to us as freelancers.

This goal goes hand in hand with the previous one. One of the bigger differences between being a freelancer and a company is the amount of administrative work involved. David and I are now the co-owners of a company and have to deal with issues that were not pertinent to us as freelancers: accountants and corporate taxes just to name two.

I will be the first to admit that this is not where my strengths lie. I prefer to sequester myself to the creative corner of our business, but no longer have that luxury. Beginning now, we have to spend the necessary time to establish how this business will run and eventually become a profitable entity. This will mean establishing quarterly budgets and projections (yawn!) as well as trademarking our brand. None of which I find to be particularly sexy, but imperative for our long term goals.

Take on more challenging and diverse projects.

The temptation, when starting a new company, is to take on every project that comes your way.

We conceived pixel8 as a place for small and start up businesses to come with their large ideas. We then take these large ideas and bring them to life whether on or offline. In 2010, I want us to take on more challenging projects that involve all aspects of the services we offer: from design to development to marketing.

The temptation, when starting a new company, is to take on every project that comes your way. But, if we are to achieve this particular goal, David and I will have to be more selective about the projects we take on; weighing the balances between our company’s gross projections against how the project builds our brand (can you see how the corporate side of my brain is starting to infringe on the creative side?). I believe this will become critical to establishing a multifarious portfolio for pixel8 which will benefit the brand as a whole in the long run.

Be more consistent with blogging.

More than improving our consistency, I want to expand on the topics we cover in the blog.

Our blog is more of an online journal of our thoughts, news, tutorials as well as anything we find inspirational. When we opened the doors on September 9, 2009, I set a personal goal for myself to post at least once a week. I fell well short of this goal in 2009 averaging less than 2 posts per month. Even worse than me is my partner, David (sorry, I have to call you out here). He has yet to write a single post though I know he has some great ideas brewing!

More than improving our consistency, I want to expand on the topics we cover in the blog. This area of the site was also meant to be a place for people to get to know the principle members of the studio, as well as interact with us. And though I enjoy writing design and web related tutorials, I like to think of myself as an individual whose interests run the gamut from sports to movies to music to social issues. This will be more reflected in what David and I write in 2010.

Write more guest blog posts.

This is more of an individual goal than one for pixel8. As I reduce the amount of tutorial related posts on our site, I want to start writing more guest blog posts for other design and development related blogs. I had the privilege of doing so for Little Box of Ideas in 2009 and have already delivered a couple of posts for the new design blog, Design Informer which will be published over the next couple of weeks.

This gives me the ability to share some of my knowledge as well as network with other designers and developers on a global basis. Obviously, pixel8 will benefit from the added exposure, but this goal is more for me to become an interactive part of the community.

Improve the usability experience of the pixel8 website.

Anyone who knows me is well aware that I am always looking to improve on my work. This becomes more evident in the work I’ve done on our website. In fact, though I would love to do so right now, I made a promise to myself that this version of our website will exist for a minimum of one year before I think about a redesign.

With that said, as I begin to focus on user experience as much as visual presentation, there are some upgrades I have already implemented since our launch in September 2009. This is most evident on our portfolio page. I intend on making more of these types of improvements over the course of this year as we continue to grow and I learn more about how our site is being used. I am hoping this will make the redesign process in the Fall of 2010 a bit more seamless.

Conclusion

It is imperative for any company to establish short and long term objectives to measure their success by. If we are able to meet these benchmarks over the course of 2010, I think this will set us up for some of our far reaching goals of finding office space and expanding the team. Right now, we are very excited about the new year with all of the possibilities at our fingertips. Stay tuned and we will keep you posted on our progress as the year goes on.

As of today, we have just received approval on the home page design and, as we begin the process of designing out all of the sub pages, I thought I would share the first roughly designed iteration, some of the thoughts behind that design and why it ultimately failed.

A Beautiful Design does not Equal a Successful Design

There is a tremendous gap between what looks great and what works for the client, the brand and the target audience.

As you can tell from the first mock up of the home page, I set out for the site to be bright and lively. I incorporated vibrant colors and spent some time making various vector illustrations for background elements. I thought the layout, on a whole, was clean and the content would be easily accessible. I knew that, if approved for further development, I would need to add some fine details but I was on the right track. So, feeling like I had a winner on my hand, the rough mock up was sent out for approval and comments.

But, as any designer can attest to, there is a tremendous gap between what looks great and what works for the client, the brand and the target audience. This became oh so evident when I received the comments:

Everyone really liked the brightness of the colors and ease of the rectangular text boxes.  In general though, people thought that the overall imagery of the animation read more like a pre-school.  A question was asked whether the sky and grass might be more abstracted or if there was a way to incorporate more local images-indicating that we are an urban (with a love of the outdoors) school?

So, I was in the right neighborhood, but on the wrong street! After reading the comments, speaking with the principals and picking apart my design, I had to agree with them. Though the rough version is very pretty, it does not work for the school. My original layout does feel like a pre-school website as opposed to a site for a school that has students from pre-K the 8th grade. And though I loved my cute vector illustrations, they just didn’t fit. It was back to the drawing board for me.

If, at first, you don’t succeed…

The only thing that would make it past the rough version would be the vector flock of birds. I decided to scrap everything else, come up with an alternate color palette and rearrange the layout. This time around, while keeping a green theme, I decided to create some textured background images (something that felt both urban and natural). These backgrounds would be accented with silhouette images of the Brooklyn Bridge as well as people and children interacting in Prospect Park (Brooklyn’s equivalent to Central Park).

The main site navigation was made more prominent by moving it to the very top and assigning its own color palette. This made for a much stronger presentation than the rough version. The footer area was broken up into two sub footers. One would act as an area to promote upcoming fund raising events, a site map and quick contact information. The second would be for legal information and site credit. Lastly, a search form was added as I never got the chance in the rough mock up.

I felt very confident about the design but it doesn’t get the green light until I get a message like this from the client:

Thank you so much for your creative energy and this wonderful revision.  Everyone is very positive about the site and would like to move forward.  We love the way you have made a very green but urban landscape with active people.

Experiences like this one reinforces that I have to always keep the brand in mind when designing anything. It is very easy to “fall in love” with your work and lose sight of the ultimate goal. This is especially true when it comes to designing websites.

Client Background & Requests

Coopers Kids is a state of the art sensory gym located on the Upper East Side of Manhattan. Specializing in occupational, physical and speech therapies for children, the client requested a website that would be informational, flexible and easy to maintain: none of which they had prior to our partnership.

For functionality, Lisa and Susan requested the following:

• A content management system
• The ability to manage news updates
• The ability to manage an events calendar

Design Concept Development

Since the client’s practice involves children, we knew from the beginning we wanted to create an illustrative and clean design that would be inviting to potential visitors but not distracting. It was also important that all of the primary content was easily accessible from anywhere within the site. While creating the wireframes, it was decided the the main navigation would be pared down to essential elements only: who, what are where. This allowed for a navigational system that is not overwhelming, but can be extended using sub navigation within the site itself.

For the look and feel, we decided the site would be textured using paper and watercolor paint. We also incorporated an illustration created by Fay Leshner on the home page. For color palette, we chose earth tones based on the illustration. Lastly, for typography, we decided to mix serif and sans-serif fonts for contrast.

The Development

Because the client requested the ability to manage their own content, it was decided early on that the site would be developed on top of WordPress as the Content Management System (CMS). To extend WordPress even further, we added and customized the following plug-ins:

• NextGen Gallery for photo gallery insertion
• Contact Form 7 for contact forms
• WPListCal for event calendar management
• MapPress Google Maps

In our design mock ups, we used Museo for page titling and sidebar headers. This font is not readily available across all computers, so we opted for the sIFR 3 solution to maintain the original look and feel of the design.

The Accolades

We are always humbled by the positive reception we receive for our work and would like to thank the following design galleries for adding the Coopers Kids website to their esteemed lists:

• CSS Mania – listed a a favorite site
• The Best Designs
• We Love WP
• CSS Baker

Conclusion

We are pleased with the finished product and happy to have been able to help Coopers Kids develop an online identity. As an agency, it is our goal to empower our clients with all of the tools they will need to succeed and we feel confident we have done so for Lisa and Susan.

If you are interested in partnering with pixel8, feel free to contact us regarding your project.