Baniboy's Extra Blue Theme! Check out my theme for my website and contribute

[Baniboy 3]

Well this is the theme/layout I made for my future website.The website is in finnish language. I made the minimum width 700px and max 1000px, all the graphics have been made with GIMP and it didn't really take much time. I want your advice on how to make it look better or to know if it already is perfect (heeehee, I somehow can guess that it's not )The buttons change when hovered (on navbar and the vertical navigation). The footer hasn't got much of a content, only valid css and valid xhtml marks.And then there's the lorem ipsum stuff, should I make the font larger or something?There's also coming soon stuff like "latest articles" box under the navigation.This website will serve a as a personal blog where I publish my thoughts and stuff and also I'm going to make several tutorials in it so it'll be pretty "full of content", I'm planning about making a xhtml and css tutorial and then if I have time, a little basics of GIMP.It'll also have a "software" section where I provide my review of software and put a download link.After I uploaded the picture I found out that the text was a bit blurry but whatever, don't stare it too much or it'll BURN YOUR EYES!

Edited March 8, 2009 by baniboy (see edit history)

[andreip 0]

Well sorry to say but it looks kind of unfinished yet. You should work a little more on it and make it finer. Try to use more colors and match them. Also you could get a photoshop trial. Trust me I've used gimp and is not that good for web designing. And the quality looks a bit dissapointing. It would help me to figure more about your website if you could provide the functional version.

[Baniboy 3]

Well sorry to say but it looks kind of unfinished yet. You should work a little more on it and make it finer. Try to use more colors and match them. Also you could get a photoshop trial. Trust me I've used gimp and is not that good for web designing. And the quality looks a bit dissapointing. It would help me to figure more about your website if you could provide the functional version.

Well it is quite unfinished, well... because it's unfinished. I didn't take time to do it really. Just a little gradient there and some blue stuff here and there...
I'm going to improve it, just need to get some sleep lol. I'm uploading a new version soon, the current one does kinda look naked.

[truefusion 3]

I'm not entirely sure which part is coding and which part was made in the GIMP. However, i think the buttons and the 3D object should be centered to be in alignment with the content box (likewise perhaps the W3C icons). I think also rather than fading into that greenish color, it should fade out into a black color or darker blue color. The interesting part about it now, though, is that the reflection on the 3D object is pointing towards the bright side, as if the bright side is actually reflecting light on it, so replacing that greenish side with a dark color would ruin that effect. Regardless, the color for the 3D object needs to be changed to match the background color better, so when changing it, you can change the location of the light, making things work consistently there.Given the position of the buttons, it may be better if they imitate more of a tabbed look. I think also vector and grunge brushes would work well here, that is, after making the aforementioned modifications, like making them appear like they're coming out of the darkness, so to speak. Perhaps even some abstract brushes to go along with it. Then you can perhaps make the background of the context area more transparent, but to where the text is still visible. Also, i'm not sure if you're using actual text or if the text for the buttons was done in the GIMP, but if they were, you should consider a more stylish font. The typography of the layout could use some spicing up. Anyway, i don't having anything else to say.

[jlhaslip 4]

You have a nice start to a decent web page design there.Take the advise from above and run with the suggestions. And GIMP does all the graphics I need to do. No need to spend the money on Photoshop if you don't need it.

[Baniboy 3]

I'm not entirely sure which part is coding and which part was made in the GIMP. However, i think the buttons and the 3D object should be centered to be in alignment with the content box (likewise perhaps the W3C icons). I think also rather than fading into that greenish color, it should fade out into a black color or darker blue color. The interesting part about it now, though, is that the reflection on the 3D object is pointing towards the bright side, as if the bright side is actually reflecting light on it, so replacing that greenish side with a dark color would ruin that effect. Regardless, the color for the 3D object needs to be changed to match the background color better, so when changing it, you can change the location of the light, making things work consistently there.
Given the position of the buttons, it may be better if they imitate more of a tabbed look. I think also vector and grunge brushes would work well here, that is, after making the aforementioned modifications, like making them appear like they're coming out of the darkness, so to speak. Perhaps even some abstract brushes to go along with it. Then you can perhaps make the background of the context area more transparent, but to where the text is still visible. Also, i'm not sure if you're using actual text or if the text for the buttons was done in the GIMP, but if they were, you should consider a more stylish font. The typography of the layout could use some spicing up. Anyway, i don't having anything else to say.

I some of the things you said above. It wasn't quite ready and it still isn't but i didn't want any kind of dark feel to it.

Here's what I did:

I made the content/navigation a nice background which has rounded corners (with javascript and css) if you want rounded corners too, visit this site:http://forums.xisto.com/no_longer_exists/

And then the shadows, tab-like menu.

I really took time to do this and I would like to know how it turned up.
Tell me your opinions, it still needs a bit fine-tuning but I think it looks pleasant to the eye unless you're allergic to blue

Edited March 9, 2009 by baniboy (see edit history)

[truefusion 3]

I really took time to do this and I would like to know how it turned up.Tell me your opinions, it still needs a bit fine-tuning but I think it looks pleasant to the eye unless you're allergic to blue

Looks a lot better, especially the glossed tabs. The tabs remind me of the Murrine GTK theme engine. For the black drop shadow on the sides, changing the layer blending to Overlay may make it look better. And i don't know why, but the text in the context area (i.e. the text within the blue border) seems like it would be better if another font was used; everywhere else appears fine. Perhaps the blue border surrounding the paragraph would look better if it had the background color of (i suppose i would call it) the "body area," that is, #6FCAED. And for the active tab, the blue tip, perhaps blend it to Overlay (i.e. if it's on its own layer).

As a side note, since it can be quite annoying to attempt to match all screen resolutions with certain gradient backgrounds, since the image doesn't reach 1600px in width, and since some GFX cards are going beyond that width, with the current gradient background you have, the only way i see that you can satisfy all screen resolutions is to align the background all the way to the left or right edge. You pick the edge, and on the opposite edge you pick the color of the very last pixel at that edge and place it as the background for the page. That way it'll seem like it continues and not get cut off by white space.

[Xalor 0]

I like to some extent the gel feel of it looks pretty cool. It doesn't have the same flow as a normal style. you need to establish a basic flow with your templates. it has to fit nicely together. That begins with the fonts, usually sans serif fonts are the best for web pages since they establish a level of uniformity between each character. Arial, Tahoma, Trebuchet MS, Myriad Pro, Calibri and most of the Vista Fonts are pretty good to use on a website. Arial is one of the best. When you are unsure of a character to use, set the alternative font to Arial, so the browser doesn't revert back to Times New Roman. I like the blue style, and the fact that you did it on GIMP makes it pretty amazing to me. You inspired some part of me to show off a new template I've been trying to make, not done yet almost done with the home page. I need to do the interface for the video player.

[Baniboy 3]

-

Looks a lot better, especially the glossed tabs. The tabs remind me of the Murrine GTK theme engine. For the black drop shadow on the sides, changing the layer blending to Overlay may make it look better. And i don't know why, but the text in the context area (i.e. the text within the blue border) seems like it would be better if another font was used; everywhere else appears fine. Perhaps the blue border surrounding the paragraph would look better if it had the background color of (i suppose i would call it) the "body area," that is, #6FCAED. And for the active tab, the blue tip, perhaps blend it to Overlay (i.e. if it's on its own layer).
As a side note, since it can be quite annoying to attempt to match all screen resolutions with certain gradient backgrounds, since the image doesn't reach 1600px in width, and since some GFX cards are going beyond that width, with the current gradient background you have, the only way i see that you can satisfy all screen resolutions is to align the background all the way to the left or right edge. You pick the edge, and on the opposite edge you pick the color of the very last pixel at that edge and place it as the background for the page. That way it'll seem like it continues and not get cut off by white space.

I like to some extent the gel feel of it looks pretty cool. It doesn't have the same flow as a normal style. you need to establish a basic flow with your templates. it has to fit nicely together. That begins with the fonts, usually sans serif fonts are the best for web pages since they establish a level of uniformity between each character. Arial, Tahoma, Trebuchet MS, Myriad Pro, Calibri and most of the Vista Fonts are pretty good to use on a website. Arial is one of the best. When you are unsure of a character to use, set the alternative font to Arial, so the browser doesn't revert back to Times New Roman. I like the blue style, and the fact that you did it on GIMP makes it pretty amazing to me. You inspired some part of me to show off a new template I've been trying to make, not done yet almost done with the home page. I need to do the interface for the video player.

My background gradient is 1920 px wide.

I have a problem with the shadows, they are formed by a bilinear gradient which is the background of the div containing the whole page (it repeats itself).
When the window size gets smaller, the shadow turns kinda freaky.
Another option is to do a shadow for only one side...
I can't do overlay, since there's only one layer and I'm using sliding doors method on tab menu.

Here's the image (with the shadow looking freaky)

EDIT: Never mind I just got the shadows to work properly. Is the font good by the way?

Edited March 10, 2009 by baniboy (see edit history)

[truefusion 3]

My background gradient is 1920 px wide.

I see. Well, should i assume the height of it is around at most 20px and that the background loops on the y axis? Otherwise, that would be not only a lot of loading time, but perhaps even a lot of RAM being used on the client side.

Is the font good by the way?

See how this color looks like for the text in the context area that's in the border: #202F32. For the active tab text color, make it darker instead of the grey that it currently has, it seems to be colliding with the background color.

---

The layout looks better than its previous state. I still think, though, that the blue, that is, _____, of the 3D object is colliding with the background color.

By the way, what program did you use to make the 3D object?

[Baniboy 3]

I see. Well, should i assume the height of it is around at most 20px and that the background loops on the y axis? Otherwise, that would be not only a lot of loading time, but perhaps even a lot of RAM being used on the client side.

See how this color looks like for the text in the context area that's in the border: #202F32. For the active tab text color, make it darker instead of the grey that it currently has, it seems to be colliding with the background color.

---

The layout looks better than its previous state. I still think, though, that the blue, that is, _____, of the 3D object is colliding with the background color.

By the way, what program did you use to make the 3D object?

No worries, it has the height of 1px and it's like 1.8 kB. So I don't think it will "overload" the RAM or anything.

The logo/header or the "3D object" as you stated is made with xara 3D trial version. I will do what you suggested but I didn't really get

I still think, though, that the blue, that is, _____, of the 3D object is colliding with the background color.

The logo hasn't got one color, it has many due to reflections and stuff. So you suggest a lighter blue for the background or should I just make a gradient for that?
I assume by "active tab" you mean pressed, correct me if I'm wrong.

I will do the changes and edit this post then.

Edited March 11, 2009 by truefusion (see edit history)

[Xalor 0]

I would say since he is using GIMP most likely that or one of the open source Logo Creators. The only problem I have with your site is that it doesn't fit together very nicely. You need to change transparencies to the center piece, and make it a transparent box or convert the box the surrounds the main text into a gloss sheen, and then set the opacity slightly lower, to make it look like glass and convert into an SVG try it on Illustrator or Inkscape. I'll post up my theme that I've been working on, soon enough, its red though >.> Change the other fonts to lets say Tahoma and make it bold with a shadow effect. The text not the whole page itself. The text is good now but slightly too large. I'm really sorry about suggesting too much. I know how pressure it is when everyone wants a different change. Since I saw the actual image, if possible can I have a copy of the webpage? I just want to see how it looks never coded my templates before.

[HappyHippie 0]

Hmmmm. Well it is very blue that is for sure. I think its a good start, I'm not one to critisize though because I dont know much myself on making a site, I just know some simple Html, But I get done what I want, So I guess thats all that counts. I would have to agree with a couple people though it is a little plain I understand it isnt finished yet. And the text definately needs to be a different color that grey doesnt look very good at all. And I dont mind blue but I think another color in there might liven it up a little. Anyway thats just my opinion. Keep up the good work!

[truefusion 3]

The logo/header or the "3D object" as you stated is made with xara 3D trial version.

Trial version? Switch to Blender, it's the easiest to use 3D modeling program (and i've tried Maya, 3DSMax and Cinema4D). Here's a video i put together just to ease the switch, it shows how to model what you created but in under 3 minutes: click.

[Tramposch 1]

Ok, take none of this for offense, im critiquing. The colours are kind of... Hurting eachother. What i sometimes try to do, when i design colourful layouts with multiple bright colours, i google for an image. Like for this you might be able to google for a "Tropical beach" or something, or the tropics, and take some colours out of the sky, the water, and things like that. I find a lot that colours mixed in nature mix well in layouts. Another important thing are Visual Breaks. A visual break is usually a line that breaks one part off from another part. Most visual breaks are usually under the banner or under the navigation, visual breaks are usually very strong colours, like if you are doing a red theme, you have a very bright red, or if you have a black theme, you use like a grey or a strong white. This makes the eye stop in its tracks and see the banner or the navigation.The second thing is the logo/banner location. Most companies/websites put the logo/banner in the top left corner because it is proved that that is where the majority of people's eyes look first. Also if you are to do this, a good banner is needed, your current banner is slightly.... bad quality. Also a good thing to remember is the border, they can't be too dark, like the black shadow/gradients you have on the left and right side, or the user feels "trapped" and ends up not liking the page.I believe that just changing some of the colours, altering the quality of the banner, and changing the borders, this could be a much better layout, good job so far though.