Awwwards
Blog

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

Tag Archives: Branding

Personal, SharePoint, Web Design, , , , ,

3 Reasons Why Winning an Awwward Would Mean the Wwworld to PinkPetrol

After months and months of building, rebuilding, redesigning and then finally launching we are excited to be informed that our website had passed the nomination benchmark, making it a potential recipient of the Site Of The Day award.

We are pleased to inform you that your submission to Awwwards has been approved.

The site will be fully checked and tested by our submissions team, and then posted in our “Nominees” section and will be evaluated over 7 days by our international jury and Awwwards’ users. During this time, you have up to 5 days to modify this information in the “submissions” section of your user account.

If your submission is awarded a high enough score, the site will be placed in a queue to appear as “Site of the Day”. If successful, it will also be included in our book “The Best 365 Websites Around The World” in 2015

Well, I can tell you this there was a massive high five in the office and even if we are unsuccessful it is still an “winner” in our books – for seeing our new website and rebrand come to fruition.

Awwward Nominee for PinkPetrol.com

So why are we so excited to be nominees and why do we want to win?

 

1. It will show we made the right decision to start again & again & again!

We have spent a fair few months, redesigning our new website, and a few more months redesigning it. Throughout these times we have often asked ourselves – why are we doing this? Shall we just get it up there and tweek? We have all collectively said – no.

If you want to do something good, then take your time and do it properly – was written on the wall. There would be no point rushing it to get it live for the sake of it. We don’t do this with our clients so why would we do it for our own website – arguably our most important one?

 

2. We would be the first SharePoint design company to get one

Within the SharePoint industry we are always looking to be the most creative company, to offer the most creative solutions and this for us would be amazing for all involved in the agency. Our company is a little different because again within an industry that is IT focused and in particular around the SharePoint product we are not focused on the nuts n’ bolts – but the design, branding & UI/UX side of things.

 

3. It would be bigger than us, putting a town on the map!

Since launching our new website the support and appreciation we’ve been shown has been simply overwhelming and again shows that we were right to rebrand and relaunch. We are based in  a small town called Telford, not only would it put the SharePoint product on the map but the town of Telford too.

With all that said, we appreciate all the votes, support, shares & likes. We feel as anagency we do a lot for a clients, which we love doing so its nice to be recognised albeit small in the  grand scale of things.

So please vote if you like our site – http://www.awwwards.com/best-websites/pinkpetrol

Many thanks!

End user adoption, User experience, , , , , , ,

Picking your users brains.. not literally

Launching a SharePoint intranet & the branding is done? what do your users actually want? That’s the hard part..

“I don’t know what I want but when I see it I will know”

Now is the time to explode! We have all been in a situation when I client or potential new client mutters that sentence or something very similar. If it is a potential client then it is hard to say “come back to when you know what you want” in fear of losing your potential new client, if you are already working with the client it can be a slightly easier to guide them in YOUR direction.

Picking those brains can be a messy task, not literally but the complexity is (I am guessing) the same. I am often asked to run design work shops and talk to clients to find what they want from their website or intranet. In this blog post I will focus on my way to pick those brains and extract from the client what they REALLY want not what they think they want.

The way to approach this is the way I would approach my 6 year old boy who often says – I want, I want, I want, which often translates to I want, I need, I’d love. He doesn’t need that replica Darth Vader helmet and yes I know he’d love to have the new mountain bike but he definitely does need the Buzz Lightyear school bag. So taking that on board this is how I then approach my clients in gaining basic design and structure elements with three steps – I want, I need, I’d love.

Using an example recently a client explained to me that getting people on board to use their intranet was an uphill struggle and that people didn’t really care about the intranet or use it. The first questions I asked was – Do they need to use it? His answer – not sure. The first part of launching or thinking of launching an intranet is understanding what your work force needs because everyone is busy and if they can do something quicker to make their day, life or job easier then they will, so why not take that on board?

The background to this little design process originated from working with Andrew Woodward of 21apps. He is an advocate of Agile Scrum development methodology and during my time working with him I designed some post-it notes that asked 3 basic questions – As a *insert job role* , I would like to *insert task here* , so that I can *insert ultimate goal here* . By asking these questions you create scenarios that identify what users actually want as opposed to developing what you think they want.

Taking that all on board I created my “I want, I need, I’d love” to which I am trying to think of a fancy name for – suggestions on a postcard! So how does it all work – it simply asks your users what they need to help them do their job better, what they would want as an idea and if they could have anything, what would they want.

What you need to remember is that asking open ended and fluffy questions can do two things; you’ll either get good answers or you will be pleasantly surprised by weird answers! But what is important is the engaging of the users and finding out what they want, need and love to have.

I need…

I start off with this one, straight to the point & potentially shocks the system into thinking what do they need. Leading from this I would normally ask – “what do you need to make your job easier”. Whether it is an area instead of a network drive to hold documents or it being an FAQ area detailing the common questions they get asked every day, this will hopefully get the people on your side and work with you to develop your intranet.

I want…

People use the internet more and more each day and with the boom in online applications such as internet banking, social networking, shopping etc. people know what they like, what is easy to use and don’t like – it is unlocking this that is the hard bit. Asking people what they want is a more of an open question which can show you want kind of users you have. By identifying what they want can suggest what they actually need for example as users once said to me, I want an area so I can feedback to my team about seminars & training days etc – we suggested setting up a blog which worked perfectly.

I’d love…

I would prepare yourself for this – this question has thrown up all kinds of answers some I recall – a dating area, a buy n’ sell area, Facebook in-house because they cant get on it in work hours and a car share system. Most of the ideas you will think are silly, yes they may be and many of the ideas wont be implemented due to company fear or unprofessionalism – we are here to do a job right? but some ideas will and can prove to be great and beneficial. One particular one idea we had was the car sharing system, which was put into operation and cut car usage by 30% in the organisation which from a environment point of view can only be positive – so you see, there are a few gems out there!

Recap…

Now the brain of your users is ticking, things are cooking up in there and hopefully ideas are getting spat out by the second. By doing this exercise on post-it notes it is something that can be kept and logged in as a development plan or some kind of wish list. What I would do now is recap on the ‘I need’ question – from all the other ideas what do you think you need now, I would ask again – the results will be surprising.

What this process does is two things, first thing is gets users on board from the start and it is much easier having them work with him as opposed to you – put your arm around them, not pushing them away from you. The second thing it does is finds out what they want, it picks their brains.

Another last tip, I would suggest doing this again, maybe with a larger group a month later and maybe have it as a competition – people like to win stuff! Best ideas win a prize and you never know what ideas you may get.

Thoughts and comments welcome.

Branding, Conferences & Events, CSS, SharePoint, , , , , ,

SharePoint Saturday: Slide Deck : Giving your SharePoint site a new lick of paint

On SharePoint Saturday I presented my session on SharePoint Saturday – Giving your SharePoint site a new lick of paint – and as promised here is my slide deck from the session.

SharePoint Saturday – Giving your SharePoint site a new lick of paint

View more presentations from Sam Dolan.
Branding, CSS, SharePoint, , , , , , , ,

PinkPetrol SharePoint 2010 Master Page & Styles

After my recent presentations at both SharePoint Saturday UK and SharePoint User Group UK, I have decided it would be a good idea and great help to people to release the ‘this is what I prepared earlier’ files including styles, images and Master Page that were used in both presentations.

So what do you get? you will a Master Page which is a slight modification of v4.master and all the styles that can give your out of the box installation a different look albeit fuchsia pink, which is an awful colour I know and all the required images. All the images are PinkPetrol related such as my logo and banner but you can use these files as a templates and obviously you can change and make your own using something like Photoshop, Fireworks or Gimp (which is free).

If you click and follow the link below, you will be able to download all the files with instructions.

http://www.mediafire.com/?6dk5fwiagld9za6

I hope you find it useful and <shamelessplug>if you need any help, then please get in touch </shamelessplug>.

Enjoy!

Branding, CSS, SharePoint, , , ,

Making the SharePoint 2010 Ribbon scroll like a normal site!

So Microsoft decided to dock/stick/fix the ribbon to the top of the page like so.

Whilst in my session I covered how to make this scroll and gain a lot of questions – Why did they do this? and what is the fix? Well the fix is very simple. But for the ‘why’ I am not sure why. I think they wanted people to also have access to the ribbon much to how the other Office applications work.

  1. First thing you need to do is remove or change scroll=”no” to “yes” in the <BODY> – this will make the page scroll conventionally.
  2. Next you need to remove or change the “s4-workspace” ID tag from line 293 (in v4.master).
  3. I usually just rename it to s4-workspaced so if you need to change it make, you can just remove the ‘d’
  4. Next you need to add some CSS either in a referenced custom stylesheet or directly in the masterpage. The CSS code is very simple it is – body {overflow:auto!important;}

And this should make your page scroll. Fairly straight forward but probably the most requested ‘feature’ to remove when I am branding SharePoint 2010.

Please note – this will mean that if you have a large page and you need to edit the properties you will need to scroll back up.

Conferences & Events, CSS, SharePoint, , , , , , ,

SharePoint Saturday – My Day, My Session, My Verdict

On Saturday 2nd October the UK saw its first SharePoint Saturday event and what an event it was. I want to be completely honest in my post because I feel that is important for the future events and so that people can really see how great the event was and I’m sure will be in the future.

So I set off in the morning woken up by the best alarm clock – my baby daughter. There was me worrying about sleeping in that morning that I set 3 alarms – first at 7.00am, second at 7:15am and the third at 7:30am, only to be woken at 6:55am! I set off for the event with Andrew Woodward who was kind enough to give me a lift. Once we arrived we headed straight into the Key Note speech from Mark Miller and Joel Oleson – Mark did a funny, yet to the point speech combined with some excellent videos based on the theme of Lord of Rings. Joel followed with a series of analogies based on juggling roles and responsibilities – at least that is what I thought…

Key Note with Mark Miller – Hobbits, Wizards and Elves – Discuss SharePoint 2010

 

The attendees – a large crowd for the first SharePoint Saturday

 

The first session I attended was Matt Groves – SharePoint in the Cloud, which gave me a great insight into what is to expect and the future of SharePoint, something I am interested in, in particular the whole BPOS scheme and what I will mean to myself & my business. All in all another polished presentation from Matt.

Matt Groves delivering SharePoint in the Cloud

Next was my session, although I had decided I was going to attend Chris O’Brien’s session but I couldn’t because I was presenting myself! Prior to the day I had a nightmare and awoke in a cold sweat, I dreamt that my virtual machine crashed and I couldn’t get it back! So I was pretty nervous about presenting but I was also confident in my subject and like to think I know what I am doing when it comes to SharePoint Design & Branding. I was lucky enough to do trial run of my session at a recent Manchester Usergroup back in September.

My session started with a quick run down about what tools I will using during the session and what I will specifically covering such as changing the top and left navigation, adding a banner, logo and revamping the search . My VM started a bit slow then kicked into gear and allowed me to do a 45 minute live branding session showing you what a small piece of knowledge and the right tools can achieve using SharePoint Designer and CSS. I then wrapped up my session with a design showcase of SharePoint 2010 sites that showed the possibilities of what can be achieved – accompanied with a piece of music made famous by Tony Hart. I think was my session was well received and my session was pretty full – I just hope people enjoyed it but more importantly took something away from it whether that be an insight into SharePoint branding, what can be achieved or even the tips to actually doing it – that’s what makes it worthwhile. On a side note if you liked/disliked my session or you thought of any areas where I could improve, I would really appreciate a comment or an email. Thank you in advance.

Me, getting to grips with my slow Virtual Machine!

 

Me, talking about SharePoint Design & Branding

 

The final product – taking SharePoint out of the box and adding some pink petrol to it!

 

After my session I took a little break and had some lunch, food was good considering the event was free. I had a chat with a few people such as new 21APPS recruit Ant Clay and then planned what sessions I was attending next.

Lunch time!

 

Next I headed to Andrew Woodward‘s session – Real World Sandboxed Solutions. What I loved about this session were two things. Firstly the annotated slides, using his fancy new laptop with touch screen, the interaction was brilliant, sketching out development paths/servers etc – this worked really well. Secondly I loved the crowd interaction, Andrew has this knack of getting people talking, something that isn’t seen much in these type of sessions. The session turned from presentation to group session/conversation and was really well received. The session covered Sandbox solutions – a new feature in SharePoint 2010. Andrew showed us how he, James Fisk and myself developed and built 21SCRUM using a Sandbox solution for the development. At the end of Andrew’s session he gave away packs of his cool 21SCUM post it notes – if you can get some of these (get in touch with him, he may send you some) I would recommend them!

Andrew Woodward and his live annotates

 

After Andrew’s session I took a break and caught up with Mark Miller of EndUserSharePoint.com, a great guy and a key figure head in the SharePoint community. I have a lot of respect for this guy, he beams positivity and is one of those people you could talk to for hours. We had a picture together and talked SharePoint – well what else were we going to talk about? Oh yes, his shirts – brilliant.

Mark Miller and I – loving the shirt!

My final session was Creating an effective and highly developed Learning Gateway for education with SharePoint 2007 and 2010 with Dave Coleman and Mike Herrity. A session I was looking forward to because they were talking about their Learning Gateway in which I designed and branded. The session was a great insight into what they have achieved in the education world, something they are proud of. They showed the live version of their Learning Gateway from back in 2001 and how it has come on leaps and bounds to SharePoint 2010. It was a good session and reminded me a bit of Laurel & Hardy or the Chuckle Brothers? To me, to you!

The Dave Coleman and Mike Herrity double act!

 

The conference was wrapped up by Brett thanking everyone and with an ask the experts session followed by I think everyone’s favourite bit – the prizes!

The prizes that people could win here fantastic , you had the chance to win an XBOX360, an Amazon Kindle, various book vouchers, USB Headsets, MSDN licences, development books, tshirts and an Apple iPad! I think you will agree some absolutely fantastic prizes but you had to be there to win it! And some poor person chap missed out on the Kindle and some lucky second drawn person won it!  I personally didn’t win anything but my friend Peter Oare did – a book and software vouchers, twice!

The free prizes – XBOX360, iPad & Kindle to name but a few.

So with the first SharePoint Saturday wrapped up it was on to the SharePint! In the bar I had a few beers with some great guys. I met Seb Matthews for the first time, he’s a top bloke and loves Formula 1 and Fulham – someone has to! I also met up with Intelligent Decisioning guys – Mark Macrae, Andy Smith, Tony Pounder and his son Jamie; who all helped putting this fantastic event on.

SharePint well underway

With the SharePint drank Brett Lonsdale, Ant Clay, Matt Groves, Andrew Woodward, James Fisk, Veronique Palmer, Benjamin Athawes, Mark Miller and myself headed into Solihull for a ShareCurry – one of the best curries I have had before!

Time for a ShareCurry

Once that was consumed – I headed home for a much needed cup of tea.

So what can I pick at? Again I want to be honest and I think no WiFi was a bit of a problem, however that didn’t stop the constant flood of tweets and updates from the different hand held devices. Water was another one, I couldn’t find a glass of water anywhere! And that is about it – 2 measly picky points from a free event and the first Intelligent Decisioning have put on. Not bad I think.

So people there you have it, the first SharePoint Saturday, a completely free event put on by people in their own time to help other learn more about SharePoint and a place where you can gain knowledge, talking to experts and professionals and socialise at the same time – FOR FREE! A fantastic event, a great atmosphere, great content and great people.

Thanks for reading, but I want to say thanks to the organisers and thanks to the other speaking for taking time out of their busy schedules to make this great event happen.

All the speakers!

Thanks to James Love for taking the pictures – the full album can be found on ID Live’s Facebook page.

My session can be viewed below – resources to follow

SharePoint Saturday – Giving your SharePoint site a new lick of paint

View more presentations from Sam Dolan

CSS, SharePoint, Top 20, 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

Conferences & Events, SharePoint, , , , , ,

SharePoint Saturday – October 2nd 2010

SharePoint Saturday UK

On Saturday 2nd October 2010 the first ‘SharePoint Saturday’ event comes to the UK! It’s based in Birmingham at the NEC (details here), it’s all day and guess what? It’s free, so before you carry on reading – sign up now! or you can find out more by visiting the SharePoint Saturday UK site.

What is SharePoint Saturday?

SharePoint Saturday is a free SharePoint conference, set on a Saturday, that offers its attendees a range of different 1hour sessions ranging from development & design all the way through to product showcase & architecture best practices. The sessions are presented by all ranges of SharePoint professionals from MVPs to first timers – like me.

UK’s first SharePoint Saturday has been organised by Intelligent Decisioning’s – Tony Pounder, Mark Macrae and Lightning Tools’ very own Brett Lonsdale, free of charge and in their spare time so be sure to thank them for there inevitable hard work that will be put in on the day and that is currently being put in getting it ready – thanks guys.

I am speaking at SharePoint Saturday UK

What am I talking about?

I will be demonstrating how a keen eye for design coupled with careful use of SharePoint designer can make your SharePoint site your own!  This session will include 15 mins worth of quick fire questions and live, improv branding!

Get your questions ready now or if you’re not attending send them through with a chance of getting them answered live!

This is a branding, design, look & feel, lick of paint type of session for people that are interested in seeing how relatively small changes can give your SharePoint site a bit of ownership.

What else is there?

The sessions are still to be officially announced but here are the confirmed speakers (session details to follow) with links to their blogs.

As you can see the line up is already pretty impressive and I have heard word some great additions are being added in the coming weeks – so keep checking the SharePoint Saturday UK site

I’m really looking forward to the event, I know it will be a success as SharePoint seems to have such a strong UK community.

See you all there!!

SharePoint, Top 20, , , , ,

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!

Conferences & Events, SharePoint, , , ,

SharePoint User Group UK Meeting – Nottingham

On Thursday, 14th January I am doing my first presentation for the SUGUK in Nottingham at Intelligent Decisioning Ltd head quarters in Strelley, Nottingham. I am doing a small session on SharePoint Design & Branding, a little show and tell and my thought process when doing design and branding. The session is called Making SharePoint Beautiful – I hope you can all make it.

The user group kicks off with Penny Coventry who will kicking off with “Branding SharePoint Sites: Using the browser and SharePoint Designer 2007/2010”, which will cover what is possible with 2007 in terms of design and a little sneak peek into SharePoint Design 2010.

After myself I will be followed by Nikki Ashington on Accessbility.

Also here a little bit of trivia for you. Nikki was who got me into SharePoint design when she was on site at my previous employment  as a design consultant – so she is to blame 🙂

UPDATE – here is the write up of the event, really good feedback for the event – http://macraem.wordpress.com/2010/01/19/suguk-nottingham-14th-january-2010/

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
  • © 2018 PinkPetrol