• 0

Speed Web Design - YouTube video


Question

Hiya,

I've just finished creating a video showing the process of building a website right from the initial design in Photoshop through to the raw HTML and CSS coding.

Thought some of you would be interested!

It's best viewed in HD and full screen.

Here's a link to the finished website (which also just happens to be my web design business, surprise, surprise :p): webvortex.co.uk

Hope you enjoy it,

Nick

Link to comment
Share on other sites

Recommended Posts

  • 0

That's a pretty cool video. Should be helpful to many people!

Well thank you very much! I got the idea from all the speed art that's floating around like artists drawing Spiderman in Photoshop.

Link to comment
Share on other sites

  • 0

Very cool to watch.

Thanks.

There is an annoying glitch right at the beginning where it freezes on the transition out from the "Speed Web Design" text.

I'm not going to re-render it though because it took 35 hours last time... :s

Link to comment
Share on other sites

  • 0

Your coding is neat . Being the largest segment , it made me realize just how much dreamweaver used to spoon-feed me :rofl:. (...and jquery)

Haha yeah, and I didn't even film the javascript. I was intending on doing it but to fit the whole lot into 10 mins, it would have just been a blur...

Link to comment
Share on other sites

  • 0

Cool video. Are you aware of text boxes in Photoshop? Just click and drag to make a text box selection to mark the bounds. You probably already know that but old habits die hard, huh? :p

Link to comment
Share on other sites

  • 0

Cool video. Are you aware of text boxes in Photoshop? Just click and drag to make a text box selection to mark the bounds. You probably already know that but old habits die hard, huh? :p

Yeah you're so right, I just didn't think at the time, my bad blush.gif

Link to comment
Share on other sites

  • 0

Pretty nifty, perhaps this will change the way i do things, i generally tend to just start working on the code and make individual images as needed.

Link to comment
Share on other sites

  • 0

Great video, how long did it take in real time?

Well it's sped up 1700% and the video is 10 mins so I guess it took me about 3 hours.

But the Javascript probably took about another hour and a half and then I had to add the other pages and do a load of PHP for the customer login etc...

It was several days before I had completely finished it.

Pretty nifty, perhaps this will change the way i do things, i generally tend to just start working on the code and make individual images as needed.

Yeah I always used to do that too, but it's much better to design at least the home page in Photoshop first so that you can be happy with how it looks before starting to code. You end up with a far cleaner, more sophisticated look that way.

Link to comment
Share on other sites

  • 0

Nice vid...

Would be nice to be able to see it slightly less sped up though

I know what you mean but then it might get boring... All the source code can be viewed if you want to see it in more detail.

Link to comment
Share on other sites

  • 0

Well, I didnt mean real time or anything, just a bit slower but yea might get boring, but would have been nice to see the progress see what happens when you add certain parts, you check chrome yourself regularly but it goes past so quickly ^^

As for the code, I could get that with a right click on you site :p Would just have been nice to follow your general workflow better and maybe pick up a trick or two, webdesign isn't something i need to learn well maybe the design/photoshop part but my workflow is far from professional in any way ^^

Link to comment
Share on other sites

  • 0

Well, I didnt mean real time or anything, just a bit slower but yea might get boring, but would have been nice to see the progress see what happens when you add certain parts, you check chrome yourself regularly but it goes past so quickly ^^

As for the code, I could get that with a right click on you site :p Would just have been nice to follow your general workflow better and maybe pick up a trick or two, webdesign isn't something i need to learn well maybe the design/photoshop part but my workflow is far from professional in any way ^^

Ah I see what you mean, well even by grabbing the source code from my site you still won't get the full story. I use PHP to compile my web pages rather than just using individual html files.

For example index.php on the server looks something like this:


<?php
  $title = "Home";
  include "head.php";
?>
Content for Home page...
<?php
  include "foot.php";
?>

All the other pages are made up in a similar way. So if I wanted to, say, add a new page, I just need to edit the navigation bar code in head.php and the changes are made site-wide instantly rather than having to change every single page.

For the video I just did one html file for simplicity but in reality, the files on the server look completely different.

Link to comment
Share on other sites

  • 0

pretty cool :)

I had to mute the video cause you added coldplay in at the end (can't stand them), other than that, pretty cool stuff :)

Link to comment
Share on other sites

  • 0

Jesus christ man, very nice video / music / work.

Can you please do a normal / slow one for us n00bs? I can code but i cant design for ****. Also do you use a web palette to match colors? I suck at matching colors and I dont know if theres a palette in photoshop that when you select one color, it'll show you all the colors that correspond.

Great video!

Link to comment
Share on other sites

  • 0

Awesome work there, I love the video. I am a big fan of web design and try my best when I work on projects, but I have a big problem where I drift away from a project and it never gets finished. It's extremely annoying and feels debilitating. Like writers block. It's the same with other things I do though, not just web design.

I wouldn't mind a slower version of that video, but there is the problem with youtube's low video length cap even with it's increase a few months ago.

This is a good website for finding colors http://0to255.com/ , it gives you you chosen color in different shades of the same color. I am also a fan of colorcop on windows too, it can be handy!

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.