I have recently been carrying out a great deal of research into an advanced search UI. This is due to an upcoming project I will be working on that requires such a feature to be implemented. 

As a result of this research I have condensed my ideas and created the following advanced search UI. The goal of this UI is to provide a way of carrying out advanced searches in a ticketing system.

Following on from research online, including topics such as usability best practices, use cases, requirements and design inspiration, I initially sketched up a number of wire frames using Balsamiq mock ups.

After creating initial wire frames, I then proceeded to create more higher fidelity mock ups using Photoshop. In this way I could better understand the potential styling of content, positioning of content etc. without the use of color. I took my inspiration from the Material Design UI library for this UI to ensure the design would look clean and professional.

Once I was happy with the grey and white mock ups, I was then able to focus on colour and interaction. I added more detail to the buttons and ensured not to over saturate the page with color so as to keep things minimal.

The main goal of creating this UI was to create an advanced search feature that would be intuitive to use and that would not take up too much of the screen at all times.

Taking from inspiration online, I created the idea of the advanced search feature as a sidebar to the left of the screen that could be expanded and collapsed as necessary.

Within the search sidebar, the user can navigate through the search categories as required to perform an accurate search.

The ability of saving a search into a bookmark stood out to me as being very useful so I am glad I was able to incorporate this into the design.

Once a search has been performed, the user can collapse the search sidebar and concentrate their focus on the relevant data that has been returned.