Articles / Collaborative education for designers and developers at RIT (Part 2)

Collaborative education for designers and developers at RIT (part I)

Rochester Institute of Technology weaves together instruction for designers and developers between two collaborating departments. Adam Smith talks about RIT's collaborative approach to providing future professionals both design and technical skills in a two-part article. Here is Part 2.

See Part 1 ›

Collaborative education for designers and developers at RIT (Part 2)

To complete the collaborative designer and developer undergraduate educational experience at the Rochester Institute of Technology (RIT) a 20-week cross-discipline capstone project is required for all New Media seniors. This team-taught project between the New Media Design and Imaging BFA degree faculty from the School of Design and the New Media Interactive Development BS degree faculty from the Interactive Games and Media Department allows students to gain firsthand experience in conceptualizing, researching, developing and deploying innovative interactive projects in a team environment. This article will explore the interactions and process of team “8track” and their Adobe Flash-based interactive touch tabletop. Part one of this article introduces the collaborative cross-discipline New Media Programs at RIT.

THE FINAL COLLABORATION

The designer and developer connection is a key relationship in the interactive industry. The 20-week New Media Team Project course gives the students the tools to learn and experience this collaboration, team building and project management before entering the workforce. The students are able to leverage the skills and knowledge of fellow designers and developers in building innovative interactive projects while learning about the social aspects and relationships of a team environment.

At the start of the course faculty divide the 60 to 90 students into teams of six to nine students based on a survey of their personal interests and skills assessment. Each team consists of a group of designers and developers from their respective programs. Once the teams are formed, students select a project topic and create a problem to solve. The students use Adobe Illustrator and Acrobat Pro for mind mapping, conceptualizing, researching, and visualizing their problem. Then the teams “pitch” their ideas to the faculty and class. These initial phases and presentations help create team ownership and allow both designers and developers to participate in the creative development of the project.

PROJECT SOCIABLE

One particular 2009 project highlights this undergraduate design and development collaboration. Team Sociable, with Adam Butterworth, Ayaka Ito, Andrew Sanjanwala, Jason Sauers, Matt Bruce, Luke Alessi, Sam Sawzin, Alex Zack, and John Barbagallo, selected the problem “What if your cups could help you socialize”. The project was an exploration in interactive touch screen tabletop design using the Adobe workflow and Adobe Flash for implementation.

The designers and developers worked as a single group during the concept stages, openly sharing ideas, knowledge of design, development, and technology during these sessions. From this exchange, designers introduced visual directions, research, and mood boards while the developers brought technologies and hardware solutions to the team. This concurrent collaboration allowed the team to address each design or technical issue in advance and reduced the amount of discrepancy between desired and actual results.

Once the team selected the implementation direction and technology, they created four subgroups to handle specific tasks. A small group of visual designers created the UI design and graphical elements in Adobe Illustrator and Photoshop. Another group of designers concentrated on creating the interactive feedback and transition animations using Adobe After Effects. On the development side, a group of developers researched and created the physical table, the motion tracking, and projection system. Lastly, a group of developers created the Adobe Flash front end to handle all of the graphics, animations and interactions based on the motion tracking inputs.

These subgroups constantly worked hand-in-hand during this process. The Flash developer required the table and motion tracking system to integrate two external systems; reacTIVision for fiducial tracking of the cups and tbeta (now CCV) for finger-touch tracking. This complex system of using two motion tracking systems simultaneously integrated with Adobe Flash was one of the first examples of its kind, and showcased the true power of the Flash platform. However, even during this process of perfecting the tracking systems, designers and developers were working together to resolve other problems. Designers soon realized that the table created new challenges for working in Photoshop and designing for interactions. The designers needed to design and test directly on the table rather than an external monitor in order to overcome problems caused by color shift, clarity issues, and small lag in the tabletop, so the developers created test systems to help them see their graphics, animation and interactions on the tabletop.

The animations used behind each cup and in the background are a testimonial to the effectiveness of this collaboration. Throughout the project, the team wanted to create secondary animations for the user. To visualize them, the design team created animation sequences in Adobe After Effects for the developers to follow. However, after testing code-based versions of these animations, the developers found that motion tracking and interaction lagged. To solve this, the design team created compressed flv files for the desired animation sequences that would not overpower the system during playback. This simple back-and-forth between the design and development teams illustrates the power and flexibility in promoting the designer and developer relationship.

CONCLUSION

As a result of the close collaboration and their prior knowledge of their counterparts’ fields, designers were able to create visuals, animations and interactions ready for implementation and in some cases pre-built in Flash. Developers were able to communicate their needs, customize the workflow and manage assets in a streamlined process during testing and implementation. The Sociable project went on to receive the Marge Ruffing Memorial Award during ImagineRIT festival (http://rit.edu/imagine) and was an Adobe Design Achievement Award Finalist in 2009.

The goal of the New Media programs at RIT is to create the next interactive designers and developers for the web, mobile, desktop and touch screen fields. Through a blended educational process with both design and development courses students are prepared for the collaborative experience that awaits them in industry. The interactive design and development fields require a broad understanding of current and future interactive technologies while maintaining a singular focus in design, motion or development. A student can’t do it all but there must be a strong foundation across the fields and ability to collaborate to execute one specialty exceptionally well.

To view more information and videos about the project visit: http://team8track.cias.rit.edu/ or the flickr photostream at http://www.flickr.com/photos/45780854@N03/.