I like how it looks,
but to turn it into reality, how would you do convert this to HTML/CSS
Without just cutting squares of the design (which I really dislike personally)
Squares?! \o/.
I should imagine you'd treat it like any other website where there are images to be dealt with. I'd have each and every asset exported as seperate images and position/ overlay them accordingly. It's the developer's job to ensure the website is as pixel-perfect to the design as possible, remember.
To optimise loading times, compile the images into a spritesheet!
If you were still coding the site using table oriented mark-up, you'd cut the site up into little squares; however, web development has come far enough that no one does table based sites anymore (hopefully).
Thanks to new development, you can break everything up into little images (Like layers, z-index is glorious!) and position them once again through the use of stylesheets (like you were saying in your post). Spritesheets do indeed make the site images "load" faster, though it is a slightly more "advanced" technique.
As for, "It's the developer's job to ensure the website is as pixel-perfect to the design as possible," while true that front end developers are responsible for turning designs into a functioning piece ready for the web, I wouldn't say it is entirely their job. I often get handed PSDs for turning into mark-up. A common mistake I've seen designers make is completely ignore the basics of modern web design. Things like using a grid in your design, or having guidelines that the front end developer can use to get measurements. Some more issues include weird margins, difficult text and strange effects to replicate without resorting to images, weird positioning of certain elements, and of course the biggest problem: the lack of flexibility in the design. These are fundamentals of the
web that
Web Designers need to have clear concepts and understanding about.
Lack of flexibility is the biggest issue in particular when web designs (like this one) contain too much graphical work. Take for example the input fields in the sidebar for the username and password. Because of the exotic / graphically interesting border and shadows, I would have to cut that field into an image and assign it to a field in the mark-up with fixed height and width. Now what if I wanted the same effect on another input field in the main body (take for example, a register page) but needed to increase the width? Well, I can't. Not unless I create another input field image with the size I want and write extra markup for it. Not to mention the incredible reliance on images for the site to work / look the way it should. The header texts in the sidebar is another example, unchangeable unless you make new images. No matter how many sprite sheets you use, the initial load times would be terrifying. I love FCV2005 work personally, but I would absolutely hate to turn his designs into mark-up.
I consider FCV2005 one of the best (if not THE best)
Graphics Designer
here,
Web Designer though? Not so sure.
Though, I really do think he should experiment with different layouts. Two column designs are too overdone in private server designs. Otherwise, really cool looking design!
:
