My Website Design - Any Good? [UPDATED DESIGN]

[Calum Veteran]

24/12/08 - I have updated the design yet again (still may not be good) after all of your helpful comments, but thought it would be best not to start a new thread. Please see this post further in the thread: Information on my updated design.

Original post (22/11/08):

I've only recently started learning the web design languages in my second year of university and have created a small website (as we have to create a whole forum from scratch by February :| lol).

Please let me know what you think of my whole design :) The colours, images, navigation, layout of content div, etc. Eventually I am thinking I would like to somehow add images to the border to make that a bit better, but other than that, I would really appreciate anybody's comments. Negative or positive... be as harsh as you like ;)

Link: http://homepages.shu.ac.uk/~cjricha2/contact.php

Edited December 24, 2008 by cJr.

[Calum Veteran]

You need to use much more subtle gradients, pick one colour and pick a slightly different hue of it. Red and blue was too harsh, so is caramel and white. Oddly, even with the harsh gradient, everything seems to blend together into a fairly bland look.

I see, thanks Kudos :) Are you mainly talking about the banner? Or do you think overall the caramel and white/cream look is too bland?

What would you think of white and light blue (maybe utilising a darker blue for the text/links, of course with one colour for the gradients :))?

[magik]

Not a fan. Color just doesn't look professional or even 'good' :p I'd consider using a stronger gradient with 'highlighted' textual colors. See a site like http://www.colourlovers.com for inspiration.

[Kudos Veteran]

I see, thanks Kudos :) Are you mainly talking about the banner? Or do you think overall the caramel and white/cream look is too bland?

What would you think of white and light blue (maybe utilising a darker blue for the text/links, of course with one colour for the gradients :))?

For the gradient, yeah I was talking about the header. Blue would be better overall, beginner and non-creative designers should stick to simple colour schemes (I rarely stray from greys with a splash of clour for this reason tbh). Keep high contrast between text and its background, and keep a decent level of contrast between the content area background colour and the body background colour. It helps us to focus on the right areas.

[sundayx Veteran]

Just some encouragement to you is that the layout did improve from the previous design, but the bad thing is, not by much.

[SakuraKira]

I think you should pick a color theme of 1-3 colors, then you can use various shades of those three colors for links, or image backgrounds etc. Going to your site is like stepping into a sepia world.

Someone else already mentioned it, but I'll repeat: ColorLovers is a great site for something like that.

[neoraptor]

the background change is not quite appealing.

Also never use png for photos (they are supposed to be jpegs). To achieve the same effect you can change the opacity with css

[MiG-]

nobody uses JPG anymore (except for real pictures). Use PNG and optimize the images.

GIF is still the better option IMO for the web. PNG is not fully suported with IE 6 (Transparency), and the file sizes are still not as small in the majority of cases, imo.

Although, this is for smaller images. For a banner I would still use PNG. Best Quality.

[Brian M. Veteran]

nobody uses JPG anymore (except for real pictures). Use PNG and optimize the images.

I still use them for repeated backgrounds that don't use alpha transparency.

Why? Because IE has a nasty habit of rendering PNG images' colour slightly off, which means that the colour of the image doesn't match the standard background set in the CSS.

But yeah, other than that, I see no reason to choose JPG over PNG.

[Argote]

This is much much better than the original site. I like it.

Try using white text and see how it looks

[Calum Veteran]

Also never use png for photos (they are supposed to be jpegs). To achieve the same effect you can change the opacity with css

Thanks, I will make sure all my photos are JPEG when I come to update the site to the final design :) They don't teach us graphic designing at university, unfortunately, so I have just learnt by messing around in Photoshop :p The opacity element of CSS doesn't work in Internet Explorer though, but I've taken that out altogether at the moment :)

This is much much better than the original site. I like it.

Try using white text and see how it looks

Thank you :) Do you mean white in the navigation bar and header too? Or just the content in the middle? I originally set out to create a light blue and whitish design but it ended up not looking too good and then I think I drew some inspiration from the Photoshop CS4 icon ;) and decided to make the whole layout darker (blue and blackish) :p

The design you are looking at now is new today :) It's been updated since the original and since that caramel design a few days ago.

I'm really happy with the outcome of this, although I didn't take Kudos' advice of having a higher contrast between the different backgrounds because I couldn't find colours that went together well that way (thank you though Kudos, you have been a big help, for example when you made me realise I'd put way too many effects on images :p I also think with my new design it is easier to distinguish between the content and different backgrounds).

Thank you very much to everyone for their honest advice and opinions, I have learnt a lot :) When I finally update every page on the site and have tweaked this new design (if needed), I will optimise all my images and save them in the best formats, make sure my code renders perfectly with all major browsers and validate all my code perfectly.

I still welcome honest opinions and criticism of this new design please if you may? :)

Thanks.

http://homepages.shu.ac.uk/~cjricha2/index.php

Edited December 2, 2008 by cJr.

[Kami-]

Better

[tuckerm]

Better. Images loaded a bit slow but that could be your host?

[sundayx Veteran]

Just a reminder that color is not the only problem in your design.

[Deathray]

I don't know how to improve your buttons, but your buttons are not "nice"... they feel and look awkward

"Add Bookmark" and "Back to top" have a nicer effect than your main buttons... imo

As well, the text colour for the buttons and bottom bar is off

Overall, it could be quite nice, but it wouldn't become "unique" in its current form or where it seems to be headed

[Steve]

Definitely amend the contast between background colour and foreground text...

[Calum Veteran]

Today, I have updated the website again, with a minor update, after some of your recent helpful comments. I have also made the shade of blue a better shade and mainly changed the navigation options (it didn't look too good before having the black line only on hover and the links now match the links in the footer).

Again, any more comments are welcome. I am that happy with the site that I have now updated every page on the website to the new design, so it works as it would look when I have tweaked it again (if needed).

http://homepages.shu.ac.uk/~cjricha2/index.php

Thank you once again for these very helpful comments:

Better. Images loaded a bit slow but that could be your host?

Thank you :) It could be, although it is currently hosted on the university's servers.

Just a reminder that color is not the only problem in your design.

Ok. Thank you. So I take it you just don't like the overall design? What do you think of both the colour and design now? (after today's minor update)

I don't know how to improve your buttons, but your buttons are not "nice"... they feel and look awkward

"Add Bookmark" and "Back to top" have a nicer effect than your main buttons... imo

As well, the text colour for the buttons and bottom bar is off

Overall, it could be quite nice, but it wouldn't become "unique" in its current form or where it seems to be headed

Thank you for that suggestion :) I have changed the top navigation bar so the text colours match and so it has the same effect as the bottom links. It was intentionally supposed to be how it was before, but I much prefer the way it is now (after today's minor update), so thank you very much :)

In relation to your comment about it being unique: As much as I would like that, it's not too important to me as this is only going to be a small personal website for my programming portfolio and blog. I'm interested though as to what sort of elements I may need to make it more unique? Maybe things like Flash and rollover effects?

Definitely amend the contast between background colour and foreground text...

OK, I have done now, thank you :) I don't know if I preferred it more grey, but I have made the text near to white now. Is that better?

Again, I appreciate any more of your comments in regard to today's update (one of the last, I reckon). You have all been so helpful and that has shown by how awful the original design was. As I did not realise how awful that was at first, it also shows that other people's opinions do help a lot :)

[deactivated01032015]

Layout is good, color scheme is a little bit too bright and the text on the blue surface in not visible enough. Your site still needs much work to be complete.

[xfodder]

that color you have used it very strong, i suggest really looking into color theory ...

the easiest way to achieve a good color scheme is to pick a base color, one that is not to over powering (like the one you are currently using) then find colors which compliment your base color ... in color theory there are numerous ways to acheive this ... but to simplify it go to http://kuler.adobe.com and use adobe's kuler system ... it will take your base color and find colors which compliment it.

oh and never choose a base color that is as strong as your current one ...

[MasterC]

Please don't take this the wrong way, but have you been reading the same comments that I've been reading? Every other one says something about your color scheme, and links to Kuler or ColorLovers. Take a look at those sites, and pick a color scheme that works. Here's a good color scheme for reference. See how it's not overpowering? That's one of the main problems with the current site in my opinion - the shade of blue is too strong.

Also, I notice that the rollovers text changes to all caps. I don't think that that is a good idea. I'd put it back to regular casing. Another thing I noticed was that the swapped rollover image doesn't really look like a rollover. It just looks like the image disappeared. I'd tone down the highlight on the non rollover image, and add a slight highlight to the rollover image.

And lastly, the text in the logo looks kind of off. I think alternating the size like it is presently works against it. If it is uniform, I bet it would better.

That being said, keep working at! You've taken some big steps forward in the design. Good luck!

[primexx]

GIF is still the better option IMO for the web. PNG is not fully suported with IE 6 (Transparency), and the file sizes are still not as small in the majority of cases, imo.

Although, this is for smaller images. For a banner I would still use PNG. Best Quality.

there's absolutely no reason to use GIFs since its file size is always larger than the same picture & same quality in PNG, if you're going to use GIFs, do 8-bit PNGs instead. higher quality PNGs are, of course, going to be larger than GIF since they retain much more information.

I still use them for repeated backgrounds that don't use alpha transparency.

Why? Because IE has a nasty habit of rendering PNG images' colour slightly off, which means that the colour of the image doesn't match the standard background set in the CSS.

But yeah, other than that, I see no reason to choose JPG over PNG.

I should qualify my statement to exclude those stuck with IE6 visitors :p

[Calum Veteran]

Please don't take this the wrong way, but have you been reading the same comments that I've been reading? Every other one says something about your color scheme, and links to Kuler or ColorLovers.

Thanks for yours and everybody elses opinions :)

I have been able to refine my design yet again to get rid of horrible things such as links changing to all-caps (which at the time i thought looked good :D lol).

The reason I haven't used Kuler is because I didn't really understand it. However, I have now created an account and downloaded colour scheme files, I just need to find the right program which reads these files :)

In the meantime, I have updated my design (only the 'about me' page so far) yet again with a design I actually really like. Probably one of the only designs I have been happy with. I have changed a lot of things (for example, I made the banner design much better and got rid of the horrible bar for the footer - put a nice glowing line in its place), added a background image which I made and which I like a lot, added shading to the sides of the content area, and also just gone with a lighter design. I quite like the way the orangy colour goes with the grey, but I can understand if people don't like it? I also think the orange is not too bad on the eyes).

But, just in case this doesn't actually look good :D I would be grateful for even more opinions :) :)

Thank you.

Calum.

http://homepages.shu.ac.uk/~cjricha2/aboutme.php

[SuperKid]

^ That design looks ok to me but id proberly prefer a white background rather than that image. makes my eyes sort of illusiony

[+John. Subscriber¹]

A LOT better this time round. Colour scheme is still a bit too contrasting, but it's a good step forwards.

[Calum Veteran]

Thank you John. and superkid :)

It makes me happy to know that I am at least moving forwards :)

I'm learning and that's what I like to do. I still find it hard to choose the right colours so it doesn't look to contrasting. For example, the background of the text (e.g. the one with the image of me on it) should have been a bit lighter but if I have it this colour, it fades into the shadow on the side of the content area (which is also that colour) and I love that :D I then tried to get a lighter grey for the text, but it didn't go too well with the rest of the site, so the only thing I could do was implement a dark black, which is now a bit too dark and maybe unreadable?

@superkid: I will think about maybe a white background or at least a lighter one (or another grey which doesn't have an 'illusioning' image :D, however, I really love this background image, so I may not :D).

Thank you for your opinions :) Keep them coming everyone :)

[fall3n]

I'll be honest, I hate black websites. Any website with a black background, unless very unique, can never pull itself off. I suggest moving towards a light background and rethinking you colour scheme. It's far to much in contrast with itself. Pick colours that have relation to each other and you will be far better off!