Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Site Design Help 6

Status
Not open for further replies.

cian

Technical User
Oct 11, 2001
1,383
Hi guys,
Yet another site critique. I'm having problems with a design, and I really need your advice.

Here's the new site i'm working on:


Please note, many links don't work and ignore all the spelling mistakes, this is just the first draft.

My main problem is navigation. So I have made 3 options which I think are most suitable.

Option 1: The first is on welcome.htm and is just navigating by way of icons under the main Title image. Problem is there might be a lot of sub-pages and creating graphics for all of these is a huge pain, then there's the problem of how to fit them in. The icons I have there are not linked yet. Its h´just to give the idea.

Option 2: Heroes.htm (The Heroes) is a cool nav bar. Solves all the problems of navigation but how to space it out? I included a simple line but it looks crap.

Option 3: Tutorial (tutorial.intro) Same nav bar but with bigger header and small image.

What do you guys think might be the best option or have you other ideas?
How about overall design, use of colours, my poor attempt at graphics etc?
What about the random image?

Any and all advice/criticisms/insults greatfully accepted!

Thanks







É

endamcg-logo1b.gif

 
Hi mate,

My opinion is that the icons look fine, but will it be clear to a user from the icon that it links to such and such page?

What I mean is will the sword be linking to a page about swords or something like that?

The navbar also looks fine but could do with a few   to space the text out.

Colour scheme, I would add a light background colour, along the lines of #E6DABD. Try that and see how it looks.

Hope this helps
Wullie

sales@freshlookdesign.co.uk

 
Hi Wullie,

thanks mate! About the icons, yeah it won't really be clear from the icons what page they are going to. All the icons are taken from the Heromachine flash engine. So the icons will need some sort of descriptive text with them!

So maybe the navbar is better!

I'll try that background. Problem is the images were done on a white bg so we need to be re-done on the new bg because of the shadow effect! I'll give it a lash anyway!

Cheers!



É

endamcg-logo1b.gif

 
Hi Cian,

You where faster with answering my post than I could answer yours. :)
A star for you because I took your javascript code from the Control-panel-imgmap.htm for a project of mine. I improved it with the settings of the top end left popup-position so the popup's shop up near the mouse-pointer.

It started when I saw a question on the HTML/CSS forum, that was the same as I did in my project 2 weeks ago. So I answered my solution and after that I saw your site here, with a better solution. You can see it in : thread215-305765

About your site:

1) I can't see realy a difference between "The Herous" navbar and the "Tutorial" navbar. I don't see small icons and bigger header in the navbar. Or do you mean the icon and header on the page. In that case I should choose option 3. (tutorial-intro)

2) On 800*600 screen all the pages have a horizontal scrollbar. With a little modification you can avoid that I think.

3) On the home page (with the blacl background and nice S-B-W pictures) the left-site navigation don't work in IE4.0

4) About the horizontal navbar (you mentioned in your option 2 and 3):
In IE5.5 I miss the top-border of the main-nav-bar "main-The herous-tutorial - ..... -other-sites"
In IE5.5 I miss the left-border and upper-border of all the sub-nav-bar's. When you mousein downwards from the main-nav-bar to the sub-nav-bar. And mouseout upwards from the sub-nav-bar to the main-nav-bar, the borders show up.

Hope this helps and thanx again for your code :)
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Hi Erik,

Hope the script is of use to you! Your mods are great, I may change my script! :)

Thanks for your comments!
1) The navbars are the same, the difference is what comes after the navbar. I like Option 3 best too, just need to space it out a bit.

2) Horiz scrolling, i'll remove the entire right column, that'll solve it!

3) Darn! Maybe i'll remove the script so it's just a static menu? it'll solve the nav problems but I like the falling tables! :(

4) Double darn!!! I don't know what to do with this. maybe i'll look for another navbar but this is one of the nicer ones I have seen. Any ideas?

Thanks again!





É

endamcg-logo1b.gif

 
Hi Cian,
Didn't have time to read wullies or boomerangs threads and with their knowledge I'm sure I'm shooting in the wind but the site looks great all the way around.

I like the nav bar (heros + tut. look identical to me)...the effect on the &quot;other sites&quot; option is cool and gives a lot to the bar.. why didn't you do this with the other links?

I like the icons but the navigation bar is far better I think.

last, the select list for navigation might be better if you do it without the &quot;go&quot; button but on select. Then only a heading of jump to: above maybe.

[2thumbsup] [bomb]
I may not get it the 1st or 2nd time,
but how sweet that 15th time can be.
 
Hi Onpnt,

Thanks a lot!!I have decided to go with the nav bar plus single icon as on the Tutorial page.

The effect on the nav bar? I though it would be too much on all the links, its quite slow. I can speed up the effect too but it doesnt look nice.

Select list: I left in the Go button so it matches the search box. I can try it without it to see what its like.

I have also removed the whole right column so the page is now 700px max. Although I think I will play with this again.


Thx for the feedback guys!



É

endamcg-logo1b.gif

 
Nice site...
Like the heroes and villans image on the intro page...did you make them yourself or scan them in??
Like the falling menu effect verry much...
In &quot;Welcome.html&quot;, under the title and the horizontal bar, you have some weapons images, at first I though they were links, kinda confusing...if you add some more weapons images, and align them to the left, it might take away the confusion...if you can get the weapons images aligned directly under the &quot;H&quot; in Heroes, would look nice...
In &quot;Heroes.html&quot;, try aligning the nav-menu under the letter &quot;H&quot; in &quot;Heroes...&quot;, because right now the &quot;MAIN&quot; in the menu-bar is overlapping with one of the characters in the image...
The effect you have for &quot;OTHER SITES&quot;, can you do the same for the rest?? OTHER SITES looks so cool...
Also in &quot;heroes.htm&quot; you have an image on the far right, I think its a Mace, can you do for that for all pages?? Because on the rest the far right of the screen is blank...once again, maybe its my browser (i'm using IE6 on win98)...
Other then that, the site is nice...
I have not failed; I merely found 100,000 different ways of not succeding...
 
On my T1 its taking a really long time to load each page.
 
Hi GUJUm0deL,

Thanks for the feedback!
The intro page, the individual figures were created with Heromachine and then a LOT of modification using Windows Draw and an effects package I use!
I also like the falling menu but it dosn't work in IE4 :-(

On welcome, the icons were going to be links to the main sections, that image was just put there to demonstrate the idea. Thx for the suggestions on that!

Aligning the nav bar, ok, i'll work on that, unfortunatly it changes though with different browser window sizes etc!

The nav bar &quot;Other sites&quot; effect, i thought it might be too much if put on all the links but you're the second to mention that so i'll try it out!

The mac on the right, i only tried that on one page, it rotates through about 15 different weapons. I had side scrolling so I removed that! for now!

Good comments


Kjonnnn, thx for that! The site will be fairly image intensive. I'll have to work on optimising the graphice to speed that up a bit!

Thanks again for all the comments!



É

endamcg-logo1b.gif

 
cian, hi. Have you checked out to see if one of their menus can work for you?? I have a similar menu, if you want, I can email that to you: imajin_arts@hotmail.com
I wouldn't worry about IE4, I don't think there are alot of ppl. out there still using that browser...
The page does take a while to load, might wanna look into that. I have a cable modem and it still takes some time...
As for the position of menu in different resolutions, see if this can help you:

<script>
var hres = false
var lres = false

if ((wd >= 1024) || (hi >= 768)) {
hres = true
}
else {
lres = true
}

if (hres) {
document.write('<style type=&quot;text/css&quot;>#Layer1 {position:absolute; z-index:1; left:44px; top:99px; height:36px; width:22px;}</style>')
}
else {
document.write('<style type=&quot;text/css&quot;>#Layer1 {position:absolute; z-index:1; left:44px; top:99px; height:36px; width:22px;}</style>')
}
</script>

What this script will do is determine what resolution the user has then load the Layer1 in the right position...and you can call the menu like this:
<div id=&quot;Layer1&quot;><script language=&quot;JavaScript&quot; src=&quot;menu.js&quot;></script></div>... I have not failed; I merely found 100,000 different ways of not succeding...
 
Hey GUJUm0deL,

I checked through DD yesterday but found nothing. I might just stick with it and let IE4 users suffer! 'bout time they upgraded anyway! LOL

Thx a million for the script, i'll give it a go!
Thx for the offer too, i'll be in touch! :)




É

endamcg-logo1b.gif

 
your page is ok
how you make the navigation bar, give some help, i´d like to make one like that in my site.

Thanks
Geraldo
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top