Website Design competition

 

This competition was announced at the end of a Tyndale Tech posting, in these terms:

You are probably familiar with Tyndale's webpages. Informative but not inspiring.
At least, that's what I'm told. I'm not good at this visual stuff. So I need your help.
If you produce an inspired design, you could be on every page ("page design by....).
It might be the start of a new career!

Simply copy the page at http://www.tyndalehouse.co.uk/library.htm and redesign it.

So get out your Photoshop or whatever program makes you feel the most creative,
or even Word or Publisher if you wish, and send me a mock up of the web page.
You don't need to produce any code or stylesheets or working menus. I'll do that.
Your contribution is the design - the colors, layout, font, graphics, menu position etc
Please include colours for Hover over and Visited links (if these are different).

Send your entry to me, attached to a reply email. Closing date: May 1st.
The best will go on show and the winner will be famous.

I will be one of the judges, so let me tell you what I like and don't like:

I like usability
e.g. having a full menu always available so you can go anywhere from anywhere
(many websites send you to the home page or obscure part of the page to find the full menu)

I like clarity
e.g. using a plain background which doesn't interfere with reading the text, and using fonts which can be rescaled by the user (using the menu View: Text size)
(many sites use CSS with fixed font sizes so you have to zoom the whole page)

I like easily updated pages
Personally, I hand-craft html, php & MySQL, but most people prefer WYSIWYG.
Unfortunately CMS (Content Management Systems) are often too limiting, so if you propose one, make sure it is very flexible - ie you can add code easily and put anything anywhere. GooglePages are a good compromise, so I integrate these into the site for pages which other people need to update - e.g. staff pages. See mine at http://www.tyndaleHouse.com/Staff/Instone-Brewer/
So the design has to allow for this kind of integration of pages within a frame.

Actually, most of this doesn't apply to your design. I'm just getting it off my chest.
So let your imagination go! And show me what you've come up with.
Don't worry about the technical side of things. If it looks good, we can probably find a way to make it work. Attach it to an email to me.

 

Here are the entries so far:

(click on them to view them at full size)
First, this is the page as it exists.
A fairly typical page on the site,
including the ever-present menu,
a single picture (occasionally more),
and a resizable sans font on white.

1) This proposal has a background picture,
creating a small central panel for the page.
A clear menu occupies the top and side
leaving a scrolling central area of about 
2/3 of the central panel for content.
The colour scheme for fonts, menue and
the background is well integrated.

2) This is a page from a site which was
proposed as a model to follow, so the
content is difficult to compare.
The home page was actually proposed, 
but this was not comparable because it
is merely the menu with a large picture.  
The menu is clear, though it does not
expand into subtopics (the site is fairly
small, so there is no need). 
The font colour scheme is pleasing,
though the text can be difficult to read
for some because of the dark background.
The page has a fixed width.

3) This has a pleasing graduated background
with a clear menu which ocupies about 1/3
of the width, plus a thin menu at the top.
The colours of menu, background and fonts
are well integrated. There appears to be a
deliberate absence of pictures. The font is
large and clear on a pale background.

4) This proposal is for WordPress as a system,
and a sample site was proposed rather than
an actual mockup of a Tyndale page.
The page has a fixed width with a large
colourful title with room for a changeable picture.
The side menu occupies about 1/3 of the
available width. Subtopics are revealed
when the page reloads. The font is rather
small and thin but it is resizable.
The colours of background, graphic,
fonts and menus are well integrated.

 

5) This is a design for the Home page, which can
be applied to other pages.
A has pleasing colour scheme which is based on
our door logo (and also fits with our new paper logos).
The menu is in a thin strip at the top, while the
left bar is used for a large logo and search box.
The colour bar on the right provides pleasing balance.
The serif font give a 'traditional' style, which
mixes with the cleaner sans font of the menus.

6) This has a professional finsh to it - pleasing curves, subtle 
shades, understated design, and interesting background.
The menu takes up little room and the side bar is used for
major links within the page, and could also be used for
major subdivisions within large pages.

The blue colour scheme works well with the manadatory
blue of Firefox (you can't change the colours of its
scrollbars), and the blue used elsewhere in Windows and Mac. 

My thoughts so far:

All the proposals are for fixed width pages, with wide menus. This is good for maintaining a style because resizing the window cannot change the layout. However, this means the page has to be 800 pixels wide or less (so that smaller screens are catered for), which leaves little width for content, once the menu has been added. The menus are all fairly large.

One person commended WordPress and the other designs may also have had a content management system in mind, because this would explain the fixed page widths. I am yet to be persuaded that the slight gain in speed for writing pages offsets the extra time needed to find ways found the restrictions.

The colour schemes are generally well thought out, with good integration of the font colours with the rest of the page.

I particularly like numbers 5 & 6 for their style, and especially the intelligent use of the side bar in no.6.

Do you have any thoughts? Tell me what you like  

 

The Winner:

There is no doubt that the last entry was the best. A slight modification to the colour scheme produced something which integrated the corporate colours better.

Congratulations David Niblack!

See more of his work at http://www.davidniblack.com/ - he has some beautiful designs for pages and powerpoints.