As designers during these rapidly changing times it is more important than ever to exercise flexibility and adaptability in the approach we take to our work. With the competitive nature of our business, the ever evolving vehicles of communication and the state of our recovering economy, our clients have become pretty demanding when it comes to us delivering the goods. If we can’t deliver to their expectations, they know someone else is waiting in the wings, hungry and ready to take over. 

I said it before and I’ll continue to say it “one size does not fit all”. Each client we work for and every individual project we work on has unique objectives and goals and therefore we need to make sure that we take a unique approach to each one and that means being flexible. 

A lot of times it’s smooth sailing. Good ideas flow quickly and client “buy-in” happens without a hitch. However, there are those occasions when things become a little more challenging, when it takes more time and effort than normal to deliver “the goods”. It’s during these times that we ask ourselves “what happened?” The reality is a number of things could have happened and the fact of matter is you still need to deliver. Great designers find a way to adapt on the fly, extending themselves further and further with each new challenge that’s thrown their way. In the end it’s a win-win situation, the client gets delivery of a project and the designer has taken the opportunity to grow and work beyond their past limitations. We are fortunate enough at 76design to have on staff a group of great designers that have shown me the true meaning of adaptability and flexibility. I’d like to take this opportunity to say, “thanks guys!”

Being a designer is not always easy. Deadlines can be tight, projects can be challenging, clients can be really demanding. But being adaptable in the face of challenge makes it easier for everyone involved and that’s a good thing.

To further illustrate my point I leave you with a quote from the late great Bruce Lee, one of the greatest martial artists in history, “Be formless, shapeless like water. Now you put water in a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Water can flow or it can crash. Be water my friend.” 

Sometimes, to keep myself sane during long work days, I tend to doodle and draw — it’s just what I do and have done since a wee lad.
I was going through some old notebooks and found a few characatures of some co-workers I sketched.
More to come …

I swear these wallpapers are going to lose their 76-theme sometime soon. In the meantime, here’s a blue monstrosity of triangles intermingled with the 76 explosion.

1920×1200 download.

How many people does it take to handle the crux that is a paper jam? Turns out – all 9 of us housed in the pit of 76design. In a surge of energy usually reserved for client work, we turned our attention to a self-imposed initiative. Three hours of diligence produces a product, a history behind the product, and a website dedicated to solving an issue that riddles offices across the plant. It’s with our pleasure that we introduce PC Loadletter’s Paper Jam: the real full-page spread.

]]> http://76design.com/shiftcontrol/index.php/2010/01/13/making-final-marks/feed/ 2 http://76design.com/shiftcontrol/index.php/2010/01/12/retro-goodness/ http://76design.com/shiftcontrol/index.php/2010/01/12/retro-goodness/#comments Wed, 13 Jan 2010 04:27:18 +0000 Ben Watts http://76design.com/shiftcontrol/?p=603

Happy Tuesday night, here’s a wallpaper!

Oh snap! See what I did there?

1920×1200 download

A good friend of ours and past comrade, Matt Wallace of paradisal.ca fame, a stock-photography agency, is launching his annual Paradisal* poster design contest.

There is no cost to enter. The winners get 25% of each sale once they’re printed, a $300 gift certificate for use at www.paradisal.ca and 5 printed copies of their design and 1 of the other winning design. Last year there were 64 submissions with entries coming in from all over the world.

Maybe 76design will simply enter the results of our Aural Design Challenge.

Last year’s winner

For the second year in a row some coworkers and I have decided to be thrifty with our holiday gift exchange by designing and creating personalized CDs filled with music that we think the other person will like.

It started off with a hat, tiny pieces of paper, and the Christmas Party. It was then that we drew the name of our sucker, err, recipient. The hardest part, in my opinion, is trying to figure out what the giftee will like on their CD. There are several people in the office who are extremely transparent with their choice of music, but then there are others who never leave their iPod alone long enough to take a peek.

We’re lucky enough to be a tight knit crew, so the CDs always seem to have a personal touch that ends up being a big success. Our collection of disc cover designs this year included favourite fonts, colours, even condiments (images, and believe it or not, actual fresh pepper).

For the past few hours it’s been pretty quiet in the office except for the headphones of everyone listening to their CDs. Well, that and the munching of Brett’s mom’s delicious cookies.

Ben Watts and I were grouped together for this round of Skunkworks. Our idea was to figure out a way to port the board game Battleship onto twitter. The primary way of playing the game had to include twitter, a web interface could be used to augment the experience, but a player should be able to play entirely through twitter.

Enter BattleTwip!

We refined the objective of the game to fit better with the social media aspects of Twitter. Typically, a battleship game is played between two players in close proximity. Twitter includes millions of users all around the world. To limit the game to the traditional two players would be missing the opportunity to take advantage of the potential players on Twitter.

In order to make games playable by more users, our solution was to pit all of twitter against the “twitter bot” running the game. Once a new game was created, twitterers could take shots at the board and the bot would inform them if the shot was a hit or a miss.

At this point, we designed a high level flow diagram for the game in order to better understand the work flow involved. Click here to check out the flow chart.

The twitter bot would monitor tweets from players and scan them for moves. Once adding those moves to the game, it would update the players of the progress by tweeting about it. This solved the challenge of being able to play entirely over twitter.

Playing over twitter is great, but can you really be expected to keep track of all your moves from a list of tweets? In order to make the game easier to track and more fun to play, we created a web interface to display the general progress of the game. This displays all the recorded hits so far, a player leader board, and the latest tweets from the bot.

The Twitter Bot

Here’s the basic logic the twitter bot follows on each run:

1. Load the current active game from the database.
2. Use the Twitter API to look for battleship “shots” in @replies and direct messages from twitter users. Shots are considered any string that specifies a point on the battleship board. Examples of shots are “A3″ and “J10″.
3. If any messages come from Twitter users that the bot is not currently following, requests will be sent to the API to follow these users. This will allow them to direct message the bot in the future.
4. The collection of moves gathered from twitter is added to the current game. These moves are classified into one of three categories: miss, hit and sink.
5. After moves are classified, the bot will tweet about each one and indicate if it was a hit or sink. Misses are simply claimed to have missed and the board position is not indicated.

Web Interface

So, playing battleship solely over twitter is great, but it doesn’t really lend itself to seeing the progress of the game. For this, we created a nice web frontend that displays the game progress on a battleship game board.

The web interface is built on top of the Zend Framework and uses AMF to provide the communication between flash and the backend.

Avoiding Twitter Spam

A common complaint about twitter based games is the level of spam they introduce into your twitter stream. Games like @playspymaster came under a lot of scrutiny for this when first released. They have since cleaned things up.

In order to avoid spamming people from the beginning, the following policies were adopted:

• Users can play the game by replying to the bot, or by direct messaging it. This means your followers won’t hate you for playing the game.
• The bot doesn’t do any questionable stuff like tweet on your behalf or give you points for tweeting about it.

How about a demo?

Sure! It’s up and running at http://76design.com/battletwip. Have fun, but remember this is definitely not ready for prime-time at this point :)

Where to go from here?

Battletwip was a great experience. It was fun using the twitter API to create a game. I think it has potential to be used, so we’re going to let people play with it a bit and see what feedback we get. We don’t have any grand plans at this point, but we’ll see what happens!

Overview

This first round of 76design Skunkworks gave us (Jordan Boesch and Shaun Scanlon, both web developers) the opportunity to utilize the Twitter API to create a fun project.

We decided to try to integrate Twitter with Mozilla Jetpack.  According to the Jetpack website, Jetpack is “a newly formed experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play.”

What this means is that Jetpack is an API which allows the average web developer to develop add-ons for the Mozilla Firefox browser using languages they already use on an every day basis.   This was an attractive feature of Jetpack as web developers.

Project Phases

Concept Development / Brainstorm
After some brainstorming we decided to develop an unobtrusive twitter feed add-on in the style of a sports highlight ticker.  This was to be a collapsible bar at the bottom of your Firefox browser which could display new tweets and past tweets.  The tweets were to scroll in a manner similar to a sports or news ticker.

Design Concept
Jordan applied his design skills to develop a concept in Photoshop.

During this phase we came up with the idea of a news flash for new tweets.

Prototype
The work for this phase was shared between us.   It involved taking the Photoshop mockup and converting it to a regular HTML/Javascript/CSS file to be used in a regular browser.    We were able to get the basic logic done in creating the prototype.

Jetpack Integration / QA
We found this was the most difficult phase.   Jetpack has specific JavaScript hooks that are used to set the status bar icon for the add-on and to handle the initial loading of the JavaScript.

Within the scope/context of Jetpack a few of JavaScript’s default variables (such as “window”) were not accessible so we had to look for alternatives.   We also tried to extend the basic functionality of the prototype.   The extension of functionality required a lot of additional quality assurance time.

Challenges

• Jetpack development must be tested in the browser
  • The Jetpack plugin allows for development of the browser which is great because we can use common web development debugging tools
  • All code must be entered within a tiny textarea box on a webpage
  • This is very cumbersome because it is next to impossible to read an entire plugin within the box
  • We had to essentially work in a separate text editor and copy and paste into the box on the website
  • This makes for a frustrating debugging process

• Working on a single JavaScript file in a team environment
  • A Jetpack plugin must be self contained within one JavaScript file
  • The Jetpack library does allow access to the JQuery JavaScript library which allows for easy manipulation of HTML and CSS
  • Even with the ability to use JQuery, this set up does not lend itself well to team development
  • The fact that there is no separation of logic and visual layers into separate files makes it very difficult to contribute to the file without conflicting with teammates’ changes
  • As well, Images must be hosted on a separate server and linked to from the JavaScript
  • This makes for a cumbersome development process
• Jetpack is really only JavaScript-like, it’s not pure JavaScript
  • Because of the scope of being within the Jetpack API we found out the hard way that not all of JavaScript’s built in variables (such as the “window” variable) are accessible
  • This required us to revamp code to work around these unexpected roadblocks

What is next?

We could:

• Extend the current functionality to finish off the “news flashes” feature.
• Add some more spark to the animation and effects.
• Re-brand this type of concept to be used for client projects.    Some clients may be interested in having a Firefox plugin to market their brand.

Conclusion

Jetpack while an excellent concept probably needs some work to allow for easier development.   Editing a huge JavaScript file in a small textarea box on a webpage isn’t very realistic.

Other plug-ins, such as those created for Windows Sidebar or Google Desktop, are comprised of several files (similar to regular web development) and are then added to a Zip archive file.  This concept is a much more realistic development scenario.

We would not recommend Jetpack development for group projects, but could be useful for single developer projects.