Designing my winter break away

Posted by Mattc0m in Design, Projects, Websites on Dec 27th, 2009 | no responses

It is a winter wonderland here in small town Thomas, WV. The days are long, full of holiday cheer, laughter, and merriment.

Oh, and a shit ton of design work.

As you may or may not know, I’m a fairly accomplished professional designer. I’ve been designing fairly steadily for about five years now, and have created dozens of websites. I’m nearing the one hundred mark. I’m not great by any means, but I’m getting better and better, and my work is really beginning to shine.

Anyway, enough about me! Let’s talk design.

My first big project is Games Cast TV. Games Cast Logo

The idea of this project is to unify and expand e-sports by providing a single site for all your video needs. With the homepage being a dynamic, functional page with AJAX notifications, Javascript-based IRC chat, and Flash-based live streaming, you can watch continuing e-sports coverage without ever leaving the frontpage. The second big feature is having the largest searchable index of e-sports videos. It’s gonna be pretty intense.

So the idea behind the design is having a very clear, specific focus. There’s an air of general simplicity and minimalism in the design. The focus is truly on the content – the rest of the site being devoid of many colors. Each inclusion of color has a very specific purpose, and is meant to draw your attention. I drew a lot of inspiration from Hulu, Last.fm, Image Spark, and Maxvoltar for this project. Usability and clean aesthetics are my two goals, with maybe just a little “Web 2.0″ spice.

My first version
Really big on the minimalism, but really boring too. It was at a concept stage

Second version
Again, really plain, but I tried adding visual flair through icons and some gradients, as well as bringing focus to the middle.

Third version
This is the first version where concepts were less important, and the visual appeal took a bit more precende. It’s shaping up, and has an inspired header from both Hulu and Last.fm. Contrasting colors gives the site a lot more focus.

Final Version (alpha v0.2)
This design is still very early in it’s Alpha stage. It is roughly 50% complete (design wise). It is completely coded with HTML / CSS. Optimization and IE support has not been addressed yet. I’m still working on some visual upgrades, jQuery additions, and other coding tidbits as well.

However, you clearly can see the design is starting to take shape. A strong footer off-balances a somewhat boring header. It lacks a lot of fluff and visual flair, but is still a strong design. The use of color is very specific, drawing your eyes to certain portions. The middle of the page will be taken over by an actual streaming footage when the site moves online.

The design is meant to be very interactive, with an abundance of overlays, rollovers, and other effects letting you know how and where to interact with the design. This not being a functional website, mind you, means none of these features actually work yet. This is just the design part!

My biggest accomplishment is the CSS structure. I load a variety of CSS files, with many of them being dynamically loaded dependent on the user’s browser, resolution, or preferences set within the site. First, it loads a master.css, which loads the reset.css, text.css, 960.css (grid system, currently unused), and style.css (includes mainly header and footer markup). Then, a page-specific CSS is loaded (in this case, frontpage.css). Then, a color css is loaded. In this case, default.css (though black, red, and other colors will be available). Finally, a layout css is loaded, in this case default.css. However, widescreen.css will be available for widescreen monitors. Sweet!

This structure is very different from how I normally write my CSS, so doing it in this way is a bit daunting. Hopefully IE optimization won’t be too much of a bitch. But it makes customization the site down the line, as well as adding other themes for color and layout, to be extraordinarily easy.

Personally, I am very happy with how this design turned out. Sure, it may seem simple and a bit boring. But I’ve worked a ton on the little details, and I think it’s got a very good approach.

Other projects:


Leave a Reply