This page offers an explanation on how I did the timeline NANOTECH HISTORY. For that purpose I describe my design process in eight steps:
2. First draft
3. Reversal point
4. Re-defining content
5. Second draft
6. Changes in flash
7. Design issues
8. Navigation issues
Nanotechnology is a very unfamiliar topic for me. My first step google and read general info of it on Wikipedia. Then I double checked the data with some of the references they quoted. Originally, my conception was that all the sources would highlight mostly the same facts with some additional or missing information depending on where I looked.
My first approach was to create a representation that could play with the concept of history as “ancient”, but presented in a way that seemed “modern”. So I created a rectangular canvas with to banners at the top and bottom of it, with the word “nanotechnology” faded in each of them. The word “HISTORY” would stay in the back, also faded. I intended to create a game timeline that capture the viewer’s attention by creating a surprise based on contrasts of color and sizes of the typography.
Regarding the navigation I would create a series of bullets, each of them containing one event of nanotech history. I wanted to create a linear path that would go from left to right, then one level up, then one level from right to left, then another level up, until it reached the top of the white canvas. This would be a graphical representation of Nano as “rising since”. Each event would have its own set of buttons: “previous”, “next”, and “close”.
However, the design stage at the moment of the critique was not able to show my concept:
The critique constituted a reversal point for my project. The project received four comments:
1. The audience had no clarity on what my concept was.
2. I could use a line to unify the dots to create a sense of unity.
3. Instead of creating buttons for every event, I could use one single
button-set on a fixed location. This would save time for the design
and would be more user friendly.
4. Until I was able to show a clear concept, it would be difficult to give me more specific feedback.
After that, I thought about how could I keep on with the “rising science” concept. I didn’t grasp any worth-mentioning idea, so I started almost from scratch looking for a concept that was more familiar for me. A couple of hours later, checking the news on line, I ran into a slideshow. It was a particular story told in eight shots. BINGO! Nanotech History in eight shots!
I went back to my references for the topic. My original idea was to refer up to fifteen events. I shortened to eight because I wanted it to be as brief as a news front page.
For the header, I kept the idea of playing with the font size and shape.
I included some quotes highlighted in gray, so the aesthetics would also resemble the ones of newspapers. As for the time flow, I drew a line with bullets, and assigned a year for each.
The events would be displayed in under a gray table, with a small image and some text after pressing the corresponding year’s button.
After importing the draft from Illustrator to Flash, I realized the there wasn’t any header for each event, so the reader would have to go through all the content to define by himself what was that specific entry about. Any editor would have sent a journalist home if she/he presented an story without a proper headline, so I added them on the buttons, on the over stage. Then, I included the “previous” and “next” navigation buttons as arrows in a fixed location (lower left corner).
I submitted the file for some feedback and got the following comments:
1. The title of the entry overlaps with the gray rectangle where the
entry content is displayed. It would be better to have it on one
2. Make the entry title bold so it highlits.
Reduce the space between text and title for the image.
3. Make the titles visible when the user navigates with the arrow buttons, instead of clicking on the bullets.
4. Place a specific quote for each frame instead of a fixed one for
all the frames.
After applying those changes, I heard in class that we were supposed to add the references for the presentation, so I did.
Many times the slide show went “berserk” if I tried to change/add buttows. It happened when I included the two reference frames, the buttons to navigate between those to frames, a direct button to jump from any given event or the main frame directly to the reference. By berserk, jumping sequentially from frame one to 11 and looping non-stop. I received help from the TA to solve this issue.