Shop More Submit  Join Login
×




Details

Submitted on
June 24, 2008
Image Size
775 KB
Resolution
1380×905
Link
Thumb
Embed

Stats

Views
4,749
Favourites
29 (who?)
Comments
17
Downloads
276
×
Technolografik - Monumental by TebgDoran Technolografik - Monumental by TebgDoran
So yeah, Dan still is designing things, he just hasn't uploaded in a while. ;)



So, here it is, the king of all killer designs - the idea has been in my head for a long time, but it finally came out the way I wanted it two nights ago. Last night was spent finalizing the layout and writing the jQuery to paginate single-page content. There is little content in it as of now, but this one is just too good to leave sit empty. Also, the swooshy above the church is only on the front page - the internal pages will each have their own overlain enhancement to keep the pages fresh.


So, without further ado, I present: Monumental
--------------------------------------------------------------
Put your browser in full-screen mode, and it'll look like an interactive desktop background. The image just keeps on going, extending all the way to 1600px wide, and it fades out into black for a smooth transition if your browser happens to be even bigger. The body area is anchored to the bottom, with full length bars across the horizontal edges for the links, but it all flows smoothly and naturally within the viewing area, with never a scroll bar in sight.


And guess what - it's a live site! For once, I'm uploading the finished version first, mainly because there was no real "mock up". The background is just a well-framed photograph, and the HTML elements are placed in complimentary places.


You can check it out here: TechnoloGrafik.com


Basically, this site gives the big middle finger to IE6 - it uses PNG transparency for the overlay effects, and it relies upon a box-model technique that IE6 doesn't comprehend. I'm sick of supporting that antiquated ruin of a browser, and I'm not going to do so on my personal sites any longer.*


Viewing the working version requires any competent, modern graphical browser. Firefox works in all versions tested (back to 1.5), Safari works in 3.0 and up, Opera works in all versions tested (back to 9.23), and it even works in IE7! The one exception I must make is Konqueror - there seemed to be a PNG transparency cut-off in the screenshot I got, which makes the overlay in the bars cut between black and transparent - but other than that it works fine.


Screenshots courtesy of: BrowserShots.org

Photo Credit: pipo99

Graphical Header font: Fragmenta

Graphics created in The GIMP

Code written in Notepad++, and based upon jQuery technology



Enjoy! Comments and criticism are always welcomed. :)




* Fun Fact:
Despite that whole "I hate IE" attitude I have, in a delicious bit of irony, the BrowserShots workstation that screencapped this image for me was running IE8 - AND IT FRIGGIN' WORKED! I'm quite impressed, given IE's track record.
Add a Comment:
 
:iconelitebydesign:
EliteByDesign Featured By Owner Jun 30, 2008
I can see this design getting featured on tons of design sites. Best of luck!
Reply
:icon0-helio-0:
0-HELIO-0 Featured By Owner Jun 25, 2008   Interface Designer
Did anyone else say "insta-fave"? I sure did...


Really, the amount of websites that I've encountered using large background images recently has been surprising. (A fine example: Cameron Moll's portfolio page.) I've been stunned. I suppose that high-speed internet connections are becoming prevalent enough that the "light" page is slowly dying away... (Of course, it never will completely. Some sites look best with a light design. ;))

(Oh, by-the-way: I'm having connection problems with your server right now.)


As always, your work is fantastic. :)
Reply
:icontebgdoran:
TebgDoran Featured By Owner Jun 26, 2008  Professional Interface Designer
I said "insta-fave"! ;)

As far as the large background images are concerned, it's a private website that not too many people will be looking at, so I figure I can get away with it. I plan also to add the ability in the stylesheet switcher to choose in the preferences whether the user wants low and high-quality images, to hopefully keep it open to all.
Reply
:icondeadlinesdesign:
deadlinesdesign Featured By Owner Jun 25, 2008  Professional Interface Designer
I dont really like the photo, but the basic idea of this design is simply awesome. You are so fucking freaky when you code a site like this in Notepad++ :P *joke* However, Note me when the site is totally finished, I wanne see the great effects :P (hope you will insert some... maybe mootools slide)
Reply
:icontebgdoran:
TebgDoran Featured By Owner Jun 26, 2008  Professional Interface Designer
Well, I'm using jQuery, not MooTools, but I do plan on having a few effects here and there where appropriate. ;)

As far as the background image, personally I think it's awesome, but you bring to light a valid point - It may not be everyone's cup of tea. I'm working now to create a stylesheet chooser, which will allow the user to switch between a few different background images.
Reply
:icondeadlinesdesign:
deadlinesdesign Featured By Owner Jun 26, 2008  Professional Interface Designer
Yes, a "Themechanger" is a really nice idea ;) I would prefer a Vectorart... be sure to add one :P However, great work :)
Reply
:iconsniperholix:
sniperholix Featured By Owner Jun 24, 2008  Professional Interface Designer
You make me want fold up into myself and explode.......that concept inspires me to paint GOD's face. Great stuff. Teach Me!!!
Reply
:icontebgdoran:
TebgDoran Featured By Owner Jun 24, 2008  Professional Interface Designer
I'll tell you what - if you teach me how to capture a concept as perfectly as you did in Work Life Balance, I'll teach you the secrets of my web-based greatness. ;)


Thank you for the comment. :)
Reply
:iconsniperholix:
sniperholix Featured By Owner Jun 25, 2008  Professional Interface Designer
Honestly the birds are part the client logo (Unilever) but the putting together and coloring is all me. I had to use the logo in some way as part of the design so that left me little choices but i came up with this to represent "freedom from work related stress". if that makes sense...........
Reply
:iconbluestunt:
BlueStunt Featured By Owner Jun 24, 2008
Superb site, and the coding works beautifully. my only negative is that I feel that on the 'credit' page, the ';pages' box isn't obvious enough, it blends in far too much.
Reply
Add a Comment: