Today, technical understanding and know-how is more important than ever. To complete even simple tasks users must master more complex technologies, hardware, and applications. The local automobile mechanic is now a computer technician, the local florist masters an e-commerce and digital shipping system, and parents manage online distribution lists and databases for their family photos. While technology allows the user to do more, the minimum technical requirements for users also must increase. At the Rochester Institute of Technology (RIT) two programs work together to give both visual design and computer programming students the tools needed to create the next generation of web, desktop and mobile applications for the interactive design and development fields.
The New Media Design and Imaging program in the College of Imaging Arts and Sciences (CIAS) and the New Media Interactive Development program in the Golisano College of Computing and Information Sciences (GCCIS) at RIT offer a unique experience by introducing both the creative and technical aspects of interactive design and development. The New Media Design and Imaging is a Bachelor of Fine Art program that concentrates on the visual design, UI design, interactivity, and motion graphics for screen design. New Media Interactive Development is a Bachelor in Sciences program that concentrates on computer programming for games, web, interactive RIA and simulations. While creativity and design are not technology-dependant, nor should they be, it is important for the students to understand the tools they must work with and the technologies for which they are creating solutions.
After the New Media Design students complete their introduction to programming, they take additional courses in graphic design, animation, user interface and interactive design. These courses allow the students to learn how to use the Adobe workflow from concept to design through development. Students are required to begin with image boards and wireframes from Adobe Illustrator® before moving into the design stage using Adobe Photoshop®. Next, students use Adobe After Effects® to create animated mockups, design animations and transition elements before finally moving into Adobe Flash or Dreamweaver® to combine their visuals with the appropriate programming. This process helps the students understand how to incorporate the elements of design and development together to create working interactive solutions.
This process is done in part to get the design student over the obstacle of being afraid of the technology that they are working with and designing for. It is not uncommon to see students limit their design or interactive complexity due to their lack of technical knowledge. I have found that the more technology, programming, or workflow knowledge designers have, the better they can understand how to leverage and even push the power of the technology beyond its intended uses. To help foster this collaboration between both programs, students can "cross over" to take additional design courses or development courses during their four-year education. Visit http://aesfaa.cias.rit.edu/adobe/collaboration/ to view student examples of this educational approach and more specific course information on the New Media Design and Imaging program.
To reinforce the importance of collaboration and the design-developer relationship, seniors from both programs are brought together for a 20-week capstone project. This collaborative experience adds the final dimension in combining design and development workflows with cross-discipline team building and project management. Part 2 of this article will look at the processes and benefits of creating a long-term cross-discipline capstone project between designers and developers.
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 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.
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.
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/[email protected]/.