Chris Spooner

04 Sep

I decided to record my process of building a XHTML/CSS webpage from a PSD concept, then put it together as a quick time lapse video. The video compresses approx three hours of work into 6:40mins and is complete with funky background music!

40 Comments

  1. Sam says:

    what do you use for your code Chris?

  2. Nenad says:

    Although theme is great, the video is to fast to follow anything on it. I got headaches watching it.

  3. Michael says:

    Well done, but the main work is finding the colors and the concept in my opinion… looks like my workflow in your video ;-) greetings

  4. Remus says:

    Coda
    Nice work and nice musique, La manau negra ?
    Demo ?

  5. Eistrom says:

    He uses CODA..
    Chris correct me if i’m wrong,

  6. One of the most stunningly useful videos I’ve seen this year!

  7. Interesting post!
    Whats the grid overlay you get on Illustrator – 3:08?

  8. Vasili says:

    I thought I was the only one who switched that many times between apps. :P

    Great video!

  9. Bryan Beaudreault says:

    I agree it was a bit hard to follow at that speed. Also would have been nicer to have at a higher resolution or something so we could see more than just blurry unreadable text :) Other than that, though, nice concept.

    @DanSensecall, I know the http://960.gs/ grid system has a grid overlay layer that you can import into Photoshop/Illustrator. It looks very similar to that, although I can’t guarantee that is exactly what Chris is using there.

  10. spring says:

    that was way cool.

    like a roller coasta ride!

  11. Helen Olney says:

    Very cool. I’d love to know how you made it. I’m assuming there’s an hour long ‘Part 2′ on the way: ‘Making it work in IE’?

  12. torygillette says:

    What is that funky background music that you have playing?

  13. Wow Chris, that looks awesome! I love time-lapse videos, especially ones of mould growing on bread, but to be honest I like this one even more. One quick question, the website design looks super sexy, who is it for? It must be a very cool company to be getting involved with you Chris ;)

  14. Gordymac says:

    Nice work, Chris. Did I see some DiggNation in there?

  15. Alex says:

    Awesome work and nice workflow!
    I don’t know how you get this overlay grid but I personally use Slammer (http://site.ringce.com/products/slammer/slammer.html) or Rulers (http://www.omnidea.it/en/software/rulers/ the website is actually down so look on google).
    Hope it will help…

  16. Steve says:

    Nice time lapse! What timer web app were you using to log your hours?

  17. Brian Pajak says:

    You know you only recorded this because the client thought you did this in ten minutes, dont lie!

    But seriously thanks for the vid. It’s very helpful to see your process.

  18. Nina says:

    Nice idea, but do slow it down. I’m a designer and had to stop video as it gave me a headache. Very hard to follow.

  19. Ivan Mišić says:

    Usefull video. In few minutes I’ve seen all steps from photoshop to html.

  20. Charles Lau says:

    Though it can be dizzy watching, this video is very inspiring. My last knowledge of website programming is still with HTML without CSS… Thanks!

  21. Very cool indeed – and somehow slightly mesmerizing and soothing. I especially like how it shows how often you jump from app to app, something that I think we all do. Thanks for taking the time to record and post.

  22. Trisha Cupra says:

    Great video! Some comments are a bit silly. Slowing it down would defeat the purpose – it’s Time Lapse. It’s not a tutorial, it’s a peek at your workflow. I get it. :)

  23. Luis Lopez says:

    Excellent video, I love it, I haven’t seen a CSS time lapse video like this one. Awesome, and you always use illustrator for create the layout?

  24. Igor says:

    Thanks for sharing it! It’s great!

  25. chris says:

    You know if you posted the whole entire thing that isn’t time lapsed I would probably find the time to actually sit there and watch the whole thing. Might not be a bad idea.

  26. Nice tutotrial for me, thank you very much!

  27. Arminder says:

    Good video, I can’t believe it took you just 3 hours.

  28. Gerben says:

    He uses Code I believe. Pretty much the same development process I use, I think we even use the same grid :)

  29. sergio says:

    yeah thats coda.

  30. David D says:

    just stumbled upon this video. i know it’s older, but still very nice. love it.

  31. Rohit says:

    Exactly what i wanted Chris.. thanks.. i have also written question for you new video series. Please do answer dat.. :)

  32. Maxi says:

    We want more! We want more! We want more! We want more! We want more! We want more! Lol :)

Leave a response