critic on webpage

[Andail]

Ok, you probably all know I'm not exactly a web wizard, but my technology-challenged school still asked me to remake their homepage.

Their current homepage is basically a pile of shit. It's so bad you almost suspect someone deliberately made it to suck.
http://www.onneredsskolan.nu

Along with the new design, I'm going to include loads and loads of new graphics - nice, up-to-date photos of pupils and teachers and facilities etc. All links and menus will be re-organised, but I don't expect you to help with this (considering it's in Swedish)

Here's my first concept:


Naturally, the photos in the top banner will be from my school, and not random google-images like now.

Thoughts and c&c so far?

[abstauber]

I'm not an expert myself, but I'll give it a try.

The good thing is, that your colour-scheme is very nice and suitable. Apart from that, it looks too much like a blog for my personal taste... well, it's still lightyears ahead of what your school has now

Top border:
I'd get rid of the black outline (or make it thinner) and also, you could give the photobanner more space to the top. Maybe add some breadcrumbs like: About  |  privacy  |  disclaimer  |   contact  |   etc.

The button bar is hard to judge since I don't know, if you're doing mouseovers.
But anyway, between "Om skolan" and "Aktuellt there's an anti aliased outline which looks nice. But most of the rest  have black outlines again.
(If I remember, black outlines aren't too great in adventure graphics as well )
Maybe make the button more "obvious" is good idea too.

Also if you keep using the upright format, keep in mind, that most people buy 16:9 screens these days. Or least most of the parent who will visit that site. So maybe you should make the layout flexible.

And even if it's ridiculous and the gouvernment sucks and all that... those sites could be a good reference for what you're doing.
E.g. http://www.bund.de uses a similar and very clear layout. And on top of that, it's so boring, that you don't get distracted
(click on "Deutsch" in the top right corner, so you get some content there)

I hope that helps.

[Anian]

Hmm, not an expert as well, but there are a few rules that are useful for any web page. Especially if keeping to the basci deisgn (not Flash and not too outthere)...anyway:
- use a "net", as in there should be a regular structure of the design, try looking at newspapers (and their web pages), you'll notice the spaces and cells that make a structure
- stick to 2-3 fonts, and preferably the standard fonts - helvetica, arial, gerogia, times new roman etc. you know, the ones that are on every pc/mac available
- maybe lighten up the background colour and darken the text, to make more readable. and use even spacing (though this is optional, I think it looks better)
- about the screens and the 16:9 thing, make it so that the main window is  in the center and the size you design it (do make it regular like 800 px or something) and then let the clean part of the screen (here it's the dark blue surface on the sides of the page) fill out the rest of the screen
-stay away from font comic sans
-stay away from font comic sans

Just as an idea and to get what I mean about cells and composition, I reworked the page a bit. First just with an example of cells, then with resized graphics to fit it:
 

[InCreator]

I hate the upper row of photos and typewriter font on "önneredsskolan". The photos have sick amount of detail... if you make school photos, make sure to keep them simpler, either zoomed or just with less tiny things on photo.

Right now they distort vision so awfully that it kills concentration and it makes hard to read the page. Like looking at a pad of needles or tip of scissors at very close distance. Maybe it's me being sensitive, not sure. Also, I would think twice about font. It looks nice, but isn't that readable.

Everything else looks clear and eye-pleasing though.

[Matti]

Their current homepage is basically a pile of shit. It's so bad you almost suspect someone deliberately made it to suck.
http://www.onneredsskolan.nu

Haha, that is SO true.

Sorry, can't give any useful suggestions.. but overall I like your page.

[Andail]

I hate the upper row of photos and typewriter font on "önneredsskolan". The photos have sick amount of detail... if you make school photos, make sure to keep them simpler, either zoomed or just with less tiny things on photo.

Right now they distort vision so awfully that it kills concentration and it makes hard to read the page. Like looking at a pad of needles or tip of scissors at very close distance. Maybe it's me being sensitive, not sure.

Ok, this is something I definitely need to address. I thought having a banner of photos like that would be a nice touch, but apparently they just distract the viewer?
I'm going to have dozens and dozens of photos randomly appear in banners, and I can't really go through them all to ensure a certain level of details.

I could really need more input on this...

[OneDollar]

I agree with InCreator, your eye keeps getting drawn to the top banner. I don't think you should get rid of it though, photos of actual people make it much more personalised.

Perhaps you could do some colour balancing or desaturating or something to make the pictures stand out less? In my current signature I've got a 50% transparency white layer over the screenshots.

Edit: Has the third stock photo from the left got bullet holes in it?

[loominous]

I ventured into web design a while ago and found myself doing these crappy scattered layouts until it dawned on me that my aim was basically that of a painting: creating a focal area/areas, and making the rest support it/them rather than compete.

So I started scribbling down the composition in thumbnail form, just as I would with a painting, and went from there.

Not sure how much of a helpful advice this was for you, but I could've used it.

[Stupot]

One thing missing from your version that the original had going for it:

Stig In!

Next time I make a webpage I'm going to have 'Stig In' somewhere on the page.

[juncmodule]

I slapped together a quick mockup. Hopefully it will help.





Download PSD

Don't worry about the content for now, just get the overall layout together, header, footer, nav, content space. Odds are someone will want to change the content area after you finish anyway. Make sure you never make the nav static images, people always want to change things. Using text and dynamically stretching menu items resolves this problem (most of the time). If you can do away with the multicolor menu items then I recommend you do, it means you will have to have a total of 12 images (normal/hover) at least.

You lack a footer completely. I recommend adding the address and phone number, a nice small pic of the school maybe, whatever a user might need to have available from any page. Also, this could be a good place for a few links to commonly used pages, although the site doesn't look big enough for that.

Oh, and never make a site for anyone. They will immediately assume you are the magic computer box wizard and expect you to fix the ENTIRE internet anytime anything is "wrong" with it.

good luck,
-junc

[Andail]

Ok, thanks a bunch everyone, and that looks pretty sweet, Junc

And there is a guy who's responsible for the computers and the networks and everything, but apparently he's not into webdesign...

[Darth Mandarb]

My personal preference for web design(s) is to not have so many different colors all at once (like the different colors on the nav buttons).  This is just personal preference of course.

I like what junc did (great to see you again man by the way!) but the navigation is WAY down on the page.  Again it's just personal preference of mine but I like the navigation to be closer to the top of the screen.

I did a sloppy/quick mockup with my take on the design...



- I widened the over-all design (I'm not sure if you're restricted to a smaller scale but I no longer design for 800x600 resolutions).
- I lowered the number of different colors to created a more unified palette.
- I used Google Translate so the text is probably horrible!

Anyway ... it was just an idea.  I hope it helps in some way

[Andail]

That looks really nice, Darth, I'll probably steal most of it

And the text was surprisingly legible, I think you have a nack for Swedish

[Darth Mandarb]

Glad you like it!  Feel free to use as much as you want

Here is the Development PSD (remember I said it was sloppy and quick!)

[TerranRich]

If you do go with Darth's design, I'd suggest to add more padding between the image (of the flag) and the text for better readability and overall look. Otherwise, great design, Darth!

[Shane 'ProgZmax' Stevens]

I think the overlaid glowing 'welcome' sign on the images looks a bit tacky/gratuitous, but aside from that I think it's a great improvement over the original!