September 1, 2008 – 10:42 pm
Just before the weekend - Andrew Mager asked if I could generate a new more subtle wordpress skin for his blog. Apparently, he had been having some issues with some of his larger images not fitting in his previous fixed width site, and was also hoping to go for a lighter and more simplified look and feel. At first, I sensed that he was a bit shy about telling me that he had taken the previous design down. But it did not work for him, and my feelings are never hurt by the concept of change. A design system is supposed to be functional, thus if it is getting in the way of serving in the way it is intended - then by all means it needs to be modified or in this case - scrapped all together.
When I asked him what he had in mind - He replied that he liked a blueprint sort of theme - He pointed to a recent Revision3 beta site, and suggested that he liked that it has a feeling of “being built”, but clearly is not complete. I liked this idea of generating a template that would house his content - but do so in a way that implies the notion of a constant work in progress.
This idea made me think of being back in art school - I used to use supermarket brown bags as drawing paper. Not only was it free and readily available - but is a great toned drawing surface with a lot of texture and paper tooth to build up layers of pencil lead. This really lent itself to being a quick and easy medium to develop ideas without being overly concerned by a feeling that I was creating a masterpiece. Thus, I stayed loose and really worked on trying new things without feeling locked into any one direction. This seemed like a place to start.
I pulled out all the color and depth to his logo to make it feel like a spot color print on an organic surface IE - brown bag. Splatters and stains are added to emphasize a “Re-used” surface. One intended specifically for the purpose of “quick studies” - taking your thinking through a process. The overall feel is intended on being a bit flat - and creating a monochromatic surface so that it is “his ideas and images” that standout rather then the shell itself. The edges of this design are kept at the top and bottom - thus any super wide images are not confined on the sides should it need to expand horizontally to 100%.
At any rate - this was a pretty simple design and I was able to build out pretty fast. I sent it to him this morning, and he had it up before 2pm. I am pleased with how it turned out, but more importantly am hopeful that it provides an easy base that allows his thoughts and ideas to grow through his constant motion.
August 26, 2008 – 10:53 pm
Yesterday Lourdes, Brandon & I went to the Oakland Zoo. I must admit that at first, I was not too excited by the idea. I have always found zoos and animal amusement parks to be a bit sad and often disturbing. While I do think it is awesome for kids to be able to see such exotic animals in person, I usually find myself feeling sad for animals that seem so out of place in such small concrete enclosures. Take for example the orca whales at marine world living in glorified big swimming pools - or polar bears at the San Diego zoo, living in feux ice and cement enclosures.
However, yesterday’s visit turned out to be a really fantastic treat. The Oakland zoo is tucked along the hillside above 580 in the Oakland hills. It is over 525 acres spread along an expansive area well removed from the chaos in the city below. The grounds are covered with all sorts lush landscape. This part of the bay area is a Mediterranean climate zone which means that all sorts of seemingly tropical plants thrive among the more expected manzanita bush and oak tree forest.
Rather then small cages and dusty concrete boxes, groups of animals are given entire hillside atmospheres to roam and enjoy their local habitat. A group of lions had nearly 3 acres of to cruise around - either lounge in the sun or hang out in a shaded creek. A couple black bears have a similar home on an opposing side that is not only spacious, but really mimic a natural environment. Clearly, it is not the same as being in the wild - but the park like feeling is a far more enjoyable experience then other far more well renown zoos. (IE - San Diego) The grounds were not ultra manicured (more park like) but felt very natural, and all the enclosures struck me as not only large, but also incredibly kept and clean.
I have to tip my hat to the folks at the Oakland zoo, who have done an awesome job to not only provide a cool day for a local family, but to also do their best to do right by all the animals there for us to enjoy. All said, we had an great time - and found a truley unexpected treasure in an equally unexpected location.
So this week the CBS purchase of CNET Networks closed and I am now an employee of CBS Interactive. Every company focused on growth as we are, is concerned with maintaining and expanding on the group of people that make that growth possible. Internships are a key method in finding passionate new players to the workforce - as well as an opportunity to give these folks the chance to show and fine tune their skill set in a professional environment.
With the above goal in mind, I was happy to skin a new blog to foster communication among our 2008 summer interns. This will be a public blog to share experiences both light hearted as well as serious. However, equally important - will be a showcase of our culture and a community display of our talented teams. The desired result being to inspire future passionate media professionals to want to grow their skills with us, learn and continue to make impact on the many sites that make up CBS Interactive.
I did not have much to go on as I am not as familiar with the CBS Interactive brand standards as I am with that of CNET Networks. However the name “New Media Minded” is actually quite telling. One of the most exciting aspects of a contemporary online media company, is that much of what we do can be on the bleeding edge of what is possible.
That said - I wanted to create a shell that portrays itself to our young audience with a welcoming, optimistic and forward thinking attitude. The wrapper picks up on some of the CBS Interactive blues - but also rely on lighting and perspective to display the aspirational mood of the “New Media Minded” theme. The title centers from a burst of energy who’s source stems from CBS Interactive as a base. The content is a fairly standard narrow 2 column blog grid on a light background to allow for maximum legibility of ideas and images. However, simple blues greens and purple tones are intended to compliment the wrapper yet appear lighter and more playful in nature.
The ever prolific Andrew Mager (seen in the mock-up with CBS CEO Les Moonves) intends to build out this theme in the coming days. So stay tuned for more to come - I for one am excited for a “New Media Minded” experience at the new CBS Interactive!
This week Andrew Mager showed me “CSS For Lunch” - a new site that he had come up with. The goal is to get a group of talented tech producers to author various posts with the tips and tricks that they use on a daily basis. These can be quick rants that offer up an interesting method, yet can be both written or read on ones lunch break.
A number of folks at BNET, Revision3 and Apple have expressed interest in sharing their thoughts and insights. While I have little to contribute on the technical side, I felt compelled to offer up a design for the site, as it is one way that I may contribute to an idea that would seem to be a resource for many. (myself included).
The site is currently a simple blog, though will potentially include a gallery of sharp work and displays of the clever code in action. That said, it is primarily a utility, so needs to be contextual and to the point. Therefore I did not want to create a presentation layer that is overly elaborate, or stylized - but to devise a clean look that allows users to get immediate access to the posts. I use a strong contrasting color palette that while grounding the top and bottom of the page, are intended to draw the eye to the nuts and bolts of the content itself.
I had not used the specific color scheme of rich purples, lavender and bright green for many years. I think I (and many others) may have overused these in the early years of the dot com era and I have since avoided certain combinations as a result. That said, it was nice to put a simple and contemporary spin on an old favorite from my web archive color wheel.
So lately it seems that I have been coming up with designs on Friday nights for friends I work with at CNET. This proves to be a good opportunity to be really loose with my design ideas, try new color pallets as well as to give me more sandbox projects to code with CSS and semantic markup. I enjoy being prolific as it helps make me faster both with my visual designs as well as with my recent renaissance with code. Tonight, my project was to come up with a brand for MobKool - a blog from friend John Potter.
I’m not exactly sure where the name MobKool comes from - other then the fact that John used to smoke KOOL cigarettes. A nasty habit he gave up years ago, but apparently still maintains a fondness for the name! 
At any rate, I did not have much to go on other then some ideas tossed around of a crumpled box of KOOL smokes. At first, it seemed like a good idea - but with logos, it is important to rely on minimalistic shapes to convey an idea. So to keep it simple - I played off the KOOL brand with the tight kerning of the double OO’s under a spotlight - highlighting a broken habit with a smashed butt. Also, since KOOL’s are menthol, I shot for a complimentary color scheme with a sort of minty backdrop but a warmer golden foreground.
As I said - MobKool is Johns blog - so the contextual elements rely on simplicity to allow his rants to display with large left aligned headlines as the most prominent part of the page below the brand and navigation. Since John is an engineer - SEO is important (Its actually important for everyone… but he always gives me a hard time about design not thinking about SEO - A designer stole his milk money when he was a kid) thus while the site is quite visual - all navigation and content is linkable text rather then to use images for anything other then background shell components and the logos found in the header and footer. Lastly - Mr Potter is pretty “web active” - so links to the various social places he can found online sits as a signature element in the footer.
This was a pretty quick design, and I am hoping to code it over the weekend by treating it as a sort of CSS Zen garden project by using the mark up of this site, skinned with with his presentation layer. Who knows… maybe he’ll even give me a link back to my site!
As of late, I have been pretty prolific in trying new things with CSS / XHTML - weather on my own site, or on a variety of other projects that I have been working on. In the process, there have been many folks who have been super helpful and downright generous with their time in helping me ad to my bag of tricks. A LARGE group of my piers have been there to answer questions, and I thank each of you for your time. However 2 folks in particular have really offered up both answers as well as taken a lot of time to coach me through some concepts that took some repeat questions before I truly grasped!
Alexis Gallisa, (part of my lunch crew and pixel pushing partner in CNB design) is a fantastically gifted designer, who continually amazes me. He has a rare balance of being equally skilled in both the visual as well as technical design and has taken an absurd amount of time in sharing his CSS knowledge.
Andrew Mager ( CNB Tech Producer, also part of the lunch crew, and probably the one of the most enthusiastic fanatics of all things web) helped me get set up on DreamHost as well as with getting word press set up so that I could both skin and blog to my hearts content.
Thus far, I have been able to get by on trade with Alexis - thanks to my wife’s AWESOME homemade empanada’s and HER tolerance for me disappearing downstairs to spend time working after work! (Make that 3 people - and not in the order listed above!) Though I have continued to promise Andrew a logo for his ongoing willingness to be helpful and somehow had not gotten to it.
However tonight, I had a some mojo going and put together a logo and site skin for him to play with on his blog. Andrew is sort of tireless when it comes to anything online, so I would not be surprised if he takes the PSD I sent him tonight and cuts its up to suit his needs before breakfast. Either way - many thanks to all - I am grateful for your help~
I have long held the belief, that the most beautiful things in life - Are beautiful with, or without us. So it is up to all of us to see the things that are so easy to overlook or simply take for granted. If we choose “to see” then this is also our fortune.
Tonight while walking outside to take out some trash - I noticed a very slight glow appearing on the edge of Mt Diablo. At first, I did not think much of it - We are very fortunate as to have a view of the mountain, and I enjoy many beautiful sights of both the moon and the sun rising over this tall East Bay peak. However this evening, I was amazed that I could actually see the moon move. I stood there for a moment, only to realize that I had never seen it rise so quickly.
I stood there amazed by the pace of what was in front of me. It was truly a remarkable sight! As I said, I have seen the moon rise before. However on this occasion, there was clear movement over the course of seconds, and in less then 2 minutes it went from no moon to a full moon over the mountain. This struck me as one of life’s little fortunes - if for no other reason but to point out how quickly time moves and how important it is to not take things for granted. It was a very literal display - Life comes at us fast, yet if we take moments, we can grasp enjoyment in even the quickest of fortunes.
Just pushed out a new site for Scott Pollack Illustration. Scott is an awesome illustrator who I have used numerous times for feature illustration projects on BNET. I love his work and was thrilled to have the opportunity to help him update his online home.
The design which included a new logo, is intended on creating a bridge between mediums. This is to reflect Scott’s combination of old and new within his own process. He hand draws all images, then paints using watercolor to provide a base. Then he finalizes these by pumping up the saturation as well as a continuation of brush work in photoshop
That said, I wanted to create a look that has an aged feel to reflect the roots of his process. As a base - his logo displays his drawing style - and the rest of the site uses warm but faded tones and backgrounds to continue this more traditional feel. The gallery uses Lightbox 2 by Lokesh Dhakar - However I tweaked the NEXT | PREV function a bit so that it is a consitent fixture rather then the result of a hover.
The site is still new and will no doubt continue to be tweaked, but I am quite pleased with this initial launch as it seems to have a very fitting feel to both Scott and his work. ( And ultimately, that is the goal of any project! )
April 28, 2008 – 10:36 pm
When we bought our home a couple years ago, I knew that all the fences around the property were pretty beat up and did not have much life left. Strong winds blew portions of it down the last 2 years in row, and the whole thing has been somehow standing with props, temporary posts and maybe even a couple band-aids. (On my hands from propping it back up in the rain!~)
This spring, I finally had to pull the trigger on a new fence. Building things has always been a hobby of mine. It is a great place to get creative, and the results are very tangible. Having hurt my back a few years ago,(Building a covered Patio) I was not going to be able to build this on my own, but that was not going to stop me from getting a little creative with my ideas.
While most of it, is pretty standard, - a boring 6′ good neighbor fence (means it looks the same on both sides - no frame on one side) I wanted to make the 35 foot section along the front of my house stand out with a little custom flare. So I came up with a design that is both a bit familiar, and also a little different. Rather then use a traditional angled lattice (think home depot), I used 2×2 piano key pieces along the top, with rows of 2×2’s running horizontally to create a really thick and heavy vertical lattice on top (old school mission / craftsman style).
Then for the gate into the backyard, instead of using the same 4×4 posts as the rest of the fence, I opted for thicker 6×6 so that this bulky mission style could extend into an arbor over the gate. The arbor is a simple design, but all the edges are notched on the corners with a 45 angle spanning the center. It has 3 tiers starting from 2×6 - to 2×4 to 2×2 that match the piano key on the fence top.
Once it was all in, the whole fence was sprayed with a nice even coat of oil based redwood stain to continue with the mission / craftsman theme I was trying for. (Fortunately, I was able to do this with my pressure sprayer) Redwood ain’t cheap - so there was no way I would be able to afford doing this custom fence for all my yard, but it makes a huge difference to have a small custom section up in the front.
April 24, 2008 – 11:46 pm
The illustrator in me has always loved any project that includes creating icons. Icons are simply mini illustrations that ad a visual element to assist in explaining something functional, contextual or that will simply help a user understand how to engage. What ads to this challenge is the minimal space and square aspect ratio allocated towards telling this visual story.
Today, I needed to create some web clip icons for mobile folks viewing my sites on the Apple iPhone. Having created many successful and MANY more unsuccessful icons over the years, I have come to realize that it is not always the beauty of the initial drawing that will define its success. Often it is how the image fills the space that will determine how well it reads when reduced to the various sizes for implementation. (24×24’s are treated at the pixel level).
While the details and process of the drawing itself are a subject of another post - the best trick I use to insure good layout is to build within a box unit that is my finish size. This insures that that when I bring a vector graphic into photoshop, no quality is lost in transforming it up or down in size. Often I made this mistake when I first started creating icons as vector graphics assuming that because it was a vector, I did not need to be concerned with its size in the master file.
However, even more important, This allows you to see how your image fills the space. A rule of thumb, I make sure that my image extends to at least 3 of the four sides. Doing this allows the image to occupy the entire drawing board and will carry a more balanced weight and will be consistent with other surrounding icons.
I pulled out all the color and depth to his logo to make it feel like a spot color print on an organic surface IE - brown bag. Splatters and stains are added to emphasize a “Re-used” surface. One intended specifically for the purpose of “quick studies” - taking your thinking through a process. The overall feel is intended on being a bit flat - and creating a monochromatic surface so that it is “his ideas and images” that standout rather then the shell itself. The edges of this design are kept at the top and bottom - thus any super wide images are not confined on the sides should it need to expand horizontally to 100%.
