First Full Website Design (Help Needed)

[DirkBreeuwer]

This is my first Design Project. I need to do this for a school project, but I am a little stuck in the Menu part. I think it doesn't fit correctly, like it does not flow well with the design. Dunno if its the fonts, don't know if its the color. Could you give me some tips? Is the design ok? Is the background to bloated? Typography? I also have not idea on what content to put in the bar below the Menu.

The website is supposed to be for both Students and Employers, interested in what inHolland's IT provides. (InHolland is the name of my College).





I know that both images don't seem to be of the same design. Which do you like better, so I design the whole site like that one.

 

[ezekielrage_99]

I like the design, but I know what you mean I've been working on a new design for a web site and have had the same issue.

It's not the colour that's the issue I think you need to pull it back and reduce it to stylised text with a more faded box for the adequate abstraction levels.

Also I found this is a good resource.

 

[cluthz]

I'd have a bit lighter boxes behind the text.
If you have a badly calibrated monitor or glasses it can be hard to read.
(Many public machines around do have really bad calibration and hard to read black on grey)

 

[Ibanez Strummer]

I much prefer the second as it seems cleaner, brighter and just more aesthetically pleasing....

(I am not a designer though so take my view just as a random person looking in!)

 

[MacBoobsPro]

In my opinion you have too many fonts. This always leads to something looking incoherent and 'not quite right'. First rule of design: limit fonts to no more than 2 (but you can make use of different weights).

Regarding the menu I would put the buttons within the darker bar behind the buttons as you have it now. Theres no need having a grey bar and then putting buttons on top of it, your just adding clutter.

Another point I would make is the text is a bit too dark for the background its on. I have done something similar (grey text / grey background) with my redesign www.stuartluff.co.uk but I'm still thinking of giving it more of a contrast boost by lightening the text another shade.

 

[mlblacy]

I agree with most comments....

Second one. Hands down.

Brighter, simpler, WAY more legible.

The first is SO dark, I am wondering if there would be some brightening on hover to illuminate spot areas. Even so, it is TOO dark. Even the top dek (the tagline blurb) on the first box is a bit too dark... and it is the brightest item in the body below the nav area. By the time a reader gets to the bottom the text is barely readable at all.

I am guessing the ancillary nav on left is for sub-menus within each main nav items above, but not really sure. If so, the type should match above, and not be "something else". Less is always more. Avoid too many fonts, avoid too many colors, and avoid visual clutter wherever possible. Great sites are almost always deceptively simple in their approach (Apple's own website is a good example, Microsoft is not... although it has gotten better).

Too many fonts. Hate to be boring... but "Student" type & "Menu" types are different (and not web-safe I wager). Also, the second box body copy is smaller than the top one. Little inconsistencies like that are the mark of an inexperienced designer (that is NOT a dig at you at all). There is NOTHING wrong with having little or no experience... you just DON'T want it show, lol.

Also, there is a typo on footer... "COPYTIGHT".

Kill the graphic. Weird splotches, swirly things, etc. may be ALL over iStock & elsewhere, but as soon as they hit the mainstream they are dead as far as looking hip & cutting edge. Death to swirlys!

The second one has "zing", and it is provided by the brightness of the content against the subdued background palette over little gimmicks like swirls and type variations. I used to have an exercise for young designers/interns... I told them to type a paragraph. Each letter was to be a different font. Each letter was to be different color. "Done..", I told them, it was "out" of their system, and they could forever more resist the call to add unnecessary complexity & clutter to their work. Just because you can, doesn't mean you should...

Smashing Magazine is a good online resource with lots of inspiration and technical advice as well. If you want an excellent (and better yet SHORT) book as an interface resource I would strongly recommend Steve Krug's "Don't Make me Think" on web usability.

Back to the "Menu" part... since that is what you were actually stuck on...
if the area is indeed a sub-nav, why don't you use drop-downs from the main nav, OR add a breadcrumb Nav directly below the the nav-tabs...

There is nothing wrong with pushing the boundaries, you just want it to be functional as well as cool. Check out http://for-screen.com/, Tobias Vogel has got quite a gift for pushing the boundaries of interface design. He routinely completely redesigns his website top to bottom... and one never knows what one will find. His interfaces sometimes are like a little puzzle, but at the same time easy enough to figure out without undue frustration.

All in all though you have made a good start. Really. Best of luck in your travels through life. michael