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!
Building a Website – Time Lapse Video
04 Sep
More posts like this:
No related posts.
33 Comments
Leave a response
My Sites
- Blog.SpoonGraphics
- My digital playground where I post various design tutorials.
- Line25
- My second blog featuring various web design tutorials, articles and inspiration.
- JakeTheLab
- My dog's very own website. See insights into the life of Jake the Labrador Retriever.
- SpoonGraphics
- Home to my creative Graphic and Web design services and design portfolio.
what do you use for your code Chris?
Although theme is great, the video is to fast to follow anything on it. I got headaches watching it.
Well done, but the main work is finding the colors and the concept in my opinion… looks like my workflow in your video ;-) greetings
Coda
Nice work and nice musique, La manau negra ?
Demo ?
He uses CODA..
Chris correct me if i’m wrong,
One of the most stunningly useful videos I’ve seen this year!
Interesting post!
Whats the grid overlay you get on Illustrator – 3:08?
I thought I was the only one who switched that many times between apps. :P
Great video!
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.
that was way cool.
like a roller coasta ride!
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’?
What is that funky background music that you have playing?
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 ;)
Nice work, Chris. Did I see some DiggNation in there?
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…
Nice time lapse! What timer web app were you using to log your hours?
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.
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.
Usefull video. In few minutes I’ve seen all steps from photoshop to html.
Though it can be dizzy watching, this video is very inspiring. My last knowledge of website programming is still with HTML without CSS… Thanks!
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.
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. :)
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?
Thanks for sharing it! It’s great!
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.
You lost me at 0:01.
Nice tutotrial for me, thank you very much!
Good video, I can’t believe it took you just 3 hours.
He uses Code I believe. Pretty much the same development process I use, I think we even use the same grid :)
yeah thats coda.
Super Video!
just stumbled upon this video. i know it’s older, but still very nice. love it.
Exactly what i wanted Chris.. thanks.. i have also written question for you new video series. Please do answer dat.. :)