The 8 Step Guide to your SharePoint Branding Journey

Every journey must begin with the first step, but many times we have an idea of the “big picture or destination”, but no map on how to get there. If you decide to take a vacation, you carefully plan out your travel, hotels and stops in between. Just like planning your vacation, there are vital steps to be successful in branding SharePoint. Let’s review these steps to success and how they will move you closer to your final masterpiece.

Step 1: Have a Project Manager and Project Sponsor:
You need to have a champion in your corner that can direct team members through the design and development process. This person needs to have a clear understanding of the goals of the project and can make sure that the goals are realistic and measurable. The project sponsor should be someone in upper management who is supporting the project and believes in its goals and success.

Step 2: Site Map Architecture:
Before you can begin laying the paint, you need to make sure that you know what the frame of your site is going to be. What kind of navigation structure are you planning to use? What will the subsites be and if needed, what pages will live within those sites. How will they interact with eachother. You can easily create a visual guide to your site map architecture using Visio to create a diagram such as below.

sitemap1

Step 3: Content Architecture:
Once you know what the structure of your site is going to be, you will need to think about what kinds of content will live on each page. Are you planning on any webparts? Is this going to be a publishing page or a Team Site? In SharePoint, there are several out-of-the-box page layouts that are available to you, but there are times that you may want to create a custom template or page layout to meet the needs of the required content for the page.

Remember to check to see if you will need to have the left navigation available for the page or if it is something that you will choose to hide to focus on additional content. Once you know what kinds of content you will want on the page, this is when we will want to move to creating the initial wireframes for the pages to give a rought draft of how the content will appear on the page.

Step 4: Wireframes:
Wireframes are an important and often missed step in the design process. They give a clear draft of where items will be placed on a page and the amount of space that they will cover. This is NOT a mock-up or set in stone. These are meant to be changed as approval for stages of the project move forward.

branding_wireframes

There are several types of software that are available for the creation of wireframes. Some of the more popular include:

  • Balsamiq: http://balsamiq.com/
  • Just in mind: http://www.justinmind.com/
  • Axure: http://www.axure.com/

You will need to choose the best one for you. Some are free, but I have found that some that charge a small fee such as Balsamiq, tend to come with additional features that can help speed the process along.

One of the main considerations that you will need to take into account when creating your wireframes is mobilty. Will your design need to work on multiple devices such as a tablet and phone? If so, you will also want to make sure that you create wireframes to show how the content can rearrange itself or be hidden from view depending on the screen-width of the device. I have included an example of how you may want to consider laying out your content for a more fluid design.

responsive_wireframes

Step 5: Creating the Mock-ups:
Creating the mock-ups is not the same as creating the wireframes. Mock-ups are created to be the exact representation of what the final production of the pages and site will appear once developed. The details of the design are a vital importance at this step. Items that you will want to pay special attention to during this step are:

  • Padding and the space of elements at all screen widths. Remember that if you are using a framework such as Twitter Bootstrap or Zurb Foundation, these will automatically come with some gutter padding and margins included that you will need to take into consideration in your mock-up.
  • Sizes of elements. If you have a fixed-width site, what will the width of the main container be? Do you have elements that will need to resize themselves based upon the screen width such as images, slideshows, webpart zones? You will want to make sure that you know which elements will need to resize and how they will display as the device used changes.
  • Color pallets should be determined and used during this process. Do your links need to be a certain color? What happenens for the different events such as being hovered over or clicked on? What will you use for a mobile device that does not have a hover event?
  • Font styles will also be determined during this phase. Should your headers be a different font family than the paragraph text in your site? Are you planning on using a premium font or a font that you can link to such as Google Fonts? When choosing your fonts, know that if you choose a font that is not a web-safe font, that your font may not show on all browsers and you will need to set up a font to default to in your css.

One of the more popular tools for creating very specific mock-ups is Adobe Photoshop. This tool usually does require some kind of training to learn how to use. You can also use a prototyping tool such as Axure that can also create working and functional mock-ups. You will need to choose the best one for you.

Also keep in mind that you may need to share these mock-ups with others in your company or with a client for approval. You will need the ability to turn these into .pdf format or another viewable format in case your client or co-worker does not have the software it was created on available to them.

demo_branding

Step 6: Development:
When beginning this phase, there are several options that you can take. Depending on the project, you may choose to create a local working prototype of your design with the base html, css, javascript and jQuery to allow for debugging of your design before moving it into the SharePoint platform.

SharePoint does add complication to a design since you now have to work with some of the limitations that come with the platform such as tables of data, webparts and even the navigation. Much of this will also need to be taken into consideration depending on which version of SharePoint you are using.

If you are using SharePoint 2010, you will need to manually build out the master pages and page layouts. If you are using SharePoint 2013, are you planning on manually building the .NET master pages and page layouts or will you choose to use Design Manager? There are pros and cons to each depending on the scope of your project and your team’s skillset.

Step 7: Testing:
This is one of the most important steps of branding that can often times be rushed or overlooked due entirely to time or financial constraints of the project. Make sure that you adequately plan for this step at the beginning of the project. After putting in all of the time and effort to create an amazing site, you will want to make sure that users can actually use the site for its intended purpose.

Things that you will want to keep in mind during this process are:

  • Browser consideration: What browsers does your design need to be able to work in? Some of the more popular browsers are Firefox, Internet Explorer, Safari and Chrome. With these in mind, do you need to test for specific versions of these such as Internet Explorer 8? Remember that in later versions of IE, the compatibility mode in the developer tools is not a true version of the browser and may not give you accurate results. You will always want to test on a device where the browser is accurate for the testing needed.
  • Devices: If you need to have your site work on several devices such as a Windows Phone, iPad, Surface or a smaller laptop, make sure that you throughly test all elements of the design in these devices. Just because it woks on one does not mean that it will automatically work on all.
  • Usability: In some cases, you may want to do a soft test with a controlled group of users so that you can test the funtionality and usability of the site for its intended purpose. Listen to the feedback from your users. If this site is created to help them be more efficient, ask them questions to help make it easier for them. Remember that new technology and a different look can be frustrating for new users. Be patient and understanding and you will find that user-adoption will rise.

Step 8: Training:
Now that you have created this amazing site and everything is fully tested and ready for production, there is one more step to remember. Training is vital to the continued success of a site and application.

By taking the time to properly train both administrators and power-users, you will see higher value in user-adoption. Explain and show users how to use the newly-branded site and how it will make their jobs easier by using the new site. Remember that new technology can be polarizing to users, especially if they have been using the same interface for years. Have patience and be willing to help explain things more than once, if needed.

Through careful planning and exocution of each of the steps above, you will have a successful branding journey. Remember that every journey may have bumps in the road, but if you keep moving forward, you may find the destination to be as amazing as your experience getting there.

One thought on “The 8 Step Guide to your SharePoint Branding Journey

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Check *

Filed Under

Don't forget to check out Day 2 of our #12DaysofSharePoint series! We'll make it easy for you to search for.… https://t.co/nQFSmBioxA

Happy Friday! And welcome to Day 2 of our #12DaysofSharePoint series! Today's pro-tip is definitely worth 'discover… https://t.co/UjiMeY3aAu

Thank you to all who attended @EricOverfield's session 'Get Started with #TypeScript Now'. Can't get enough of Eric… https://t.co/LP2m9cmrJo

Don't forget to check out Day 1 of our #12DaysofSharePoint series! You'll definitely want to 'tag' it for later.… https://t.co/TwynT7Gtc9

"Get Started with #TypeScript Now" w/ @EricOverfield is starting in a few minutes here at #SPFestChicago. Come geek… https://t.co/6foyOGjTsY