Weekend Inspiration: Time-Lapse Web Design
videos

Weekend Inspiration: Time-Lapse Web Design

on Aug 13th 2011 with 30 comments

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


Click to enlarge
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!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Aziz Natour (born 29th of July, 1992) is an Arab-Israeli entrepreneur, self-employed graphic designer, web developer and has been freelancing since 2008. In this role, Aziz handles numerous projects concurrently, and is proficient in most relevant programs such as Adobe Photoshop, Adobe Illustrator, and Adobe Dreamweaver working on PC platforms. When Aziz is not working, he likes to watch movies, play video games, and check for latest gadgets and technology innovations.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://makelogik.net Jacob Krustchinsky

    FIrst! Watching right now!

  • Aziz

    Nice, Help me for my new blog.

  • http://www.pokergosh.com The PokerGosh

    The music makes it beautiful.
    Almost Art..
    Thank you…

    • http://www.aziznatour.com Aziz Natour
      Author

      @The PokerGosh: You’re welcome! I hope it inspires you

  • GorillaWma

    Wow, really nice. Well it would be maybe better that design process is speed up and coding is normal, but anyway awesome work. Would be also nice to know some of your brushes you used in this theme making, if you can give us link or something from where you buy or download freebies.

  • http://edwinhollen.com edwinhollen

    Very, very nice. Code was messy, making no use of any HTML5 elements. Other than that, super!

    • http://www.aziznatour.com Aziz Natour
      Author

      Hi edwinhollen, the code is very clean and you are right, I didn’t use HTML5, while some features can be used now – it didn’t seem necessary at the moment :)

      • elkaz

        Agreed. There seems to be a premature push towards HTML5 at the moment considering it’s still far from its official release. HTML5 is nice and all but it can’t be considered standard because unfortunately a lot of the big spending clients are still running IE6-8 and requiring JavaScript to render the page still doesn’t cut it either.

  • Pingback: Weekend Inspiration: Time-Lapse Web Design | Shadowtek | Hosting and Design Solutions

  • http://alexklimok.com Alex

    You’ve definitely got some skills as well as the nerve to stay up all night and do this :D Don’t overdo yourself.

    • http://www.aziznatour.com Aziz Natour
      Author

      Haha, thank you, don’t worry.. working at night isn’t as bad as it would seem!

  • Techeese

    I wanna see more of videos of how web designers do their thing in time lapse :)

  • DeeFi

    This is so great and looking so straight foward. Really nice :)

  • http://www.readygoplay.com Windo

    Fun! Thanks for sharing

  • http://antriver.com Dinesh

    Nice concept. Never thought of if.

    TFS
    ~ Dinesh

  • Sultan

    Nice Work man .. Thnx ..

  • Andre

    Wow.. this has been one of the the coolest videos I’ve ever seen!
    It is kinda like art, watching everything shape and shift into the symmetrical schweet spots.
    Awesome stuff..

    I really like your design work. So well balanced.

    When you do a site like this do you usually have the whole concept designed beforehand – roughly sketched – or just go with whatever inspiration comes to mind..?

    • http://www.aziznatour.com Aziz Natour
      Author

      Thanks for your feedback, much appreciated. I usually sketch a basic concept before beginning, which is discussed with the client to see how the layout should look like and its structure. Here’s a cool program that could be helpful which I personally use: http://pencil.evolus.vn/

  • Connor Crosby

    It’s always nice seeing other people work. The different ways they pull things off. Thanks for sharing :)

  • http://inspiredkiwi.com/ Parth

    Nice! I would find it difficult to code and style at the same time. I usually write markup html, then move into styling the elements.

    • http://www.aziznatour.com Aziz Natour
      Author

      That could be project-dependent, However, I prefer to design first as I know, while designing, how I’m going to code it. it’s like thinking in advance!

  • ramon

    is it possible to have the ten hours video or watch this slowly?

  • http://www.layout-factory.com Vladislav Melnik

    Cool Video, I like it!

  • Luis Nin

    Very inspiring! Would love to see more like this.

  • begs

    Not only this is inspiring… This is also motivating!
    I’ll go coding now! ;)

    Thank you for that one.

    • http://www.aziznatour.com Aziz Natour
      Author

      That’s great to know! I am happy it made you feel this way, good luck!

  • http://www.idesignit.co.il/ Elron

    Thanks for sharing, nice design!
    is there a link for the site / demo?

    • http://www.aziznatour.com Aziz Natour
      Author

      You’re welcome! you can view the site at http://extremmt2.net/ but be advised that my client has modified it.

  • Andrei

    Epic time-lapse, I always love these things! :D
    Anyway, do you happen to have a link towards the brush pack that contained those cute mini-icons? I tried searching for icon brush pack on deviantart but to no avail :(

    • http://www.aziznatour.com Aziz Natour
      Author

      You may have noticed that I made the icons myself, However, try searching for custom shapes instead of brushes, you’ll find many interesting and useful shapes which you can use as icons! OR you can search for icons that are already made, all you have to do is import them to your project. make sure you don’t infringe any copyrights in the process ;)