AIMIA - Australian Interactive Media Industry Association


16th AIMIA Awards Finalists


Best Advertising or Marketing


Naked Communications & Frank PR - Ask Richard


Profero; Soap Creative & OMD - JOHNSON’S® Baby: 50 years of No More Tears


Publicis Digital & Virgin Mobile - Virgin Mobile Members' Lounge


26000 Vodka - Resn


Resn & Krafthaus Films - JAG Black


Soap Creative, Universal McCann & Unilever: Lynx - Lynx Primate


Soap Creative, Universal McCann & Unilever: Lynx - Party Across The Internet

Best Children's


BMF Advertising & Commonwealth Bank - Pi | Create Your Own Cool


Milk Digital & Learning Links - Counting For Life


Sputnik Agency - Origin | EnergyForce


Vishus Productions; Katalyst Interactive & ABC Children’s Multiplatform - The Figaro Pho website


Roar Film & The Department of Broadband, Communications and the Digital Economy - Budd:e E-security Education Package

Best Classifieds, News, Media or Reference


ABC Innovation - Black Saturday


CommSec - CommSec Video Updates


Moon Communications Group - BresicWhitney Estate Agents Website


SBS Online; SBS News and Current Affairs & Different - SBS Dateline


Wotnews - TeamStream

Best Cross-Platform


Holler & BMF - Tooheys Extra Dry | 6 Beers of Separation


Mobile Online Business & Sculpute by the Sea - Sculpture by the Sea: PC, Mobile & AR Experience


Publicis Digital & Virgin Mobile - Virgin Mobile Members' Lounge


Soap Creative, Universal McCann & Unilever | Lynx - Lynx Primate


Tourism Queensland & Sapient NitroTourism Queensland | Best Job in the World

Best Cultural or Lifestyle


ABC Innovation - Gallipoli: The First Day


Monkii - Melbourne Fringe Festival 2009 Website


National Museum of Australia & Roar Film - European voyages interactive


RedBubble - RedBubble


Salted Herring & Splore - Splore

Best Enterprise


August & Origin Energy - Origin Energy 'Brand Central'


Flash Group & Global Corporate Challenge - Global Corporate Challenge 2009


Moon Communications Group - BresicWhitney Estate Agents Website


Viocorp International - Viocast


Viocorp International - Viostream

Best Entertainment


FOXTEL Active; Emuse & Fox8 - Australia's Next Top Model 'Game On'


FOXTEL; Lowe Sydney & Publicis Media - I am unIQue


Holler Sydney & BMF - Tooheys Extra Dry 5 Seeds


Resn - Shapeshifter


Soap Creative; Universal McCann & Unilever | Lynx - Party Across The Internet


The Wiggles & The Farm - Wiggle Time


Wotnews - We Are Hunted

Best Export Achievement


Adrenalin Media & FortisWMS - Adrenalin Media - FortisWMS


AURA Interactive - AURA Interactive


DDX.COM.AU - GLU Platform


Traction – Massmedia Studios


Soap Creative - Soap Creative

Best Financial Service


BMF Advertising & Commonwealth Bank: Pi - Create Your Own Cool


InvestSMART Financial Services; Fairfax Digital: InvestSMART Free Portfolio Manager


Macquarie Bank - Macquarie Edge: The new way of online trading


Sputnik Agency - Frank Health Insurance


The White Agency & Commonwealth Bank - Commbank Website

Best Integration with an Offline Campaign


Droga5 & Future Buro - Right Music Wrongs


Holler Sydney & BMF - Tooheys Extra Dry 5 Seeds


Naked Communications & Frank PR - Ask Richard


Soap Creative; Universal McCann & Unilever:Lynx - Rexona Australia's Greatest Athlete


Visual Jazz - Jenny Craig: Magda's Journey

Best Learning & Education


ABC Commercial & Pascal Press - ABC Reading Eggs


ABC Innovation - Gallipoli: The First Day


Change 2 & 2and2 - Change 2


Liquid Interactive; Liquid Animation & Social Skills Training Institute, a division of Triple P International Pty Ltd - Secret Agent Society Game


TigerSpike & The University of Western Sydney - The Vaughan Supremacy

Best Mobile Advertising or Marketing


AURA Interactive & Mediaedge: cia - Transformers : Revenge of the Fallen


Telstra Corporation - Mum 2.0 Digital Makeover QR code and .mobi site


Visual Jazz; & Defence Force Recruiting - Defencejobs Games: Supreme Air Combat iPhone


Free Facebook - Vodafone Hutchison Australia


Webling Interactive - Tic Tac Shake & Share

Best Mobile Product or Service


ABC - ABC Mobile iPhone App


ABC - ABC Mobile Site (m.abc.net.au)


AURA Interactive - AURA BlueZone network


Coastalwatch, mogeneration & Hurley - Hurley Coastalwatch iPhone App


CommSec - CommSec iPhone


Sensis & DWS Consultingm - Yellow Pages® iPhone Application


VHA - 3 mobile & Front Foot Media Solutions - 3 mobile content portal - iPhone & Android

Best Non-profit or Government


BCM Partnership - Share My Story


Circul8; MeTTro; The Inspire Agency & Greenpeace International - Greenpeace Action-Pact


Naked Communications & Frank PR - Ask Richard


Profero & MS Society - MS Sydney to the Gong Fundraising Online


The Live Local Foundation & Digital Eskimo - Live Local Website


the white agency - DrinkWise


Visual Jazz & Defence Force Recruiting - Ocean Recon

Best Retail


Adrenalin Media - Proactiv


Amblique & SUPRÉ - SUPRÉ


MYER & DTDigital - MYER


Profero; Axe Group & Adactus - Pizza Hut - Online Ordering Website


Reactive - Jeanswest


Visual Jazz - Holden.com.au


Visual Jazz - Mecca Cosmetica

Best Science, Health or Environment


Change2 & 2and2m - Change2


Circul8; MeTTro; The Inspire Agency & Greenpeace International - Greenpeace Action-Pact


Digital Eskimo & Live Local Foundation - Live Local Website


Flash Group & Global Corporate Challenge - Global Corporate Challenge 2009


ABC Science Online & CSIRO - Big Aussie Star Hunt

Best Sport


Costal Watch; mogeneration & Hurley - Hurley Coastalwatch iPhone app


m.Net Corporation Limited & Premier Media Group - Foxsports Mobile Site


Soap Creative; Universal McCann & Unilever: Lynx - Rexona Australia's Greatest Athlete


TigerSpike &Telstra - Official AFL: Finals 09 iPhone App


WeAreDigital. - Carlton natural blonde: Match Centre2009

Best Student Project


Kara Bombell, Joel Caban, Jian Long, Jochen Spencer & Abbey Z - Traps Online


Institute for Interactive Media and Learning, MIMM, University of Technology Sydney - dboard


Luke Milkovic - Piano Jungle


Master of Interactive Multimedia; Institute for Interactive Media & Learning (IML) & University of Technology, Sydney (UTS) - Strine.net.au


University of Technology Sydney & Institute for Interactive Media and Learning - SoapBox Project

Best Tourism or Travel


Daemon Group &Tourism New South Wales - Tourism NSW 7 Days in Sydney Social Media Campaign


Microsoft Australia, Amnesia & Lonely Planet - Lonely Planet Store Proof of Concept


Tourism Queensland & Sapient Nitro - Tourism Queensland - Best Job in the World


Visual Jazz - Jetstar Photo Competition


Visual Jazz; Media Contacts & Projekta - Tourism Northern Territory 'Mix it Up'

Best Use of Social Media


Cadbury; Saatchi & Saatchi; DDX & GLU Platform - Cadbury Eyebrow Me! Application


Droga5 & Future Buro - Right Music Wrongs


Naked Communications & Frank PR - Ask Richard


Profero - The Sims 3 Ultimate Aussie Fan Competition


RedBubble - RedBubble


Tourism Queensland & Sapient Nitro - Tourism Queensland: Best Job in the World

Best Video


ABC Innovation - Black Saturday


Deepend, Unilever Australasia & DDB Sydney - Continental Free Cup Campaign


Holler Sydney & BMF - Tooheys Extra Dry 5 Seeds


SBS Sport & SBS Online - TdF 09


Telstra Media; C4; Chief Entertainment & Sportsdata - BigPond Sport Game Analyser

Effectiveness Award


Droga5 & Future Buro - Right Music Wrongs


News.com.au - News.com.au InstaBudget


Pusher - Samboy is Back


Soap Creative - Marvel Ultimate Alliance 2


Soap Creative & LG - LG Autobot Stronghold


Wunderman Sydney & Microsoft - Ten Grand is Buried Here


Web Form Design: Modern Solutions and Creative Ideas

Advertisement
Web and Mobile Images

Web form is often the main communication channel between visitors and site owners. Feedback is always important which is why it’s necessary to make sure that web forms are easy to understand and intuitive to use. Nevertheless, even in form design one can afford some healthy portion of creativity.

Web forms don’t have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. To get noticed, you need to come up with something unique and interesting — symbols, icons, colors, position or the size of web form are often used to achieve interesting design solutions. We’ve searched for some examples and we’ve found them. Creative, original and unusual web forms.

Below we present over 40 (really) beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Some of the examples are Flash-based; however, in most cases you can easily create similar designs with pure CSS and (X)HTML.

Also consider our previous article

1. Clean, Simple and Beautiful Solutions

Since web form is probably one of the most important sections on the web-site, it’s necessary for you as a designer to make sure that visitors can easily understand what information they need to fill into the form fields. Complex and long web forms increase the cognitive load for users — they are just harder to deal with. In this context, preferring simple and clean solutions seems like a sound approach. However, if the form was designed with an attention to details and looks good, it’s also reasonable to use some attractive imagery in the forms.

Softmail’s newsletter-box comes from Brazil and displays an excellent integration of the message-icon into the form design. The submit-button is clear and attractive. This is a creative design.

Assine in Web Form Design: Modern Solutions and Creative Ideas

Swfir also uses an envelope as a metaphor.

Swifr in Web Form Design: Modern Solutions and Creative Ideas

Handwriting in use on Katrin Wegmann’s site. Attractive, eye-catching and playful design which perfectly manages to convey its function to the users.

Hand in Web Form Design: Modern Solutions and Creative Ideas

TheWatchMakerProject impresses with a nice and unusual design. The form is placed at the right hand side of the latest comments.

Watch in Web Form Design: Modern Solutions and Creative Ideas

Frexy.com with a nice and clean solution.

Forms-11 in Web Form Design: Modern Solutions and Creative Ideas

Flingmedia uses a sliding contact form. Depending on the visitor’s intention (general comment, new project request etc.), user can slide to a web form which addresses his/her interests.

Blue in Web Form Design: Modern Solutions and Creative Ideas

Envero.org — the web form is huge and fills the whole layout width. The font-size and the size of input fields are chosen accordingly.

Riesen in Web Form Design: Modern Solutions and Creative Ideas

2. Creative solutions

Although web-forms are supposed to enable users to get in touch with site owners, quite often designers risk creative solutions and offer layouts visitors wouldn’t actually expect from a boring, standard web form they’ve used to over years. Many different metaphors are used. Here is an overview of some interesting ones.

Created201.com takes a look at the contact form from a quite different perspective. The effect is created using Flash.

Created in Web Form Design: Modern Solutions and Creative Ideas

Ok, this is really different. If you’d like to get in touch with Edward Pistachio, you’ll need to solve a puzzle first. This approach isn’t applicable for blogs or business web-sites. However, it perfectly fits to the concept of the site. The visitors are amazed.

Pistachio in Web Form Design: Modern Solutions and Creative Ideas

Chemistry Recruitments uses a folder, stick-it-notes and few sheet of paper.

Forms-03 in Web Form Design: Modern Solutions and Creative Ideas

Alexandru Cohaniuc presents a huge web form with a sketch and a stamp.

Forms-13 in Web Form Design: Modern Solutions and Creative Ideas

Tony Yoo’s contact form shows the contact details on the left hand side. No happy talk, just getting to the point. And some designers need an extra-page for contact details!

Tony in Web Form Design: Modern Solutions and Creative Ideas

Qwert City enables users to send the designer a “postcard”…

… so did Wildvuur.com (currently offline) — the web form was perfectly integrated into the site layout.

Forms-19 in Web Form Design: Modern Solutions and Creative Ideas

BubblesSOC has a ribbon on the top of a large, laaarge, really laaaaarge web form.

Forms-18 in Web Form Design: Modern Solutions and Creative Ideas

3. Use illustrations to brighten up the form

When a user clicked on the link which leads to a web form, he or she is one step away of getting in touch with site owners. Some designers try to make sure visitors actually fill in the form by using attractive characters and illustrations which serve the purpose of making users feel more comfortable with the form.

Intuitive Designs tries to impress visitors with a busy mailman. Doesn’t he actually have enough to do?

Forms-14 in Web Form Design: Modern Solutions and Creative Ideas

X-Grafik.sk with a mail stamp from Slovakia.

Xgrafiksk in Web Form Design: Modern Solutions and Creative Ideas

Kgoule.com has a friendly buddy who invites visitors to post a comment.

Kgoule in Web Form Design: Modern Solutions and Creative Ideas

Dressfordialogue.com (the design is different now) uses a tiny illustration at the top right of the form. Nevertheless, it works. Sometimes a tiny detail is enough.

Forms-21 in Web Form Design: Modern Solutions and Creative Ideas

4. Integrate more functions

Searching for creative web forms, we’ve observed some new functionalities which haven’t been that popular last year. Among them are WYSIWIG-editors and sliders. Editors are used to provide users with rich text-editing for text formatting, different header levels and images. A slider can be used to define the budget limits for a given project.

InfectedFX has a rather complex web form with hints, options and buttons. The form integrates a WYSIWIG-editor into the textarea.

Infected in Web Form Design: Modern Solutions and Creative Ideas

Sidebarcreative.com offers a a slider potential clients can use to limit the project budget.

Regler in Web Form Design: Modern Solutions and Creative Ideas

5. Use icons to communicate required information

From the usability point of view, there is nothing more painful than a long web form with plain-text labels and without any visual indicators. Such forms are boring, unattractive and uncomfortable to use. You can design web forms better. In fact, not much is required. Often icons are used to visually indicate the information required from the user to fill the form.

DesignDisease Wordpress Theme uses simply symbols to indicate the required information.

Forms-16 in Web Form Design: Modern Solutions and Creative Ideas

Bouctoubou.com has very basic and simple symbols. However, they manage to make the form more interesting.

Typol in Web Form Design: Modern Solutions and Creative Ideas

6. Hand-writing and grunge in use

We’ve already written about the popularity of hand-drawing and grunge in modern web design. Such design elements are also being used in web forms as they are always unique and convey the personality of the designer. Particularly Flash-based solutions prefer this approach.

Redblu is presented as a sheet of newspaper. To get to the contact form you need to drag the newspaper accordingly.

Forms-06 in Web Form Design: Modern Solutions and Creative Ideas

Fivecentstand offers a Flash-based solution which is seamlessly integrated in the overall site design. It might be difficult for new users to find the form, though.

Forms-05 in Web Form Design: Modern Solutions and Creative Ideas

Pointofe.com with a web form presented as a stick-it-note. The font-size should probably be increased.

Forms-02 in Web Form Design: Modern Solutions and Creative Ideas

Swiths.com with a vintage design. The hover-effect is provided as well.

Hand2 in Web Form Design: Modern Solutions and Creative Ideas

7. Experimental solutions

Below you’ll find an overview of some unusual solutions which can serve as a starting point for your further design. Not all of them might look good, but they have something and you may want to improve the ideas further.

Adorama.com offers a nice-looking and compact solution: a newsletter-box in the sidebar.

Adorama in Web Form Design: Modern Solutions and Creative Ideas

Different language — different style. On Booloob.com the submit-button is placed on the left hand side of the form.

Ara in Web Form Design: Modern Solutions and Creative Ideas

Paregonta.com: cubism meets minimalism. Colorful yet extremely compact form which uses little space. This is a contact form.

Como in Web Form Design: Modern Solutions and Creative Ideas

Sunmatecushions.com with a really different style which somehow fits in the design.

Dynamic in Web Form Design: Modern Solutions and Creative Ideas

Well, why not? Wallpaper for the textarea on GeekAndHype.com.

Dropdock in Web Form Design: Modern Solutions and Creative Ideas

Revota.com is dark and shady, but uses a light hover-effect to display the current field.

Revota in Web Form Design: Modern Solutions and Creative Ideas

Catydesign is also dark. The form impresses with a clever placement of the hints.

Catys in Web Form Design: Modern Solutions and Creative Ideas

Designorati.com: this comment form is hard to overlook.

Designorati in Web Form Design: Modern Solutions and Creative Ideas

MyMileMarker: the web form gone in width. Sometimes horizontal approach is more useful than the standard vertical approach.

Mymile in Web Form Design: Modern Solutions and Creative Ideas

Jaroslav Cerný shows how to combine an e-mail with a web form. The form isn’t online any longer, but it’s definitely worth mentioning.

Form3 in Web Form Design: Modern Solutions and Creative Ideas

Xyarea.be: unusual and original. This is probably the thinnest newsletter box in the world.

Xy in Web Form Design: Modern Solutions and Creative Ideas

Further Resources

  • Blog Comment Forms
    A growing collection of examples of blog comments forms by Christian Watson.