Your SlideShare is downloading. ×
0
Beginner to <br />ADVANCED<br />
Tracey Nolte<br />Work for Slalom Consulting<br />Background in BI & Design<br />6 years of SharePoint<br />Worked with Sh...
Branding Examples<br />Reasons to brand<br />Problems with old sites<br />UX/IA = UCD<br />UCD Process<br />How to get sta...
Create<br />INNOVATIVE<br />CHANGE<br />BRANDING <br />STYLE<br />CREATION<br />INTRANETS<br />DEVELOP<br />LIVE<br />SHAR...
Who…<br />BRANDS SharePOINT?<br />
Proctor & Gamble<br />
Other Top SharePoint Sites<br />http://www.wssdemo.com/livepivot/<br />
But…<br />BRANDING <br />Is not just to make it “look pretty”…<br />
Function<br />Matters<br />
What are problems             with the past way?<br />Design decisions were made by managers, project sponsors or executiv...
Users at CENTER<br />business<br />strategy<br />USER<br />company<br />info<br />brand &<br />culture<br />
User Centered Design<br />UCD is an iterative <br />methodology that puts the <br />user at the center <br />of all design...
UX / IA = UCD<br />UX = User Experience<br />IA = INFORMATION ARCHITECTURE<br />Ways to create USER EXPERIENCE<br />Design...
Understanding the perspective a user brings to a system enables us to design that system to meet their needs.<br />
27<br />What IS THE<br />USER PERSPECTIVE?<br />http://bit.ly/czatli<br />
28<br />USER perspective NO. 1:<br />NEEDS AND WANTS<br />I NEED TO FIND           INFORMATION FAST<br />http://bit.ly/duR...
29<br />USER perspective NO. 2:<br />GOALS, MOTIVATION, AND TRIGGERS<br />MY GOAL IS TO <br /> BE MORE PRODUCTIVE.<br />ht...
30<br />USER perspective NO. 3:<br />Obstacles AND Limitations<br />I CAN’T FIND IT.<br />http://bit.ly/9giEMb<br />
31<br />USER perspective NO. 4:<br />Tasks, Activities, AND Behaviors<br />I HAVE A LOT OF THINGS IN THE AIR<br />http://b...
32<br />USER perspective NO. 5:<br />Geography AND Language<br />I’m Pacific Time…<br />http://bit.ly/agm9aw<br />
33<br />USER perspective NO. 6:<br />Environment AND Gear<br />My NETWORK CONNECTION IS SLOW<br />http://bit.ly/bdNYpD<br />
34<br />USER perspective NO. 7:<br />WORK LIFE AND EXPERIENCE<br />I’m NEW TO <br />    COMPUTERS<br />http://bit.ly/9a3eC...
User Experience<br />
User Experience<br />by Apple<br />                                     and Microsoft<br />
User Experience<br />                          by Apple<br />
User Experience<br />By Microsoft<br />http://www.youtube.com/watch?v=g6B9zex8Bp4<br />
What ARE the<br />BENEFITS OF UCD?<br />39<br />Increased Adoption Rates<br />Improved User Productivity<br />Higher Initi...
SharePoint History & Tools<br />
SharePoint HISTORY<br />1997 – 1999  Site Server : web content management and replication, site analytics, personalization...
SharePoint 2003 vs. 2007 vs. 2010<br />
SharePoint 2003 vs. 2007 vs. 2010<br />
SharePoint 2003 vs. 2007 vs. 2010<br />
SharePoint Design Tools<br /><ul><li>Code Editor: SharePoint Designer 2007 or SharePoint Designer 2010
Image Editor:  Adobe Fireworks, Gimp, Adobe Photoshop
Browser: for 2007 (IE ONLY) for 2010 any browser
Development / Test Site: for making changes & testing your designs (not live)</li></li></ul><li>SharePoint Designer 2007<b...
SharePoint Designer 2010<br />
SharePoint 2010What’s new?<br /><ul><li>More Flexible Branding of the UI
User Experience has Changed (i.e. Ribbon, Look & Feel)
Silverlight Dialogs
Much better inline editing
Better positioned for everyday Branding</li></li></ul><li>Browsers<br /><ul><li>Better (OOTB) Cross-browser support
Better HTML Output (less tables, more “div” and “ul”)
100% XHTML Compliant</li></li></ul><li>Methods of Branding<br /><ul><li>Themes
Master Pages
Page Layouts
Content Pages
CSS</li></li></ul><li>Themes<br /><ul><li>Themes change the colors and fonts for an existing SharePoint template
Allowed 12 colors & 2 Font Choices
Theming Engine (.thmx)
Common w/ other Office Products
Theme Gallery</li></ul>>> DEMO TO COME LATER<br />
Themes<br />quick and easy<br />Like painting walls in your house<br />Accessible in SharePoint & PowerPoint<br />
Apply Existing<br />
Create New Theme<br />
Create Customized Themes<br />PowerPoint > Design TabSelect the Colors button > “Create New Theme Colors…”. Change the col...
Master Pages<br /><ul><li>Master Pages hold: HTML, SP Controls (Navigation, Search), Content Placeholders
SharePoint 2010 gives you:
V4.master (eq. default.master in 2007)
Nightandday.master (Internet/Large Intranet Site)
Minimal.master</li></ul>>> DEMO TO COME LATER<br />
Page Layouts<br /><ul><li>Page layouts contain field controls and Web Parts
Dictate the body layout for a page</li></ul>>> DEMO TO COME LATER<br />
Master PagePage Layout<br />Master Page elements combined with page layout make the page layout<br />
CSS<br /><ul><li>SharePoint uses CSS heavily
MOSS 2007 = One Large CSS
SP2010 has multiple CSS files that are loaded as needed (as controls are loaded)
Alternate CSS Loading – Much like Theming </li></ul>>> DEMO TO COME LATER<br />
Content Pages<br /><ul><li>Publishing  - structured information distribution with web zones/parts
Content – based around web part zones and web parts
Wiki - loose information structure</li></ul>All customizable but varying levels of effort!!<br />
Web Zone & Parts<br />Cheap or free web parts help increase functionality<br /><ul><li>http://www.amrein.com (twitter feed...
http://PathtoSharePoint.com (easy tabs, dashboarding)
http://wwwcodeplex.com (minicalendar, animated dashboards)</li></li></ul><li>How Do You<br />Start?<br />
Low Effort – OOTB Master Pages & Themes<br />Medium Effort – Custom Themes or Alternate CSS<br />Full/High Effort – Custom...
The UCD Process helps branding by answering questions about time, effort, tools, knowledge and user expectations/use/chall...
4 Phases<br />Design<br />Evaluate<br />Concept<br />Research<br />
PURPOSE<br /><ul><li>Define Audience
Learn User Objectives
Identify Motivators
Analyze Content
Understand Behaviors
Visualize User Challenges
Upcoming SlideShare
Loading in...5
×

SharePoint Branding presentation by Tracey Nolte

8,304

Published on

Published in: Technology, Design
1 Comment
23 Likes
Statistics
Notes
  • Nice presentation. Let me introduce you Bind Tuning a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,304
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
746
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

Transcript of "SharePoint Branding presentation by Tracey Nolte"

  1. 1. Beginner to <br />ADVANCED<br />
  2. 2. Tracey Nolte<br />Work for Slalom Consulting<br />Background in BI & Design<br />6 years of SharePoint<br />Worked with SharePoint 2003, 2007 and 2010<br />Branded sites for:<br />AT&T<br />American Heart Association<br />Dr Pepper Snapple<br />Centex Homes<br />SharePoint User Groups in Baltimore, San Diego & Dallas<br />
  3. 3.
  4. 4.
  5. 5. Branding Examples<br />Reasons to brand<br />Problems with old sites<br />UX/IA = UCD<br />UCD Process<br />How to get started<br />PLAN Your Work, WORK Your Plan<br />Time/Effort determines BRAND METHOD<br />METHODS: Themes, CSS & Master Pages<br />>> demos<br />
  6. 6. Create<br />INNOVATIVE<br />CHANGE<br />BRANDING <br />STYLE<br />CREATION<br />INTRANETS<br />DEVELOP<br />LIVE<br />SHAREPOINT<br />UCD<br />FUN<br />USER<br />FUNCTIONALITY<br />WEBSITES<br />ORGANIZE<br />INTERACTIVITY<br />COLLABORATE<br />DESIGN<br />VISUALIZE<br />Planning<br />CREATIVE<br />
  7. 7. Who…<br />BRANDS SharePOINT?<br />
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12. Proctor & Gamble<br />
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19. Other Top SharePoint Sites<br />http://www.wssdemo.com/livepivot/<br />
  20. 20. But…<br />BRANDING <br />Is not just to make it “look pretty”…<br />
  21. 21. Function<br />Matters<br />
  22. 22. What are problems with the past way?<br />Design decisions were made by managers, project sponsors or executives….<br />They didn’t INVOLVE USERS in design<br />They didn’t understand PROCESSES<br />They didn’t understand IMPACT to USERS<br />They didn’t focus on USER ADOPTION<br />They didn’t focus on USER EFFECIENCY<br />They didn’t focus on USER EFFECTIVENESS<br />They didn’t optimize the developer’s time<br />
  23. 23. Users at CENTER<br />business<br />strategy<br />USER<br />company<br />info<br />brand &<br />culture<br />
  24. 24. User Centered Design<br />UCD is an iterative <br />methodology that puts the <br />user at the center <br />of all design decisions. <br />
  25. 25. UX / IA = UCD<br />UX = User Experience<br />IA = INFORMATION ARCHITECTURE<br />Ways to create USER EXPERIENCE<br />Design/colors<br />Interactivity<br />Page Layout<br />Emotional Response<br />The way USERS FIND INFORMATION<br />Taxonomy<br />Navigation<br />Pages<br />Web Parts<br />USER CENTERED DESIGN<br />
  26. 26. Understanding the perspective a user brings to a system enables us to design that system to meet their needs.<br />
  27. 27. 27<br />What IS THE<br />USER PERSPECTIVE?<br />http://bit.ly/czatli<br />
  28. 28. 28<br />USER perspective NO. 1:<br />NEEDS AND WANTS<br />I NEED TO FIND INFORMATION FAST<br />http://bit.ly/duRu7o<br />
  29. 29. 29<br />USER perspective NO. 2:<br />GOALS, MOTIVATION, AND TRIGGERS<br />MY GOAL IS TO <br /> BE MORE PRODUCTIVE.<br />http://bit.ly/cBKoTK<br />
  30. 30. 30<br />USER perspective NO. 3:<br />Obstacles AND Limitations<br />I CAN’T FIND IT.<br />http://bit.ly/9giEMb<br />
  31. 31. 31<br />USER perspective NO. 4:<br />Tasks, Activities, AND Behaviors<br />I HAVE A LOT OF THINGS IN THE AIR<br />http://bit.ly/9rYgds<br />
  32. 32. 32<br />USER perspective NO. 5:<br />Geography AND Language<br />I’m Pacific Time…<br />http://bit.ly/agm9aw<br />
  33. 33. 33<br />USER perspective NO. 6:<br />Environment AND Gear<br />My NETWORK CONNECTION IS SLOW<br />http://bit.ly/bdNYpD<br />
  34. 34. 34<br />USER perspective NO. 7:<br />WORK LIFE AND EXPERIENCE<br />I’m NEW TO <br /> COMPUTERS<br />http://bit.ly/9a3eCj<br />
  35. 35. User Experience<br />
  36. 36. User Experience<br />by Apple<br /> and Microsoft<br />
  37. 37. User Experience<br /> by Apple<br />
  38. 38. User Experience<br />By Microsoft<br />http://www.youtube.com/watch?v=g6B9zex8Bp4<br />
  39. 39. What ARE the<br />BENEFITS OF UCD?<br />39<br />Increased Adoption Rates<br />Improved User Productivity<br />Higher Initial System Quality<br />Reduced Maintenance Costs<br />Realized Return onInvestment<br />
  40. 40. SharePoint History & Tools<br />
  41. 41. SharePoint HISTORY<br />1997 – 1999 Site Server : web content management and replication, site analytics, personalization, indexing/search, document management and ecommerce<br />2000 – 2001 STS : Microsoft releases a free add-on to Office 2000 called SharePoint Team Services which provides web-based team collaboration<br />2002 – 2003 WSS: STS was renamed Windows SharePoint Services (WSS) and became part of Windows Server 2003 and renamed Office SharePoint Portal Server 2003. <br />2004 – 2006: SharePoint 2007 with MOSS 2007 released with Microsoft Performance Point 2007<br />2007-2010: SharePoint 2010 released with ribbon in Office 2010, social media, and other improvements<br />
  42. 42. SharePoint 2003 vs. 2007 vs. 2010<br />
  43. 43. SharePoint 2003 vs. 2007 vs. 2010<br />
  44. 44. SharePoint 2003 vs. 2007 vs. 2010<br />
  45. 45. SharePoint Design Tools<br /><ul><li>Code Editor: SharePoint Designer 2007 or SharePoint Designer 2010
  46. 46. Image Editor: Adobe Fireworks, Gimp, Adobe Photoshop
  47. 47. Browser: for 2007 (IE ONLY) for 2010 any browser
  48. 48. Development / Test Site: for making changes & testing your designs (not live)</li></li></ul><li>SharePoint Designer 2007<br />
  49. 49. SharePoint Designer 2010<br />
  50. 50. SharePoint 2010What’s new?<br /><ul><li>More Flexible Branding of the UI
  51. 51. User Experience has Changed (i.e. Ribbon, Look & Feel)
  52. 52. Silverlight Dialogs
  53. 53. Much better inline editing
  54. 54. Better positioned for everyday Branding</li></li></ul><li>Browsers<br /><ul><li>Better (OOTB) Cross-browser support
  55. 55. Better HTML Output (less tables, more “div” and “ul”)
  56. 56. 100% XHTML Compliant</li></li></ul><li>Methods of Branding<br /><ul><li>Themes
  57. 57. Master Pages
  58. 58. Page Layouts
  59. 59. Content Pages
  60. 60. CSS</li></li></ul><li>Themes<br /><ul><li>Themes change the colors and fonts for an existing SharePoint template
  61. 61. Allowed 12 colors & 2 Font Choices
  62. 62. Theming Engine (.thmx)
  63. 63. Common w/ other Office Products
  64. 64. Theme Gallery</li></ul>>> DEMO TO COME LATER<br />
  65. 65. Themes<br />quick and easy<br />Like painting walls in your house<br />Accessible in SharePoint & PowerPoint<br />
  66. 66. Apply Existing<br />
  67. 67. Create New Theme<br />
  68. 68. Create Customized Themes<br />PowerPoint > Design TabSelect the Colors button > “Create New Theme Colors…”. Change the colors to what you would like and save it. <br />Now click on the Fonts button in the Themes Section. Change the Font and click save.<br />Expand the themes section and click “Save current Theme…”<br />You should now have your own thmx file. So now in order to use this file in SharePoint 2010 you need to upload it to the theme gallery. Site Settings –> Themes or simply go to http://YourSharePointPortal/_catalogs/theme/Forms/AllItems.aspx and upload your file.<br />
  69. 69. Master Pages<br /><ul><li>Master Pages hold: HTML, SP Controls (Navigation, Search), Content Placeholders
  70. 70. SharePoint 2010 gives you:
  71. 71. V4.master (eq. default.master in 2007)
  72. 72. Nightandday.master (Internet/Large Intranet Site)
  73. 73. Minimal.master</li></ul>>> DEMO TO COME LATER<br />
  74. 74. Page Layouts<br /><ul><li>Page layouts contain field controls and Web Parts
  75. 75. Dictate the body layout for a page</li></ul>>> DEMO TO COME LATER<br />
  76. 76. Master PagePage Layout<br />Master Page elements combined with page layout make the page layout<br />
  77. 77. CSS<br /><ul><li>SharePoint uses CSS heavily
  78. 78. MOSS 2007 = One Large CSS
  79. 79. SP2010 has multiple CSS files that are loaded as needed (as controls are loaded)
  80. 80. Alternate CSS Loading – Much like Theming </li></ul>>> DEMO TO COME LATER<br />
  81. 81. Content Pages<br /><ul><li>Publishing - structured information distribution with web zones/parts
  82. 82. Content – based around web part zones and web parts
  83. 83. Wiki - loose information structure</li></ul>All customizable but varying levels of effort!!<br />
  84. 84. Web Zone & Parts<br />Cheap or free web parts help increase functionality<br /><ul><li>http://www.amrein.com (twitter feed, video player, image rotator)
  85. 85. http://PathtoSharePoint.com (easy tabs, dashboarding)
  86. 86. http://wwwcodeplex.com (minicalendar, animated dashboards)</li></li></ul><li>How Do You<br />Start?<br />
  87. 87. Low Effort – OOTB Master Pages & Themes<br />Medium Effort – Custom Themes or Alternate CSS<br />Full/High Effort – Custom Master Pages & Page Layouts<br />Project Estimation<br />
  88. 88. The UCD Process helps branding by answering questions about time, effort, tools, knowledge and user expectations/use/challenges.<br />UCD is an iterative process!!<br />What then?<br />
  89. 89. 4 Phases<br />Design<br />Evaluate<br />Concept<br />Research<br />
  90. 90. PURPOSE<br /><ul><li>Define Audience
  91. 91. Learn User Objectives
  92. 92. Identify Motivators
  93. 93. Analyze Content
  94. 94. Understand Behaviors
  95. 95. Visualize User Challenges
  96. 96. Define Site Gaps
  97. 97. Measure Web Analytics
  98. 98. Analyze Processes
  99. 99. Identify Improvements</li></ul>Research<br />
  100. 100. METHODS<br /><ul><li>Interviews
  101. 101. Personas
  102. 102. Surveys
  103. 103. Focus Groups
  104. 104. Workshops
  105. 105. Brainstorming
  106. 106. Task Analysis
  107. 107. Content Analysis
  108. 108. Contextual Inquiry
  109. 109. Affinity Diagramming
  110. 110. User Scenarios
  111. 111. Competitor Evaluation</li></ul>Research<br />
  112. 112. TOOLS<br /><ul><li>Meetings
  113. 113. Pad & paper
  114. 114. One Note
  115. 115. Audio recording device</li></ul>Research<br />
  116. 116. ASK<br />lots of questions<br />
  117. 117. Who will use it?<br />OR<br />Internal<br />Employees<br />Contractors<br />Leadership<br />Public<br />Customers<br />Partners<br />Investors<br />The World<br />
  118. 118. Public Site<br />Internal Sites<br />Immerse<br />Recognize<br />Who: who you are<br />What: what you do<br />How: how you do business<br />Inform<br />Who: company culture<br />What: policies/procedures<br />How: business operations<br />
  119. 119. Why brand?<br />Internal Sites<br />Public Site<br />Create brand recognition<br />To make it look “not like SharePoint”<br />Look like corporate branding/image<br />Create a custom user experience <br />Clear & consistent information organization<br />Sites outdated or incorrect information<br />Target the right audience with correct info<br />
  120. 120. How will people<br />Use your site?<br />Learn<br />Collaborate<br />Find information<br />Buy stuff<br />Meet people<br />Help others<br />
  121. 121. WHAT<br />Will they do on the new site?<br />Are they doing on the OLD site?<br />
  122. 122. PURPOSE<br /><ul><li>Define Navigation
  123. 123. Create Site Map
  124. 124. Create Site Layout
  125. 125. Visualize Functional Areas
  126. 126. Plan interactivity
  127. 127. Compose Site Requirements
  128. 128. Design User Interaction
  129. 129. Define Click Path
  130. 130. Build Information Architecture</li></ul>Concept<br />
  131. 131. METHODS<br /><ul><li>Storyboards
  132. 132. Sketching
  133. 133. Card Sorting
  134. 134. Wireframes
  135. 135. Participatory Design
  136. 136. Page Layout
  137. 137. Navigation Modeling
  138. 138. Metadata Design
  139. 139. Taxonomy Design
  140. 140. Controlled Vocabularies</li></ul>Concept<br />
  141. 141. TOOLS<br /><ul><li>Meetings
  142. 142. Pad & paper
  143. 143. One Note
  144. 144. Balsamiq Wireframes
  145. 145. FreeMind (mind mapping)
  146. 146. Sticky Notes
  147. 147. Whiteboards
  148. 148. Large drawing pads</li></ul>Concept<br />
  149. 149. Navigation<br />(taxonomy)<br />
  150. 150. Storyboards – click path of users<br />
  151. 151. Wireframes – define function<br />
  152. 152. PURPOSE<br /><ul><li>Create Visual Style
  153. 153. Design Consistent Style
  154. 154. Select Color Theme
  155. 155. Set Feel/Mood
  156. 156. Create Brand Color Cohesion
  157. 157. Apply Visual Interest
  158. 158. Design Interactive Controls
  159. 159. Develop Engaging Experiences
  160. 160. Envision Final State</li></ul>Design<br />
  161. 161. METHODS<br /><ul><li>Graphic Design
  162. 162. Logo Design
  163. 163. Branding
  164. 164. Icon Design
  165. 165. Screen Mockups
  166. 166. Interaction Diagrams
  167. 167. High/Low Fidelity Prototyping
  168. 168. Paper Prototyping
  169. 169. Functional Prototyping
  170. 170. Style Guide</li></ul>Design<br />
  171. 171. TOOLS<br /><ul><li>Image Editor: Adobe Fireworks, Photoshop or Gimp for mockups
  172. 172. Color Picker
  173. 173. Style Guide
  174. 174. Marketing (branding style)
  175. 175. Microsoft Expression Blend (high fidelity prototypes)
  176. 176. jQuery!!! YAY!</li></ul>Design<br />
  177. 177. PURPOSE<br /><ul><li>Quality Assurance
  178. 178. Ensuring System Functionality
  179. 179. Testing For Design Flaws
  180. 180. Refining User Experience
  181. 181. Ensuring Return on Investment
  182. 182. Predict User Adoption</li></ul>Evaluate<br />
  183. 183. METHODS<br /><ul><li>Usability Evaluation
  184. 184. Usability Testing
  185. 185. Remote Usability Testing
  186. 186. Usability Lab Testing
  187. 187. Web Analytics
  188. 188. Heat Maps</li></ul>Evaluate<br />
  189. 189. TOOLS<br /><ul><li>Quality Assurance test scripts
  190. 190. Test group user feedback
  191. 191. Heat map tool (CrazyEgg.com)
  192. 192. Google Analytics (if you use it) or SharePoint site analytics</li></ul>Evaluate<br />
  193. 193.
  194. 194. Plan your work<br />Work your plan<br />
  195. 195. WHEN<br />DO YOU NEED IT DONE ?<br />
  196. 196. Time & Effort<br />By when do you need it done?<br />Do you know CSS, JQUERY & HTML?<br />Do you need customized code?<br />Do you have people resources?<br />Do you have a development/test site?<br />Do you have SharePoint Designer?<br />
  197. 197. Time/Effort Determines BRAND METHOD<br />Does NOT Require<br />SharePoint Designer<br />REQUIRES<br />SharePoint<br />Designer, Image Design Tools & More<br />Custom<br />Master Page<br />Themes<br />CSS<br />
  198. 198. TRICKS<br />Never edit default.master – make a copy and rename it<br />Never edit core.css – create a new CSS and reference it in your master page above core.css<br />Use inspect element in Chrome (F12 in IE or firebug in Firefox) to preview styles and code<br />In CSS use !important when you need to override a style<br />
  199. 199. Recommendations<br />Book: SharePoint 2010 Branding by Randy Drisgill<br />CSS: SharePoint 2010 CSS Chart: http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/<br />Branding a publishing site: http://msdn.microsoft.com/en-us/library/gg430141.aspx<br />Starter blank masterpages: http://blog.drisgill.com/2009/11/starter-master-pages-for-sharepoint.html<br />SharePint:<br />Join SharePointers for a drink at <br />Cadillac Ranch from 9-?<br />
  200. 200. Watch<br />>> demos<br />
  201. 201. Tracey Nolte<br />Contact Me<br />www.traceynolte.com<br />281-253-2888<br />tracey@traceynolte.com<br />@TraceyNolte<br />http://gplus.to/webgal<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×