Color Charge

Hello, my name is Rick. For newcommers, Color Charge is my design studio, where I post my freelance/current work, and some random thoughts about User Interface Design, Web Standards, and other web design and development stuff. For my clients, friends, and old visitors, I’m overwhelmed to have you back here. I hope you enjoy this great milestone that was achieved.

I’d like to share with you the creative process of this site. Describe the ideas behind the name, how did I get into this (hopefully) amazing user interface, and show some facts about my profession.

The planning/briefing/designing of this site started over one year ago, and the first version was released on December 2006. Here are the previous incarnations of Color Charge:

UNTITLED ( December 2006 - January 2007 ) - Temporary design (about 20 days), just to present some work.

EVENT HORIZON ( January 2007 - March 2007 ) - Vertical layout, Prototype JavaScript based navigation, scrolling tabs. Experimentalistic, almost surreal.
Highly inspired on Sci-fi movies, such as Aeon Flux, Alien vs Predator, and Star Wars.

PULSE ( April 2007 - November 2007 ) - Plain and simple text, very descriptive. I took a step back on experimentalist and put the layout inside a boxy frame.
Changed from dark blue to orange and redesigned the logo, previously inspired by the Tesla Coil. The first widely successful design, being listed in several CSS Galleries world widely.

 

The design process of CHROMA

On early September 2007, I restarted the design of my site with a brainstorm of concepts I would like my work to be and transmit (in no particular order):

• colorful appeal
• energetic sensation
• young and creative
• high-tech related

Another listing I did was the goals of this web site, such as I do with my clients ( the formal 1-page briefing ):

• Why do I want a web site?
• Who is it going to attend?
• What can I sell through it?
• … and other questions.

These simple questions are the hardest to answer, because its pure essence: giving reasons to an effort and building expectations. Over one year before I decided about the business goals of this web site, it may sound like natural to you, but I can garantee that it is really hard, but rewarding answer those questions.

The next step was to choose the name. Let’s take a breath and remember why the name Color Charge.

Naming the child ( September 2006 )

This was the hardest part of the whole process: find a suitable name, and an available domain.

The four concepts I described above where always clear in my mind. I searched on several wiki, forum, design galleries,… and found an interesting name: color charge. The name comes from particle physics, a complex scientic field which investigates subatomic particles, and its related nuclear interaction - quantum chromodynamics, gauge theory, hadrons, quarks, and gluons. Nerdy stuff? Too much abstract? Anyway, that was a perfect name for my concept.

Warning: the following quote contains nerdy stuff.

In particle physics, color charge is a property of quarks and gluons which are related to their strong interactions in the context of quantum chromodynamics (QCD). This has analogies with the notion of electric charge of particles, but because of the mathematical complications of QCD, there are many technical differences. The "color" of quarks and gluons has nothing to do with the visual perception of color; rather, it is a whimsical name for a property which has almost no manifestation at distances above the size of an atomic nucleus. The term "color" itself is simply derived from the fact that the property it describes has three aspects (analogous to the three primary colors), as opposed to the single "aspect" of electromagnetic charge.

Uh? Seriously, do you think I extracted all this concepts from this abstract name? Sure I did.

Chroma ( September 2007 )

Putting all those ideas together was easier than you thought. Actually, I’m kidding - I spent over a month of research (just research and no design, no coding, no-nothing-nada, almost got crazy… some friends and designers says that is almost impossible to design for yourself). Concepts: interaction, flow, chromodynamics, particles, space and time, energy, field… that produced the first Visual Guidelines and Elements you see below:

Chroma - inspired on chromodynamics, and particle physics. It should be the synergy of all four concepts.

Blurry Transparency - because the overall appearance must be high-tech, and somewhat blurred

Bold typography, big buttons - to express youth, energy, and dynamism.

< High-tech appearance buttons and clean typography - many of them inspired on iPod Touch’s look-and-feel interface.

Unnusual text alignment - to express… something I don’t know the name? lol

Some wireframes, designing and coding ( October - November 2007 )

An interesting approach to validate the navigation was drawing rough paper prototypes of the interface. No scale, no details; just the overall structure, trying to simulate the experience of using the site, and the labels and sections arrangement. This is a cheaper (made with recicled paper, pen/pencil) and quicker than designing directly on Photoshop - I could even evaluate the site’s usability with other users.

The front page interaction idea.

The blog home, listing posts, giving the RSS feed an extreme attention (aligned with one of my business goals: sindicate my content, and having returning readers).

The business goals, vision, concepts, visual guideline and elements, and wireframes / prototypes were put together. After everything is approved, documented, and designed… hands on coding (which I will in a near future write some good tutorials about).

Did some Wordpress Template Tags code, well structured, and all camelCasedFromCore. Choosing back Wordpress was aligned with another business goal: having a portfolio integrated with the blog, and future tools.

…and the lovable jQuery JavaScript library code.

Thank you

Special thanks to folks at my current job (who are delaying to release their portfolios……..) for giving directions on the design process. To all my clients and employers: thank you for trusting on my work. Most importantly, special big thanks for my wife, who understood my endless hours complaining about "that perfect color, and 1 pixel alignment".

I hope you enjoy this fourth version of Color Charge. I can say this was the hardest creative effort I ever did - mostly because I am my own client, when I design for myself - so, everything must be (walking to) perfect (ion state).