Skip to main content

10+ Years of SharePoint Branding Progress

Since SharePoint was first introduced in 2001its standard visual design appearance has taken on quite a few different forms over the years. The base core features of document management and collaboration have stayed pretty static but the introduction of publishing and social features has transformed the product into a Swiss Army knife and can be used for many different things.

Here is a look at its progress from 2001 all the way through 2013.

Microsoft SharePoint Portal Server 2001
sharepoint-2001-main
Core Features:
Base included document management, search and what was called then a dashboard site to display webparts.
Visual Design: This was before my time but from the looks of it the design came with a standard header that you could customize the logo or title of the site.


Microsoft SharePoint Team Services 2002
sts2002
Core Features: Ability to create lists and HTML pages.
Visual Design: The design got a slight change to the header and also added in page level icons. It is also the first introduction of the left side navigation “Quick Launch”.


Microsoft Office SharePoint Portal Server 2003
sps2003
Features Added: In 2003 the Microsoft team added the ability to create “Topic” sites. These sites were a bit more complex than the webpart pages and were the first step towards the now publishing sites. The Search was also updated in this version.
Visual Design: The design got a major overhaul and it included many new design elements and a lot more CSS. Almost every page had a icon based on the type of site it was, however the search control was one of the hardest things to figure out how to customize correctly. They also figured out how to flip text vertically on the left side navigation…


Microsoft Office SharePoint Server 2007
moss2007
Features Added: In 2007 they did another major overhaul with the ability to have publishing, master pages, and page layouts.
Visual Design: The design included a shaded background that framed in the content area. This allowed site owners to choose themes that drastically changed the look and feel of the sites. With the inclusion of the master pages designers no longer needed to modify the core CSS files on the server to customize the look of their sites.


Microsoft SharePoint Server 2010
2010
Features Added: There were not too many core features added between 2007 and 2010 other than the introduction to the SharePoint Ribbon and an enhanced profile and social features like the newsfeed.
Visual Design: As with the previous version the design for SharePoint 2010 got a complete overhaul for its master page. It got converted to a mostly all table less design. The design was simplified and some effort was put into site performance by including sprite images and less heavy background images.


Microsoft SharePoint Server 2013 Preview 
2013
Features Added: The new features for 2013 focused on social connections, mobility, project management, communities, search, and apps.
Visual Design: The new metro inspired design is very simplistic and uses font weight and color to guide the users on the page. All colors are flat and the iconography is very simplistic and monotone. The introduction of the “Design Manager” will allow designers that don’t have any master page or page layout experience to customize the look of the sites by just using standard HTML and CSS.

SharePoint has definitely had an interesting design history and I think is going in the right direction. Yes the design is drastic but its just a shell for us to add our own flair. The design trend for what I have seen is hedging on the “Minimalistic” approach. Take for example Facebook, its easy on the eyes and people at first were mad because they could not customize the look of it, but now people don’t care about that. They just want to know what Mary Sue did on her last vacation or want to share with everyone that they going to see the next batman movie…

Overall I am very excited for our next branding adventure with SharePoint 2013 and will be sure to share my experiences, tips, tricks, Etc. with you all!

Comments

Tracey Nolte said…
Great write up about branding all the way up to 2013. Thanks!
Amila Hendahewa said…
Cool stuff ! thanks for sharing
pruitt said…
Hi.... i am william thanks for sharing information on sharepoint.
pruitt said…

Hi ... william.. thanks for sharing information.This has to be one of my favorite posts! And on top of thats its also very helpful topic for newbies. Thanks a lot for informative information on sharepoint

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…