You will be creating a design for a company which will be used in a new modern intranet and it will include at least MySite, Search, Publishing and Collaboration sites. The company will not settle for anything but having their digital identity all across the application. What should be your approach when creating the design for this company in a way that they want?

SharePoint 2010 Design
SharePoint 2010 design with personal side bar

Creating the design

When creating a design for SharePoint you have to take the customer needs under consideration and weigh it to the capabilities of SharePoint. You also have to have some knowledge of the skills of the one that will be implementing this design as depending of the skills of the front-end developer the possiblities of the variation in the design will be limited. You need to have an understanding of that limitation.

The limitations

In order to have an understanding of the limitations you need to have a constant dialog with the developer so that you don't create a design that will promise the customer something that can't be done. You don't want to put design element that can't be implemented and also you don't want to put functional element into your sketches that don't exist. (the wire frames of the interaction design should take care of the functional sketches but in SharePoint projects they are not always in use)

Of course the customer need a design but it should not lower the user experience just because the developer has hacked SharePoint in order to get the it right. The most common mistake in a design implementation is destroying standard functionality by adding code to get a specific design in certain areas and this collides with out of the box functions which will make these non-functional.

SharePoint 2013 design
SharePoint 2013 design (Team site, out of the box)

To get started

First you need a plate to draw on, instead of going on an empty one why not try it out on a pre-made? Try out the SharePoint 2013 Photoshop layered file on Erik Swenson blog which is for SharePoint 2013 and is a great starter Photoshop plate for SharePoint designs. If you are designing for SharePoint 2010 you can use the SharePoint 2010 Photoshop layered file instead. If you feel uncomfortable with a ready-made structure and think that this will hold your creative flow back then don't use these. But I can highly recommend that you take a look at them anyway as these will help you understand the UI in SharePoint.

The process

The process in creating a design for SharePoint is not different than other design creating process (which can vary from designer to designer) except that it is important to be close to the developer in order to get the functionality and the design elements right in your design sketches. The important thing here is to not promise anything that can't be done. As I have been mentioning before the communication between the front-end developer and the designer is essential in order to get everything right. If you don't have the knowledge in SharePoint, which designers often don't, then everything has to go through the developer before it is shown to the customer for discussion and approval.

SharePoint 2010 design
SharePoint 2010 design (Team site, out of the box)

Out of the box or Custom

There are two choices as I see it when it comes to designing SharePoint and it is going out of the box with all standard elements and functionality or going heavily with customization with custom elements. The first one has all the limitations in the design of SharePoint while the second one gives you as a designer much more freedom. One thing though, is never to let the design decide which one to choose. The decision needs to be made with other parameters in mind. The design is important but it is not worth spending 1000 of hours in order to get it right. If you have an experienced SharePoint front-end developer I would always go for the out of the box as it is much cheaper to implement, you don't tear things apart and you can spend the developing-hours on something else.


The limitation don't lie barely in SharePoint. It also lies in the skills of the one that will implement the design. The front-end developer. Many designs are possible in the hands of a skilled SharePoint developer that knows how to bend the HTML elements and CSS to his will. If you have a skilled front-end guy then it will give you as a designer much more freedom to be more creative.

Note: If you are a front-end developer I will soon come with "Implementing designs in SharePoint - best practices" which will give you many tips how to implement that beautiful design.