1,804 articles and 14,440 comments as of Wednesday, December 29th, 2010

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Monday, September 13, 2010

Top 20 Examples of Creative Search Areas within SharePoint

Guest Author: Sam Dolan

Continuing with the series of my SharePoint Top 20, I now bring you Top 20 Examples of Creative Search Areas within SharePoint.

So let the showcase begin….

1. WesTrac Cat


I am a keen fan of gradients which can work really well if used correctly. What I like about this search area is the way it shows the users  the magnifying glass within the search input box, combined with some text and the gradient search go button – all in all I think it looks really cool and more importantly noticeable.

http://www.westrac.com.au

2. imason


Another way to show a search box is using rounded edges. Although my personal opinion is that the rounded box looks a bit out of place on a website that is predominately squared, boxed, contemporary etc.. it is a good example of another way of displaying your search box.

http://www.imason.com/

3. IBC Bank


I like it when a website takes the time to keep a running theme going throughout. It should be second nature but it is surprising how many sites don’t. In this case they have done just that with the go, search, site search buttons etc. What I also like is the combination of the SharePoint site search with the JQuery drop down box. A good example of what you can do with the SharePoint and web technologies combined.

https://www.ibc.com

4. Gevalia


I like the style of this search box with a nice and crisp outline combined with their theme colour orange background for the submit button. What I also love about this ‘go’ button is that it is in the style of a coffee mug, from a birds eye view – very clever and quirky.

http://www.gevalia.com

5. Cable One


The reason I like this search box is because it is just a standard search box and a plain ‘go’ button, which has been placed on a polygon image, which I believe takes shape just like their logo. It is also using the same red as their branding on the top of a blue navigation bar. Although I prefer search boxes to be on the right hand side I do think they have made this stand out enough to say ‘our search box is on the left’!

http://www.cableone.net

6. Ajilon


I chose this particular site for its search, for the fact that it uses 2 buttons as well as the search box. With the traditional search area (top right) being the second place your eyes take you when you look at website, they have cleverly added some additional ways of getting to information. Works well if done correctly.

http://www.ajilon.com

7. ERGO


The search icon is what I like about this search setup, slightly rounded on a red background in contrast to the black navigation bar underneath works great. Clean, crisp and keeping up with the developing theme.

http://www.ergo.co.uk

8. West Virginia


This is a great example of pushing people to use search, which works so well if their search is set up correctly and presents correct results. As we all know search in SharePoint, if set up properly, can be fantastic. This, in my opinion is a good example of using the search functionality as a focal point for your website. Also I like the added extra of the ‘recent searches’ that other people have searched on – all in all a great search example.

http://www.wv.gov/

9. Childine


I have obviously taken a close look at a lot of search boxes, areas, layouts etc. and I can say I haven’t really seen many search ‘go’ icons that are circular. This site does and it goes well with the circular home icon and their main telephone icon – also may I add a very important charity in the UK.

http://www.childline.org.uk

10. SOS Childrens Villages


Using my favourite blue is always going to get my attention – I say again, I love this blue! Also, just like the Ajilon site, they have used the top right hand corner area for their most important buttons – Search & Donate. Have you done your bit?

http://www.sos-usa.org

11. Speak.NL


Using the bright orange as the search box on the black background really works. It draws your eyes towards it and works well as it is the sites main colour. Using a bright colour like orange on a very dark background is going to create a great contrast.

http://www.speak.nl/

12. Right@Home


Here the combination of the menu/logo font for the example search text and the size makes this site search a feature point of this site. Big searches work, but must fit in line with the rest of the site - proportion is very important.

http://www.rightathome.com/

13. Advantive


There is some real emphasis on this search box, by making this the focal point of the site I would assume they are looking for users to find information. The only down side to that is if their search is configured correctly then it will work great to find the relevant results and quickly. If not then you will lose people very rapidly.

http://www.advantive.nl

14. Expedia Media


I know this post isn’t to showcase top headers (that’s the next one) but I love this top bar and I love the way the search box and go button have been incorporated into it – leading on from the green go button works really well and compliments the blue.

http://www.advertising.expedia.com

15. VB Parents


When I look at this search area I do hope they meant to make the search box a part of the cloud! Because if they have it looks great. I like the idea and I like the colour contrasts used on the search ‘go’ button.

http://www.vbparents.com

16. Cox


When viewing this site I tend to mute it, as the woman gets a little bit annoying. But what I do like about this site is the nice search box they have. A large box with a subtle ‘go’ in a techy font – nothing over the top and nothing in your face – I suppose that’s the woman’s job on this site – man she is annoying!

http://www.coxhelpcenter.com

17. Australian Government


Another example of making your search maybe too prominent! All I seem to be drawn to is the white border that I think just looks odd and out of place – remove it and you will have a nice search box there. I am  still looking at it, still looking at it….

http://www.socialinclusion.gov.au

18. Lutron


Light grey on a darker grey background with white text works. Looks great and is stylish – wouldn’t you agree?

http://www.lutron.com

19. ARG


This is a cool example of using a texture behind the search box to give it some life, which is exactly what this site has done. I think if it was just a normal search box it would just look lost as part of the header. A simple grunge background brings this search functionality to your attention.

http://www.arg.net.au

20. Northwestern Mutual


The best example of a corporate style search? I think so, enough said.

http://www.northwesternmutual.com

Guest Author: Sam Dolan

Sam Dolan is a SharePoint Design & Brand Specialist and is the Director of PinkPetrol Ltd. Sam has been producing website designs, brands, UI’s and website overhauls for over 10 years now, 3 of those in the world of SharePoint. With a background of web design and user experience Sam focuses on the design, branding and UI side of SharePoint, taking the product with the target to make SharePoint look & feel beautiful. Some of his clients consist of the NHS, 21APPS & BBC as well as the SharePint , SharePoint Retreat, SharePoint Overflow logos under his belt.

 

Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!