Articles > Collaborative education for designers and developers at RIT

Collaborative education for designers and developers at RIT

by Adam Smith
Adam Smith is an assistant professor in the New Media Design and Imaging program at RIT.

Rochester Institute of Technology

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.

Jeremy Brault designed and developed this site to explore the educational and interactive aspects offered by Adobe Flash.

The Programs

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.

Students Lindsay Bergmann, Rebecca Foster, Randy Church and Ayaka Ito explore design through integrating 3D into After Effects, Photoshop and Flash.

As the undergraduate students in the New Media Design program are taking their traditional drawing, 2D Design, Elements of Graphic Design, and Typography courses, they are also introduced to programming courses in Adobe® Flash® Professional, ActionScript® 3.0, HTML, CSS, and JavaScript by the New Media Interactive Development faculty in GCCIS. These courses give design students a strong foundation in the core concepts of object-oriented programming. In addition, undergraduate students in the New Media Interactive Development program are introduced to elements of graphic design and typography by the faculty in the New Media Design and Imaging program. This cross-disciplinary collaborative exposure to fundamental design and development is at the core of the designer-developer relationship and workflow.

Designers and Technology

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.

Laura Frastaci designed, illustrated and developed an immersive interactive experience to explore Alaskan mining for this online Adobe Flash project.

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.

Rachael Nash (Idaho), Matt Raoul and Kim Miller work on html and RIA design systems

The Final Collaboration

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.

Deep Ocean, a collaborative design and development team project in conjunction with Earth Echo and NOAA.

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.

Users interacting with the drinking glass and finger tracking systems in Adobe Flash on Project Sociable

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’s touch screen tabletop interface

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.

Working from mind maps to flowcharts Sam Sawzin, Ayaka Ito and Adam Butterworth discuss possible solutions

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.

The design team worked through multiple iterations of visual styles throughout the process

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.

Designers and developers testing interactions on the initial tabletop. To the right are iterations of table concepts and designs

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.

Connecting reacTiVision TUIO Simulator and CCV with Adobe Flash allowed developers and designers to test their designs and interactions.

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.

Designers created motion sequences in Adobe After Effects for integration into Adobe Flash through FLV files and Actionscript

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




Comments