• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SharePoint Branding presentation by Tracey Nolte
 

SharePoint Branding presentation by Tracey Nolte

on

  • 8,367 views

 

Statistics

Views

Total Views
8,367
Views on SlideShare
8,199
Embed Views
168

Actions

Likes
22
Downloads
727
Comments
1

7 Embeds 168

http://estarktechnologies.wordpress.com 101
http://www.conseilsmarketing.fr 30
http://dagama2012 18
http://www.conseilsmarketing.com 10
http://server2 6
http://paper.li 2
http://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SharePoint Branding presentation by Tracey Nolte SharePoint Branding presentation by Tracey Nolte Presentation Transcript

    • Beginner to
      ADVANCED
    • Tracey Nolte
      Work for Slalom Consulting
      Background in BI & Design
      6 years of SharePoint
      Worked with SharePoint 2003, 2007 and 2010
      Branded sites for:
      AT&T
      American Heart Association
      Dr Pepper Snapple
      Centex Homes
      SharePoint User Groups in Baltimore, San Diego & Dallas
    • Branding Examples
      Reasons to brand
      Problems with old sites
      UX/IA = UCD
      UCD Process
      How to get started
      PLAN Your Work, WORK Your Plan
      Time/Effort determines BRAND METHOD
      METHODS: Themes, CSS & Master Pages
      >> demos
    • Create
      INNOVATIVE
      CHANGE
      BRANDING
      STYLE
      CREATION
      INTRANETS
      DEVELOP
      LIVE
      SHAREPOINT
      UCD
      FUN
      USER
      FUNCTIONALITY
      WEBSITES
      ORGANIZE
      INTERACTIVITY
      COLLABORATE
      DESIGN
      VISUALIZE
      Planning
      CREATIVE
    • Who…
      BRANDS SharePOINT?
    • Proctor & Gamble
    • Other Top SharePoint Sites
      http://www.wssdemo.com/livepivot/
    • But…
      BRANDING
      Is not just to make it “look pretty”…
    • Function
      Matters
    • What are problems with the past way?
      Design decisions were made by managers, project sponsors or executives….
      They didn’t INVOLVE USERS in design
      They didn’t understand PROCESSES
      They didn’t understand IMPACT to USERS
      They didn’t focus on USER ADOPTION
      They didn’t focus on USER EFFECIENCY
      They didn’t focus on USER EFFECTIVENESS
      They didn’t optimize the developer’s time
    • Users at CENTER
      business
      strategy
      USER
      company
      info
      brand &
      culture
    • User Centered Design
      UCD is an iterative
      methodology that puts the
      user at the center
      of all design decisions.
    • UX / IA = UCD
      UX = User Experience
      IA = INFORMATION ARCHITECTURE
      Ways to create USER EXPERIENCE
      Design/colors
      Interactivity
      Page Layout
      Emotional Response
      The way USERS FIND INFORMATION
      Taxonomy
      Navigation
      Pages
      Web Parts
      USER CENTERED DESIGN
    • Understanding the perspective a user brings to a system enables us to design that system to meet their needs.
    • 27
      What IS THE
      USER PERSPECTIVE?
      http://bit.ly/czatli
    • 28
      USER perspective NO. 1:
      NEEDS AND WANTS
      I NEED TO FIND INFORMATION FAST
      http://bit.ly/duRu7o
    • 29
      USER perspective NO. 2:
      GOALS, MOTIVATION, AND TRIGGERS
      MY GOAL IS TO
      BE MORE PRODUCTIVE.
      http://bit.ly/cBKoTK
    • 30
      USER perspective NO. 3:
      Obstacles AND Limitations
      I CAN’T FIND IT.
      http://bit.ly/9giEMb
    • 31
      USER perspective NO. 4:
      Tasks, Activities, AND Behaviors
      I HAVE A LOT OF THINGS IN THE AIR
      http://bit.ly/9rYgds
    • 32
      USER perspective NO. 5:
      Geography AND Language
      I’m Pacific Time…
      http://bit.ly/agm9aw
    • 33
      USER perspective NO. 6:
      Environment AND Gear
      My NETWORK CONNECTION IS SLOW
      http://bit.ly/bdNYpD
    • 34
      USER perspective NO. 7:
      WORK LIFE AND EXPERIENCE
      I’m NEW TO
      COMPUTERS
      http://bit.ly/9a3eCj
    • User Experience
    • User Experience
      by Apple
      and Microsoft
    • User Experience
      by Apple
    • User Experience
      By Microsoft
      http://www.youtube.com/watch?v=g6B9zex8Bp4
    • What ARE the
      BENEFITS OF UCD?
      39
      Increased Adoption Rates
      Improved User Productivity
      Higher Initial System Quality
      Reduced Maintenance Costs
      Realized Return onInvestment
    • SharePoint History & Tools
    • SharePoint HISTORY
      1997 – 1999 Site Server : web content management and replication, site analytics, personalization, indexing/search, document management and ecommerce
      2000 – 2001 STS : Microsoft releases a free add-on to Office 2000 called SharePoint Team Services which provides web-based team collaboration
      2002 – 2003 WSS: STS was renamed Windows SharePoint Services (WSS) and became part of Windows Server 2003 and renamed Office SharePoint Portal Server 2003.
      2004 – 2006: SharePoint 2007 with MOSS 2007 released with Microsoft Performance Point 2007
      2007-2010: SharePoint 2010 released with ribbon in Office 2010, social media, and other improvements
    • SharePoint 2003 vs. 2007 vs. 2010
    • SharePoint 2003 vs. 2007 vs. 2010
    • SharePoint 2003 vs. 2007 vs. 2010
    • SharePoint Design Tools
      • 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)
    • SharePoint Designer 2007
    • SharePoint Designer 2010
    • SharePoint 2010What’s new?
      • 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
    • Browsers
      • Better (OOTB) Cross-browser support
      • Better HTML Output (less tables, more “div” and “ul”)
      • 100% XHTML Compliant
    • Methods of Branding
      • Themes
      • Master Pages
      • Page Layouts
      • Content Pages
      • CSS
    • Themes
      • 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
      >> DEMO TO COME LATER
    • Themes
      quick and easy
      Like painting walls in your house
      Accessible in SharePoint & PowerPoint
    • Apply Existing
    • Create New Theme
    • Create Customized Themes
      PowerPoint > Design TabSelect the Colors button > “Create New Theme Colors…”. Change the colors to what you would like and save it.
      Now click on the Fonts button in the Themes Section. Change the Font and click save.
      Expand the themes section and click “Save current Theme…”
      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.
    • Master Pages
      • 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
      >> DEMO TO COME LATER
    • Page Layouts
      • Page layouts contain field controls and Web Parts
      • Dictate the body layout for a page
      >> DEMO TO COME LATER
    • Master PagePage Layout
      Master Page elements combined with page layout make the page layout
    • CSS
      • 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
      >> DEMO TO COME LATER
    • Content Pages
      • Publishing - structured information distribution with web zones/parts
      • Content – based around web part zones and web parts
      • Wiki - loose information structure
      All customizable but varying levels of effort!!
    • Web Zone & Parts
      Cheap or free web parts help increase functionality
      • http://www.amrein.com (twitter feed, video player, image rotator)
      • http://PathtoSharePoint.com (easy tabs, dashboarding)
      • http://wwwcodeplex.com (minicalendar, animated dashboards)
    • How Do You
      Start?
    • Low Effort – OOTB Master Pages & Themes
      Medium Effort – Custom Themes or Alternate CSS
      Full/High Effort – Custom Master Pages & Page Layouts
      Project Estimation
    • The UCD Process helps branding by answering questions about time, effort, tools, knowledge and user expectations/use/challenges.
      UCD is an iterative process!!
      What then?
    • 4 Phases
      Design
      Evaluate
      Concept
      Research
    • PURPOSE
      • Define Audience
      • Learn User Objectives
      • Identify Motivators
      • Analyze Content
      • Understand Behaviors
      • Visualize User Challenges
      • Define Site Gaps
      • Measure Web Analytics
      • Analyze Processes
      • Identify Improvements
      Research
    • METHODS
      • Interviews
      • Personas
      • Surveys
      • Focus Groups
      • Workshops
      • Brainstorming
      • Task Analysis
      • Content Analysis
      • Contextual Inquiry
      • Affinity Diagramming
      • User Scenarios
      • Competitor Evaluation
      Research
    • TOOLS
      • Meetings
      • Pad & paper
      • One Note
      • Audio recording device
      Research
    • ASK
      lots of questions
    • Who will use it?
      OR
      Internal
      Employees
      Contractors
      Leadership
      Public
      Customers
      Partners
      Investors
      The World
    • Public Site
      Internal Sites
      Immerse
      Recognize
      Who: who you are
      What: what you do
      How: how you do business
      Inform
      Who: company culture
      What: policies/procedures
      How: business operations
    • Why brand?
      Internal Sites
      Public Site
      Create brand recognition
      To make it look “not like SharePoint”
      Look like corporate branding/image
      Create a custom user experience
      Clear & consistent information organization
      Sites outdated or incorrect information
      Target the right audience with correct info
    • How will people
      Use your site?
      Learn
      Collaborate
      Find information
      Buy stuff
      Meet people
      Help others
    • WHAT
      Will they do on the new site?
      Are they doing on the OLD site?
    • PURPOSE
      • Define Navigation
      • Create Site Map
      • Create Site Layout
      • Visualize Functional Areas
      • Plan interactivity
      • Compose Site Requirements
      • Design User Interaction
      • Define Click Path
      • Build Information Architecture
      Concept
    • METHODS
      • Storyboards
      • Sketching
      • Card Sorting
      • Wireframes
      • Participatory Design
      • Page Layout
      • Navigation Modeling
      • Metadata Design
      • Taxonomy Design
      • Controlled Vocabularies
      Concept
    • TOOLS
      • Meetings
      • Pad & paper
      • One Note
      • Balsamiq Wireframes
      • FreeMind (mind mapping)
      • Sticky Notes
      • Whiteboards
      • Large drawing pads
      Concept
    • Navigation
      (taxonomy)
    • Storyboards – click path of users
    • Wireframes – define function
    • PURPOSE
      • Create Visual Style
      • Design Consistent Style
      • Select Color Theme
      • Set Feel/Mood
      • Create Brand Color Cohesion
      • Apply Visual Interest
      • Design Interactive Controls
      • Develop Engaging Experiences
      • Envision Final State
      Design
    • METHODS
      • Graphic Design
      • Logo Design
      • Branding
      • Icon Design
      • Screen Mockups
      • Interaction Diagrams
      • High/Low Fidelity Prototyping
      • Paper Prototyping
      • Functional Prototyping
      • Style Guide
      Design
    • TOOLS
      • Image Editor: Adobe Fireworks, Photoshop or Gimp for mockups
      • Color Picker
      • Style Guide
      • Marketing (branding style)
      • Microsoft Expression Blend (high fidelity prototypes)
      • jQuery!!! YAY!
      Design
    • PURPOSE
      • Quality Assurance
      • Ensuring System Functionality
      • Testing For Design Flaws
      • Refining User Experience
      • Ensuring Return on Investment
      • Predict User Adoption
      Evaluate
    • METHODS
      • Usability Evaluation
      • Usability Testing
      • Remote Usability Testing
      • Usability Lab Testing
      • Web Analytics
      • Heat Maps
      Evaluate
    • TOOLS
      • Quality Assurance test scripts
      • Test group user feedback
      • Heat map tool (CrazyEgg.com)
      • Google Analytics (if you use it) or SharePoint site analytics
      Evaluate
    • Plan your work
      Work your plan
    • WHEN
      DO YOU NEED IT DONE ?
    • Time & Effort
      By when do you need it done?
      Do you know CSS, JQUERY & HTML?
      Do you need customized code?
      Do you have people resources?
      Do you have a development/test site?
      Do you have SharePoint Designer?
    • Time/Effort Determines BRAND METHOD
      Does NOT Require
      SharePoint Designer
      REQUIRES
      SharePoint
      Designer, Image Design Tools & More
      Custom
      Master Page
      Themes
      CSS
    • TRICKS
      Never edit default.master – make a copy and rename it
      Never edit core.css – create a new CSS and reference it in your master page above core.css
      Use inspect element in Chrome (F12 in IE or firebug in Firefox) to preview styles and code
      In CSS use !important when you need to override a style
    • Recommendations
      Book: SharePoint 2010 Branding by Randy Drisgill
      CSS: SharePoint 2010 CSS Chart: http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/
      Branding a publishing site: http://msdn.microsoft.com/en-us/library/gg430141.aspx
      Starter blank masterpages: http://blog.drisgill.com/2009/11/starter-master-pages-for-sharepoint.html
      SharePint:
      Join SharePointers for a drink at
      Cadillac Ranch from 9-?
    • Watch
      >> demos
    • Tracey Nolte
      Contact Me
      www.traceynolte.com
      281-253-2888
      tracey@traceynolte.com
      @TraceyNolte
      http://gplus.to/webgal