Making Record Time

Recently I have been spending my down time working on a  project that I have dreamed about since I was a young boy - To build up and semi restore a classic Jeep CJ7. Over the summer, I started this project and have been getting a lot of enjoyment both tinkering with it in my garage as well as driving it at every chance I get.

Over the weekend, it dawned on me, that I was making quite a bit of progress on the jeep itself, yet I had not been documenting my efforts the way I had intended when I had started. Thus, over the weekend, I made what I consider to be a personal record time in setting up a blog!

I am pretty fast when pushing pixels, but have never been a speedster in setting up server stuff, domains, hosting etc. However, on Sunday evening - I purchased the domain (www.civilianjeep.com), set up the hosting, installed WordPress (via Dreamhost’s amazing 1 click installs) Then customized one of my older wp themes with a logo I had played quickly and then swapped out the other design elements to create an entirely new theme specific to my project - Hell, I even wrote the first post! All totalled… a process that took less then 4 hours.

Now you may look at the site, and find *PLENTY* of flaws in either the design or even more likely bugs in the wp theme… but more important, I am able to document my efforts… and flaws considered, I love the domain name, feel good about the logo, and all in all felt pretty impressed by my short order effort!

Looking for a Rockstar Design Contractor

Ah yes… the search begins! What am I looking for you may ask? Well just a Design Rock Star to come and work his or her magic in the San Francisco office of CBS Interactive for the next 4 to 6 months. This is a full time contract position - someone who will assist in the creation of design solutions for assigned web projects including: new page layouts, visual interface design systems and functional | interactive elements, e-newsletters, promotions, and other graphical needs.

CBS Interactive

About the gig~

We are a tight knit design group that works closely with the Tech Production team to insure quick delivery of cutting edge design solutions for our Business and IT audience. You are an avid user of web tools, applications and shared content online. You have understanding and interest in emerging web technologies, concepts, and designs. You pay attention to what others are doing with current design, and THRIVE on adding “best of” skills and techniques to your bag of tricks

The perfect candidate will have a solid understanding of user experience, be preoccupied with usability and have a great eye for the small details that make design stand out from the crowd. You will help define new site sections, concepts, and user flow. Candidates should take a strategic approach to projects, always looking for ways to improve ideas.

The Requirements

  • Portfolio of work that indicates an understanding of current web design trends
  • Experience designing high volume, functional, media/advertising driven websites
  • Experience with user-centered design methodologies and practices, in particular the role of design in creating usable and effective web interfaces
  • Must be able to conceptualize and design innovative user interfaces for consumer- facing websites and web-based applications.
  • Excellent communication and organizational skills. Ability to present and support creative concepts in a professional and engaging manner
  • Must be a self-starter who can produce top-quality work on tight deadlines for multiple internal customers and product teams
  • Strong desire to learn, grow and be a part of a passionate group – whose desire is to do the best work of their career.
  • Advanced knowledge of the full Adobe web Creative Web Suite.
  • Experience in writing valid HTML & CSS
  • Current and review-ready portfolio
  • Work closely with product & Technical teams to turn concepts into actionable best-in-class user experiences

All seems reasonable right? Most important - you have to have an online portfolio. I’m not interested in a resume of what you’ve done, and where you have been. Let your work knock my socks off. If you have the chops… are that person, or know of that person… I want to hear from you!

Creating space through light

A major factor that has long influenced my style as a digital artist is my background in traditional illustration. I have been a doodler, drawer and painter for as long as I can remember. For me, this has been about creating the illusion of dimensional space/objects by paying attention to how light effects the contents of “things” within their “environment”.

Mac icons

This latest series of icons really displays this approach. These are created in Adobe Illustrator as individual objects - then assembled as group to create a composition in Photoshop. A closer look at the individual elements shows that each is composed of very basic shapes. The colors and gradients used create the illusion of form and cast shadow, as well as direct and reflected light.

Example 1: The base of the iMac computer is a simple shape with a single linear gradient. Using multiple shades of silver to gray allow me to create the illusion of a cast shadow from the screen on to the base - Then moving downward, it transitions to a form shadow where the base moves from vertical to flat thus not being hit by the same light. It then gets lighter once again, as it leaves the shadow from the screen, and extends forward.

iMac Base

Example 2: In the case of the MacBook, a similar technique is used, but to create a different effect. In this case, the shape itself is again quite simple, and includes a linear gradient - However, my hope is to show the subtle curve where the front of the keyboard base wraps around to the side of the unit. In doing so, light creates a form shadow around edge as it moves from the front to the side. The shadow helps to show the transition - However, it is the reflected light on the outside of both sides that create this dimension on what is otherwise a flat shape. Further, these details ad to suggest the metallic surface.

MacPro Base

A colleague recently suggested that I write a tutorial to showcase how I create these. I may try to in another post, but am not convinced that I could accurately describe a best practice to do so. Mostly because, I tend to “eyeball” a lot of things. However, I do think that applying some drawing principles of light can have a positive effect on the end result!

A letter to BART.gov

I am one who will be affected by the pending strike planned by the Train Operators. I have made a East Bay / SF commute for the last 20 years - A void in service will be a pain to say the least - However, I will drive out of principle - and may start to drive periodically to show my distaste for how this has been handled. I have ridden Chicago’s L train, New York’s Subway and Paris’s Metro - All of which cost me about 1/2 - 2/3 what I pay to ride BART for a comparable distance ride.

The train operators for BART are among the highest paid in the country - and I as a consumer pay for this. I absolutely can not and will not lend any support to the union. I think their demands are unrealistic, and show just how out of touch they are to the plight of every day working folks trying to get by in the Bay Area. I also hold management accountable for years of poor planning while continuing to agree to unsustainable contracts. Over the years, I have been confused by your poor decisions with regards to system growth, train cleanliness and the general reliability of the service.

Imagine if successful companies like Google, Apple or even Microsoft ran the way that BART does - they would have gone out of business years ago - Well enough is enough - Many in the region are doing their best to avoid falling through the cracks of a VERY crummy economy - I personally know a number of folks who are out of work, some of whom have or will lose their homes & businesses. I am frankly insulted by the daily news indicating the threat of a strike - and am outraged by the attitude of entitlement displayed by your workforce at a time when most folks are trying to just make sure they get through the worst of our current situation.

While I am not thrilled with the management and or service provided by BART, and I WILL be burdened with the ramifications of this strike,  I would gladly spend the next few months dealing with a difficult drive, if it were to mean that all who do not want to work are allowed to WALK - and a new workforce can be brought on and up to speed to work an honest shift for an honest salary. I am not one who wants something for nothing and am compelled to offer a perspective that will hopefully be at the very least heard.

Sincerely - Soon to be Driving from the east bay

I just sent the above letter to the main contact form on the BART.gov website - Should you have an opinion on the situation that you would like to share with the good folks at BART - you can do so via this link~

When is it more then just Inspired By?

Recently I was asked by a young designer, what could she do to get an edge. My response was simple, - consume, consume and consume some more. Really pay attention to what others are doing, dissect how they do it, and emulate often to develop an eye that understands the small details that make a given direction successful. With time, and lots of practice, your own unique style emerges and can be readily seen weather it is an original design or the result of work that has been inspired by others.

One of the greatest wonders of the Internet, is the ability to “View Source” thus giving anyone the ability to determine how “something they like” really works. I do it religiously, and am confident that anyone who designs beyond Photoshop does as well. However, when does learning or being inspired by others cross the line to become plagiarism or more simply put - stealing an other’s work and claiming it as your own?

Sites Compared

This morning while on the train, I received an email indicating that I had some new followers on Twitter. Whenever someone new follows me, I always visit their twitter page to determine if I know them, or if they have a site I can check out to get a feel for what they are about and if there is merit to follow in return. Looking at my new follower’s site “Digital Wombat Studios” - I could not help but notice that it looked oddly familiar. I could not place it immediately (mind you I was looking from my iPhone) - but it bugged me enough to take a closer look once I got to my office. Upon closer review - I recognized it immediately as copy of Derek Herman’s Valen Designs. I knew this, because I read his blog and we follow one an other’s tweets.

The copy literally draws little to no distinction from the original other then some minor details such as its altered logo, slightly modified primary navigation and a masthead that extends about 40 pixels taller from the top. Beyond that, colors, background images, site structure and page grids are literally identical. In fact they even went so far as to mirror not simply the display, but the function Valen’s featured image carousel.

Compare for yourself

Valen Designs

DWS

Seeing both - It sure looks like a copy, what do you think? Now the truth of the matter, I really did not think much of this… It is bad tact… and I would not like it done to me, but what can you really do, perhaps it should be seen as flattery. I sent Derek a Direct Message that read “I suppose imitation is a form of flattery? you be the judge”. In response, Derek indicated that not only had DWS taken his design, (or hybrid of his new and old one) but that they had also taken parts of his content, writings and even his twitter posts! Now that is just creepy.

Overlay

It is creepy because they are claiming lot of someone else’s original “work” and “thoughts” as their own. Emulating work is not by itself a bad thing. I actually encourage it, as I think it is a fantastic learning exercise and way to develop your own style through following the steps of things that excite or inspire you. This is not new to the digital world - this practice dates back to old master painters who would often do copies of works by their predecessors in honor of… or to learn from them. But when publishing works that lay claim to them as original - you had better modify well enough to genuinely make your own. Otherwise, not only do you look like a copy cat - but you take the age old process of learning from others and put a bad taste on it.

Just my .02$

SmartPlanet goes live!

On time, as planned, and with minimal bugs - SmartPlanet was launched today. This was quite an accomplishment, as it was deployed on the same day that MoneyWatch.com lost it’s beta status and in record time even were it not for the efforts that had been divided between the 2 milestones.

I must say - while I am proud of this effort on behalf of my team, it is also one of the very reasons that I have so much pride in the business unit that I am a part of. By comparison, we are not as large as some of our counterparts within CBSi - yet our size does not limit our ideas, energy or ability to deliver on even the most aggressive of plans. This was a true collaborative effort by amazing product, tech, engineering, editorial, broadband and design folks who once again delivered a super cool product and dare I say, “had fun doing it”

SmartPlanet

“At smartplanet.com, you will find thought-provoking progressive ideas on diverse topics that intersect with technology, business, and life, and matter to the world at large.” Have a look for yourself, and learn ways to  contribute to a smarter planet!

A CBS Interactive site for summer 2009

Today we published a splash landing page for our new site SmartPlanet.com set to launch early this summer. I am excited about this site on many levels. First, because I believe in the idea - It is a site “dedicated to people who realize the need to make our world a better place to live, for all of us, and for generations to come”.

Second, because it takes advantage of the vast amounts of R&D that took place throughout 2008. Much of this effort made its way into the recent launch of MoneyWatch.com - still in it’s beta phase. However, it’s presentation has many new UI elements that I am very proud of. They feel intuitive and I hope that in the long run will serve to add value to our users and make our content easier to consume.

In some respects, many could say I am crazy to be excited about adding another brand to our portfolio of sites. ( My team already handles all creative for 4 major brands - this makes 5 ) However, I see it as an opportunity to fine tune a number of these new ideas that we are trying in the functionality of our products. Ideas that are easier to implement when building from scratch then when adding to far bigger sites with legacy functions on older platforms.

Thus far, our work has progressed quickly (Many trips to the no longer new coffee machines) - All of our previous efforts have made the creation and build out of SmartPlanet a smoother process that will be easier to deploy as a result. - I am eager to push this out and let folks take for a test drive!

A little Brand in your social media

For those who want to use twitter, it can be a fun and interesting way to both keep track & share what is going on with the many people in your expanded network - using 140 characters or less. Individuals and companies use it in a variety of way’s for both business and social reasons. I have read many an article by folks either evangelizing the application itself or in how to use it more effectively to maximize their social media presence. This is not one of those articles.

I am amazed at how little thought even larger media outlets give their twitter pages. Lets face it - no one, visits your specific page on a regular basis - folks either view their own page, or use handy desktop / mobile apps like Icon Factory’sTwitterrific” to keep track of the feeds they follow. That said, your twitter page is really like a sign up process for others to get a feel for who you are, and weather they want to follow what you have to say. Thus, this article is intended on providing a quick tutorial on how you can insure that your twitter page presents itself with the same appeal and brand consistency of your parent site.

Step 1 - Once you log in - click on your settings tab. This will take you to your general account management page.

step 1

Step 2 - Select the Design tab on the far right. From here you can choose one of a number of predefined themes that the good folks at Twitter have provided to users. This is fine for many, but if you promote a site, or have taken the time to create a brand for yourself, then creating your own is just a couple of easy steps. At a glance, it would seem that you have very limited control with the basic modifications you can make~ However, you can still make do to create the appearance of a more custom site.

Step 2

Step 3 - Select “Change design Colors” tab. From here, simply use PhotoShop’s eyedropper tool to sample colors that already exist with in your site’s design palette. You or someone else has already taken the time to make sure these colors work together, and the result will create an automatic synergy between your site, and this landing page.

Step 3

Step 4- Select the “Change Background image” tab. Here you can place an image to use as a background.  You are only able to control weather your image “does” or “does not” tile - meaning the image will repeat both horizontally and vertically. This is where most folks make errors that display the inherent limitations of what you effectively change.

Should you simply have a pattern that you want to repeat - set to “tile” and you will end up with a decent result. However, if your design requires a vertical fade -still choose to tile, but you can create an image that is taller then what most monitors have for a set resolution - typically you are safe with a  1200 x 2px image. This is because the background is automatically fixed - the vertical size will occupy all of the viewable space while seeming to only tiling horizontally. However what I prefer, is to create an image in photoshop that transitions to my background color, thus not needing to use the tile background function.

Step 4

Step 5 - In this example, I have created a 800 x 600 px background that includes the site brand. I used a simple about quote, and some background visuals taken from the site for both interest and depth. But really, it is an image - so you can add any elements that you wish, so long as you do not imply interactivity. In this example, I have included the contact information of Escriba’s Principle - Zac Shess.

The most important element is to insure that the bottom and right side of your image transition to the same hexadecimal color set in the body background from step 3 in combination with “no tile” to your image.

Step 5

The result - Since all twitter background elements are fixed positioned (meaning they don’t move with the content above) - your feed will scroll up leaving a handsome and consistent brand presence as the backdrop to whatever you have to say.

The result

Have a look at Escriba’s twitter page. In all honesty, this is not rocket science, and most interactive designers may in fact read this with with some wonder as to why I would take the time to write up this simple process. However, I am continually surprised at how few folks do this, or how many do so in a way that display its shortcomings as a result of the limited elements that can be modified. Good luck, and have fun… well, using 140 characters or less!

The Marketing Mixologist

Another early 2009 site debut was for Kevin M Klein - aka the Marketing Mixologist. Kevin has worked with various media brands for the past 15 years - leading marketing, product and sales teams for print and online publishers.

He wanted a site that would allow him to present his skills and approach as well as to maintain a blog where he could articulate his thoughts on how or what companies can do with their marketing communications during these difficult economic times. The look that I went for is intended on capturing the idea of “Back to the Basics” - Hence I used a fairly simple, straight forward presentation with an earthy, rustic, yet warm palette. The sharpest contrast being on his logo which is quite basic as a label literally stapled to the header.

The site is still new, and no doubt will recieve some tweaks over the coming months, but I am pleased with the feel and personality that acts as the base for the ideas and touch points of his message and insights!

SFObserved goes retro

Recently, I had the opportunity to create a new blog skin for SFObserved. A local blog that is a collection of thoughts, impressions and photos of a group of folks who call the Bay Area home. Started by my dear pal Kevin Klein - who is originally from Los Angles. Thus the last few years have been full of new experiences in this famous old city - new to him.

SFObserved

Visually, the look I was going for was “the old neighborhood pub”.  A comforting spot where friends could meet to discuss the goings on of the day - the events, the art, the politics as well as the crazy folks who make or watch it happen. I chose to use deep saturated reds and ornate, but worn Fleur emblems try to create that well used “Barbary Coast” pub feel. The fixed positioned background stays absolute - done so to help to make it feel as though the conversation is different, but the setting remains the prized booth at your local dive!

Stop in to fill up on whatever the latest swill Mr. Klein is serving!