• DOCUMENTATION: The story of a timeline

    Posted on January 13, 2012 by in Uncategorized

    This page offers an explanation on how I did the timeline NANOTECH HISTORY. For that purpose I describe my design process in eight steps:

          1. Content
          2. First draft
          3. Reversal point
          4. Re-defining content
          5. Second draft
          6. Changes in flash
          7. Design issues
          8. Navigation issues

    1. Content

    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.

    2. First draft

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

    Intended button sequence for draft 01

    Navigation buttons

    However, the design stage at the moment of the critique was not able to show my concept:

    First draft - arisign science

    3. Reversal point

    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.

    4. Re-defining concept

    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.

    Timeline based on a news story.

    5. Second draft

    For the header, I kept the idea of playing with the font size and shape.

    Header draft 02

    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.

    Quote example

    The events would be displayed in under a gray table, with a small image and some text after pressing the corresponding year’s button.

    Event example

    6. Changes in flash

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

    Navigation buttons and headers for each entry included

    7. Design issues

    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
                  single line.
              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.


    References for Images and Events

    8. Navigation issues

    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.

    Buttons that gave me trouble with the timeline.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>