Web Design Time Lapse

Web Design Time Lapse

The following web design time lapse demonstrates the decision making involved in a design session. The feeling of anticipation a web designer has when facing a blank design program screen is probably not unlike the feeling a painter has when facing a blank canvas. I dare not compare my work to fine art, but there are elements that are similar. Starting is the hard part. You begin with the germ of an idea and myriad of images dancing in your head.

Once started, energy begets energy and the process has its own momentum that moves you in sometimes unexpected directions.  You add, subtract, edit, erase, delete, edit > undo, stop and go away, come back and start again and then, something takes shape. It isn’t always what you expected unless your idea is at first very clear. At some point, you are done: anything more would detract and anything less wouldn’t suffice.

Website design can be very involved and although this design was completed in just a few hours it’s only because I was able to freewheel without adhering to any requirements and constraints of a client. For the uninitiated, saying “the design was completed” may lead you to think the website is done. This is just the web graphic design—nothing more than creating a pretty image of a website.

This design session was the equivalent of idea generating improv: a mockup without using a wireframe first and no design changes, which is not the usual process. Every web designer knows that the real work starts when the web graphic design ends. Then, there is coding, testing and debugging, inserting and editing web content, and a laundry list of web housekeeping chores before a website can be uploaded and put live.

Time lapse capture video editing

I shot the CamStudio capture in three chunks. I didn’t want to chance losing all of my work by overloading my CPU and having my PC lock up. I edited the Camstudio AVI in Premiere Elements 7 using the HDV 720p – 30 profile. After much trial and error this produced the best resolution. The music was added to the timeline and the CamStudio captures were time-scaled using PE’s time-stretch feature. Several hours of web design were scaled down to just under 3:30.

Because I wanted the video to be available on a wide variety of devices/browsers, I decided to use HTML5 with Flash fallback (in this case H.264 mp4). I had to have three files (mp4, ogv, and webm). I exported the edited video out of PE as MPEG 720p 30 using the default settings. The resultant file was about 478MB (youch!). The file was converted to mp4 (H.264) with HandBrake. The resultant mp4 is about 48MB. The mp4 was converted to WebM with Miro Video Converter, and finally to OGV with Theora Converter .NET. Miro will also do OGV but the quality is not very good. All of the aforementioned are free, open source programs.

Web Design Templates Used To Have a Bad Rep
No Comments

Post A Comment