Head on over and sign up for an account. Before you do so, make sure you have your ThemeForest username, the ThemeForest Item ID and the ThemeForest Purchase Item Code or you will not make it past the velvet rope.

Register Now

via @Awwwards http://www.awwwards.com/web-design-awards/we-are-pixel8 →

Giving back to the community is essential and Give Good Design is born out of the belief that having a web presence is no longer considered a luxury – it is a necessity. And, many non-profits don’t have it in their budget to hire and pay for high end design work, an element which is extremely important in today’s tech-savvy world. We’d like to change that with this specialized online initiative.

Our goal is to provide the winning organization with a much needed and deserved online voice that not only incorporates who they are through visual design, content and social marketing, but will draw attention to the work they do in the San Antonio community.

Stay tuned as Give Good Design begins to roll out…

And, you know what? They were 100% correct. I was immediately hooked. Once you understand how it works, it is quite addictive. From drafting your own players, to weekly player strategies to inevitable trash talking, I had a blast. The problem was, each season I had to hunt down a league to join and that was turning out to be a drag.

Well, this year we’ve decided to start our own league, Warriors and Riffs (we love that movie). It is 100% pressure free so, if you are new to Fantasy Football, you should feel comfortable joining and getting your feet wet. The only thing we ask is that you participate and bring your “A” game trash talking (be forewarned, Jeanette Fernandez is the biggest trash talker of them all!).

About Warriors and Riffs

Here is some basic information about our league.

• The league will have a total of 10 teams
• The league will have a total of 2 divisions
• Our live draft will be held on Tuesday, September 6, 2011 at 6:00PM EST
• This year, the league rules will be standard Fantasy Football rules

The league is private and joining is by invitation only. If interested, send an email to hello at wearepixel8.com, with your email address and we will send you an invitation. Feel free to share this post with anyone you know who may be interested. This will be 100% first come first serve and space is incredibly limited.

Our hope is to be able to have this league be an ongoing one each year. If we are successful, we are already talking about cash prizes for next year.

See you on the virtual grid iron!

The impetus behind Periodic

We have been toying with the concept of Periodic for nearly a year but were never afforded the proper time to dedicate to the project. After “vidagirl Magazine®” closed their doors earlier this year, the topic of conversation was ramped up significantly. We knew we developed a strong WordPress framework with the vidagirl custom theme and this would provide us with developmental jump start on the project.

So we looked at the old development concepts created for the vidagirl theme and started making decisions about what would work and what was appropriate for Periodic. vidagirl was first built for WordPress 2.7, so many of its functionality was deprecated and outdated. Periodic needed to show the muscle and extensibility of WordPress 3+. We knew custom menus, featured thumbnail images, custom widgets and an administrative panel were a must.

We also wanted to afford potential customers the ability to publish video posts using their YouTube hosted videos and elected to take this concept one step further by using the powerful jQuery plugin, Fancybox, to serve up videos anywhere you see the “play” button.

The design was to be uncluttered, modern and sleek. The color palette would consist of no more than 3 colors (you have 6 different color schemes to choose from) and the customer would be the decision maker regarding what functions of Periodic suited their needs. And, after a few weeks of throwing out design concept after design concept, we arrived at Periodic v1.

Periodic Theme Features

Periodic is packed with many of the features WordPress users are looking for in a custom theme. Aside from the WordPress 3+ custom menus, featured image thumbnail support, YouTube video posting and a powerful admin, Periodic sports 6 widget areas, 9 custom shortcodes, threaded comments, comment and author avatars and an author archive, just to name a few. For a full listing of Periodic’s features, please visit the ThemeForest product page.

Purchase Periodic for $35

You can purchase Periodic today, for $35, from ThemeForest and be up and running in a matter of minutes. Periodic comes with regular free updates for all valid customers and we are always open to suggestions and feedback on how we can further improve the theme.

Launch Demo

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

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? 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 studio. 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 studio and was perfectly playful by replacing the last syllable, of “pixelate”, 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 studio. And, though I was insisting to everyone who would listen that our name was “Pixel8”, I inexplicably created an animation, for the logo on the website, 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 business entity, 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 officially registered the 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 at 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.

“I have to tell you that this is the ass-backwards way of choosing a name…”

And, I have to tell you, after spending some quality objective time with the name, we started to feel more and more comfortable. It is positive, playful, forceful and slightly narcissistic and I liked all of that. Furthermore, 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 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 studio and therefore would not function well as the brand identifier. 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 our potential client base.

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 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 here 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 a little more 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. I 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.

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.

As David and I began laying the foundations for pixel8 We Are 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 We Are Pixel8.

“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.”

In 2010, it has become imperative to remove the safety net and almost focus exclusively on pixel8 We Are 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 We Are Pixel8 being a design creative 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 We Are Pixel8 as a company and not simply two 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.

We conceived pixel8 We Are 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 We Are Pixel8, which will benefit the brand as a whole in the long run.

Be more consistent with blogging.

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 We Are 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 We Are 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 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.