Design in Iterations

Handwritten by TVD

The power of search has consumed us all. What we need, what we are looking for, is always a search away. Yep, that’s the world we live in; a world where information is now always at our fingertips, a world where access to information is as routine as brushing your teeth.

Since searching has become such an iconic part of our lives, why not embrace the experience of designing a search box on your next web app or blog?

Here’s a quick glimpse into my experience designing the search box for Seventh Octave.

Initial Concept

This was the original concept. I really thought that it was a good starting point. But, I decided it could use a little rework.

Seventh Octave Search Concept Initial

Rework Concept

Here’s my second concept. You can see that I altered a few things. I made the link text more succinct to give it a cleaner look. I also, decided to emphasize the search box area; so I removed the search box button on the right, expanded the search box area and added some depth to it by creating a drop shadow on the top and left corner.

Seventh Octave Search Concept Rework

Final Concept

For a final touch, I added the magnifying glass to symbolize the purpose for the box (to search of course.) … And Whoalah! My search box is now complete. Seventh Octave Search Concept Final

So, when you do begin designing your search box, don’t forget to make it a fun experience. After all, your search box is the beginning to an enjoyable search experience for your visitors.

discuss on twitter

every day thousands of developers use our charts & gauges to get the job done right

JavaScript Charts JavaScript Gauges JavaScript Flight Gauges

← return to all articles