I'm in the process of creating an application store. The following is the wireframe for it. Now I want to make the search bar globally available regardless of the page the user is. So I made the search component to appear over the listing and gave some spacing to the menu as well. To show the search is in a separate bar.

enter image description here

Is this the best approach to make the search bar globally available? without making it appear on the header it self!

How can I achieve the globally available search bar?

Along with the answers I recieved, updated my wireframe to show something as following. Is this approach cleaner? I kept the category selection as it is and changed the location of the search, to be on the top right.

enter image description here

2 Answers 2


To answer your question: This is not the best approach.

Why? Because it looks like the search bar is limited to the content below it. In this case the wording is off to, if its a global search then it should say "Search site" or "Search NAME OF THE PLATTFORM" for example instead of "Search applications".

The Header would be the best option since its the most clear indicator that the search is global and not limited to its content below.

If the header is not an option then you could place the search like this: enter image description here

Try to visually separate the search from the content below as good as possible.

  • I updated my answer with an updated wireframe! is it ok? Oct 12, 2017 at 6:16

Having the search bar in the top header is one of the cleanest and most clear ways of depicting that the search is global in nature.

Search bar in the top header

I generally don't have any issues with your wireframe either. My only concern is whether it utilizes the space optimally.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.