Shop Mobile More Submit  Join Login
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
:icontebgdoran:
TebgDoran Featured By Owner Jun 24, 2008  Professional Interface Designer
Thank you for the critique. I agree with your point.

I didn't want to make it so bold as to interfere with the layout, so I made it tiny and discreet. I personally loved it where it was - the mild lightening around text of that color made it look like the characters were holes in the background - but I suppose I was at an advantage - knowing they were there and what they did because I put them there.


I have increased the font size by .05em (small change, I know, but I really think it helps), changed the "pages" label and anchors to bold face, darkened the font a bit, and made the white backing slightly more opaque to help it stand off more. I also added a line between the sub-heading tag and the content, then matched it up height-wise to the bottom of the "pages" div. This gives it sort of a faux "floating-pane" effect, and I believe it should help, both with discoverability and with tying the "pages" links in visually as a multi-tab that controls the content below.


If you would be so kind, I would ask that you check the changes on the Credit page and let me know if you feel the issue resolved.


Thank you again for your comment and critique. :)
Reply
:iconbluestunt:
BlueStunt Featured By Owner Jun 25, 2008
Much more obvious now! I've never known somebody to make big changes based up my opinion :o.

You have an amazing site, I love the way it adapts to changes in window size, and I've never believed much in the power of transparent PNGs. You've inspired me for some of my future projects =).
Reply
:iconsweetnut:
Sweetnut Featured By Owner Jun 24, 2008
OOOoOoooOooO that is awsome!
Reply
:icontebgdoran:
TebgDoran Featured By Owner Jun 24, 2008  Professional Interface Designer
Thanks for the comment. I'm glad you like it. ;)
Reply
:iconsweetnut:
Sweetnut Featured By Owner Jun 24, 2008
:D
Reply
:iconybres:
ybres Featured By Owner Jun 24, 2008
Really like the idea. Good work. I agree with you on the IE6 thing.
Reply
:icontebgdoran:
TebgDoran Featured By Owner Jun 24, 2008  Professional Interface Designer
Thank's for the compliment. :)


As far as IE6 is concerned, I didn't just want to drop things entirely, but I didn't feel like changing seemingly valid markup to rework it post-load with Javascript. As such, I just made a separate page with a separate stylesheet for IE6 compliance.

With the way the main pages render in IE6, the user will see a "Does this page look odd to you?" link in the body area, and clicking it will take them to the dedicated page that tries to explain what's wrong with their browser. I may not make the rest of the site compatible, but I'll at least try to tell them why. ;)


Thanks again for stopping by. :)
Reply
Add a Comment:
 
×




Details

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

Stats

Views
4,798
Favourites
29 (who?)
Comments
17
Downloads
276
×