A Timeline of the Brief History of Nanotechnology in Modern America: Innovation, Funding, Controversy

To view the final project, visit:
processpointstudios.com/nano/timeline.htm

Explanation and Documentation of the Creative Process

by Lauren Langley

The interactive nanotechnology timeline project was an exciting design challenge. I had the unique opportunity to present a history of the very detailed science of nanotechnology as a living visual experience.

Research:

In order to represent an accurate history of nanotechnology, I carefully selected images and facts from respected sources. After acquiring all the content, I created a Word document and organized the historical events and content sources to refer to during the design process. I chose twelve historical events to represent in the interactive timeline.

Concept:

I was intrigued by the photographic quality of many images of nanotechnology, and was inspired to represent that quality in the project. The black frames and identification numbers in these images convey a very scientific purpose. I wanted to balance the science with the organic quality of the nanotechnology structures being represented. Therefore, I set out to create a series of pleasing images framed around a scientific and interactive structure. In my thinking, technical elements would give way to beautiful imagery, and vise versa. I wanted the user to experience the fantastic relationship between art and science.

The image below (fig 1) is my initial sketch of the timeline and ideas of possible interaction, created with ink on paper:

Fig 1. Initial sketch and interaction ideas.

Design:

Once I had developed the concept, I began designing the visual timeline elements in Adobe Illustrator. After beginning to design the timeline, I discovered that in order to view the content at a comfortable and legible size, I should only present six events in one viewing panel. I implemented a scrolling element to the concept and design so that all events could be viewed, but were still connected in a flowing manner.

Fig 2. Initial design of timeline structure in Illustrator.

I wanted to present images that coresponded with each event, so I chose two images for each event and used Adobe Photoshop to blend them. I created a stylized aesthetic that was consistent throughout the timeline. Below (fig 3) is an example of an original image (left), and the manipulated image to be used in the timeline. The images were sized and optimized in Photoshop for later use in Illustrator and Flash.

Fig 3. Before and after capture of timeline image.

The image below (fig 4), is the design at the stage at which the timeline was critiqued in the classroom. I received positive feedback about the design and great suggestions about how to handle the scrolling feature and timeline content.

Fig 4. Before and after capture of timeline image.

Development:

It was helpful for me in my design process to print out designs and write notes on top of them. This helps me plan out the next phase in the process, development. The image below (fig 5) represents notes in the phase between the design and development process.

Fig 5. Notes about how the design can be implemented in the development phase.

After completing the timeline design, I transferred the final visual elements into Adobe Flash. The development phase in Flash was the most challenging part of the process. Although I created organized layers and groups in Illustrator, the elements were not as easy to manipulate in Flash as I expected. I had no prior experience working with Actionscript code, so there was an exhausting learning curve associated with this project. In order to help me through the animation process, I kept notes about keyframes and code, which helped during the repetitious workflow process. These notes are seen below (fig 6).

Fig 6. Notes and sketches used during Flash development.

Editing:

There were many sacrifices made throughout the development of this project, but the concept remained intact. Design elements like colors and lines were sacrificed because of restraints imposed in the development phase. I could probably have kept the colors and lines in question, but was not able to achieve them because of my limitations with the development tools. The complexity of development was also sacrificed. I envisioned additional interactivity and animated transitions. Due to time constraints, I was unable to push this project to the limits of interactivity. Nonetheless, I am very happy to present a functioning timeline that conveys the history of nanotechnology in a visually organic manner.

Fig 7. Capture of the final timeline.

To view the final project, visit:
processpointstudios.com/nano/timeline.htm