Elegant and Engaging Web Forms Part 1: Search Bars

Alt Text

Introduction

A search box is an essential part for most sites to allow the user to fully explore and experience their content. Search forms should be noticeable and easy to find so the user always has the choice to look for more once they are done with their current page. With the rise of CSS3 and javascript libraries like jQuery, search forms are becoming more advanced with more features.

I will also gather resources to teach how to create search bars and give them advanced functionalities.

Here are some examples of elegant search bars that look great, but also work well. Along with these examples, I will also provide resources to learn how to implement certain techniques you may want to have in your search forms.

Other Parts

Read Elegant and Engaging Web Forms Part 2: Login and Registration Forms

Examples

WebDesignerWall

With the recent redesign of WebDesignerWall came a new search bar. It is a simple rounded search bar that lengthens in a nice animation when clicked on.

StockVault

The main search form is over an image slider so that the search bar is both in the center of attention while still previewing new images.

RealMacSoftware

On the RealMacSoftware blog there is a simple embossed search bar. When the search bar is clicked, there is a nice glow effect that surrounds the search bar.

RatherSplendid

This search bar in the fixed menu, has an instant search. The results slide down under the search bar.

KomodoMedia

This beautiful search bar has a nice font with an embossed background on the wood header.

Abduzeedo

Their search bar glows brighter when you hover over the form.

365PSD

This search bar gets a nice black border around the form and the replaceable text fades before being replaced. The search text also has a text shadow.

PrintedPiece

There are two tabs to search for with long embossed search bars.

Playlistnow.fm

This search form is the main element of the webpage with big replaceable text while keeping the first couple letters to remind you what to search for. Besides the gorgeous search button, there is also a suggested search feature that has thumbnails of musical artists.

GrooveShark

GrooveShark has multiple themes that spice up the search design. You can support your favorite artists or just use a fun design as a theme.

MenuPages

There are 3 different tabs for different categories. The advanced tab expands the search bar and adds advanced options.

Dropr

The image thumbnails are filtered instantly when something is searched for.

WaiterOnTheWay

This custom search bar has a nice chalk and handwritten feel, matching the design of the website.

Nike Skateboarding

This large gray search form has big bold text and shows instant search results.

Twipho

This large search bar has instant search results as well a nice gradient background.

CarlsonDesign

This silver rounded search bar has a nice contrast to the dark colors of the website that makes it easy to find and also beautiful to look at.

Resources

Styling Your Search Form with CSS ~ SohtanakaView Demo

How to Use the jQuery UI Autocomplete Widget ~ NetTutsView Demo

How-To Create Your Own Instant Search ~ Woorkup

Grooveshark Search with CSS3 ~ DesignInDevelopmentView Demo (Includes replaceable text tutorial)

Creating A Rocking CSS3 Search Field ~ HongKiatView Demo