How to Build a Vibrant Professional HTML5 Web Design

Dec 10 2010 by Jacob Gube | 11 Comments

This 2-part tutorial on Design Instruct, our other site, will walk you through the creation of a Photoshop mock-up as well as provide you with a detailed guide on how to convert the design into an HTML5 template.

Final Result

Click the preview image below to go to Part 1 of the tutorial series on Design Instruct (or go to Part 2 instead).

Other Things to Do

Subscribe to the Design Instruct RSS feed
Follow @designinstruct on Twitter

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

11 Comments

Michael Tuck

December 10th, 2010

All the more reason for me to learn to more effectively PS, so I can do this kind of thing. :)

Michael Tuck

December 10th, 2010

“Learn to more effectively PS”? Sounds like I’m writing with Babelfish. Sorry about that.

Allan Crabtree

December 11th, 2010

Fantastic tutorial, love these! :)

krike

December 12th, 2010

Nice tutorial, however a bit to colorfull, the footer should only have one simple color. But that’s my opinion of course :)

Curtis Scott

December 13th, 2010

Great tutorial, Man that site has grown, you guys have shown some great tutorials in the past, but I think this one is one of the best!

Hijac

December 27th, 2010

I love the final effect above. But when I doing this, I just can’t make site like you. Only 80% similarity, maybe I should learn more photoshop tutorial in the future