Website design competition entries

Contributed by Jim Byrne

A big big thanks to everyone who submitted an entry for the GAWDS re-design competition - they were all of a very high standards and it was difficult to pick a winner. Difficult but not impossible; the winning design is (drum roll… ), 'Ripped' by Phil Treble. Well done Phil!

Well done to the runners up - after Phil's entry the designs that impressed the judges most where (in order), Suede Sofa by kevin Potts, Simplicity by Hussain, The route to accessibility by Mike Pepper, and Accessiblue by Jake Carlson. Congratulations, you are all winners and will be receiving a prize for your designs.

Our judges were Dave Shea of css Zen Garden fame, Dunstan Orchard whose newly designed blog demonstrates that this man is unfairly gifted in many different disciplines, our own GAWDS member and standards expert Mike Davies, and myself (Jim Byrne). I've added short biogs of our judges on the short biogs page.

Winner: Ripped by Phil Treble of Phil Treble: Graphic Design and Web Development

Designers description: I've taken the exisiting logo and colours used in the logo and used them to carry through branding elements. The 3-column layout effectively defines content with the news section shining through in white. I have used the techniques for the 'Sliding doors' for the horizontal navigation strip and 'Onion skinned drop shadows' for the drop shadow on the photo, from articles on www.alistapart.com. The ripped paper effect at the foot of each column helps to make the design less rigid whilst giving the information a sense of urgency!

Judges comments for Ripped.

Runner up: Suede Sofa by kevin Potts of Kevinpotts.com graphic design

Designers description: Essentially, I took the existing palette established in the current site, along with the colors introduced in the logo, and combined them into a softer design with more space and fewer sharp lines. I wanted to maintain the GAWDS brand while expanding on the user experience. I call this design "Suede Sofa." It validates as XHTML 1 Strict, and the CSS checks out as well. The design is "liquid," so it expands with the browser window and collapses gracefully if shrunk into a narrow space.

Judges comments for Suede Sofa.

Third: Simplicity by Hussain of Chugs Designs

Judges comments for Simplicity.

Fourth: The route to accessibility by Mike Pepper of Enigma

Designers description: Quite apart from branding with the GAWDS name and logo, I felt it appropriate to reaffirm the commitment to accessibility by using visual hinting, hence the highway into town and the sign intruding into the background image indicating the route to accessibility. We must endorse W3C standards -- upon which accessibility is built. Besides, a strong skeletal framework almost guarantees WAI level 1 compliance.

I purposely selected a more business-like colour scheme to express our intention as a professional body to establish a more corporate tone which would not only flag us as 'serious about the game' but establish the tone of the community. I experimented with some half dozen, er, bright designs but continually reverted to the corporate scheme. It is subdued, I admit but it expresses my and I hope other members' views that we're now a recognised international development body, a professional presence.

As to validation, I went for full Triple-A but it fails at Level 2 with duplicate anchor links -- but that's out of my control since I was replicating in XHTML the snapshot PHP-delivered index page. We'll certainly have Level 2 compliance and will go nearly all the way to level 3, especially since the biggest sticking point is '14.2 Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page.' is partly addressed by the Route to Accessibility page header image.

CSS is contained in 2 files, one general plus an IE supplemental containing max-width emulation and focus constructs for non-mouse users (but which need further work for IE 5.1 and 5.5). There may be a third containing the various hacks necessary for full browser/cross platform compatibility but I may dump these in with the core CSS file. We'll see ...

The site is cross-browser compliant for contemporary pc UIs; needs a little attention to detail in IE 5.1/5.5 and degrades gracefully as a logical linear stream in Netscape 4.

I chose a fluid layout since we are a professional body with an index page which'll head-up press releases and the like, and it seemed sensible to address PDAs and other small screens. As such, it collapses to a single columnar format with legibility down to 320px -- and will also display happily on trendy tablet systems.

Judges comments for Route to Accessibility.

Fifth: Accessiblue by Jake Carlson of Dragon Eye Design

Designers description: Accessiblue" is intended to leave little doubt that accessible design doesn't have to consist of boring, rectangular boxes. Instead, nearly every element on the page appears to have curves for corners which, aided by transparent GIFs and some CSS trickery, appear to seemlessly run atop the subtle fixed background gradient as the user scrolls. The fluid layout enables the user to resize text without destroying the aesthetic appeal of the design and fills the screen, no matter what resolution the user is running. To cap it all off, the menu may contain accessible semi-transparent drop-down submenus, proving once again that there's simply nothing worth doing that can't be made accessible."

Judges comments for Accessiblue.

Liquid Access by Sophia Kapterian of digitalworx.biz

The design uses percentages and floats for the 3 columns which looks good in various screen resolutions.Though the page renders well in current browsers it does not degrade well with IE5. Graphics are at a minimum. There is a little favicon to complement the page together with a few floral touches.

Judges comments for Liquid Access.

Minimalistic by elfin of Elfden

Designers description: By keeping things relatively simple I have hopefully achieved a pleasant, cross browser, design. The design should also work down to 640x480. I decided to stick to the original colours for my design, and have hopefully structured it in such a way that a site change purely by css will be possible.

I do not work as a web designer, I do this sort of thing for fun! I must be mad...

Judges comments for minimalistic.

Blue Moon by Black Widow

Designers description: Why 'Blue Moon'?: Well...it's dark blue and white and my skills don't extend to imaginative names! Thinking behind the design: To maximise accessibility (obviously) yet create an aesthetically pleasing and clean design. High Flexibility: In theory, the design allows for an extensive Site Menu and Members Area (up to 26 letters - although there might be a struggle with XY and Z) and up to 9 distinct Resources if the number '0' is avoided. Newsfeeds can also be added, or removed, at will and the design should flex to incorporate them without breaking. I'm aming for a design that won't break, or require much in the way of tweaking, whatever you throw at it.

Elasticity: The design is fully elastic down to 640 in modern browsers and probably well below in older browsers. The floating elements have been placed in an imported style sheet to allow the design to degrade gracefully in low end browsers and, possibly, PDAs.

Overall Look: A clean look. As the GAWDS front page is rather cluttered with small(ish) article snippets and newsfeeds, I felt it was essential to keep the presentation as clutter-free and easy-on-the-eye as possible.

Note: Accesskeys are pretty pointless, in my opinion, unless there is some visible indication of their availability. Users should not have to memorise long lists of keyboard shortcuts obtained from an Accessibility Policy page that is tucked away somewhere on a site. Therefore I have tried, in this design, to indicate accesskeys, visually, wherever possible and have further supported this with judicious use of the <title> attribute to provide further information.

Judges comments for Blue Moon.

Blue Caffeine by Jake Carlson of Dragon Eye Design

Designers description: "Blue Caffeine" highlights several useful CSS techniques. The flexible layout is measured nearly all in percentages. The background of the menu on the left is positioned to the top right and is much larger than the space provided for most browsers; the smaller the resolution the more of the background image is clipped. Therefore it is not necessary to fit the menu pixel dimensions to the size of the background. Also, the content area scrolls, never out of view of the various menus. In this way the behavior of a frame is emulated with simple CSS while at the same time avoiding all the pitfalls of frames."

Judges comments for Blue Caffeine.

Cornflower by Jon Gibbins of November 5th Web Solutions

The main goal for this design was to make it spacious and usable while reflecting aspects of the existing GAWDS image. The design was developed around the colours found in the GAWDS logo and used others that harmonise with those colours. The design is essentially quite simple, but is quite usable as a result. It is attractively presented, using the same font as used in the GAWDS logo to maintain the identity of the Guild in the rest of the site.

Obviously, the design also needed to exhibit a high level of accessibility. The design reflects the principles I believe to be best practice (e.g. intelligent use of semantic markup and CSS for presentation). The page is structured to allow the incorporation of existing features of the GAWDS website in a clear way. The layout is mostly liquid, but allows enough room for a reasonable degree of control over text size.

Judges comments for Cornflower.

Concept Demo by Raymond Sonoff of Sonoff Consulting Services, Inc.

Designers description: I have left all elements in place on my "Scsi P&KT" Web site so that you can actually exercise on-line both the submitted Concept Demo page at http://sonoffconsulting.com/gawds_index/index.html and the Contingency Page at http://sonoffconsulting.com/gawds_index/404.html for overall functionality. Moreover, this should make it especially easy for the panel of judges to hammer away at testing for compliance to any and all of the W3C HTML, CSS, hyperlinks, and Accessibility (AAA Approved) standards -- and to access the (admittedly optional) Contingency Page for Error 404 - Page Not Found situations.

Please note that I have purposely chosen NOT to include the "body" sections of specific Menus and Sub-Menus, as these can all be added rather readily --- essentially by 'cloning' from your present GAWDS Web site. Rather, I have focused on the seven points which you have stated will be the basis for judging

Comments