Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sessions


Published on

How do you design, develop and implement a custom Brand in the SharePoint Online world. We will explore the options and show information on how to develop a great brand for your organization's Office 365 environment.

  • Be the first to comment

Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sessions

  1. 1. Real World SharePoint Branding Cathy Dew
  2. 2. 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 
  3. 3. Agenda  Define and Create the Design  Ask Questions  Analyze  Use Cases  Wireframes  Design  Development Tools  Application Methods  Additional Resources
  4. 4. Define the Design Question and Analyze
  5. 5. 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
  6. 6. 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)?
  7. 7. 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.
  8. 8. 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
  9. 9. 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
  10. 10. Create the Design Question, Map, Illustrate
  11. 11. Begin to Plan  Start to sketch the requirements into a design  Focus on Functionality and Content  Understand what you need
  12. 12. Build Your Team  Stakeholder  Project Manager  End User/Power User  Designer  Developer  IT Pro  QA
  13. 13. Define Your Options  Design Manager  Device Channels  Responsive/Adaptive  Hybrid  Custom
  14. 14. 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
  15. 15. Early Sketches Figuring out flow of user movement and Navigation
  16. 16. Design Methods Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there Evaluate Your Designs for Functionality & Content – NOT Design
  17. 17. Home Page Wireframe  Top Navigation with Drop Downs
  18. 18. Sub Page Wireframe  Web Part Zones populated with Sample Content
  19. 19. Home Page Wireframes Mobile  Navigation and Content Shifts on Home Page
  20. 20. Defining Content  Further define content  Identify Content Types  Define Content Areas  Map Web Part Zones
  21. 21. Define Custom Solutions  Map out Functional and Layout Requirements for Custom Solutions
  22. 22. 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
  23. 23. Defining Design
  24. 24. Defining Design
  25. 25. Defining Design
  26. 26. Picking the Right Tools Comfort and Confidence
  27. 27. Requirements Tools  Create a Asset Plan, Site Map and Resource List  Visio  MindManager  Excel
  28. 28. Asset Plan/Decision Points
  29. 29. Wireframe Tools Balsamiq SharePoint 2013 Team Site Template from Flucidity balsamiq-mock-up-template/ Visio Adobe Creative Suite Axure
  30. 30. High Fidelity Mockup Tools  Adobe Creative Suite  Many others
  31. 31. Development Tools  Dreamweaver  Visual Studio  SharePoint Designer  Expression Blend
  32. 32. Deployment Tools  Powershell  Publishing Infrastructure  Solutions  Apps
  33. 33. Other Useful Powershell Use 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()
  34. 34. 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
  35. 35. Questions
  36. 36. Thank you for attending! Cathy Dew, MVP @catpaint1