Weekend Inspiration: Time-Lapse Web Design


Recently, I designed and coded a website, recording my screen whilst I did so. The following two videos cover the entire process, but to save you sitting through 10 hours of footage I've condensed the whole lot into a 17 minute film. I hope you find it entertaining and, above all, inspiring!

Client: ExtremMT2
Total time elapsed: ~10 hours
Project on: DeviantART
Software: Adobe Photoshop CS3, Adobe Dreamweaver CS5
Additional tools: ConvertICO for converting PNG to ICO, Web developer toolbar for Firefox

Part 1: Designing

Software: Adobe Photoshop CS3
Time elapsed: ~4 hours
Video speed: 28x
Soundtrack: Phainomenon by Manual

Part 2: Coding

Software: Adobe Dreamweaver CS5
Time elapsed: ~6 hours
Video speed: 55x
Languages / tools: XHTML, CSS, JavaScript, jQuery
Soundtrack: Pulsations by Manual

Final Result

Editor's Note: I for one never tire of seeing time-lapse work processes. If this is something you do (or want to have a crack at) and fancy having it featured on the site, then let me know!

Related Posts
  • Design & Illustration
    Interview With Mobile Interface Designer, Alan PowerPreview
    A chat about designing mobile interfaces with Alan Power.Read More…
  • Design & Illustration
    Interview With Graphic Artist and Illustrator Marcelo SchultzIlovejazzpreview
    Marcelo Schultz is a graphic designer and illustrator that specializes in typography, and is well known for an illustrative style that emulates the look of 3D. I recently had some time to chat with Marcelo. During our discussion, we talked about several topics ranging from social media to illustrative techniques. Let's take a look!Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Design & Illustration
    Complete Guide to What’s New in Adobe Photoshop 14.214 2 preview retina
    One of the biggest advantages of the Adobe Creative Cloud is the speed at which new features can be deployed. When the Adobe Creative Cloud was first announced, Adobe promised that their software would be updated much more frequently than in the past. Recently, Adobe made good on that promise and announced some new updates to Photoshop, as well as some of their other applications. In this article, we will explain everything you need to know about Photoshop's new features including Perspective Warp, Linked Smart Objects, 3D Printing Support, as well as all the other minor improvements. Let's take a look at what is new in Photoshop 14.2.Read More…
  • Design & Illustration
    Tools & Tips
    10 Type Tools You Probably Aren’t Using in PhotoshopTop10 typography preview retina
    Although Photoshop is mainly considered an image editing application, it also includes a lot of features to help you work with text. In this tutorial, we are going to focus on some of the lesser known type tools of Photoshop CC. Let's get started!Read More…
  • Photography
    How to Shoot Images for a Stop Motion Animated GIFBatchsequence preview retina
    GIFs have a bit of a low brow reputation from being deployed on silly websites in the 90s, but they can be used for more sophisticated purposes. Our GIF will show the unwrapping of a gift, and could be used in an online ad. After I show you how to set up the shoot and capture the necessary images, one of our resident Photoshop experts will teach you the process of animating the image sequence into a GIF.Read More…