shift+control

76design's blog

Paradisal* poster design contest

Posted by Brett Tackaberry on January 8th, 2010 Comments 2 Comments

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

Judging a Holiday CD by its Cover

Posted by ryan on December 18th, 2009 Comments 2 Comments

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).

76design/Thornley Fallis Holiday CD Exchange

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.

Skunkworks – Twitter Project – Battleship!!

Posted by Steve Lounsbury on December 14th, 2009 Comments No comments

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.

battletwip

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!

Skunkworks – Twitter Project – Integration with Mozilla JetPack

Posted by shaun on December 11th, 2009 Comments No comments

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.
jetpack screenshot

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.

76design helps to make wishes come true

Posted by Brett Tackaberry on November 27th, 2009 Comments 1 Comment

091025-m4k09-8x11-72dpi

Campaign design by our very own Ben Watts.

A strange yet mysterious veil falls gently over the 76design office in Ottawa every year in the month of November. It is a veil but more accurately it is a mustache – many mustaches. Yes, Mustaches!

We grow mustaches not only for the style and sophistication but for a truly greater purpose – the enhanced visual appeal is just the icing on the cake. We are growing for Mustaches for Kids (M4K) to raise money for Make a Wish Eastern Ontario. Our mustaches make wishes come true – read more on how the helped some local kids in need of a wish.

M4K has grown and matured within the walls of 76design. Legend has it that M4K was in fact brought to Ottawa and nurtured to greatness by the shameless dedication of 76designers. Over the years we’ve seen many a stache. Including our fearless leader, Joseph Thornley, who is growing with us yet again – and matching any donation to him. But all fun aside, we’re proud to have contributed to M4K and Make a Wish.

M4K is now in its 5th year in Ottawa and we’ve raised a combined amount of $50,000. Last year we raised $20,000 and this year, with over 100 growers, we are aiming at $25,000.

Help us make our mustaches worth more than they look. You don’t need a mustache to help.



TO NEW BEGINNINGS…

Posted by Leisha on November 18th, 2009 Comments No comments

I am pleased to announce  the launch of  Thornley Fallis & 76design’s new online presence.

Our new websites, conceptualized, designed and developed by  our team of creative masterminds and technology all-stars, exemplifies our capacity to push the limits of innovation  in the world of social media and digital marketing.

Thornley Fallis & 76design is made up of individuals with fun, smart and professional personalities; personalities that have all contributed to the success of marketing & communications projects. To fully demonstrate  the range of personalities, talent and intelligence our  team has to offer, we’ve done something  a little outside the box.  Something very brave… or maybe something very stupid – we’ll let you know ;-)

We’ve created a live LifeStream for every one of our employees. This is more than just a standard funny profile picture and biography.  It is an aggregate of their work and online profile, intended to paint a picture of who they are, what they do, what they think and what they are interested in.

To explore the diverse and unique characters at Thornley Fallis and jokers at 76design, take a look through our people profiles and find out who you could be working with on your next project.

Not only is our team exceptionally talented (and good-looking), we are experienced & passionate about the work we do.  While adventuring through our People pages, zoom over to the Work & Services sections to see what Thornley Fallis & 76design has to offer.

My colleagues and I hope you enjoy perusing through our new sites.

Oh and one more thing… if you like what you see, don’t hesitate to call us, we’d love to hear from you!