24 replies to this topic

[Baniboy]

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!

Attached Files

•  screener.png   165.17K   46 downloads

Edited by baniboy, 08 March 2009 - 11:36 AM.

[andreip]

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]

andreip, on Mar 8 2009, 07:35 PM, said:

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]

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]

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]

truefusion, on Mar 8 2009, 11:07 PM, said:

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://www.editsite.net/blog/rounded_corners.html

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

Attached Files

•  screener.png   173.48K   12 downloads

Edited by baniboy, 09 March 2009 - 08:13 PM.

[truefusion]

baniboy, on Mar 9 2009, 04:11 PM, said:

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]

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]

-

truefusion, on Mar 9 2009, 11:46 PM, said:

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, on Mar 10 2009, 02:34 AM, said:

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?

Attached Files

•  screener.png   179.7K   13 downloads

Edited by baniboy, 10 March 2009 - 11:49 AM.

[truefusion]

baniboy, on Mar 10 2009, 07:13 AM, said:

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.

baniboy, on Mar 10 2009, 07:13 AM, said:

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?