Test-driving the usability of a food-tech startup’s new API.

When the Food Genius team moved into an empty project space at IDEO Chicago to become our first Startup-in-Residence, we were cautiously optimistic. This co-locate-with-startups thing was new to both of us. Would they like us? Would we like them? It was like meeting our first college roommate all over again, only this one had a complex algorithm that tracked and classified more than 14 million restaurant menu items. Swoon! We love nerds who design with data.

Fresh from Excelerate Labs’ 2011 Summer Program, an intensive accelerator for startups where some IDEOers were acting as mentors, the Food Genius team had just decided to pivot from being a consumer-facing mobile app provider—a so-called “Netflix for Foodies”—to being an API provider focused on customers in the food industry and app development worlds. Their mission: serve up real-time data to industry insiders hungry to get ahead of food trends. Their key ingredients: food-related data from Facebook, Twitter, Yelp!, and other social web services—information like people’s favorite dishes, trendy new ingredients, and red-hot flavor pairings.

For 14 weeks, the Food Genius team worked around the clock developing their API and an industry-facing trends dashboard with the help of our digital and interaction designers. The goal was to launch an API that both developers and food industry insiders would love as quickly as possible. Yikes! Less bacon! More programming!

As Food Genius’ “graduation” date grew closer, and their API more robust, we started brainstorming ways they could highlight the capabilities of their API. What started out as a simple data visualization of all the places to get curry in Chicago, soon ballooned into a 12-person, three-hour, live-tweeting Curry Crawl to find the best curry in the city by using the Food Genius API.

To prepare, we tricked out the back of a U-Haul to look like a mobile Indian restaurant with yards of fabric and cans of Super 77, while Food Genius created a custom mobile app. As a vintage jam box pumped psychedelic Indian funk, the team piled into the back of the truck and “fed” the API our taste preferences. (Justin Massa, CEO of Food Genius, dressed up like a “server” (get it?) to personify the API.) First stop: Mughal India! We ate the dishes suggested. Voted. Tweeted. The API served up new suggestions. Four restaurants, a couple miles, and nine curries later, we had a clear favorite: the Chicken Makhani at Jaipur. (You can read an archive of our Tweets here.)

After our quest (and a few bottles of Goo Gone) we returned the U-Haul to its natural state and moved on to new adventures. Luckily, our talented in-house filmmaker Adam Geremia created the awesome video at the top of this post, best watched with the volume cranked to 11.

Way back in December, some of us in the IDEO London studio started talking in a pub about some of the ideas arising out of OpenIDEO and its challenges for social good.

We wondered: How could we help the digital community build out more of these winning tech and design solutions? What would happen if we got passionate designers, hackers, and digital community members in a room with no distractions one weekend, all working towards creating physical & digital prototypes for social good? And, could we all play around with Arduino and the 3-D printer while we were at it?

Originally we thought of doing a hackathon. Then we decided to push the concept to its next iteration. How could we bring together multidisciplinary weekend project teams—not just software engineers and digital designers, but also industrial designers, architects, and problem solvers from different backgrounds? Could we create a new kind of design-driven collaborative event? Inspired by IDEO’s own maker culture, the DIY community at Maker Faire, and Silicon Valley hackathons, we decided to experiment with the concept. We called this prototype event a “Make-a-thon.”

The result was a unique London pop-up event that produced some truly original concepts and meaningful digital and physical prototypes. We hosted about 60 makers and hackers in the IDEO London studio—including 1/3 IDEOers and 2/3 UK creative community members. We used EventBrite to keep track of invitations and had a waiting list of about 65 people. Here’s what we made in a 1.5 days—and what we learned.

5 tips we learned from the prototype IDEO Make-a-thon:

1) Designing a Make-a-thon, like designing a digital community, is about creating the right framework in which people can be optimistic, collaborative, and creative. Think multidisciplinary teams and multiple project briefs, not just software engineers with one thorny problem to solve in 48 hours.

2) Include inspiration breaks, not just tea breaks. Brendan Dawes and Tom Hulme each gave great talks about a specific aspect of maker culture, along with IDEO designers who gave quick mini-talks on various aspects of the design process like lo-fi prototyping and user research. These ‘inspiration breaks’ turn out to be meaningful and important elements of a Make-a-thon as they give teams a bit of a mental break and help to nourish the imagination.

3) Build and visualize quickly, and work on physical and digital prototypes in conjunction. Join teams who have complementary skills or those who are as passionate about the idea as you are. A visual designer might be able to sketch out the experience where a coder could bring it to life through a rough-and-ready prototype. Each collaborator can add a new facet to the idea in order to make it compelling and real.

4) Balance steering the teams with letting them openly explore. Sometimes teams can get bogged down in discussions and decision-making, and it’s important to nudge them at the right moments towards capturing their thoughts and plans. Having the right tools in place will help. We found that creating team project worksheets helped team members focus while refining their prototypes prior to final presentations.

5) Never underestimate the power of team names, Twitterfall, and a good night’s sleep. We found that once teams chose their own names, it was easier for them to collaborate. Good to know! A few other seemingly small choices that made a big (positive) impact: Digital media and photos: Using Twitterfall and the hashtag #ideomake we kept real-time Twitter feedback projected on the studio wall, visible to all participants. It was great to see global conversations going on about the event while everyone was in the space. Music: Tunes can set the mood and keep the buzz alive, choose your playlist well and keep it going. Sleep: We made sure to send people home for a good night’s sleep, so they could come back mentally and physically refreshed the next day. Food: Our experience team kept the food healthy and plentiful, with lots of treats in between. Awards: These got a very positive response from participants! We loved giving out awards as much as teams loved receiving them.

Every single person who participated brought a different set of skills to the IDEO London Make-a-thon. So, we made badges to help them identify their unique talents. To celebrate the uniqueness of each participant, they could wear a bouquet of skills badges, including some silly ones like pigeon fancier. We’ve made these badges open source so you can download the files here and make your own! If you do use them or add to the set, don’t forget to share your photos on our discussion forum!

Several participants commented that the multidisciplinary mix of skills made the Make-a-thon a unique community experience. As Amnesty International’s Digital Communications Director, Owen Valentine Pringle, put it afterward: “What made the IDEO Make-a-thon special was the fact that a variety of individuals brought their expertise to bear in an attempt to solve a very specific problem, in this instance, what technology can do to limit the impact of unlawful detention. But whilst this problem focused on one area of human rights, it demonstrated a fundamental change in the way a global NGO, such as Amnesty, regards the role of technology in helping it to achieve its core objectives; not simply for message amplification, but for social change itself.”

And yes, we did get to play with Arduino and the 3D printer. The Financial Times featured one Arduino-enabled IDEO Make-a-thon prototype in its Innovation Barometer column earlier this month, calling it: “a new smart bicycle light that warns the cyclist of a vehicle’s proximity by sounding a siren and flashing a sad face to warn the driver.”

The Make-a-thon opened with 8 OpenIDEO design briefs. Below are links back to the original briefs, and descriptions of the IDEO Make-a-thon prototypes that resulted:

Village People

Brief: The Future of the Village Fête
Team: Brendan Dawes, Charlene Lam, Emilie Sheehan, Lawrence Willmott, Nazia Parvez, Neil Churcher, Robin Howie, Ivo Vos, Chris Grantham.

Starting with the question ‘What is the urban fête?’ The Village People team created a new grassroots movement where London locals can plan and stage their own fête interventions. Prototypes included a fantastic brand, video testimonials from locals and a concrete ‘deaddrop’ where locals can share digital fête music.

Check out Charlene Lam’s blog writeup of her experience at http://www.creativeclerkenwell.com/recap-ideo-london-make-a-thon/

Team Xtreme

Brief: Boris Bikes for Tourists
Team:  Basil Safwat, Benjamin Redford, Kathy Stawarz, Hadley Beeman, James Croft, Jude Pullen, Michael Stillwell, Ben Forman, Yuni Lee.

Team Xtreme was tasked with improving the Boris Bike rental scheme for London visitors. They created a number of innovative prototypes including a receipt docket that gives you a sightseeing cycle route and a custom 3D printed clip that can be used to mount cameras, maps, and flowers to your Boris Bike.

The book clip has been released as an open source product on Thingiverse.com, so you can download and 3D print it for yourself!

Karma Comedians

Brief: Postcode Gangs
Team: Andy Piper, Daniel Watson, Haley Stopford, Tim Burrell-Saward, Steve O’Connor, Victoria Brooks, Lydia Howland.

The Karma Comedians team sought to bring locals together through a skills-sharing interactive phone booth. They created a seamless experience prototype by joining up technologies such as Twillio, Skype, and the iPad.

Check out the open source version of the code here: https://github.com/andypiper/karma

And Tim Burrell-Saward’s writeup of the project: http://journal.timburrellsaward.com/post/18900911156/ideo-make-a-thon

Bikewell

Brief: Cycle Safety 3.0
Team: Beth Anderson, Jeremy Innes-Hopkins, Josah Emsley, Larissa Seilern, Louise Wilson, Oliver Poyntz, Yuki Machida.

The Bikewell team looked at cycle safety on London streets and created a service to teach people about cycle safety as well as a series of smart bike lights that react to cars when they’re too close, or post messages to drivers in traffic.

Check out the videos of the working prototypes of the bike light here and the wearable flashing bike lock here.

Amnesty International

As part of the Make-a-thon, we also worked with 4 briefs for Amnesty International in tackling unlawful detention. These briefs came out of the recent OpenIDEO challenge with Amnesty to create new solutions in support of those affected by unlawful detention and were developed on the day with the help of IDEOer Amy Bonsall.

Protect Yourself

Brief: Amnesty Advice Platform and Amnesty Action on Google

Protect Yourself created a live prototype of an Amnesty Checklist platform where activists, family, and friends can seek advice about unlawful detention. The team worked with Amnesty subject matter experts to create the content for these checklists as well as building the platform to host them.

Take a look at the live prototype! http://hackweekend.info/

Team: Amjad Baiazy, Ben Morgan, Dan Townsend, Danilo di Cuia, Sabrina Tucci.

Don’t Panic

The team built an alert app and platform for signaling “at risk” situations using Google Maps and HTML5 technologies. Accessible via mobile browsers by those at risk, individuals can hit the alert button to register when they’re in danger of being taken, sending their location and details. A group of volunteers monitor the platform and in turn alert the relevant organizations.

Check out the live panic button: http://panicbutton.herokuapp.com/
And the monitoring interface: http://panicbutton.herokuapp.com/notifications

Team: Bianca Hollis, Jill Irving, Zaynab Leeya

Activate

Brief: Amnesty Observer App

The team built an app to help people record and upload human rights violations. Using HTML5 and Phonegap, they were able to create a working app for the iPhone that allows users to record video or photos and upload details about the imagery to a secure server.

Team: Ilias Bartolini, Laurian Gridinoc, Ralf Rebmann, Tristam Sparks

Watchdog

A web service for determining if an ‘at risk’ activist has gone offline and may need help. The service monitors a user’s social media usage and alerts those in their network if they haven’t registered any activity for a period of time. This is a subtle way of detecting when someone may be missing, without relying on the person to be proactive.

Here’s a link to the Github repository for the service: http://github.com/junkafarian/watchdog

Team: Fergus Doyle, Gerard Rallo, Joe Lanman.

Seeing so many talented individuals come together and have the freedom to explore new ideas and create some great work together was very gratifying.

If you want to keep hacking on Make-a-thon briefs (they’re all open-source!), it’s not too late. We encourage your builds on OpenIDEO at the links below each brief here: https://openideo.zendesk.com/entries/21033302-ideo-make-a-thon-thanks-recap

If you prefer a brand new OpenIDEO challenge, we’ve just partnered with the EU’s European Commission to “strengthen the environment for web entrepreneurs” in Europe. Submit your inspirations and ideas here, and who knows, it could wind up being prototyped in a future IDEO Make-a-thon!

Our final big learning was that it takes a team of people to deliver an experience like this. The Make-a-thon brought together a team of us in the London studio to create and curate this intense creative experience:
Haiyan Zhang, Jeremy Innes-Hopkins, Steve O’Connor, Christine Hendrickson, Laura McClure, Nadine  Stares, Jamie Styles, Lorraine Clarke, Bobbie Brightman, David McDowald, Amy Bonsall, Pontus Wahlgren, Tom Hulme, Lydia Howland, Ben Forman, Yuni Lee, Ivo Vos, Chris Grantham & Andrea Koerselman.

Interesting in joining the next Make-a-thon? Send us an email with your contact details and your Maker bio to make@ideo.com

If you create something with Arduino and put it out into the world, there is no well-established link to the source. If you personally made the device, the source can get lost over time. If you didn’t create it, you could have a tough time tracking the source down. You have the physical device, why can’t it tell you where it’s code lives?

I made a tool for Arduino called “Upload-And-Retrieve-Source” that for the most part solves this problem.

Github page here, direct download link here

For background on the project and details on how it works click through to the full article.

Why is This a Real Problem?

Right now I’m working in IDEO’s Toy Lab.  To illustrate the problem, I opened a drawer an found a prototype:

Okay, so this looks like some sort of Barbie credit card swiper. What if we had an idea that was similar and I wanted to modify the source code for this? I could probably dig it up from our server, but is that the current version? What would it be called?

Zombie Prototypes

Back in 2008 Bjornn Hartmann gave a talk at Sketching In Hardware, he called this a “Zombie Prototype”: No smarts, stuck in its last embodiment forever.

How It Works

Features

-Works in OSX, Linux, and Windows

-Code Accessible Online and is Embeddable as a Github “Gist”

Because it is a gist, you can do fun stuff like embed your code in a blog, and that code will stay up to date with the source that is on the board! This also makes it a bit easier to share code with someone over the internet.

-Version Control

As a feature of gists, you get version control. This means you can track the progress of your code over time! Forget about having all those different versions floating around on your computer. Just go to the github URL you get when you upload or retrieve your source. There you will find the revisions list.

-Support for Private Accounts

After installing the tool and launching Arduino, you will find a file called “gistCredentials.txt” in the same folder as the Arduino’s “preferences.txt”. If you need help finding the folder, open Arduino’s Preferences window and select the last link:

inside this file, simply add an extra line with your personal account’s username and password in this format:

myusername=mypassword

Then, in the comments of your code you can specify which account to use like this:

-Private Gists

If you are working on something confidential, you can make the gist private. This only really makes sense if it is also on your personal account, as the general account is public. To do this you add the words “MAKE_PRIVATE_ON_GITHUB” to your comments:

-Libraries and Multiple Files:

This code supports libraries that are in the same folder as the .ino/.pde file.  (See the multiple tabs in the above example)

To Install:

Compatibility:

Open Source:

The software is licensed under the Apache License. Check out the github page, or download the tools directly.

Enjoy!

The Interaction Design and Digital community in the Bay Area has been regularly getting together after hours to inspire and learn from each other. It’s a time to play, build and be inspired. But most of all, it’s a time to have fun with friends.

Our own Amid Moradganjeh filmed and assembled a video which captures and  communicates the mood of one of our Hack Nights really well. As some of these projects evolve, we look forward to sharing them with you!

A couple of weeks ago I happened to get an email from a professor at Shizuoka University named Yoichi Nagashima. Five of his students formed “Revolution-J” where they have created five prepared Jaminators hacked with Arduinos, connected to Max/MSP patches.

Their detailed build log is in Japanese, but you can still get a basic idea of what they have done. Better yet they published all of their schematics and code.

I figured I should re-blog this because not only is it a cool open source project, but the Jaminator was an IDEO designed toy guitar / drum set from 1992. I’d say it basically is the full embodiment of the word “rad” as is confirmed in the press photo after the jump:

Remarkably, I’m sitting next to a new in box Jaminator as I type.  When I got word of this project I sent them a photo of the label of the box and they turned it into this incredible flyer:

Here are some videos that they produced about making the guitars and performing:

Video: Making of “Jami-Girls’ Band”

Video: Jami-Girls Band “Revolution-J”

(embedding was disabled)

Nice work!

For halloween, each IDEO location held a one-hour pumpkin carving competition. I thought it would be interesting to see how much tech I could jam into a pumpkin within the time limit. Luckily, I had an old pneumatics kit under my desk and recently stumbled upon an incredibly simple way to get my iPhone to talk to Arduino. I was able to conceptualize, build, and program this wirelessly-controlled-pneumatic-eye-popping pumpkin in just over an hour, barely missing the deadline but experiencing how powerful these low fidelity prototyping tools could be.

Learn more after the jump…

There are a few ways to get an iPhone to talk to an Arduino, but none are as quick and simple as pairing up the mobile app TouchOSC (for Android and iOS) with Processing. The control system is practically plug and play and very minimal coding knowledge necessary to get up and running (so don’t be afraid if you’re new to the game).

This setup has been around for a few years but it hasn’t gained much traction for its potential value in low fidelity prototypes. The time investment is incredibly low compared to any other phone/Arduino strategies, serving as a great early filter for interaction concepts or realizing your wildest dreams of an iPhone controlled robo-pumpkin.

To make one thing clear: this prototyping method has a bit of  ‘smoke and mirrors’  in that the smartphone doesn’t directly communicate with the Arduino, but uses a computer as a receiver and translator between the two.  There are a few ways to take out the middleman but they take a bit more setup and a few more tools that would make the build lengthier.

TouchOSC is a great app for iPhone and Android that helps make this entire process incredibly easy on the interface side. The program allows you to build a basic interface via a desktop app  “TouchOSC Editor”. You can compile basic interaction objects (buttons, toggles, faders, etc…) onto an iPhone/iPod Touch/iPad screen which you can then easily transfer to any iOS device.

The custom TouchOSC interface creates “Open Sound Control” (OSC) signals sent via wifi that are received by an open Processing sketch on a computer. The Processing sketch then writes the signal to serial, which is transmitted wirelessly to the Arduino with a pair of Xbee Modules. The Arduino is hooked up to two air pistons powered by a bike pump and 2 liter bottle reservoir.

If any of these terms don’t make sense and/or you want to give it a shot yourself, there are a few great tutorials that go into more detail and make it easy to get started:

Sparkfun Tutorial for LED Control (doesn’t address Xbee)

MIT Robotics Class Tutorial with LED/Servo Control (with Xbee but with non-standard board)

***Note:  Neither the tutorials address an accessible Xbee setup. Here is what I used:

Arduino Uno,  Xbee Modules (x2), Xbee USB Dongle, and Xbee Arduino Shield

Check out Processing and Arduino Code I used in this project here

//-----------------------Start Arduino Code------------------------------

int message = 0; // This will hold one byte of the serial message 
int eyesPin = 9; // What pin are the eyes connected to?
int eyes_val = LOW; // eyes_val will be HIGH or LOW

void setup() 
{ 
Serial.begin(9600); //set serial to 9600 baud rate
}

void loop()
{ 
    if (Serial.available() > 0) 
    { // Check if there is a new message
        message = Serial.read(); // Put the serial input into the message

        if (message == 'R')
        { // If a capitol R is received... 
            eyes_val = HIGH; // Set eyes_val to HIGH and eyes are out
           }
        if (message == 'r')
        { // If a lowercase r is received...
            eyes_val = LOW; // Set eyes_val to LOW and eyes are in
        }
    } 
    digitalWrite(eyesPin, eyes_val); // Write digital value to eyes
}

//----------------------------end Arduino code--------------------------------

//----------------------------------start processing code------------------------------------ 

import oscP5.*; // Load OSC P5 library 
import netP5.*; // Load net P5 library 
import processing.serial.*; // Load serial library 

Serial arduinoPort; // Set arduinoPort as serial connection 
OscP5 oscP5; // Set oscP5 as OSC connection 

float eyes_val;

//--- Function: setup 
void setup() 
{ 

oscP5 = new OscP5(this,8000); // Start oscP5, listening for incoming messages at port 8000 
arduinoPort = new Serial(this, Serial.list()[0], 9600); // Set arduinoPort to 9600 baud 
} 

//--- Function: oscEventThis runs whenever there is a new OSC message 
void oscEvent(OscMessage theOscMessage) {
    { 
      String addr = theOscMessage.addrPattern();
    if(addr.equals("/1/push1")) {
    eyes_val = theOscMessage.get(0).floatValue();
    } 
    }
}


//--- Function: pneumatic eyes on/off 
void draw() 
{ 
println(eyes_val);
if (eyes_val > 0.5) {
arduinoPort.write('R');//sends signal for eyes out
delay(200);
}
else {
  arduinoPort.write('r');//sends signal for eyes in
  
}

} 

//----------------------------------end processing code------------------------------------

At IDEO we are excited about “sketching in hardware” (super-fast rough interactive prototyping).  Here are some other related IDEO Labs posts:

Sketching In Hardware

Game On! A Workshop At  IIT

Quick-n-Dirty Multi-Touch: Flash API + Wiimote

Every fall the San Francisco chapter of AIGA, the professional association for design, hosts a gala to celebrate a community of over 1,600 students and professionals in the Bay Area under the umbrella of communication design, ranging from graphic design to interactive design and experience design. Each gala has a theme that is most evidently expressed through the auctioning of custom-designed objects by design firms and independents. This year’s event was a masquerade, and appropriately titled “Mask Appeal.”

IDEO was asked to participate again this year, so, of course, we took up the challenge. It didn’t take much convincing to recruit fellow communication designer Wilfred Castillo to help imagine what a contribution from IDEO could be. After a week of remotely brainstorming how to transform a $3 mask structure into something awesome, we finally landed on the concept of a wooden toy maze. It’s interactive, nostalgic and who didn’t love this game as a kid?

Click through for more photos and build details.

Once the decision was made, we consulted Nathan Whipple and Peter Bronk of the IDEO prototyping team in Palo Alto to see if it could be done in time for the event the following week. The minute the words “definitely feasible” were uttered, we sprinted through the weekend to design the layout of the maze structure and the graphics in Adobe Illustrator to move the rest of the production along. Anthem Printing in San Francisco had burned a silk screen for us by Monday morning, and the graphics were applied to the wood surface by nightfall.

Tuesday morning, the materials and source files were passed over to Nathan and Peter to begin figuring out how to best to build and assemble the mask. They mulled it over and came up with internal sleeves, to space the components. Peter machined the main mask housing out of RenShape®, and the internal spacers out of ABS plastic. After the parts were milled, they had to be finished with three layers of paint.

Between the graphics and the woodworking, it was a largely hands-on process that demanded a good deal of precision inherent in our craft. On Thursday November 10th, the day of the Gala, the product of this collaboration was finalized and ready for its big debut. Of course we all gave the game a quick play to break it in, but, after many failed attempts, it was time head to San Francisco to give it away to the highest bidder at the AIGA SF Gala.

(Mask contributions came in from designers from Dwell, ASTRO, Public, SMART, Apple, Landor Associates and many more awesome studios and independent creatives.)

At the beginning of the summer, our intern cohort was told that IDEO has a history of summer pranks.  Inspired, we got together, threw around a few ideas, and settled on building a musical staircase, one that would play different sounds when you walk up and down the steps.

Over the course of three weeks, we brainstormed and prototyped a variety of implementations and consequently took over the Toy Lab over the weekends to build, solder, and assemble.  We tried to be stealthy and keep the project a secret, though it soon became clear that designers in the Toy Lab had been thinking about building something similar for a few years.

Click through for build details and source files for building your own!

Our approach involved using IR sensors and a single Arduino Mega 2560 inspired by Sparkfun’s Illumitune project. We considered using pressure sensors but were concerned about the possibility that if they caused slippage or tripping in any way, there would no longer be an intern program at IDEO.

Unfortunately, our first attempt at using IR LEDs and detectors did not work reliably, and we spent many hours trying to calibrate and ensure that one pair of working sensors could scale reliably to sixteen sensors working in concert.  We eventually switched to slightly more expensive Sharp distance emitter-sensor pairs, which a local hobby store fortuitously carried. These were considerably more reliable, though reliability came at a price — 5 times as much at $15 a piece!  Luckily, the Arduino Mega has exactly 16 analog inputs for 16 stairs, and after assembling cables for the better part of the evening, we were ready to install. The Mega happily works with a 9V power supply.

Testing all 16 sensors before installation

We designed a custom foamcore housing to hide the cables that run along the side of the stairs as well as laminated graphics to add more fun.  While in the video, the participants are standing fairly close to the railing to trigger the sensors, we have since improved the threshold for triggering the stairs, which feed into a Processing script that handles the playback of audio. There are two audio tracks currently available – piano notes and clapping, with the possibility of easily adding more. The last stair of the clapping track includes pretty much everyone from the Toy Lab!

To build your own

The code for the sensor set on the Arduino is available here
The code for the audio using Processing here
The sensors we used were the Sharp GP2D12 30″ type. The processing code has been shortened somewhat, but the essentials are there. Add as many mp3 files as needed, and run the Processing code to read the Serial output from the Arduino device using the same baud rate.

(L-R) Rio Akasaka, Haemi Chang, Engin Kapkin, Lucas Hartman, Silvia Boscolo, Tiffany Tseng, and also Corina Yen, Valerie Willis, Aaron Peck, Anne Riechart

Watch the first chapter.

Download the source:
Openframeworks Song Tabber
Flash Source

Boston IDEOers
Brad Crane
Ryan Habbyshaw
Todd Vanderlin

Voice:
Ramona Taj

1) Move selected items to whole pixels
I created an Illustrator script for moving selected items to the nearest whole pixel (top / left).
Download the script: MoveItemsToNearestPixel.jsx

To install, move the script to your Illustrator scripts folder:
OS X: Applications/Adobe Illustrator CS5/Presets/en_US/Scripts
Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\Scripts

2) Make selected items look like they are on whole pixels
Select any or all items you want to look like are on whole pixels and check the Align to Pixel Grid checkbox in the Transform Panel (Shift + F8). This makes things look like they are on whole pixels, even though they might not be.

3) Set up your grids
— Open Illustrator Preferences/Units and set everything to pixels
— Open Illustrator Preferences/Grids & Guides and set Gridlines every to 10 px and Subdivisions to 10
— Enable grid snapping (Command + Shift + “)
— Remember that Preferences are saved on a per-file basis, so get used to checking these

4) Pixel Preview
Pixel Preview is a handy way to see how vectors turn into pixels when you’re zoomed past 100%. Turn this on from the menu View/Pixel Preview (Command + Option + Y).

5) Check Artboards
Artboards are a great for managing pages for flows, but when creating they sometimes are not on whole pixels themselves. Enter Artboard Edit Mode (Shift + O) and check them.

6) Check Symbols & Swatches
Make sure all artwork is on whole pixels before creating Symbols and Swatches. If the original artwork is not on whole pixels during the creation process, than those symbols or swatches will not look pixel perfect when you use them.

7) Pixel pushing windows workflow
If you have to get nitty gritty, open a second window (menu Window/New Window) for the same file, turn Pixel Preview on (Command + Option + Y) and zoom way in. This way, you have the 100% view and a super zoomed in view side by side. It free’s you up from having to zoom in and out so often.