Happy Monday Morning, my little monsters! I would say 'Happy Holiday Morning' if in fact I got today off... but... I don't have the day off... rather, I find myself swilling coffee like it is going out of style. Here's to cup number 5. *Slurp-cringe* Ed. note: It may be time to switch over to Rockstar for the day...

At any rate, I am here, dear friends... posting again for -what I hope to be- your undying amusement. I find it difficult to type and think with any sort of regular cohesion, as my mind keeps slipping back to thoughts of a warm bed and of cozy dreams. Alas, such bewitching chicanery only serves to torture me, so I shall do all in my power to avoid said thoughts. Count the coffee... 4... 5... time for 6th cup? Methinks 'yes'.

This past week has been one of challenge and gruesome testing for my family and I. While I shan't delve into specifics, I can say that it looks as though the worst waters have been sailed through, and that the horizon brings with it calmer seas... and for that I am most thankful.

On the work front, one of the two major projects I am working on will hopefully be coming to an approval-end soon, and dare I say 'completion' not too far after... and I must say I cannot wait. Not that I am seeking acclaim or recognition for efforts made mind you... it's just that once the big projects start becoming belt-notches, my own position here becomes engraved and understood in the minds of coworkers... who - until such time - have yet to fully assess what it is I am trying to do here. Damn, this cup is empty.

Perhaps my coffee counting should continue without being encumbered by this last.wurd... yes, I believe that is the proverbial ticket. It is time to seek out lucky number 7... which leaves me counting on the day to pick-up in pace and posterity.

While I have enjoyed most every aspect of visual design that I have encountered over the years, there is - has always been in fact - one genre that holds my heartstrings tighter than the rest; logo development. I suppose this is true because - for me - creating a successful logo represents the pinnacle of challenge that we designers face... the very Everest of visual problem solving. To devise a successful logo, one must wholly understand the client's missions and goals, as well as identify and engage the demographic of said client - striking a harmonious balance between the needs of both sides - in order to arrive at a simple, singular solution that speaks volumes without uttering a single word. A successful logo is one that brings together proper usage of positive and negative space, weight, geometry, the ambient mood created by the right color scheme, and that certain unspoken, intangible connection that is made when a user understands the message that is being generated.

With this in mind, I wanted to share with you some of my favorite logos; stellar examples of succeeding in what could arguably be called the most difficult aspect of visual communication.

1. Killed - a fantastic demonstration of simplicity in design that truly speaks for itself

2. Timewatch - another simplified solution that makes the grade.

3. Height - crafty use of negative space to drive the message home.

4. Upside-down Productions - Always been a favorite of mine.

5. Zip - An excellent marriage of conceptual elements that is extremely effective.

And there you have it ladies and gentlemen... some snappy, sexy, simple logos that I just love... presented in no particular order. My hope is that they stir something within you as well... for that, after all, is the definition of a successful logo!

While life without the following web development tools can most certainly continue, there are those who would ask simply, “why?” With powerful (and FREE) tools in immediate reach, why would anyone in their right mind eschew such assistance, opting rather to do it the ‘hard way’? Instead of pretending to have an answer that makes any sort of sense, I’ll just get to it… a collection of my favorite online design and development ‘lil helpers’ who most certainly deserve bookmark space in every des/dev’s browser!

Offering image, form, css, and color scheme generators to name but a few – Generate It is “a free resource site for webmasters to take some of the hassle out of creating everyday items for their website”

“CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.”

A calculator that employs the golden ration (or ‘divine proportion’ – as seen in the Fibonacci sequence) to layout optimal site element blocking for the highest possible aesthetic.

I have nothing to write about today… or at least didn't until I sat down and opened my text editor. To be fair, I still don't have anything to write about… but I am practicing a "brainstorm-babble"... a technique that a literature professor of mine insisted we used while trapped in his horrid dungeon of a class. "In times of blockage, this will act as the fiber of your imaginative voice" he would drone, passively mocking us in his best "bow down to my superior wit" tone. Yes, he was an ass, and would be the first to agree me. I don't even recall why I felt I needed to tolerate his weekly rantings and insults, as this was supposed to be an elective course for me; based on interest and exploration rather than perfunctory performance. Alas, Professor Ass changed that with a quickness. Or so I once thought anyhow.

Why the vacillation? Well, it occurs to me that Dr. Ass, P.h.D actually made a notable impact on my educational time served in the brain-prison called University of Blah-Blah… and good behavior notwithstanding, I simply have to give minimal credit where it appears to be due. Ass-credit as is demanded in this case… but credit just the same. This offensive, agitating and annoying little round man - with his poorly coordinated dark socks and sandals - had somehow managed to slip past my self-defensive barricades and accessed my influential mainframe… dropping an (il)logic bomb as he tromped around with seemingly no regard for my - nor my fellow students' - brain-pans. Yes, this is still a babble-exercise… one that Dr. Ass would both berate me for, and secretly admire in his own twisted jealousy fits. "Fiber for my imaginative voice" indeed… anal references from Dr. Ass… how poetically putrid!

Rounding third base now… still wondering how long it will take the other players to notice I didn't actually HIT the ball during my at-bat… heading for home. Plate is being crowded and I don't care. I pick up steam and charge harder… hoping Dr. Ass is somewhere in the stands with money on the opposing team. And then… like an air horn in an infirmary my daydreams are obliterated by reality ripping through my mind. "Shit, it's time to go home."

One of the bigger challenges in web and graphic design is that of inspiration; specifically how to keep the tanks full and the tap ready to flow on demand.... not an easy task to say the least. In an effort to aid in this seemingly constant quest, there are numerous sites out there with the lone purpose or inspiring those design professionals who in need of a creative re-fill. Following are my 5 quick-picks worthy of a visit.

Being the nostalgic sort, I somehow found myself reflecting back on web design of the past, and how it has evolved in the past decade or so. I began digging up and dusting off memories of image map mayhem, nested table nastiness, auto-play MIDI nightmares, and the evil that is <FRAMESET>... and realized that each unearthed memory artifact pulled me in deeper. And so I sit here now - in the throws of digital design yesteryear - I thought it appropriate to share with you these reflections, and invite you to join me as I sip lemonade on the proverbial porch of my mind.

The close of the 90's brought with it a slough of blue text links, animated GIFs, and left-leaning sidebar navigation. It was a time when variations of black, red and blue marked the divine trinity of color-scheming... where the type was Times New Roman (unless you were one of the cool kids who lived on Arial Boulevard or Verdana Way – lucky spoiled bastards!)... and when oversized, javascript-gussied buttons roamed freely across the digital landscape, largely unchecked by any notion of optimization.

With the dawning of the new millennium, many also began to trade-in odometer-tricked homepage hit counters for a splash page that was “best if viewed...” under particular conditions, and (all too often) neglected to provide coveted features like volume control and a “skip intro” option. But we didn't care as we were apparently too busy flexing 800x600 muscles while still wearing 640x480 dial-up t-shirt. Enter web design's own disco phase.

Fortunately for our visual senses however, this digital rhinestone flare began to settle down a bit. Flash became more subtly (and dare I say 'usefully') incorporated in animated menu systems, and display standards began to be accepted and adopted. Bulky, text-laden buttons gave way to cleaner and more user-friendly icons, and designers began to place more emphasis on typography while enjoying more freedoms to explore their creativity in a more raw, abstract manner. It was also about this time that the newly discovered ubiquity of 'the web' was made all the more prolific as dot com advertising began to go mainstream media. Before we knew it, we had somehow adopted this new media as our own, digging-in with a voracious, viral appetite.

Alas, we all have to grow up... and web design is no exception to the rule. The hipster wannabe freedom of quirky artists eventually matured, coming full-circle to the 'content is king' mentality that fostered the birth of Cyberspace to begin with. Semantic structure, usability guidelines, and best-practice standards rose to power, taking their places on thrones they occupy to this very day. Yes, different is still good... and yes, we designers are (and will mostly likely continue to be) that same quirky sort of self-proclaimed artisans. What has changed however, is our central understanding of effective web design as being an efficient problem solving mechanism and model of communication; a lesson who’s rules were established only after all other rules had been broken.

With the steady influx of “smart” devices on the market, people are able to access the Internet anytime, from any place. Tablets, pads, and smart phones now enable users to connect at-will for a drive down the Information Superhighway, and this trend will only increase as these technologies become more and more ubiquitous.

As a result, web developers are faced with the challenge of creating web content that can be viewed at numerous resolutions and navigated via mouse, keyboard and touch-screen. Unchecked, most websites that work at the office on a 24” flat-screen will more than likely prove to be an iNightmare whence viewed via the latest smart-gadget. Enter “responsive design”.

Responsive Web Design centers on the notion of design responding to a user's viewing environment; specifically where screen size, orientation, platform, and overall best practices are concerned. It is a concept that usually involves a mixture of flexible layout grids, content optimization and scaling, and use of “media queries” via CSS (Cascading Style Sheets). As a website visitor changes from desktop to laptop, or from tablet to smart phone, a “responsive” site also changes... adapting in size and shape to the new viewing environment. Put another way, the goal is a website that “responds” to the myriad visual frameworks of its user. Below is a basic demonstration:

Samples of how this version of BenKeszler.com looks when viewed at some of the common device resolutions.

Until recently, a developer's solution to a multi-resolution audience was to either

a.) create multiple versions of a client site, each one specifically catered to a given resolution, or

b.) design for the most commonly used monitor settings and “hope for the best”.

But as the “smart_____” trend continues to boom, it has become clear that neither path is acceptable. And so the challenge becomes how to effectively construct websites that are flexibly accessible in both form and function. Simply put, how a user interacts with web content changes as drastically as how said content is viewed from device to device. This becomes evident when specific focus is placed on mouse vs. touchscreen navigation demands, the restructuring (and optimization) of information hierarchy, and how general usage agendas differ.

POCKET-POWERED RESULTS:
Smartphone users access the Internet in a much more "results-driven" manner than the traditional desk-bound web surfer. The former are more often than not seeking immediate answers, directions, or real-time services/transactions while on the go, and therefore need a streamlined path to get from "A" to "B". As a result, clear, concise content is even more paramount, while visual design aesthetics (such as detailed background images, crispy logos and spiffy animated menus) not only lose their former luster, but in fact interfere with the user's web experience. Fear not friends, for the responsive site addresses this once again with media queries. Looking again at the above image, we see how a responsive site displayed on the smaller devices not only scales to fit, but also strategically omits graphical content while adjusting the information hierarchy.

NAVIGATION:
As the view-able area of a site shrinks from the office flat-screen to the pocket smartphone, it goes without saying that the inherent value of said real estate increases. I decided to address this by first redesigning and relocating the navigation area with two primary objectives... to

a.) free-up as much prime real estate as possible for smartphone visitors, and

b.) to more accurately resemble the interaction methods already built-in to the smartphone.

My solution? Fixed-position navigation moved out of the "upper-fold" yet remain readily available in both landscape and portrait smartphone views (below).

Also worthy of mentioning, this revised navigation does NOT include any sort of rollover animation or highlighting, for such things have no place in the touch-screen universe!

FINAL STREAMLINING:
Lastly you will notice some changes (or rather 'omissions') where site imagery is concerned... which not only creates more upper-fold space, but also allows the smartphone version to be smaller in size and load quicker; two ESSENTIAL considerations that MUST be made for your mobile audience.

And so we have an introductory practical example of responsive design at work. Whether or not similar design strategies should be implemented on your website is a choice left to you. It is however a decision that should be made only after carefully considering things like your user demographic, traffic analysis, and overall web product/service provision goals.

Saying goodbye to 2011 could be - for some - a bittersweet affair. I however, find myself looking forward to 2012 with 100% of my soul. That certain "fresh start" sentiment (albeit replete with cliches) has taken hold within me, and I feel excited about the possibilities and challenges that await. This is not to say that 2011 was uneventful, uninspiring, or otherwise uninteresting; quite the contrary in fact. For reasons unknown however, I'm just completely focused on the near horizon, anxious to meet whatever lies ahead. Good for the soul perhaps... yet not-so-good for the "year in review" entry I was set to compose for you! So I thought we might try something different.

Looking forward to 2012, I am making it my personal challenge to do the following:

Continue to explore the finer aspects of HTML5 and what it can do for your site.

Begin constructing and posting more project/task-specific tutorials

Finish construction on the forthcoming BenKeszler.com Facebook Flash game

Learn to play a new instrument

While not an all-inclusive task-list, the above is sure to keep me busy in the months to come! How about you? What challenges/projects/goals are you planning to initiate/re-visit in 2012?We would love to hear from you!

Thanks to all for your support and good wishes, and here's to you all having the most productive and prosperous 2012 possible!

Color selection and usage mark the keystones of any design. The visual harmony and general “feeling” prompted in the user can either be successful - or fail completely – depending largely on which colors are used where. Following is an introduction to basic color theory – a color “cheat-sheet” if you will - referencing how said theory is applicable to any visual design.