talkmagic.co.uk

Can anybody give me some tips to improve this website? I'm creating it for a competition (so just some design tips would be nice, no specific coding help.)

http://eggheadtutor.com/pet

Obviously, it's still being developed. I'm having a bit of trouble with coming up with a logo XD.

Just a few quick things that I noticed:

1 - font - If this is going to be a web site for pet scans - then your choice of font for PETscan.central is inappropriate. The type is way too rough and is completely in the wrong direction you're going for. Think more reserved and cleaner. This is a "dirty" face, and it doesn't promote the site well.

2 - Color - This is just a personal opinion, but I think you have too many colors. I'm not wild about the left side bar, with the color transitions the way they are - however, the green might work well for you. The blue in your calendar doesn't work for me. If you want to go with the same number of colors, perhaps change one of them up, to a better contrasting color.

3 - Your image of the machine at the top is not working within the concept of your layout. It doesn't fit with your color scheme all that well, and it's a bit on the bland side. Perhaps give this image a bit more pop - or swap your color scheme to make the colors come together more.

4 - the horizontal bar - This is something that comes up in many sites these days. Some good - some bad. For me, the horizontal bar doesn't make sense here. It doesn't seem like part of the overall layout - it just looks like it was stuffed in there. You could try shifting it down, so it runs along the same line as your navigation bar - which might mesh it with the layout more - as is, it doesn't make much sense from a design standpoint.

That's just a few ideas. I'll look at it some more, after I've had some sleep.

The site seems OK, but the nav buttons are huge and ugly.

The colours remind me of when you get all 12 colours of plasticine and mix them together.

The layout is confusing, and made further confusing by the odd background.

The pic at the top in the header is low resolution and dull, and the site may benefit from having a different pic in each page at the head.

The left sidebar is way too big. It's dead space, and aside from the calendar serves no purpose.

I've designed two sites recently, one which was 'information heavy' and one which was 'visuals heavy'. Both sites had to tell a separate tale... see if you can see which is which, and why I designed them that way...

I think there's a defining factor between an 'informational' site, such as yours, and a 'promotional' site. The two examples below hopefully show that just because a site is covering a 'boring' subject, it doesn't have to be hard to navigate and plain.

edit: removed by seige, bad vibes from client!

Impressive work Seige

@Demitri
Thanks for the advise on the font, I've changed it to a more sleek/professional fontface.

As for the colors, I'll probably keep them the same (probably because of my stubborness) although I did make it a little more contrasty.

I can't really do much about the image because the contest has some really strict copyright rules etc.

And for the horizontal bars, they are meant to be there to divide the title of the sidebar and the sidebar's textual content.

@seige
Color scheming and design is probably one of my worst technical capabilities since it's more artistic than technical, so that's actually the best mix I could come up with after trying a few things.

How do you think I should change the background? I thought that pure dark background would look uninteresting and added that lighter gray bar just to make the background a little less bland. Do you think I should change the position or just get rid of it alltogether.

As for varying images, I think I might do that.

Also to adress the sidebar issue, like I stated above, the sidebar will have links to subpages and other information.


I'll update the site every day and I'll see how it goes. It might be a little slow though because I'm doing it locally first then uploading it to that domain.

Edit: Forgot to mention. About the copyright issue (I know UK copyright laws differ from US but...) can anybody explain public domain in a nutshell. Or if someone can point me to a website that offers free-cheap stock photos that aren't copyrighted or that sell copyright uses to you.

Even a simple background can 'hold' the page in.

Here's another one I'm designing... still work in progress, but the background kicks it out.

http://gtpromo.co.uk/

As for colour schemes, start with something simple.

In the above example, most of the company's vehicles are RED. I chose GREEN as a contrast, and BLACK to set off areas of the page.

Then, with the background, I came up with something which helped, but didn't distract. Grey is neutral, and throws the white body section forward without drawing the eye to the background.

The font is a better choice - but it's way too small for the space it's in. As Seige pointed out there is WAY too much dead space in the side bar.

I wasn't referring to the horizontal bars on the sidebar - I was speaking of the horizontal bar the stretches the length of the screen, in the background.

Navigation - I agree with Seige here. The navigational elements are too large and don't look that good. Also, the "tab" style is a bit dated (I think). Unless they're handled in a visually interesting way, the tabs never look all that good. In this situation, the tabs look out of place.

Be mindful of fonts throughout your site, as well. From what I can see, you have at least 4 different type faces. This is too many. Take a look at the wedding site Seige showed. Throughout the site, the majority of the text is one font (at least I think it is). Variation is not ALWAYS achieved by using different fonts. In Seige's site, the use of size, bold and color makes all of the type look different and draw attention in different ways, while remaining uniform throughout the entire site. This is an outstanding example of intelligent use of type design.

Seige - excellent work there.

As for the blank space where "PETscan.central" is, that's going to have the logo for the company in there (just don't know what it's going to be XD).

As for varying fonts, there are only 3 fonts, one is for the "PETscan.central" the other is for the nav items and the last is for everything else.

Well I've got school in 2 hours and I have to write an essay so I'll post back later tonight.

Edit: Temporary logo put up.

I try and limit typefaces to no more than 2 in a website.

Also, choose typefaces which all computers and browsers stand a better chance of seeing... for example:

Verdana
Arial
Times
Georgia
Impact
Trebuchet


That's my list which I stick to.

Using many typefaces breaks the corporate identity, and leads to inconsistency.

And just because one or two typefaces are used doesn't make the site boring.

Typography in itself is an artform. You need to choose a style which compliments the character of the site, and try to stick to it.

A company name/logo is usually the scene-setter for the branding of the rest of the site. So this is the most important decision you will make.

As with your PETSCAN example, the DESIGN should start not with the VISUALS, but with the CONCEPT/CHARACTER.

Many people think 'design' is making something look nice. It isn't soley that at all... the design process involves THINKING about the use of words, colours etc. Design isn't just about having a copy of Photoshop or Dreamweaver. A designer's job goes much deeper than just the visuals.

So, PETscan.central... let's think about what it is, and this may help with a design... so jot down keywords to help:
>>> clinical
>>> precision
>>> fast
>>> clean
>>> technology
>>> medicine

Now, take a look at your keywords, and think of stereotypical colours and ideas, or iconic relationships between your keywords and the visual aspects...

>>> clinical = WHITE, CRISP, PRECISE
>>> precision = CRISP, CLEAN, DELICATE
>>> fast = UNCLUTTERED
>>> clean = WHITE, CRISP, PRECISE
>>> technology = FUTURISTIC, ADVANCED
>>> medicine = PEOPLE, CARE, HEALTH, WELLNESS, HOPE

See how it works?

Straight away, I am having ideas about PETscan.central being a nice crisp, clean, modern and simple site... here's a quick photoshop composite to shop how the thought process above arrived at a quick design idea.

It's messy, but illustrates the point.

The pic illustrates the 'wellness' side of things, and adds the human element.

Usually, if working for a company, you can obtain relevant stock pictures from manufacturers.

NOTES:
Only one typeface used throughout the whole page (Trebuchet).
Minimal colour set.
Simple logo, adds character.
Clean layout.

I tried to keep the layout as close to yours as possible, but use the space slightly better.

Seige that picture is amazing, it makes it look so professional.
XTTX, maybe you should try and find a more 'friendly' picture like that one that Seige here used, because the actual picture of the scanner looks quite evil. Sort of like a torture device.