Awwwards
Blog

A place where we talk SharePoint, web design, inspirations, trends and everything in between.

Tag Archives: Web Design

Top 20 Examples of Creative Search Areas within SharePoint

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

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 show 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

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 there 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 thing they have made this stand out enough to say ‘our search box is on the left’ !

http://www.cableone.net

————————————————————————————————————————————————

6. Ajilon

I choose 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 been clever to add some further ways to 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 & presents correct results and 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 the 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 that are looking for users to use it 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 be loosing 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 that 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, 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

Top 20 Examples of Creative Navigation within SharePoint

With the launch of SharePoint 2010, I thought it might be fitting to start focusing on the design and branding element of SharePoint and show the world what can be done when you are thinking of being creating with the product.

Leading on from that I am doing to launch a series of Top 20’s ranging from search box examples , navigation examples and my favourite sites all based on the platform of SharePoint.

So to start the series off I am going to start with my Top 20 Examples of Creative Navigation, with a brief summary of why I like it. They are in no particular order and are the opinion of myself. Enjoy.

So then, let the showcase commence…

1. Carbon Trust

I really like the font they have used for starters and I think the hover state with the reverse colour is effective combined with the immediate show of the sub navigation, which has a subtle fade for the potential white-on-white scenario.

http://www.carbontrust.co.uk

————————————————————————————————————————————————

2. BSG Blog

I love this Silverlight navigation, orbiting around home/earth button is really cool. I always love the little touches of the shooting star, UFO that flies across and the twinkle of stars that happens every now and again. All in all and unique and very creative navigation that can be achieved with the combination of SharePoint and Silverlight.

http://blogs.bsg.co.uk

————————————————————————————————————————————————

3. Linklaters

I really like big and bold navigation as it is one of most important elements of any website – clear navigation. Looking at it now as a little picture your eyes are drawn to the logo and navigation instantly. This navigation uses drop down menu functionality with combined with the purple arrow and purple text in hover state just polishes is clean and simple example.

http://www.linklaters.com

————————————————————————————————————————————————

4. Central Ohio Technical College

One good way to gain your users attention is the use of animation. Too much can be overpowering and annoying but used subtly it can be a great way to get them clicking. This navigation I like because I did just that, I was hovering over all the menu options over and over, the animation is smooth and colourful.

http://www.cotc.edu

————————————————————————————————————————————————

5. Hyder Consulting

Something a bit different in terms of layout, on top of a large photo, which sometimes can make navigations lost within the background. One way to counter this is using a large navigation which I this site does well, combined with white text in hover state in the line of sight with the logo and search area, this site navigation works.

http://www.hyderconsulting.com

————————————————————————————————————————————————

6. Victorinox

The use of the burgundy background with the white navigation as well as the capitalisation of lettering works really effectively and even more so when reversed on the hover state. Leading on from this, the sub menu and the active menu state still using the reverse color of white background and burgundy hover state on the submenu polishes off this example perfectly.

http://www.victorinox.com

————————————————————————————————————————————————

7. Arts & Auto

I really like colour-categorised navigation, it is a simple way to break up and easily identify content within sections on your website. Not only have they done this and have incorporated a dropdown / sub menu with some navigation, in which when cooked together they’ve baked a nice piece of animation with a nice design.

http://www.artsenauto.nl

————————————————————————————————————————————————

8. Hyro

Sometimes when you have a clean site you don’t need to use a graphically heavy navigation. Also using a clean and crisp navigation can really complement a design, which this site does and does well. Not over the top, no animation just simple text with a simple hover state that of an underline. Simples

http://www.hyro.com

————————————————————————————————————————————————

9. Sdu Uitgever

Not my favourite of navigation examples but I think it is important to demonstrate something different and with that I respect. One thing all creative designers should be looking to do is think outside of the box and this navigation does.

http://www.sdu.nl

————————————————————————————————————————————————

10. SharePoint HQ

What I particularly like about this is the combination of colour palette (I love those blues), the animation and the bottom-right gradient they have used. Also what I think is good to recognise is the contrast of the menu with the background it sits on, creating enough contrast to make the user experience seamless without looking out of place.

http://www.sharepointhq.com

————————————————————————————————————————————————

11. Lutron

Having a site with a large navigation structure can be tricky to present in a clean and clear way, which isn’t busy and cluttered. This site does this perfectly! It is well presented and even incorporates a little bit of content in the sub menu pane. The only thing I think ruins, what could be a lovely example, is the animation for the sub menu pane, I think it very ‘choppy’ and quite violent on the eyes going from a brown palette in their photography then to be presented with a white background instantly. My opinion is that a nice piece of fade in/out animation would be perfect here.

http://www.lutron.com

————————————————————————————————————————————————

12. Central Ohio Technical College

Similar to Central Ohio Technical College further up, this is animating up instead of to the right, BUT with a little twist not only does this navigation animated up it also changes the image below based on what you option you have decided to hover over. Although it is flash and I think that it is cheating to use a flash menu on a SharePoint site, I like it and it is my blog so I will include! but this will be the only one I promise! I would like to think that CCB have used flash to tap into a list to power their navigation, if they have then then I suppose that’s a decent compromise.

http://www.ccb.pt

————————————————————————————————————————————————

13. Ferrari

If there is one colour that goes with a strong and vibrant color like red it is grey and in particular gun metal grey, one of my favourites. What I think makes this navigation really cool is that use of imagery on the drop down boxes to emphasis the area you are in and could head over to, I also like the animation that is used just tops off the whole navigation.

http://www.ferrari.com

————————————————————————————————————————————————

14. Safe Network

First thing I noticed on this navigation was the shadow that is used on the right/bottom of the drop down which really gives the sub menu definition. With a site that used big, bold colours the navigation supports this really well. I also like the way the top header and navigation sit on top of the image slider/view that is used behind the site.

http://www.safenetwork.org.uk

————————————————————————————————————————————————

15. Rado

Sometimes you just need to go back to the basics! The brand for this site is clearly black and white, using this they have kept their navigation simple, but with a twist. Using the sub menu they have added the functionality of when you hover over the different options you are presented with a visual representation, in this case a picture of the watch based on the what model you hover on. A perfect example of simplicity works.

http://www.rado.com

————————————————————————————————————————————————

16. Goodman

One thing I like is trying something different! Clever navigation based on their logo the ‘+’ (plus) sign really works well. Instantly identifiable with the logo you cant help but notice that Goodman use a + as there logo. Going back to the navigation you are clearly presented with 5 options which takes you to various areas. Once in those areas they use a standard navigation you see everywhere, shame really as their initial navigation is cool.

http://www.goodman.com

————————————————————————————————————————————————

17. Cox

This is a common trend I have seen where people use the navigation to tell people the sections they will be clicking on them and underneath what the section is about. It can be used really effectively sometimes but also can become a very busy as well on the flip side. Just wish they had a mute button for the woman…

http://www.coxhelpcenter.com

————————————————————————————————————————————————

18. Embark

Sometimes you didn’t even need to use the conventional horizontal or vertical navigation. This site shows us you can use a search interface to get around your site however I will always put my money on that people prefer the normal way of navigation as that is what people are used to. But I think it is a good example of what can be done especially with the search capabilities within SharePoint.

http://www.embark.com

————————————————————————————————————————————————

19. Neudesic

What I want you to focus on here is the use of the ‘house’ icon for the home button. First time I have seen this on a SharePoint site and it is a really good way to free up a bit of space if needed and is instantly recognisable as the button to click to go ‘home’.

http://www.neudesic.com

————————————————————————————————————————————————

20. 1 By Youth

Another example of pushing the boundaries of navigation with SharePoint is using the overwhelming power of CSS. Using the hover state and mixed with an image for the background you can instantly create a unique hover experience for your navigation as demonstrated here.

http://www.1byyouth.com

————————————————————————————————————————————————

Well there you have it! Some great examples of all the different possibilities of what can be achieved with SharePoint. I would be really keen to see what other sites out there with cool and quirky navigations, so feel free to share!

The 10 step Web Designers check list for backing up

A quick check list of items you need backup before you move, delete or format your system.

Picture of a check list

Recently a good friend of mine Martin Coulthurst of Lightness recently backed up his computer and asked me about various things he would need to backup, I had a think and we bounced a few things back and forth on what we need to back up, conversation ended and he did his install. The next day we spoke and he realised he forgot one or two very important things – fonts! This then prompted me to think about a little check list of items that I will be thinking about when next back!

1. Get yourself an external hard drive

With the price of external hard drives now a days there is no excuse for not having the money to buy one. Over at Overclockers.co.uk they have a Western Digital My Book Essential 500GB USB2.0 External Hard Drive for £62.99 – bargain! Get this and you are ready to go!

2. Documents

The treasure chest of any designer, if like me in this folder which can sometimes be called the Desktop (!) has everything saved picture files, word documents with little notes, CSS snippets and even the stray file called something informative such as smd-application3.php which a week ago was as familiar to you as your date of birth, 2 weeks down the line means nothing!

3. Browser Settings, Favourites & Add-ons

There isn’t an easy to back up your browsers settings unless you download a 3rd party tool. In my experience I find that proxy settings, browser adds-ons such as FireBug/IE Dev Tool bar are my most important ones. Best and easiest way to do this is either – take notes or print screen them into a word document.

  • To find out FireFox add-ons – Tools > Add-ons
  • To find out IE add-ons – Tools > Manage Add-ons
  • To find out Safari add-ons – Help > Installed Plug-ins
  • To find out Opera add-ons – Widgets > Manage Widgets

Favourites is also something important you want to backup, as designs and most other IT people know how annoying it is when you find something and don’t bookmark it, well that feeling is multiplied by a million when you’ve lost ALL your favourites, trust me I know.

To find your favorites they are here – C:\Documents and Settings\PCNAME\Favorites

4. Fonts

Another little designer’s paradise – all the fonts you’ve sound, all the various versions of Arial that are slightly thinner or slightly bolder. Some fonts you’ve found and probably not paid for. All these can be found within the Control Panel > Fonts.

Useful resource if you have lost all your lovely fonts – http://www.csstea.com/css-gallery-news-and-resources/807-11-best-free-fonts-websites.html

5. MSN/SKYPE conversations

I find keeping my conversation that I have had with clients is pretty useful. Whether it be checking back on something you maybe of lightly agreed to or something you may have said to a client or something else you can’t remember, it’s pretty useful to go back and check.

If you are saving MSN conversation you can find them here – C:\Documents and Settings\COMPUTERNAME\My Documents\My Received Files\EMAILADDRESS1212445099954\History.

If you want to turn conversation saving on in MSN then open up the main MSN window – Tools > Options > Messages > Message History (at the bottom)

6. Email

I personally use Gmail and Hotmail just for the fact that if my system does die, I have this backed up online – for free! But if you are using Outlook then I recommend doing a PST backup of all the email, this may take a while so remember to stick a DVD to pass the time – I recommend the film Hunger – the story of Bobby Sands – Fantastic film.

7. Software

Everyone knows how annoying this is when you have your software suite perfect then the manufacturers go and do something intelligent like release a new version of software that is poorer than its predecessor (MSN Messenger & Fireworks CS4!) or discontinue the software you are using. I tend to keep my software AND products keys backed up, I suggest you to do the same! Last thing you want is a deadline date, dead system and no software! At least if you’ve backed up you can install what you need as a short term measure. A site I recommend is OldVersion – http://www.oldversion.com/ which I am sure you can guess what the site is about.

8. Media

Pictures, Music, films or even ambient sounds of frogs or even System of a Down albums (what I use to design to) is all pretty important when you’re in the ZONE.

9. FTP site lists

If like me you have 1 FTP programme with all the sites that I look after listed, then you will be pretty annoyed if you lost all them! I do have them all saved but it is a chore having to wade through emails trying to find each and every site you look after! Even if you have then found chances are the FTP password has been changed so you have to then log in to the cPanel or dashboard to get the details so its a pretty good tip to save these!

Most FTP programs come with an export/import option that usually exports out as a CSV or text file of some kind. This option is a winner for me, I probably would use an FTP programme that doesn’t have this feature – WiseFTP 5 does and that is what I use.

10. Client list & business documents

This is probably THEE most important thing to back up, I personally carry all these on USB stick which is locked away in a fireproof, flood proof and child proof safe. My client list has all my clients’ names, emails, contact numbers and dates of work and what was done. Just imagine if you lost this? I actually feel anxious writing that! Same goes with business documents, all backed up just in case anything happens.

awards & recognition
PinkPetrol on awwwards.com PinkPetrol on webguruawards.com PinkPetrol on cssdesignawards.com PinkPetrol on csswinner.com PinkPetrol on csslight.com PinkPetrol on Find Web Agency