SharePoint Web Design

Your (SharePoint Site Is) Driving Me Crazy: Design Tips for Non Designers

Now that I’m seeing more and more public internet facing websites and blogs that are built in SharePoint 2010, I’m seeing more and more really bad SharePoint sites.

Full disclosure:  One of my passions is user interface design, and I do realize that not everyone has that passion or the ability to design pretty websites.  However, there are a few things I’ve been noticing over and over again here lately that absolutely drive me insane, and are quite easy to remedy with little to no design skills required.

Change your site image and theme

If you aren’t going to fully brand your site (by fully branding I mean creating custom master pages, CSS files, page layouts, the whole nine yards), then for the love of god at least change the site image in the upper left corner of the ribbon area, and even change the colors/theme while you’re at it.  This takes very little time or effort; the most challenging part is finding an appropriate image to use for your site image.

There are tons of websites out there that provide icons and images royalty-free; here’s one, and another, and yet another one.  I’ve also used to search for images, but you need to be careful that you aren’t breaking any copyright infringements on the images you choose.

To change the site image, first upload the image you’ve chosen into a library on your site.  Then navigate to Site Actions –> Site Settings –> Title, description, and icon.  In the URL field, enter the location of your image that you just uploaded.

To change your site’s theme, simply navigate to Site Actions –> Site Settings –> Site theme.  Here you can choose a pre-canned theme, or even set your own colors (be very careful here; please don’t choose bright green text on a black background!)

Make sure your site image has a transparent background

This is one I’m seeing more and more:  You’ve made the effort to change your site image, hooray!  However, the background of the image is white and the background of your ribbon header is [insert different color here].  Maybe it’s just me and my anal retentiveness, but I think this looks ridiculous!  I’m not going to call out any sites here, but hopefully you are seeing this and will fix your issue pronto.

It’s pretty easy to give an image a transparent background, and you don’t need to spend an arm and a leg on PhotoShop to do it.  In fact you don’t need to spend a penny.  Just download Paint.Net (which is free) and then follow these instructions:

  1. Open the image in Paint.Net (File –> Open)
  2. Select the Magic Wand tool and set the Tolerance to 25%.  Then click anywhere on the background that you wish to make transparent
  3. Go to Edit –> Cut.  You should see a gray and white “checkerboard” pattern where the image is now transparent
  4. If there are still any non-transparent areas, repeat steps 2 & 3 (this could happen if the image runs up along the top or side borders, causing the background not to go all the way around the image)
  5. Save your image (File –> Save As).  Be sure to choose file type PNG or GIF (other file types don’t support transparency).

I wish I could say I figured this out myself, but I didn’t.  These tips came from a post on the Paint.Net Forums.

Change the default Quick Launch links

Nothing shows your lack of originality (or is it just laziness?) than making no effort to change the appearance of the quick launch links (those are the links that show up in the left navigation).  For Intranets it might be acceptable to leave them unchanged, but not for public facing Internet sites.  I mean, have you ever in the history of the Internet seen on any public site, ever, a link called Lists, then sub-links below them of every list on your site?  Or a link called Discussions, with sub-links for each of your discussion lists?  I haven’t either.  So please take 10 minutes and think about the content you want users to access, and customize your Quick Launch accordingly.

You can customize the appearance of your Quick Launch links by navigating to Site Actions –> Site Settings –> Navigation (for sites based on the Publishing template or sites that have publishing features turned on) or Site Actions –> Site Settings –> Quick launch (for non-publishing sites).

So what are you waiting for?

Again, I realize that not everyone is good at branding, but these are really simple, quick, and relatively painless things you can do that will make a big impact on your site.  So if you are in violation, please make these changes today!

(Visited 402 time, 1 visit today)


Click here to post a comment

About Me

Wendy Neal

Wendy Neal

I am a .NET SharePoint Developer for DMI. I've worked with SharePoint since 2007. I love to share my passion for SharePoint and Office 365 by speaking at various industry and user group events, as well as writing articles for various publications and this blog.   Read More

MCSA Office 365
Top 50 SharePoint Blogs

Buy My Book


  • 2018 (1)
  • 2017 (1)
  • 2016 (8)
  • 2015 (23)
  • 2014 (20)
  • 2013 (22)
  • 2012 (15)
  • 2011 (13)