Your SlideShare is downloading. ×
0
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
SharePoint Branding presentation by Tracey Nolte
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SharePoint Branding presentation by Tracey Nolte

8,273

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,273
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
746
Comments
1
Likes
23
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Beginner to <br />ADVANCED<br />
  • 2. Tracey Nolte<br />Work for Slalom Consulting<br />Background in BI &amp; Design<br />6 years of SharePoint<br />Worked with SharePoint 2003, 2007 and 2010<br />Branded sites for:<br />AT&amp;T<br />American Heart Association<br />Dr Pepper Snapple<br />Centex Homes<br />SharePoint User Groups in Baltimore, San Diego &amp; Dallas<br />
  • 3.
  • 4.
  • 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 &amp; Master Pages<br />&gt;&gt; demos<br />
  • 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. Who…<br />BRANDS SharePOINT?<br />
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. Proctor &amp; Gamble<br />
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. Other Top SharePoint Sites<br />http://www.wssdemo.com/livepivot/<br />
  • 20. But…<br />BRANDING <br />Is not just to make it “look pretty”…<br />
  • 21. Function<br />Matters<br />
  • 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. Users at CENTER<br />business<br />strategy<br />USER<br />company<br />info<br />brand &amp;<br />culture<br />
  • 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. 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. Understanding the perspective a user brings to a system enables us to design that system to meet their needs.<br />
  • 27. 27<br />What IS THE<br />USER PERSPECTIVE?<br />http://bit.ly/czatli<br />
  • 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<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<br />USER perspective NO. 3:<br />Obstacles AND Limitations<br />I CAN’T FIND IT.<br />http://bit.ly/9giEMb<br />
  • 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<br />USER perspective NO. 5:<br />Geography AND Language<br />I’m Pacific Time…<br />http://bit.ly/agm9aw<br />
  • 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<br />USER perspective NO. 7:<br />WORK LIFE AND EXPERIENCE<br />I’m NEW TO <br /> COMPUTERS<br />http://bit.ly/9a3eCj<br />
  • 35. User Experience<br />
  • 36. User Experience<br />by Apple<br /> and Microsoft<br />
  • 37. User Experience<br /> by Apple<br />
  • 38. User Experience<br />By Microsoft<br />http://www.youtube.com/watch?v=g6B9zex8Bp4<br />
  • 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. SharePoint History &amp; Tools<br />
  • 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. SharePoint 2003 vs. 2007 vs. 2010<br />
  • 43. SharePoint 2003 vs. 2007 vs. 2010<br />
  • 44. SharePoint 2003 vs. 2007 vs. 2010<br />
  • 45. SharePoint Design Tools<br /><ul><li>Code Editor: SharePoint Designer 2007 or SharePoint Designer 2010
  • 46. Image Editor: Adobe Fireworks, Gimp, Adobe Photoshop
  • 47. Browser: for 2007 (IE ONLY) for 2010 any browser
  • 48. Development / Test Site: for making changes &amp; testing your designs (not live)</li></li></ul><li>SharePoint Designer 2007<br />
  • 49. SharePoint Designer 2010<br />
  • 50. SharePoint 2010What’s new?<br /><ul><li>More Flexible Branding of the UI
  • 51. User Experience has Changed (i.e. Ribbon, Look &amp; Feel)
  • 52. Silverlight Dialogs
  • 53. Much better inline editing
  • 54. Better positioned for everyday Branding</li></li></ul><li>Browsers<br /><ul><li>Better (OOTB) Cross-browser support
  • 55. Better HTML Output (less tables, more “div” and “ul”)
  • 56. 100% XHTML Compliant</li></li></ul><li>Methods of Branding<br /><ul><li>Themes
  • 57. Master Pages
  • 58. Page Layouts
  • 59. Content Pages
  • 60. CSS</li></li></ul><li>Themes<br /><ul><li>Themes change the colors and fonts for an existing SharePoint template
  • 61. Allowed 12 colors &amp; 2 Font Choices
  • 62. Theming Engine (.thmx)
  • 63. Common w/ other Office Products
  • 64. Theme Gallery</li></ul>&gt;&gt; DEMO TO COME LATER<br />
  • 65. Themes<br />quick and easy<br />Like painting walls in your house<br />Accessible in SharePoint &amp; PowerPoint<br />
  • 66. Apply Existing<br />
  • 67. Create New Theme<br />
  • 68. Create Customized Themes<br />PowerPoint &gt; Design TabSelect the Colors button &gt; “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 –&gt; Themes or simply go to http://YourSharePointPortal/_catalogs/theme/Forms/AllItems.aspx and upload your file.<br />
  • 69. Master Pages<br /><ul><li>Master Pages hold: HTML, SP Controls (Navigation, Search), Content Placeholders
  • 70. SharePoint 2010 gives you:
  • 71. V4.master (eq. default.master in 2007)
  • 72. Nightandday.master (Internet/Large Intranet Site)
  • 73. Minimal.master</li></ul>&gt;&gt; DEMO TO COME LATER<br />
  • 74. Page Layouts<br /><ul><li>Page layouts contain field controls and Web Parts
  • 75. Dictate the body layout for a page</li></ul>&gt;&gt; DEMO TO COME LATER<br />
  • 76. Master PagePage Layout<br />Master Page elements combined with page layout make the page layout<br />
  • 77. CSS<br /><ul><li>SharePoint uses CSS heavily
  • 78. MOSS 2007 = One Large CSS
  • 79. SP2010 has multiple CSS files that are loaded as needed (as controls are loaded)
  • 80. Alternate CSS Loading – Much like Theming </li></ul>&gt;&gt; DEMO TO COME LATER<br />
  • 81. Content Pages<br /><ul><li>Publishing - structured information distribution with web zones/parts
  • 82. Content – based around web part zones and web parts
  • 83. Wiki - loose information structure</li></ul>All customizable but varying levels of effort!!<br />
  • 84. Web Zone &amp; Parts<br />Cheap or free web parts help increase functionality<br /><ul><li>http://www.amrein.com (twitter feed, video player, image rotator)
  • 85. http://PathtoSharePoint.com (easy tabs, dashboarding)
  • 86. http://wwwcodeplex.com (minicalendar, animated dashboards)</li></li></ul><li>How Do You<br />Start?<br />
  • 87. Low Effort – OOTB Master Pages &amp; Themes<br />Medium Effort – Custom Themes or Alternate CSS<br />Full/High Effort – Custom Master Pages &amp; Page Layouts<br />Project Estimation<br />
  • 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. 4 Phases<br />Design<br />Evaluate<br />Concept<br />Research<br />
  • 90. PURPOSE<br /><ul><li>Define Audience
  • 91. Learn User Objectives
  • 92. Identify Motivators
  • 93. Analyze Content
  • 94. Understand Behaviors
  • 95. Visualize User Challenges
  • 96. Define Site Gaps
  • 97. Measure Web Analytics
  • 98. Analyze Processes
  • 99. Identify Improvements</li></ul>Research<br />
  • 100. METHODS<br /><ul><li>Interviews
  • 101. Personas
  • 102. Surveys
  • 103. Focus Groups
  • 104. Workshops
  • 105. Brainstorming
  • 106. Task Analysis
  • 107. Content Analysis
  • 108. Contextual Inquiry
  • 109. Affinity Diagramming
  • 110. User Scenarios
  • 111. Competitor Evaluation</li></ul>Research<br />
  • 112. TOOLS<br /><ul><li>Meetings
  • 113. Pad &amp; paper
  • 114. One Note
  • 115. Audio recording device</li></ul>Research<br />
  • 116. ASK<br />lots of questions<br />
  • 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. 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. 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 &amp; consistent information organization<br />Sites outdated or incorrect information<br />Target the right audience with correct info<br />
  • 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. WHAT<br />Will they do on the new site?<br />Are they doing on the OLD site?<br />
  • 122. PURPOSE<br /><ul><li>Define Navigation
  • 123. Create Site Map
  • 124. Create Site Layout
  • 125. Visualize Functional Areas
  • 126. Plan interactivity
  • 127. Compose Site Requirements
  • 128. Design User Interaction
  • 129. Define Click Path
  • 130. Build Information Architecture</li></ul>Concept<br />
  • 131. METHODS<br /><ul><li>Storyboards
  • 132. Sketching
  • 133. Card Sorting
  • 134. Wireframes
  • 135. Participatory Design
  • 136. Page Layout
  • 137. Navigation Modeling
  • 138. Metadata Design
  • 139. Taxonomy Design
  • 140. Controlled Vocabularies</li></ul>Concept<br />
  • 141. TOOLS<br /><ul><li>Meetings
  • 142. Pad &amp; paper
  • 143. One Note
  • 144. Balsamiq Wireframes
  • 145. FreeMind (mind mapping)
  • 146. Sticky Notes
  • 147. Whiteboards
  • 148. Large drawing pads</li></ul>Concept<br />
  • 149. Navigation<br />(taxonomy)<br />
  • 150. Storyboards – click path of users<br />
  • 151. Wireframes – define function<br />
  • 152. PURPOSE<br /><ul><li>Create Visual Style
  • 153. Design Consistent Style
  • 154. Select Color Theme
  • 155. Set Feel/Mood
  • 156. Create Brand Color Cohesion
  • 157. Apply Visual Interest
  • 158. Design Interactive Controls
  • 159. Develop Engaging Experiences
  • 160. Envision Final State</li></ul>Design<br />
  • 161. METHODS<br /><ul><li>Graphic Design
  • 162. Logo Design
  • 163. Branding
  • 164. Icon Design
  • 165. Screen Mockups
  • 166. Interaction Diagrams
  • 167. High/Low Fidelity Prototyping
  • 168. Paper Prototyping
  • 169. Functional Prototyping
  • 170. Style Guide</li></ul>Design<br />
  • 171. TOOLS<br /><ul><li>Image Editor: Adobe Fireworks, Photoshop or Gimp for mockups
  • 172. Color Picker
  • 173. Style Guide
  • 174. Marketing (branding style)
  • 175. Microsoft Expression Blend (high fidelity prototypes)
  • 176. jQuery!!! YAY!</li></ul>Design<br />
  • 177. PURPOSE<br /><ul><li>Quality Assurance
  • 178. Ensuring System Functionality
  • 179. Testing For Design Flaws
  • 180. Refining User Experience
  • 181. Ensuring Return on Investment
  • 182. Predict User Adoption</li></ul>Evaluate<br />
  • 183. METHODS<br /><ul><li>Usability Evaluation
  • 184. Usability Testing
  • 185. Remote Usability Testing
  • 186. Usability Lab Testing
  • 187. Web Analytics
  • 188. Heat Maps</li></ul>Evaluate<br />
  • 189. TOOLS<br /><ul><li>Quality Assurance test scripts
  • 190. Test group user feedback
  • 191. Heat map tool (CrazyEgg.com)
  • 192. Google Analytics (if you use it) or SharePoint site analytics</li></ul>Evaluate<br />
  • 193.
  • 194. Plan your work<br />Work your plan<br />
  • 195. WHEN<br />DO YOU NEED IT DONE ?<br />
  • 196. Time &amp; Effort<br />By when do you need it done?<br />Do you know CSS, JQUERY &amp; 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. Time/Effort Determines BRAND METHOD<br />Does NOT Require<br />SharePoint Designer<br />REQUIRES<br />SharePoint<br />Designer, Image Design Tools &amp; More<br />Custom<br />Master Page<br />Themes<br />CSS<br />
  • 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. 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. Watch<br />&gt;&gt; demos<br />
  • 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 />

×