Beyond icons of mugs, squirrels, cartoon characters, etc. (keep in mind most fathomable subject matter hadn’t been covered at this point), some designers branched into releasing sets intended to replace the stock system-level Mac OS icons (hard drive, folders, CD, trash, etc.). Designing a system icon suite forces you to think completely conceptually. I found getting into this branch of iconography particularly interesting as being more a graphic design exercise, than in creating object or character-based icons. Some examples of my stuff circa 1998:

During those days of experimentation in system-level icon design, there were three steps that served every set:

1. Define the theme
2. Establish the overall aesthetic
3. Maintain the style across the entire suite of icons

Point three gets extra emphasis; the vitalness of consistency can’t be underestimated. In web site design, after the overall look-and-feel is nailed down, I’ll work out specific UI elements (icons, controls, widgets). Maintaining clarity of purpose and consistency with the overarching interface are paramount concerns. I’ve found while working through the project, sometimes an idea comes up for a control or icon that I’ll work out and implement; on second look later, however, it doesn’t fit in with the larger established suite of design elements. Most times the overall look-and-feel will (and should) organically mold the “hey let’s add…” -type controls — but it’s always worth a double and triple check on overall consistency at regular intervals.

Back to system icons; with massive canvases, zillions of colors, and advance rendering mechanisms available for today’s designer, present OS/system icons are a far cry from their humble beginnings. The graphic style of system icons for Mac OS X, throughout its various iterations and upgrades, has permeated icon design across innumerable platforms and media. The iconfactory’s work in this design type over the years has always set the standard for style and consistency spanning hundreds of system icons (like the entire Vista OS, for example). Their approach is defined by the brand, and their authorship is perpetually transparent.

Day 1
After a 14 hour flight and 24 hours without sleep, I meet the new family for dinner 45 minutes after landing. Needless to say, I was pretty spacey (in fact I don’t remember much of what happened). Out like a light at 8:30PM in our room at the Zhaolong Hotel.

Day 2
This morning I notice the body temperature sensors on either side of the hotel lobby entrance. They sound an alarm if your temperature is above normal, in an attempt to then contain/quarantine any possible H1N1-contaminated people (does a cage drop down from the ceiling?) Train to Tiananmen Square. The subway is the true test of having social anxiety disorder. Completely packed with bodies; not an inch to move. When you think it’s at a laughably-full stage, 10 more people force their way in at the following stop. We visit the Forbidden City, Jingshan Park, and Beihai Park. Completely unreal to be walking around here. As an American, I’m stared at incessantly (even by people on the street while we’re in a cab). Make the wife take me by the Apple Store Beijing. The smog layer over the city is insanely dense. My allergies aren’t having a good time. Blow black soot out of my nose at night, and every night here thereafter, from the heavy air pollution.

Day 3
Breakfast from a street vendor: ham, egg, and vegetables on flatbread. Unbelievably fresh and explosive flavors. Train to the Summer Palace ruins. Cab to new Summer Palace after lunch. Dinner with more new family members at a restaurant called Wahaha (that joke writes itself). Driving in China is pure insanity; due to the incredible overpopulation, traffic signals and “rules of the road” are treated merely as suggestions. People make u-turns from the right lane across 5 lanes of traffic (saw that twice). Then factor pedestrians, bicycles, and mopeds into the mix. Absolute chaos.

Day 4
Bus, subway, then train through the mountains to reach the Great Wall. Ate a “ham flavored” meat sandwich for lunch along the way. Some local fellow wanted his picture taken with me. The wife bought a panda hat after our walk along the Wall. Hot pot for dinner, Chinese arcade games after. Checking email at night on the MacBook pro is frustrating; Internet censorship is brutal. Also sites like facebook, Twitter…blocked by the government.

Day 5
Shopping at Wangfujing. Bought a jacket. Workers in the store literally follow you every inch of your visit as a “personal service”. Drives me nuts. Still-moving scorpions, roaches, and crickets on skewers to eat in the market. Went to a bargaining market at night to haggle with wife and mother inlaw. Good bargains on nice stuff. Peking Duck in the stead of turkey on Thanksgiving in China. After dinner we walk over to a local video store; 3 movies still in the theater on DVD, for under 10 bucks.

Day 6
Train to Tiananmen south end. Lots of little shops here. Over to the Temple of Heaven after lunch at Duyichu Restaurant (built in 1738). Outside the Temple, an old man does calligraphy on the ground with a giant brush and water as his medium. Dinner at grandpa’s apartment, then over to see the humongous LED screen (2nd largest in the world) at The Place Mall later in the evening. Good java at Esquires Coffee.

Day 7
We all go pay our respects to some of Kaity’s relatives who have passed. After, we stop at a nearby artists’ market, as I’m on the hunt for a large-format calligraphy piece for our home. I find one I really like; we negotiate, and I bought it. After the train back we pass through another bargaining market. A Chinese girl says while smiling, “you look familiar; do you have many Chinese girlfriends here?” The wife’s mom is not amused. “Just this one” I answered, pointing at Kaity. “You’re lucky, then” she replied towards Kaity. Scandalous! Dinner with family again on our last night in Beijing. We watch a mask-changing performance while at the restaurant. The guy comes off the stage into the audience and shakes my hand. Another perk for being the only American in sight. Flight out the next morning at 11.

The process of designing/producing your own site, particularly while at an agency, always proves to be the most difficult. This massive non-billable effort needs to be factored into an active workload, among many other internal factors. As the third major WP-based design I’ve done that has launched in the past couple months (this site’s new design and GUIGalaxy being the other two), my love for Wordpress has been nothing but strengthened. Almost to a fanatical, Glenn Close in Fatal Attraction degree (that’s love, right…?). For example, on the GUIGalaxy site, even I was able to code a login system into the header, displaying “New Post” and “Edit Account” controls once authenticated (and I’m no php programmer). When leveraged as the right solution for a project of appropriate scope, the winner of the 2009 Open Source CMS Awards has yet to let me down.

Now that the site is live, I’m off with my wife to Beijing, China, to visit the new in-laws. There over a week (including the Thanksgiving holiday), it should prove to be a tremendous experience. And, dare I say, a nice break away from design and Wordpress.

The resulting design facet carries over familiar UI elements from the last iteration of the site, so its new positioning (and reintroduction) wouldn’t be completely unfamiliar. New goals included iconic categorization of news types (categories), and making news posts themselves more engaging (graphical). The technical component, utilizing WordPress, facilitated getting the site shell up and running in an insanely streamlined timeframe. I wanted search as a visual constant at all times, so the position is fixed on that header div. For the first time I’m also playing with some channel-based Google ads. I’m going to keep the site off the public radar for a little bit while refinements are still being made.

On the redesign end I gave pseudoroom a fresh face, with a typography-centric approach. I didn’t want to lose the custom field-based display “engine” I had built the site around last iteration, so that was paramount in considering the technical implications of the design. The other less technical …technical… item I wanted to be mindful of was executing the full site typography via CSS; I’ve noticed some sites cheat with .pngs in circumstances where it’s easier to tightly control type display via an alpha-based image.

Many of the more popular design portal sites of old have also been fazed out. A few have stuck to their roots and remained relatively unchanged, like K10k and Australian INfront. Others have transitioned into a blog-like presentation (and most likely Wordpress-driven) with highlighting design, tech trends, and pop culture, like Surfstation. This approach/adaptation seems to be the more widespread one. Off the top of my head in this niche, I can also think of Lintcoat, ISO50, NOTCOT, and mashKULTURE.

If GUI Galaxy were to be resuscitated in any way, that’s the broad form it would need to assume. Extremely streamlined, and easy to update/maintain. In its previous life, GG’s news angle was Mac/Apple, tech, and UI-related posts written in a very acidic manner. We never took ourselves that seriously, we had fun, and I think that was always evident. However, with the custom downloads, tee shirt sales, and interviews stripped away, would that be enough to differentiate GG from the pack? I don’t presently have an answer for that, but for some reason the potential of such a project still seems oddly appealing.

GUI Galaxy was a portal site for Mac interface customization enthusiasts (desktop designs, mp3 player skins, icons). The members of this global collaborative project originally met online in the late 90’s via the Hotline server of the same name. A brief history of each site design iteration is below.

2002

The first design for GG set the tone for much of what the site would consist of throughout its numerous eventual iterations. Mac/design/UI-customization news posts, interviews with our peers in the field, custom-designed tee shirt sales, and of course, our own downloadable customization designs. As with the design for pseudoroom the previous year, this iteration of GG was ultimately picked up by K10k, which put the site on the map, so to speak.

On the GG Hotline server, I had installed automated “bot” software which oversaw several functions: managing client downloads, disconnecting over-idling users, and spouting pre-written (off-color) phrases in general chat based upon key word triggers. The bot was logged into the server under the name “Bishop”, and became such a hit that we transferred his persona over to the web site. The visual design of the character itself was done by French artist Raoul Sinier.

2002

“Iconverge” was the community project we developed for icon artists around the world to collaborate together. The gist of the project: we would develop a broad theme and submit to the community at large to develop their own icons upon. Everyone involved would then pool their icons into a collective set that we released for all to enjoy.

This mini-site was linked from GUI Galaxy, and the iteration/theme in 2002 was creating your own superhero, and his/her surrounding “universe”.

2003

Learning from the shortcomings of the last design, this version segmented news into 2 distinct columns: Mac/Technology-based, and UI customization-based. We also implemented a rudimentary CMS to facilitate more news authors posting. Another goal of this iteration was user/community interaction with the site, so the bottom portion consisted of user-submitted photography from around the world.

2005

The last, “classic” version of the site design went live in 2005. This time around, we wanted the site design to have more of an elegant web app type-feel. The twin news columns were ported over, and this time each was made searchable. The site engine was a custom CMS developed by Mike Lovett from the ground-up.

As with the pseudoroom design site from the same year, the underlying code for GUI Galaxy was completely standards-based, garnering it a Silver Star from the Web Standards Awards.

While I’ve used the name pseudoroom for my collaborative/personal/freelance site since 1996, this is a selection of previous design iterations from the “modern era”, if you will. A little history on each piece is included.

2001

Created at the height of the pixel design era, at this point the site itself was already at design version #6 (hence the sizable “6″ to the right). Original pixel artwork integrated throughout, and also the first use of a Flash-based music controller and “news” region. This design was ultimately picked up by K10k, which was some nice exposure at the time.

2002

Hitting the “site as a sketchbook” metaphor with the subtlety of a bulldozer, this design was presented in a single page format, with all content segmented into individual scrollable blocks.

2005

Teaming up at the time with partners Marc Clancy and Mike Lovett, we transitioned the site into a formalized outlet for our design/programming services (and called it “pseudoroom design” for the first time). As a result, this design iteration broke from the sequence of previous fun/experimental approaches, becoming the cleanest (e.g., most sterile) to come down the pipeline. The site engine was a custom CMS developed by Mike from the ground-up.

During a time on the web when table-based code was still the norm, the underlying code for pseudoroom design was completely standards-based, garnering it a Silver Star from the Web Standards Awards.

2007

With the 3 partners having gone back to full-time jobs for some time, the site transitioned back into my freelance folio, and again a fun experimental approach. Having implemented WordPress as my personal blog for the past year, I was getting more and more comfortable with the software as a potential CMS solution. As such, this was the first iteration to leverage WordPress as its engine.

2009

The second most recent iteration, integrated with a design blog section, generates folio and blog pages/posts dynamically via a single posting source and custom fields. At this point, I can make WordPress fetch me my slippers and fix me a sandwich.

The visual approach itself plays off of the ink on paper, “design sketchbook”-type concept of yore.

The thing I’ve missed the most in the past 4 years (of living in a one-bedroom condo), creatively, has been a formal home office/studio. A room set off, isolated. Saturated with Apple, Bose, technology, and inspiration. My drafting table, easel, and Gretsch. In that spirit, a 2nd bedroom was an absolute necessity to me in the new home search.

The substitute for such a set-up at my last home was ….. the couch. With my little lap desk, I sat in the living room with my MacBook Pro (with the flatscreen, treadmill, and other sensory distractions vying for attention quite often) completing the occasional freelance project, and even this very site design and production. The Gretsch and amp resided in the closet. The drafting table and easel? In the storage area.

At this very moment, here I sit writing this entry in my new Green Earth-painted creative Fortress of Solitude. Not yet “complete” as I envision it ultimately being, by any stretch of the imagination. However, in this very early stage, the building blocks are in place: the MacBook Pro perched atop the Rain Design iLevel, with the Apple Wireless Keyboard, are at home on the new Ikea desk. The drafting table and easel, centralized and ready for use. And, the big dumb smile on my face from pure geek satisfaction is undeniable.

Vector-based re-illustration and redesign of the home page “Design Ninja” concept. The design was submitted with the following caption:

Next time during a client meeting when asked, “Which one of you is the design ninja?”, now you can easily be identified as such. The other party’s need to pose this question has been obliterated. Valuable time has been saved.

Conversely, you can just wear a badass, ink-spattered, ninja mech t-shirt and be a colossal poser. Either way works, ultimately.