Bee Docs' Timeline - 3D EDITION (video)

I am very happy to announce Bee Docs' Timeline - 3D Edition! I've put together a five minute video to tell you all about it:

WEB:

Watch Now

DOWNLOADS:

Apple TV Optimized - 159.9 Mb (zip)
iPod / iPhone Optimized - 41.3 Mb (zip)

About 3D Timelines - Part III.

In December 2007, Gary C Martin sent some feature suggestions to me regarding Timeline 2.0, which was still in beta at the time. As I often do, I followed the links in his e-mail signature because I can see what kind of people are using Bee Docs' Timeline. Turns out Gary is a 3D artist and made a very sophisticated Asteroids game using Apple's Quartz Composer technology.

I've always thought that it would be great to be able to hire some customers to help me develop Bee Docs' Timeline and here was a great opportunity. I sent Gary the 3D design concept that I made using Motion and asked if he would be interested in helping me make the feature a reality. Within days he started sending me working prototypes of 3D timelines and we have been collaborating on it ever since.

Doing a mock-up of a 3D timeline was relatively easy, it took about a day. Getting it to work for the huge diversity of timelines that are possible with Bee Docs' Timeline is a much greater challenge. Timelines and events can be different sizes, aspect ratios, fonts, etc... Performance and interaction issues are tricky too. Gary has been doing the Quartz Composer programming and figuring out the calculations for zooming, rotation, movement, and performance while I have been doing the associated Cocoa programming and leading the design.

All of our communications have been via e-mail (Gary lives in Edinburgh, Scotland) and it has been fantastic working with someone who does amazing work and has also been a customer of Bee Docs' Timeline since May 2007.

I look forward to hiring more customers in the future, so if you'd ever be interested in working with me, be sure to let me know what you do! At the moment, I could really use some help with PR...

About 3D Timelines - Part II.

When I designed the first product (a web-based document management system) for Bee Documents back in 2002, I started with pen and paper and then used Adobe InDesign to complete the prototype.

Since that time I have used Apple's Keynote software to do design and prototyping for dozens of websites and desktop applications. For me it has several advantages over Photoshop, which is the classic tool of choice for this kind of work:

• I find it much faster to draw and make adjustments with Keynote.
• The effects (rounded corners, tinted fills, gradients, drop shadows) are all very Mac like.
• I can link up the Keynote presentation and add animated actions to simulate the interactive behavior of the application.
• People who are not designers can participate in the design with me since it is intuitive to drag things around and make changes using Keynote

As an example, see the following two screenshots. The image on the left is the Keynote file I used to design the "T2" website. This was one of several possible designs that I can created. When I played the Keynote file, I could interact with the links and videos as if it was a real website. The image on the right a screen capture of the real website.

However, as well as the current process is working for me, I keep thinking about cinematic software, touch interfaces, animation, motion, and "No Limits Design". The technical barriers are falling for this kind of software. I'm concerned that prototyping tools that encourage page-by-page designs may limit creativity.

To that end, I have been experimenting with video as a prototyping tool as well as some motion graphics tools such as Apple's Motion.

Several months ago, I transformed the 3D Timeline idea that I had sketched into the following video using Apple's Motion:

I wanted to be able to test readability of the timeline at distances and get a sense for whether this would be a useful feature that helps solve the challenges of presenting timelines or if it was only eye candy.

...to be continued...

Icon - New Draft

Here is the latest T2 icon draft from Kenichi. It is a more detailed version of the last version. At my request, Kenichi is going to try a horizontal page layout and more similarly colored pencils in the next iteration.

Icon - 3D Rendering

Here is the first 3D mockup of the T2 icon. Kenichi created with it with Cinema 4D.

I'm happy with how the icon is coming together but I asked Kenichi to concider a few changes... I asked to have the notebook rotated into a landscape position as this is the most common orientation for timeline charts. Also, I asked that the colored pencils be more similar in color (all cool colors or all warm colors).

Of course, Kenichi will also need to add a timeline chart to the sketch pad.

He is now working on a final design and I can't wait to see it! I'll be sure to share it here as soon as it is ready.