Singapore Web DesignerThe Miele Guide Website Phase 2 » AEN—Designer & Consultant

Ate Media for Miele, client
AEN, art director / designer
Chua U-Zyn, Ajax, PHP, MySQL

Visit The Miele Guide

The first phase of The Miele Guide was launched a month ago and had received much public attention, on online publications, newspapers and blogs. Today we are releasing the 2nd phase of The Miele Guide, with nominated restaurants in 16 countries in Asia. The public are welcomed to cast their votes on the restaurants they think are the best in the region.

Compact Forms

Forms used throughout the site are designed to be compacted and accesible, based on this article on compact forms by A List Apart. We took a step further. Instead of making the label disappear when a textfield is focus, we lightened it so the user would know what the field is for. If you are familiar with the iPhone interface, you’ll see something similar.

Voting UI

I abandoned traditional checkboxes or at least the look of checkboxes for the voting UI. The underlying form inputs are actually still checkboxes. But because when you link a LABEL element to an INPUT element using the “for” attribute, you can click on the label to give the input focus. Thus I layered the label over the checkbox, gave it plenty of click area and used background images to represent vote statuses.

The voting process is entirely powered by jQuery and Ajax, which in my opinion, significantly improved the interactivity and responsiveness of the form, as compared to annoying page refreshes in non-Ajax forms.

Pre-order UI

The site might start to sell merchandise like T-shirts and souvenirs in later phases but for this phases, the only product in the shop is The Miele Guide book. So we made the shop simple.