Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sessions

Real World SharePoint Branding

Cathy Dew

Speaker Bio

Cathy Dew Consultant at Planet Technologies

Graphic Designer, Consultant and SharePoint MVP

Over 8 years of SharePoint

branding experience

Author: SharePoint 2010: Six in One

catpaint1 on Twitter

www.sharepointcat.com

Agenda Define and Create the Design

Ask Questions Analyze Use Cases Wireframes Design

Development Tools Application Methods Additional Resources

Define the DesignQuestion and Analyze

Ask the Questions Depending on the Project Type the Questions

Differ Avoid Technical Terms Learn about the Business not just the problem Adjust your questions to use the

terminology of the business

Sample Questions Who are the primary stakeholders on this

project? Who or what groups will be providing input on

the look and feel of the site(s)? Who or what groups will be providing input on

the content of the site(s)? Do you already have defined graphic

standards? If yes, can you provide them to us? What is the purpose of your site(s)? What are 5 adjectives you would use to

describe your site(s)?

Be friendly Don’t put them on guard

Make sure it is known you aren’t there to judge Start out by saying it is a judgment free zone so be

honest in how you actually do things.

Personal Tips to Interviews Watch body language Are they guarded and you can tell they won’t

share real information If it feels like you are pulling teeth, switch topics

and find another one to get them to talk Its okay to tell them you don’t know if asked a

question that you really don’t know. Tell them you will ask someone and get back

to them

Define Use Cases Understand what the purpose is for the site Build Use Cases and Flow Patterns for these

Work with Team Members Submit an Expense Report Get Up to Date Information and News Find People

Create the DesignQuestion, Map, Illustrate

Begin to Plan Start to sketch the requirements into a design Focus on Functionality and Content Understand what you need

Build Your Team Stakeholder Project Manager End User/Power User Designer Developer IT Pro QA

Define Your Options Design Manager Device Channels Responsive/Adaptive Hybrid Custom

Understanding Navigation How many clicks is too many for your users? How will Users get around your sites?

Top Navigation Fly Outs Custom Breadcrumbs Quick Launch Custom Navigation Search

Early SketchesFiguring out flow of user movement and Navigation

Design MethodsWireframes are a great tool for separating Design and Function – start with a basic SP site and customize from thereEvaluate Your Designs for Functionality &Content –NOT Design

Home Page Wireframe Top

Navigation with Drop Downs

Sub Page Wireframe Web Part

Zones populated with Sample Content

Home Page Wireframes Mobile Navigation and

Content Shifts on Home Page

Defining Content

Further define content Identify Content Types Define Content Areas Map Web Part Zones

Define Custom Solutions Map out Functional and Layout Requirements for

Custom Solutions

Requirement Creep Don’t forget that requirement creep is what we

are trying to get away from, but will always happen to some extent.

The more you gather, analyze and present the easier it is to avoid this

But don’t get stuck in constant requirement gathering only cycle

Defining Design

Defining Design

Defining Design

Picking the Right ToolsComfort and Confidence

Requirements Tools Create a Asset Plan, Site Map and Resource List

Visio MindManager Excel

Asset Plan/Decision Points

Wireframe ToolsBalsamiq

SharePoint 2013 Team Site Template from Flucidityhttp://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up-template/

VisioAdobe Creative SuiteAxure

High Fidelity Mockup Tools Adobe Creative Suite Many others

Development Tools Dreamweaver Visual Studio SharePoint Designer Expression Blend

Deployment Tools Powershell Publishing Infrastructure Solutions Apps

Other Useful PowershellUse Powershell to reset Master Page Customizations to Default Master Pages

$w = get-spweb [http://your_site_url]$w.MasterUrl = "/_catalogs/masterpage/seattle.master"$w.CustomMasterUrl = "/_catalogs/masterpage/seattle.master"$w.Update()

Customizing with Powershell Change the Word SharePoint in the Suite Bar to

your own Text

$webApp = Get-SPWebApplication http://urlhere$webApp.SuiteBarBrandingElementHtml = “Your Text Goes Here”$webApp.Update()

*SharePoint 2013 On Premises Only

Questions

Thank you for attending!

Cathy Dew, MVP@catpaint1

www.sharepointcat.com