SharePoint Tip of the Month

SharePoint Branding: The Key to Meaningful Design

October 2014

When it comes to designing and developing SharePoint portals for clients, the most common requirement I get from clients is to design their site so that it “does not look like SharePoint.” For public-facing sites, especially, many clients want their branding to mask the layers of SharePoint and to be abstracted enough to resemble a “normal” website, absent of zones and web parts. The out-of-the-box SharePoint interface was, by no means, designed to be appealing to the masses. The vanilla design simply acts as a framework for the site but it does very little to communicate or reinforce a specific brand image.

SharePoint 2010-2013 Default Branding

To bridge the gap between default branding and fully branded sites, a user interface (UI) designer or a user experience (UX) designer can use design tools, custom code and a client’s style guide to apply a brand new layer of paint to a SharePoint site. While any designer can drastically improve the visual look and feel of a site, I believe it takes a great designer to do it purposely and effectively. Over the years, I’ve learned that branding is much more than just colors and code on a page – it is an emotional experience that ties a user to a site and, when carefully thought through, it becomes a powerful tool in creating a meaningful and lasting impression on its users.

Requirements

The first part of the branding process – gathering requirements – is one of the most overlooked and most misunderstood areas, in my opinion. There are so many opportunities within this phase to generate ongoing victories for yourself and your client, all by focusing a little closer on the client’s needs. During the requirements phase, you will most likely be faced with documentation that details a few base requirements and a large set of people who have ideas about what their branding should communicate. As a designer, your client trusts you with the creation of their site, your ability to positively communicate their brand, and your skills in creating a site that meets user expectations. These are easy things to achieve for most designers but I think the true victories in this phase come in the form of understanding, sensitivity, compassion and communication. Before primary and accent colors come into play, and before boxes are ever drawn on a whiteboard, you have to fully understand the client, their motivations and the purpose behind what they are asking you to build.

Seeing Beyond the Facts

Whenever I begin a new branding initiative for a client, the first thing I do is meet with the key stakeholders to talk about the project in a kickoff meeting. By the time requirements documents start hitting the table, I’m already utilizing my soft skills to begin building relationships with those invested in the project.

Without looking too closely at the documentation in front of me, I choose to speak more directly with the project leaders, probing for details in their own words. Visual design is one of those things that is easier to talk about than to read about. I’ll ask questions like, “Do you prefer your site to show a lot of information, like a newspaper, or do you prefer it to highlight key pieces of important information?” Based on the client’s answer to that question, I can determine if they would prefer a minimalistic design or not. By asking questions that yield adjectives and adverbs as responses, you can anticipate the design aesthetics that your clients will gravitate towards.

The goal in the requirements phase should be to learn who the client is and what their motivations are. I want to know their culture, how their employees interact with each other, and what drives their collaboration. Simply put, you will find the most success in a project when you make the client’s best interests your own as well.

Keep the Dreams Alive

Once you’ve gathered all the requirements from your client and you’ve got a deep understanding of what it is you’re being asked to build, it’s time to start thinking about how the requirements match up to the functionality that SharePoint can provide. Clients will often request certain design elements that may be hard to implement or simply not conducive to a good SharePoint site. While it can be tempting to strike down these design ideas as soon as they are identified, it might be worth taking a different approach and thinking about the project as a general web design project first. This method gives you the opportunity to further looking into requirements to determine if they can be achieved without quickly dispelling the requests, thereby gaining your client’s respect and trust. By doing this, you and your client gain the ability to brainstorm comfortably and freely by throwing out best case scenario requirements and not immediately worrying about what SharePoint cannot do. Your client will appreciate the extra thought, attention to detail and willingness to look into more extravagant requests, even though you already know some may not be possible. To close the loop, be sure to communicate your findings and final requirements to your client to set their expectations appropriately.

Design

Unlike the requirements phase, the design phase is the time to be very critical of the requirements and begin aligning requirements to solutions. By now, your client has gained more trust in your abilities because you’ve been able to “read their minds” when it comes to the design they have in their heads. It’s time to turn your attention to steering the client in the right direction as you begin taking a loose concept and morphing it into a visual representation.

Web Design Fundamentals

Let’s take a step back and look and the fundamentals of design before we talk specifics about SharePoint. A great design pays attention to and balances the following key principles:

Bookish

  • Balance – ensures that a design is evenly weighted and does not lean to one side or another. The eye favors symmetrical designs but design can be asymmetrical as long as they are counter-weighted to even out the balance.
  • Layout – dividing content into a logical system of columns or grids to compartmentalize a design and make the content easier to take in.
  • Color – using color to create visual harmony and contrast among elements within the design. Color blocking can create division to pop content into focus. Color combinations and usage can communicate a message within itself.
  • Typography – choosing the appearance of type within the design to aid in communicating a message.
  • Graphics – adds to the overall visual message. Can be subtle and muted or bold statements. Images should not be intrusive and should not take away from the overall design.
  • White Space – gives the text and content breathing room and ensures that the design is not cramped for space. Can add visual interest by making content stand out.
  • Consistency – a design must be harmonious and unified in order to work on a larger level. Keep ranges of colors, fonts, and images the same.

Designing For SharePoint

One thing you’ll quickly learn about SharePoint is that it can be a challenge to get the exact designs you’re going for. Personally, I tend to believe that anything is possible when it comes to designing a site in SharePoint but there always exceptions to the rule. Be aware of your limitations coming out of the gate. There are many things that SharePoint can do but there are just as many things that it cannot do, or at least not very well. Avoid making design choices that work against the default SharePoint interface, such as moving an entire element (like the ribbon) from the top of the page and trying to anchor it to run vertically up and down the left side of the page. (Although SharePoint does not have an out of the box option for a mega-menu, it’s relatively easy to create one using jQuery and some CSS styling.) So the important takeaway here is to know what’s available to you and to know what design choices fit within the scope of what SharePoint can do.

SharePoint uses a liquid layout, stretching the content of the page across the entire page. This can be problematic when applied to any design that requires the content to be constrained or to display cleanly on the page. The easiest solution to this problem is to use a fixed width design on the home page only and allow the liquid layout to take over subsequent pages.

Fluid Width | Fixed Width

One of the newest trends in web design at the moment is responsive design, a framework for dynamically adapting a design to fit several media viewers. Using responsive design, you can have one master page for your site that leverages conditional CSS to adapt to various interface types, such as PCs, tablets and cell phones. There are a few groups that offer third-party solutions for implementing the responsive framework and they should be considered first before attempting to implement a framework yourself. Responsive design is not the easiest thing to implement and is better suited for public facing sites that have static content. It generally has trouble when implemented on SharePoint-based intranets primarily because of the types of content clients display on their intranet pages, such as list view web parts with several columns or other inflexible pieces of content, like the calendar.

Responsive Design

Development

Implementing the design that you create is one of the last challenges you will face as you brand your client’s site. The design now needs to be translated to an actual working solution. When branding for SharePoint, you will primarily rely on SharePoint Designer and a good web browser inspector (like IE Dev Tool or the Google Chrome inspector) to complete the implementation. Clients are generally excited by the time you get to the development phase, since they will finally be able to see their site come to life.

CSS3 + HTML 5 + JavaScript

With the introduction of CSS3 and HTML5, modern browsers are able to do so much more than the previous iterations of web standards. The combination of these two languages, interspersed with JavaScript and jQuery, has led to some amazing user interface actions that allow sites to become more interactive, engaging and fluid.

jQuery UI Accordion

Look for opportunities to solve complex requirements by leveraging code libraries like JavaScript or jQuery UI. If you don’t have any development knowledge, at least do the legwork to identify solutions that may fit your client’s needs. You would be surprised at how much you can do with simple, pre-made code snippets.

Third Party Solutions

I believe in working smart and not hard. There are several sites that provide solutions for SharePoint, from master pages to custom web parts. If I find a solution that fits a client’s need and it’s a cost-effective solution, I’ll suggest it. These solutions can be a huge timesaver in certain cases where a client was specific functionality but does not have the budget to support any custom development.

Third Party Solutions

Amrein Engineering remains to be one of my favorite providers of third-party content, offering free trials of SharePoint-specific web parts, including a new Swipe Gallery web part (an image rotator configured to support swiping using touch devices) and a Multilevel Tile Navigation web part (allowing users to navigate a menu system that looks like Promoted Links).

Themes for SharePoint

For site templates and responsive design frameworks, BindTuning is a top contender, providing high quality themes for SharePoint 2010, 2013, and Office 365. Many of these designs also incorporate the Bootstrap framework for enabling responsive design, making these templates a great starting point for exploring responsive design across SharePoint environments.

Delivering Results

One of the best feelings as a designer is reaching the end of the project and actually unveiling the final product of all of your branding research and work. It may not be perfect at first and there may be some minor tweaks to fix during the user acceptance phase, but your design should fall somewhere very close to the mark. One measure of success that I hold myself to takes us back to my definition of branding as an emotional experience: the biggest indicator of a job well done is seeing the genuine and almost heartfelt way that a client reacts to the branding, as if they’ve just been given a gift they’ve wanted for a very long time.

At its core, branding remains part of the visual arts domain and is a means of communicating thoughts, feelings, and emotions – about a brand – to a wider audience. Similar to other forms of art, success comes in the form of emotional or psychological response and although it cannot quite be measured qualitatively, you will see and feel the results of your work through the reactions and emotions of your audience.

This Tip of the Month was contributed by SharePoint Consultant & UI Specialist, Jamie W. Moore.