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?

[Baniboy]

truefusion, on Mar 10 2009, 04:21 PM, said:

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

Quote

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.

Attached Files

•  screener.png   179.61K   14 downloads

Edited by truefusion, 11 March 2009 - 09:28 PM.

[Xalor]

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]

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]

baniboy, on Mar 10 2009, 03:41 PM, said:

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]

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.

[Baniboy]

I'm currently having some problems with wamp, it's just not working. I tried reinstalling but it didn't work. So I'm kinda stuck now...

I don't know what to do, any instructions? I even shut down the firewall and tried then but still not working...

[triplebtalk]

I am sorry but it looks terrible. The whole layout is weird, the blue is bad on the eyes and the font is out of touch. Try making it smoother with a background that is a lot less complex, that will be a real bugger loading.

The second design you presented was quite a bit better, try getting rid of the 3D header as it makes it look tacky and die down on the ultra blue, it gets pretty *BAM* on the eyes after a while. The buttons are good but the text on the side are pretty ridiculous, the background makes the design look "dirty".

The third design is better than both before, it is well layed out, but the background is still a little annoying, you need to leave the gradient blue alone, it is sort of disgusting. The tabs need to have a smoother font on it and you need a nicer style of banner, just to make yourself identifiable out there in the big world of cyber space.

[Baniboy]

Stop whining and look at this one!

I added some new things, stripped it a lil bit, made it softer. Sorry for the short post I'm scared of the damn trap17 servers to get all screwed up again.
I realized I don't need a 3D box-like header so I made this one with the good old GIMP.

So, I want some opinions, BTW truefusion, the video was very fast, and I couldn't find that panel you had on the right.

Attached Files

•  screener.png   140.45K   8 downloads

Edited by baniboy, 20 March 2009 - 05:14 PM.

[truefusion]

baniboy, on Mar 20 2009, 12:59 PM, said:

Stop whining and look at this one!

I added some new things, stripped it a lil bit, made it softer. Sorry for the short post I'm scared of the damn trap17 servers to get all screwed up again.
I realized I don't need a 3D box-like header so I made this one with the good old GIMP.

The banner is a whole lot better, indeed; though that grey text border doesn't seem to fit too well. Other than that, the rest that seems a bit off that i'd personally change would be the color of the "splitter" (i.e. the border that separates the banner from the context), the background color of the box where "Linkki" is, and the blue color on the tip of the active tab. I know picking well matching colors isn't exactly an easy job, but if you can master it, then you can make very nice and warm designs.

baniboy, on Mar 20 2009, 12:59 PM, said:

So, I want some opinions, BTW truefusion, the video was very fast, and I couldn't find that panel you had on the right.

That's because my personalized Blender settings has it on the right. The "factory settings" has it in the bottom. I love how Blender allows me to change the layout around for personal comfort.

[Baniboy]

truefusion, on Mar 21 2009, 04:59 AM, said:

The banner is a whole lot better, indeed; though that grey text border doesn't seem to fit too well. Other than that, the rest that seems a bit off that i'd personally change would be the color of the "splitter" (i.e. the border that separates the banner from the context), the background color of the box where "Linkki" is, and the blue color on the tip of the active tab. I know picking well matching colors isn't exactly an easy job, but if you can master it, then you can make very nice and warm designs.


That's because my personalized Blender settings has it on the right. The "factory settings" has it in the bottom. I love how Blender allows me to change the layout around for personal comfort.

Yea I really wrote that thing as quick as I could, I didn't have time to tell that the navigation on the left looks damn ugly , I'm trying to find the right colors for it. I'm considering an image background, that would solve the problem. Also, is 79kB of graphics too heavy to load? Is there another format which supports partial transparency but doesn't have such a big filesize? My main problem is the shadow of the banner. BTW browsers have to support that format if there is one...

The grey you mentioned, I tried to make a metal feel and a little glossy. It's currently 5 px from the text itself, I'll try making it thinner and see how it looks.

Thanks for the advice, I'll find the right colors for the navigation thingy. BTW should I go with a light or dark color with the "splitter"?

[Baniboy]

Well, it's been 6 days, double post is justified?

Well, I've completely changed the looks. you can look at it and give me an opinion (or many opinions).
I think this one is pretty simple, I have to work on the header a little more tho (or is it good just like that? I don't think so...)
It aligns to different widths and covers the whole page, so you guys with fullHD screens (if you're there ) can view it without a 1000px wide thing in the middle... I've changed the looks of tabs (I'm still using sliding doors method tho).
(in the image uploaded, the left navigation bar has the lower button 'hovered')
So... if you ignore the header, how does it look like?

Attached Files

•  screener.png   120.59K   16 downloads

Edited by baniboy, 26 March 2009 - 07:19 PM.

[truefusion]

baniboy, on Mar 26 2009, 03:18 PM, said:

Well, it's been 6 days, double post is justified?

Well, I've completely changed the looks. you can look at it and give me an opinion (or many opinions).
I think this one is pretty simple, I have to work on the header a little more tho (or is it good just like that? I don't think so...)
It aligns to different widths and covers the whole page, so you guys with fullHD screens (if you're there ) can view it without a 1000px wide thing in the middle... I've changed the looks of tabs (I'm still using sliding doors method tho).
(in the image uploaded, the left navigation bar has the lower button 'hovered')
So... if you ignore the header, how does it look like?

This one looks more interesting: much better. Ignoring the banner, all i'd suggest is add margins to the boxes on the left; they're too close to each other in my opinion. The colors appear to be in harmony. I have nothing else to say.

[Baniboy]

truefusion, on Mar 26 2009, 10:42 PM, said:

This one looks more interesting: much better. Ignoring the banner, all i'd suggest is add margins to the boxes on the left; they're too close to each other in my opinion. The colors appear to be in harmony. I have nothing else to say.

Well, I made this new one. I want to know if the header is okay? Or should I take off the reflections?
I surrounded the whole left navigation with a border and had 1 pixel height lines splitting them.

So... what you think about it now?

 screener.png   116.83K   12 downloads

[truefusion]

baniboy, on Mar 27 2009, 11:35 AM, said:

Well, I made this new one. I want to know if the header is okay? Or should I take off the reflections?
I surrounded the whole left navigation with a border and had 1 pixel height lines splitting them.

So... what you think about it now?

The left navigation fits; that is, it doesn't require any more work on it except perhaps if you are going to apply an eye-candy style to them. As for the banner, it seems like you have a Dodge or Burn layer blend applied to it, which is causing pixelation mostly on the highlight of the text. I believe it is also the cause for the mismatching blue. I normally go with Overlay, but the color should be similar to the ones already used, and since the banner is more in the dark area of the layout, a little shine effect, which shows the light as if reflecting from the top, may be fitting.

[Baniboy]

truefusion, on Mar 27 2009, 10:23 PM, said:

The left navigation fits; that is, it doesn't require any more work on it except perhaps if you are going to apply an eye-candy style to them. As for the banner, it seems like you have a Dodge or Burn layer blend applied to it, which is causing pixelation mostly on the highlight of the text. I believe it is also the cause for the mismatching blue. I normally go with Overlay, but the color should be similar to the ones already used, and since the banner is more in the dark area of the layout, a little shine effect, which shows the light as if reflecting from the top, may be fitting.

Well, I made 2 versions of header, one is soft and the other one is ("hard"?).

Which one is better? I've also considered making a banner request or something. I think it would look nicer if some professional made this since I seem to suck at logo making.

 screener.png   148.89K   5 downloads

 screener2.png   149.15K   5 downloads

EDIT: I'll make a banner request. Thanks for all your help

Edited by baniboy, 28 March 2009 - 03:24 PM.