Hard Light Productions Forums

Off-Topic Discussion => Arts & Talents => Topic started by: Ace on April 08, 2004, 04:06:13 am

Title: WIP website (large image)
Post by: Ace on April 08, 2004, 04:06:13 am
(http://choranthil.db-forge.com/Development/Ace/chor_site_concept.png)

Since websites have been submitted here as art before, here's a site (as well as its graphics) that I'm making for a fantasy setting. The idea is to have a bit of a steampunk printing press feel, while still looking more archaic then that. (without resorting to ye olde engrish)

The final site will be designed so that the people doing news posts, etc. who have zero HTML experience can update their site easily via news updating forms, etc.
Title: WIP website (large image)
Post by: Tiara on April 08, 2004, 04:29:18 am
Ikonboard!? :shaking: :nervous: :shaking:
Title: WIP website (large image)
Post by: Setekh on April 08, 2004, 09:16:11 am
I really like that, it sure does stand out. :) Bonus marks for using Lorem ipsum to test the text rendering. ;)

Here's a personal suggestion: because the colour theme of the site (for the text, particularly) is quite uniform, would it be worth separating the hyperlinks with a different type of font facing or style - perhaps bold small caps? That would help them to stand out and I think may look nicer. Worth trying, at least. :)
Title: WIP website (large image)
Post by: Corsair on April 08, 2004, 09:21:35 am
Latin??
Title: WIP website (large image)
Post by: Setekh on April 08, 2004, 09:27:55 am
Yep, Latin. Find the explanation here.

http://www.lipsum.com/
Title: WIP website (large image)
Post by: mikhael on April 08, 2004, 11:43:32 am
That's certainly striking. It doesn't look like a website to me, and yet, it retains a good structure and easy to scan layout. Functional AND artistic.

High marks, sir!
Title: WIP website (large image)
Post by: kasperl on April 08, 2004, 11:55:36 am
i'd like to see the source of that......

i've been trying to get this: http://nodewar.penguinbomb.com/fscz/ to work on something else then IE. i failed horribly. the underlying system is one tiling background page with an iFrame on it, for the window, and in that iFrame, a page with the interface image, and 3 more iFrames, each linking to a page with a tiling background and CSS font system.

somehow, Mozilla hates the iFrames, and refuses to read the CSS properly. and when i include the CSS in the HTML, i fork the page for both IE and mo.



anyway, nice page, i always like stuff with simple colour schemes. it might be nicer if you switched the black into white and viceversa, though.
Title: WIP website (large image)
Post by: mikhael on April 08, 2004, 12:30:11 pm
Nah, if he did that, it would lose a lot of the flair. Right now it doesn't look like a website. It looks like parchment with text printed on it. If you reverse the colors, it'll look like every white-on-black website on the planet (my old one included)
Title: WIP website (large image)
Post by: Ashrak on April 08, 2004, 02:22:28 pm
definately original..but i would recommend a world map on the behind of the content box too :)
Title: WIP website (large image)
Post by: Ace on April 09, 2004, 01:04:37 am
Thanks for the comments.

I'm thinking of ways to tweak it more to look like an old newspaper and of course ways of denoting links and such better.

Probably this would involve tweaking the top image(s) a bit, the borders, etc. I do like Steak's idea of capitalizing the links, though that might be confusing with the way the titles are done. I'll play around to see what works.

Also, the final forum won't be Ikonboard, it currently is one but we're using a new, better, forum to go along with the site.

On the using the world map as a background- I thought about it, but a tiling world map (or non-moving one) doesn't quite go with the newspaper look.

If anyone had images of very early (pre-photography) news papers that'd be great, as those could give some good inspiration on tweaking the design more.
Title: WIP website (large image)
Post by: Xelion on April 12, 2004, 11:45:17 pm
Nice Design :yes:
Title: WIP website (large image)
Post by: Xelion on April 13, 2004, 12:02:56 am
kasperl have you tried just using css for the complete site instead of frames, then it should work for any browser v4 and above :D
Title: WIP website (large image)
Post by: kasperl on April 13, 2004, 02:27:26 am
well, it just became mozilla compatible thanks to Arc, but there was something wrong with putting it all in one file, on or two things just wouldn't work, IIRC.
Title: WIP website (large image)
Post by: JarC on April 13, 2004, 02:51:34 am
Kasperl, here's a site where you might find some tips and a template

http://www.saila.com/usage/layouts/
Title: WIP website (large image)
Post by: Sandwich on April 15, 2004, 04:55:30 am
Ace, that site layout can be replicated pretty much perfectly with CSS - I can run up a quick skeleton mock-up for you if you'd like. :)

Oh, and for display of numbers and other side sections, I'd highly recommend use of the Georgia font - it's cool and archaic-looking. Look:

June 15th, 2004 12:55 PM
Title: WIP website (large image)
Post by: Ace on April 17, 2004, 03:39:29 pm
Quote
Originally posted by Sandwich
Ace, that site layout can be replicated pretty much perfectly with CSS - I can run up a quick skeleton mock-up for you if you'd like. :)

Oh, and for display of numbers and other side sections, I'd highly recommend use of the Georgia font - it's cool and archaic-looking. Look:

June 15th, 2004 12:55 PM


I need to see if the server this will be on supports CSS, if it does I'll send a PM over if you have the time to do a mock-up.
Title: WIP website (large image)
Post by: Sandwich on April 17, 2004, 04:37:15 pm
Quote
Originally posted by Ace


I need to see if the server this will be on supports CSS, if it does I'll send a PM over if you have the time to do a mock-up.


CSS isn't server-side - there's no such thing as "server support" for CSS. It's all in the client. :)
Title: WIP website (large image)
Post by: Ace on April 17, 2004, 07:20:42 pm
Ahh well stupid me :)

If you have the time then, that'd be great.
Title: WIP website (large image)
Post by: Sandwich on April 18, 2004, 12:49:14 pm
Disclaimer: I've only been able to test this in IE6 and Mozilla 1.4. :) If you could get me the image you used for a background, as well as the source files for the header stuff, I'd be able to optimize the site alot more. :)

http://www.brainzipper.com/fs2/choranthil/index.html
Title: WIP website (large image)
Post by: kasperl on April 18, 2004, 01:02:19 pm
Sandwich, you might want to try to have the side "cells" run the same length as the center, like in the screenie at the top of this thread.
Title: WIP website (large image)
Post by: Sandwich on April 18, 2004, 01:29:04 pm
That's the one limitation of CSS-based design, unfortunately. There's not much to do about it unless you regress to using tables for layout, unfortunately.
Title: WIP website (large image)
Post by: kasperl on April 18, 2004, 01:57:03 pm
you could put it in iFrames, all three of the "cells".

but, has the FSCZ site demonstrates, that is often a horror to do properly, and frames are hated by some.
Title: WIP website (large image)
Post by: Sandwich on April 18, 2004, 02:52:30 pm
Such a thing as proper iFrames is rarer than Meson particles, trust me. Besides, anything that can be done with iFrames can be done with stylesheets. Like this scrolling element:

Heading 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nulla felis, ultricies commodo, pulvinar ut, gravida ut, magna. Quisque in nunc. Maecenas feugiat purus vitae elit. Etiam quis diam. Mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc nisl. Nunc laoreet. Nulla facilisi.

Heading 2

Duis enim risus, placerat nec, consectetuer id, pellentesque sit amet, neque. Sed nec tortor. Nam nec leo nec lectus tincidunt cursus. Nulla facilisi. Cras arcu lectus, volutpat ut, ullamcorper eget, elementum vitae, wisi. Nunc diam nulla, luctus et, commodo vitae, mollis cursus, enim. Nunc nulla mauris, aliquam in, vulputate pulvinar, luctus in, wisi. Aenean blandit ullamcorper mauris. Ut rutrum ornare libero. Quisque ac urna. Nulla sed diam vitae ligula mattis blandit.

Copyright © 2004 Hard Light Productions
All Rights Reserved

I like CSS. :D
Title: WIP website (large image)
Post by: kasperl on April 18, 2004, 02:58:58 pm
Quote
Originally posted by Sandwich
Such a thing as proper iFrames is rarer than Meson particles, trust me. Besides, anything that can be done with iFrames can be done with stylesheets. Like this scrolling element:

Heading 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nulla felis, ultricies commodo, pulvinar ut, gravida ut, magna. Quisque in nunc. Maecenas feugiat purus vitae elit. Etiam quis diam. Mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc nisl. Nunc laoreet. Nulla facilisi.

Heading 2

Duis enim risus, placerat nec, consectetuer id, pellentesque sit amet, neque. Sed nec tortor. Nam nec leo nec lectus tincidunt cursus. Nulla facilisi. Cras arcu lectus, volutpat ut, ullamcorper eget, elementum vitae, wisi. Nunc diam nulla, luctus et, commodo vitae, mollis cursus, enim. Nunc nulla mauris, aliquam in, vulputate pulvinar, luctus in, wisi. Aenean blandit ullamcorper mauris. Ut rutrum ornare libero. Quisque ac urna. Nulla sed diam vitae ligula mattis blandit.

Copyright © 2004 Hard Light Productions
All Rights Reserved

I like CSS. :D


ok, now change it from body text to a file link, without using PHP.

and i know proper iFrames are impossible, but as the FSCZ site also shows, it can do some fun stuff.
Title: WIP website (large image)
Post by: Sandwich on April 18, 2004, 03:25:24 pm
Quote
Originally posted by kasperl


ok, now change it from body text to a file link, without using PHP.

and i know proper iFrames are impossible, but as the FSCZ site also shows, it can do some fun stuff.


Why without PHP? That's what it's for. If you use iframes, you alienate anybody browsing on his or her handheld / cellphone / mobile device. You also alienate anyone browsing with a text-only browser.

Alongside those possible
  • disadvantages, there's the whole issue of allowing other sites to link to specific pages on your own site. Frame-based sites always have this problem, since you cannot tell browsers which pages to display in the frameset you're linking to.


So, what advantages do frames have? The best (i.e. most logical and efficient) use of frames I've seen yet is in the My Blogs section of www.bloglines.com - they have a listing on the left that needs to automatically refresh itself every so often, but the news items being read on the right cannot afford to be refreshed, otherwise the user would lose his place.

Frames can also provide a small to medium savings in bandwidth, since the navigation of a site usually is static and unchanging. However, this savings is minimal when compared to the cost of loading a full page on a properly built, CSS styled site.

* "Possible", because you may not have a target audience that would use a mobile device to surf. PC gaming sites generally can safely assume that the surfer will be using a PC to surf, whereas news sites, general informational sites, and search engines are just a few examples of sites that must remain compatible with the widest range of users.

EDIT: Oh yeah, site updated with a new BG Ace sent, and a few other tweaks.
Title: WIP website (large image)
Post by: kasperl on April 19, 2004, 05:30:10 am
well, not everyone has PHP capable hosts.

but i am not truely advocating the use of iframes, i am just saying that it is often the easiest, if not only, way out unlesss you want to go server side.


edit:

i really, really dislike the wood texture you put on there. it makes it look very cheap and like it has been made in Word by a 10 year old. (I used to make those kind of sites, in word, when i was 10)
Title: WIP website (large image)
Post by: Sandwich on April 19, 2004, 08:43:28 am
Quote
Originally posted by kasperl
well, not everyone has PHP capable hosts.

but i am not truely advocating the use of iframes, i am just saying that it is often the easiest, if not only, way out unlesss you want to go server side.


edit:

i really, really dislike the wood texture you put on there. it makes it look very cheap and like it has been made in Word by a 10 year old. (I used to make those kind of sites, in word, when i was 10)


True... in lieu of PHP capabilities, choices are limited.

And yeah, the wood doesn't strike my fancy, either, but that's what Acey wanted. I'd just as soon have a partially grainy, subtle drop shadow.
Title: WIP website (large image)
Post by: Ace on April 19, 2004, 08:38:07 pm
Well it's supposed to look like it's on a table. However, I'm thinking about something else for the background such as a map, etc.
Title: WIP website (large image)
Post by: kasperl on April 20, 2004, 03:30:10 am
if you want it to look old, you could add some winestains and stuff into the graphic......
Title: WIP website (large image)
Post by: Sandwich on April 20, 2004, 04:37:17 pm
I have something.... gimme a sec...
Title: WIP website (large image)
Post by: Sandwich on April 20, 2004, 04:42:42 pm
http://www.brainzipper.com/fs2/choranthil/index.html

You'll probably need to force-refresh (CTRL-F5 in IE, SHIFT-click on the refresh button in Mozilla).

I just need to figure out why the bottom is so darned long in f***ing IE - I HATE that browser!! :hopping:

EDIT: Now THAT's weird... the bottom isn't outrageously long in IE when the page is online, just when it's local on my computer. Grrr....
Title: WIP website (large image)
Post by: Ace on April 20, 2004, 04:50:50 pm
That's a much better wood texture than my photoshopped (fractal) wood with the bumpmap thrown on.

Kasperl: I don't want it to look too old, otherwise I would have added in the winestains and crumpled effects. It's intended to look like it was printed more or less recently.

I'll work on some other ideas for a background image, maybe even using that wood texture in it.
Title: WIP website (large image)
Post by: Anaz on April 20, 2004, 09:56:16 pm
Quote
Originally posted by Sandwich
http://www.brainzipper.com/fs2/choranthil/index.html

You'll probably need to force-refresh (CTRL-F5 in IE, SHIFT-click on the refresh button in Mozilla).

I just need to figure out why the bottom is so darned long in f***ing IE - I HATE that browser!! :hopping:

EDIT: Now THAT's weird... the bottom isn't outrageously long in IE when the page is online, just when it's local on my computer. Grrr....


:eek2:

that is truely awesome
Title: WIP website (large image)
Post by: kasperl on April 21, 2004, 03:17:20 am
(http://www.sectorgame.com/FSCZ/screeniesite.GIF)

this is what i get with mo.
Title: WIP website (large image)
Post by: Sandwich on April 21, 2004, 08:08:57 pm
Musta been a bad upload - I got it, too. Refresh.
Title: WIP website (large image)
Post by: Setekh on April 22, 2004, 08:24:52 am
Quote
Originally posted by Sandwich
http://www.brainzipper.com/fs2/choranthil/index.html


Now that's what I'M Tolkien about! No, wait... :nervous:

Seriously nice, Mike. :):yes:
Title: WIP website (large image)
Post by: kasperl on April 22, 2004, 08:42:04 am
i still only moderately like the wood, but it's better now, i geuss.