Note: I do not in anyway fancy myself the supreme expert of Design. Nor do I think anyone is or ever can be. Design is a living, breathing entity that will forever evolve, push limits, and astound. This blog is simply some exercises that can help broaden your horizons even if it’s the slightest bit. Also keep in mind, they are in no particular order. That being said, on to the list!

1. Do online tutorials.
The dreaded vacuum. As designers, we avoid it like the plague (or should). We strive to break out of our own design shells constantly, but what about our Photoshop shells? Photoshop is such a unique and complex tool, sometimes when we learn how to do something one way, we stick with it. Even if it’s not the most efficient way. Try doing something strange and off the wall – like setting someone on fire. You might learn something new about photoshop and/or a more efficient way to do something.

2. Use a design style from one of the greats.
Sometimes it’s not enough just to look at inspiring pieces from the great graphic designers throughout history; sometimes you need to scoop it up and play with it. Try designing in a style that is opposite of your own. If your design is clean and precise, try designing a piece inspired by Stefan Sagmeister or David Carson. If you love wild and crazy design, try designing something inspired by Josef Muller-Brockmann or Yusaku Kamekura. Obviously, I don’t mean recreating the works. Use some elements and the general style to make something new and unique. It will challenge you and force you to think differently.

3. Use colors you rarely use.
Look at old designs. Do you have a tendency to use blues and grays? Design a piece that is only oranges and yellows. Go to Kuler and find a crazy color palate and stick with it. Splash around in the color wheel and don’t be afraid to go crazy. Sometimes you’ll discover use of color you were afraid to use before.

4. Design upside-down.
I am constantly guilty of this: I start a homepage design and I whip up a heading and navigation that I love. I gain momentum and pretty soon I’m almost done with the design. Oh yeah, I need to design the footer. Well, everything else looks great, so I’ll just throw in a bar of color with text links and call it done. Who scrolls all the way down to the bottom anyway? What? What am I thinking? My design should have love and attention from top to bottom. That’s what makes a truly inspired design. A way to combat this is design upside-down, top to bottom (and no, I don’t mean stand on your head – but I won’t stop you if you want to try). Not only will you give extra attention to things you sometimes forget about, you’ll also approach a design in a very unique way.

5. Steal a fellow designer’s PSD
No, I don’t mean literally. Ask a fellow designer if you can borrow an old PSD of one of their designs. Only use the elements in their design and create something new(don’t add anything, don’t change colors, don’t change fonts, etc). Blow elements up, shrink elements down, do whatever you can to make it different and interesting. By limiting yourself, and using design elements you’re less familiar with, you force yourself to learn new things and see things differently.

There you have it. Obviously some of these exercises are not always going to work for client work, but try to put aside time to design just for the fun of it. Be your own client and always try and push your own limits.

First, some JavaScript background.

Skip to the good stuff

Here at Imulus, we like to namespace our JavaScript by wrapping our classes in static modules. We accomplish this by simply creating an object literal with a variety of members: classes (constructors), constants, variables and static methods.

Here is a pared down example of a simple module:

var Application = {           // the module, a static wrapper

 FXSPEED : 500,               // a constant (sort of)

 user : {                     // a nested static object
   id : 123
 },

 toggle : function(){ ... },  // a static method

 Interface : function(){      // a class

   this.initialize = function(){
     this.active = true;
     this.build();
     return this;
   }

   this.build = function(){
     ...
   }

   this.doSomething = function(){
     return "did something";
   }

   return this.initialize();
 }  

}

The benefits of this technique are obvious; it allows us to have loosely-coupled, modular code that is nicely organized, available without instantiation and protects the global namespace from pollution.

Application.active // true

Application.user.id // 123

var interface = new Application.Interface()
interface.doSomething() // 'did something'

In reality, however, one mammoth object literal in a single file is a lousy way to structure your code. Instead, what we do is organize module members into separate files in a logical fashion, å la Ruby. The module and all of its static members exist in a single file named after the module, and all of the module’s classes exist in a directory named after the module with each class file named after itself without the namespace. By using this structure, files are much easier to find because the naming convention mirrors the the module namespace.

The directory structure ends up looking like this:

|-- scripts
    |-- application.js
    |-- application
        |-- controller.js
        |-- data.js
        |-- interface.js

And the module above would be structured like this:

// scripts/application.js
// creates the wrapper module and contains all static members

var Application = Application || {
  FXSPEED : 500,
  user : {
    id : 123
  },
 toggle : function(){ ... },
}

// scripts/application/interface.js

Application.Interface = function(){
  this.initialize = function(){
    this.active = true;
    this.build();
    return this;
  }

  this.build = function(){
    ...
  }

  this.doSomething = function(){
    return "did something";
  }

  return this.initialize();
}

// scripts/application/controller.js

Application.Controller = function(){
  ...
}

You get the picture. This probably looks familiar to a Rubyist. Here’s the analog:

|-- lib
    |-- application.rb
    |-- application
        |-- interface.rb

# application.rb

module Application
 FXSPEED : 500,             

 def self.user
  { 'id' => 123 }
 end

 def self.toggle
  ...
 end
end

# application/interface.rb

module Application
  class Interface

    attr_accessor :active

    def initialize
      @active = true
      build
    end

    def build
      ...
    end

    def do_something
      'did something'
    end
  end
end

Snakes on a Train

By now it’s probably evident how much we obsess over code structure, organization and namespacing. While experimenting with CoffeeScript, this has been an ongoing concern.

This is the example from the CoffeeScript demo page:

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved " + meters + "m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

I love that Coffee has made dealing with prototypes much easier with the ‘class’ and ‘extends’ keywords. This is great, and by itself works like a charm for singular, somewhat global classes. However, for any application with a sizeable codebase this simply isn’t practical without ending up with insane class names.

The ideal solution would be to introduce a ‘module’ keyword similar to Ruby’s.

module Zoo
  class Animal
    constructor: (@name) ->

    move: (meters) ->
      alert @name + " moved " + meters + "m."

bob = new Zoo::Animal "Bob the Bird"
bob.move()

Other people agree. But there are a number of JS limitations that prevent this from being a viable solution in CoffeeScript.

The Really Good Stuff

By its own golden rule, CoffeeScript is: “It’s just JavaScript”. So, we can namespace our CoffeeScript classes in the same manner we organize our modules in vanilla JS.

Extending on the example above (ha-ha, get it?), I’ll demonstrate how to namespace your Coffee classes in a simple, elegant way.

Focusing only on the snakes for now, lets set up our basic classes.

class Animal
  constructor: (@name) ->

  move: (meters) ->
    console.log @name + " moved " + meters + "m."

class Snake extends Animal
  move: ->
    super 5

george = new Snake "George"
george.move() // George moved 5m

Now, we want to create ‘Forest’ and ‘Savanna’ modules that have a habitat and snakes of their own.

Just like JavaScript, we could wrap all of the module members in an object literal:

Forest =
  habitat: "dense highland dotted with lakes and streams"
  Snake: class extends Snake
    move: ->
      super 10

george = new Forest.Snake "George"
george.move() // George moved 5m.

But we would run into the same problem when the codebase reaches any kind of scale: enormous, single-file object literals. So let’s introduce a new function for creating module members.

module = (name) ->
  global[name] = global[name] or {}

(Yes, I am aware that this is attaching the objects to the global namespace. This is what we want. It allows us to add members to the module later.)

Now we can use the ‘module’ function like this:

module 'Forest'

Forest.habitat = "dense highland dotted with lakes and streams"

Forest.Snake = class extends Snake
 move: ->
   super 10

george = new Forest.Snake "George"
george.move() // George moved 10m.

Pretty elegant, right? Additionally, by using the ‘module’ function we can now organize our code into multiple files:

module = (name) ->
  global[name] = global[name] or {}

# src/animals.coffee
class Animal
  constructor: (@name) ->

  move: (meters) ->
    console.log @name + " moved " + meters + "m."

class Snake extends Animal
  move: (meters) ->
    super meters

# src/forest/snake.coffee
module 'Forest'

Forest.habitat = "dense highland dotted with lakes and streams"

Forest.Snake = class extends Snake
  move: (meters)->
    @distance = meters || 5
    super @distance

# src/savanna/snake.coffee
module 'Savanna'

Savanna.habitat = "grassy woodland small or widely spaced trees"

Savanna.Snake = class extends Snake
  move: (meters)->
    @distance = meters || 10
    super @distance

george = new Forest.Snake "George"
george.move() // George moved 5m

scott = new Savanna.Snake "Scott"
scott.move() // Scott moved 10m

We can also extend standalone classes with module classes:

class Python extends Savanna.Snake
  constructor: ->
    super
    console.log "I am #{@name} the python."
    console.log "I live in the savanna,
    where it is #{Savanna.habitat}."

class Cobra extends Forest.Snake
  constructor: ->
    super
    console.log "I am #{@name} the cobra."
    console.log "I live in the Forest,
      where it is #{Forest.habitat}."

john = new Python "John"
// I am John the python.
// I live in the savanna,
// where it is grassy woodland small or widely spaced trees.

bruce = new Cobra "Bruce"
// I am Bruce the cobra.
// I live in the forest,
// where it is dense highland dotted with lakes and streams.

Process is like most things in life, it needs balance. The hard part is determining where the right balance is for a company.

Companies that focus too heavily on process can slip into the all-to-common roll of being a workhorse. Producing medium quality work that lacks feel and creativity. Yet, companies that can’t reign in certain aspects of process tend to lose money and long-term durability. The key lies in finding a medium.

Implementation of a strict process can help companies rebound in times when individuals aren’t present. Yet, companies must be careful. The ability to swap individuals in and out has a cost. There’s a reason small businesses sometimes change the game all together and not just the rules. Small companies thrive on being nimble and innovative. These two things are the result of talented individuals working together as a family. If you remove this aspect from a company, over time it will bloat, lose drive, and eventually quality will diminish.

Case in point, rather than: check your approach, verify other team members understand and agree, confirm the customer is on board, document it, and then start. It’s better to just do it. If the result is good: add it to your toolshed, document it, and teach others. If not, eat crow, fix it, and move on. My feeling is most of the time this gamble pays off. Especially if your people are high caliber and your customer buys into the strategy.

However, for small companies it’s a facade to pretend that you can replace a family member and keep moving forward like nothing happened. A company, especially one that strives to break barriers, will always be hurt by the loss of a key individual. There is no way around this. The goal of a good process shouldn’t be to avoid this all together, but rather to mitigate its damage. Employee happiness, company profit, high quality work, and long-term sustainability should be enhanced by process. Not stifled. This… is not easy.

Best of luck to all companies (including us) who are trying to combat this challenge

As the internet landscape has evolved at a blistering pace, universities have been left behind and often teaching skills and concepts that are years out of date. I was excited to read about The University of Colorado’s Boulder Digital Work program. Their stated mission is, “developing today and tomorrow’s digital leaders and entrepreneurs.”

This sounds like a very forward thinking program and hopefully it will produce a lot of local talent with a much better understanding of the digital realm than most schools offer today. Courses include Interaction Design, Experience Design, Digital Branding, Social Networks, and Software Development.

I hope this program is successful and that it will help to continue the growth of Boulder as a hub for innovation.

Over the past few years the landscape of home entertainment has been changing. As broadband internet access has found its way into households across the country the utilization of on-demand content is becoming commonplace.

Netflix, who we’ve criticized before and been pleasantly surprised by their response, has been really on top of capturing this next generation of home entertainment. In fact, it seems like they’ve secretly been waiting for this moment since the incarnation of their brand “Internet Flicks”.

When I first heard of Netflix I was in early high school, my friend’s parents had just signed up for this new service that delivered movies via mail. I was confused, how in the world did the name Netflix really correspond to mail delivery movies? Further, was it really worth waiting two days to get a movie when you could go to a local store and get it in 30 minutes? Well, as they say, the proof was in the pudding. As the internet boomed in the early 2000’s Netflix became a real time rival to those other rental services such as broke-ass-buster Blockbuster and Hollywood Video.

However, it wasn’t until this past year that I really started to respect Netflix as a company with vision. In fact, I find it almost creepy how well they’ve positioned themselves in today’s current home entertainment market.

I imagine the idea of on-demand content has to be terrifying to most rental services. With pay-per-view, Hulu, torrenting, and iTunes the idea of brick and mortar rental is on the way out. And while DVD mail delivery isn’t quite as dead as store rental it definitely has a limited lifespan.

Here’s where Netflix is different from a lot of companies. They recognized their business model was dying and instead of whining about it they acted. They didn’t whine about liscensing costs, they didn’t worry about not having a media center product. Instead they took their vision and started working. Giving their customers an opportunity to watch movies instantly on their PC’s for free. Hear that? I said FREE. By not expecting immediate returns on their investment they captured a substantial portion of the online steaming market share and the buzz around it.

It comes down to this. How many people would have been willing to pay an extra $10 a month to try online movie streaming? Maybe a few. How many were willing to try it for free? Everybody.

Netflix, whose name now seems surprisingly perfect for their service, is suddenly a leader in the online delivery world. Since they started delivering online content they’ve cut deals with a number of home media center device manufactures. Including Roku, a few Blu-ray players, and Microsoft’s Xbox. Further, they’ve bundled their online delivery with their plans at no additional cost (I imagine they make up some money by not having to use as much postage) and they’ve started adding HD quality (720p) content.

In essence, Netflix lined up their challenges, picked up a bat, and started knocking them out of the park one by one.

Now granted the battle for next generation content delivery isn’t over, but it seems clear that Netflix isn’t holding the losing hand. They’ve played their cards perfectly up to here and I can happily say that I’m a user of their service and it rocks.