Showcase of Inspiring Search Box Designs



 

Having an aesthetic search box on a website is as important as being capable of establishing good content on the website itself. It is true that one could provide categories in order to allow users rummage through content to find what they may be looking for on the site.

Nevertheless, the fact of having a search box on the site will facilitate the process for the user since they will be able to find precisely what they are looking for. Pay attention to just how important it is to implement a well-working search engine on a website.

Even though external search engines e.g., Bing, ASK, Yahoo! and so on, are there to deliver the same function, just in case your visitors may consist of the more Internet savvy users, they will intentionally degrade the quality of your site for not having any on-site. This is because they know just how much this situation influences the overall grade of the site.

In conclusion to our introduction, a number of ways you can impress your audience will be listed, with a fully functioning on-site search engine that also lets users devour its aesthetic pleasure with new examples on existing websites.

Auto Search Suggestion

This feature became popular after Facebook’s launch of auto search suggestion. Not only it became a trend but it is also useful for giving users optimized results when installed properly.

Playlist Now
This search box was created by Alvin Thong. Instant search results lists the results matching your search query as your are typing it in a dynamic form without having the entire page refreshing.

5-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

It is truly iconic given the purple and magenta as the background and a translucent border surrounding the search box to provide a great contrast. Notice the approx. 20 pixels left indent on the auto suggestion list — making it very vivid for the user to see. The white background also helps users see clearly that it is a textbox and having a white background on it helps to have a clearer vision.

Nico’s Search Box
Nico added a scroll module for alphabetical order purposes.

4-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Get Satisfaction
Get Satisfaction doesn’t only provide auto suggestion but it categorizes the results into “Companies” and “Products” — helping users refine their search automatically without effort.

3-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Guillermo’s MooTools Textbox List
Mac OS X-like tokens also work well for search for tags. In this case, Guillermo has implemented the same feature but in PHP making it feasible to be used on websites not just desktop applications. Also, notice the “x” button at the right of each token signifying that they can be deleted.

6-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Remember The Milk
When searching for tags in the web app, Remember The Milk, the letters you are typing inside the textfield are emphasized in the auto suggestion list. This serves to let you know which letters in your query matches the results.

7-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

WYCTIM

11-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Tutorials on How to Implement Auto Search Suggestion

Instant Search Results

Authentic Jobs
Before Google’s instant results, there was Authentic Jobs’ instant results.

1-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Google
A couple of months ago, Google released some new features to their products. One of them being Google Instant.

2-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Stuart’s Search Box
It also allows you to display previews of the search results but not all of the search results — as in Stuart’s case.

25-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Tutorials on How to Implement Instant Search

With the use of AJAX, this can easily be done on any website:

Integrating Filters with a Search Box

As an alternate to providing suggestions to optimize results, enabling users to filter their results before searching is also a useful technique.

Flickr

8-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Kontain

9-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

New York Magazine

10-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

ThemeForest

12-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Brian’s Search Box

26-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

CSS Tricks

28-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Further Tutorials

Creating a mega drop down menu is how you can put in check boxes and radio buttons in your search box so here are a few resources teaching you how to do so:

Saving Space

Despite the evidence of formal surveys and statistics, many users today (analyzing how you, yourself, press enter to search instead of clicking a button), we can save space by:

  • Ommiting separated buttons
  • Ommitting buttons entirely
  • Putting replaceable text inside the textbox instead of an individual label.

Ommitting Separated Buttons

By putting the buttons as part of the search box, you can save space. Also, if your target demographics are close to being Internet savvy and they know the standard web elements and icons, you can afford putting a magnifying glass icon instead of a long “SEARCH” button.

Scraplr Blog

16-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Deziner Folio

21-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Ommitting Buttons Entirely

Although, this could sometimes give trouble since older generations are not customed to pressing enter to execute the search function. Therefore, you may have to perform a bit of audience demographics study before choosing this method. Otherwise, they’re great for saving space.

One Fused Life
The blog of Lasha Krikheli features a search box that uses replaceable text inside the search box, thus, symbolizing that it is a search box without the need of extra labels.

14-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

The Web Squeeze Forum

22-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Putting Replaceable Text Inside the Textbox Instead of an Individual Label

As in Lasha’s case, replaceable text can help you save space without putting in a separate label. Below the showcase lists tutorials on how you can achieve this with the usage a bit of JavaScript.

Tumblr

20-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

The Web Squeeze Magazine

23-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Tutorials on How to Implement Replaceable Text Inside Textboxes

This is usually done with the help of JavaScript so look below for such tutorials:

Increase Recognition by Keeping it Nice and Clean

Here is a list of examples of making your search box recognizable and unique to the rest of your page:

New York Times
Here, the container of the search box pops out of the rest of the navigation bar — giving it more focus for the user to point out where the search bar is.

18-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Cursebird
Uses a Twitter bird icon and a tiny notification dialog to help the search box gain focus from the user. Designed by Richard Henry.

13-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

MenuPages

24-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Go FrenchLabs’ Search Google

30-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Various Search Boxes

Dribbble is an exlusive club for designers whose work is recognized by the community and fellow designers around the block. Overtime, it has become a place for inspiration. You can expect only the best from its members. Check out the designs on there once in a while if you need new ideas.

Kevin’s Search Box

29-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Ben’s Search Box

31-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Jeremy’s Search Box

32-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Thijs’s Search Box

33-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Freshface’s Search Box

34-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Clark’s Search Box

35-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Robbie’s Search Box

36-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Mike’s Search Box

37-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Visual Idiot’s Search Box

38-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Ben Rowe’s Search Box

39-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Nathan’s Search Box

40-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

John’s Search Box

41-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

John’s Search Box

42-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Adrian’s Search Box

43-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Jason’s Search Box

44-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Alexis’ Search Box

45-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Jonatan’s Search Box

46-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Andrew’s Search Box

47-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Pete’s Search Box

48-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Phil’s Search Box

49-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Joey’s Search Box

50-searchbox-2010-11-30 in Showcase of Inspiring Search Box Designs

Other Resources

You may also be interested in the following articles and related resources:

(ik)

Tags:

About the author: Alexis Brille is Lead Visual at Quantes and Chief Creative Officer of Guerilla Pixels, a creative design and development studio in California, run also by her partner in crime, a Maestro in the field, Dan Giulvezan. They’re all about creating elegant custom design and coding for web, desktop, iPhone, iPad, Android and BlackBerry apps.

About these ads

Etiquetado:, , , , , , , , , ,

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.662 seguidores

A %d blogueros les gusta esto: