SharePoint Branding presentation by Tracey Nolte
Upcoming SlideShare
Loading in...5
×
 

SharePoint Branding presentation by Tracey Nolte

on

  • 8,515 views

 

Statistics

Views

Total Views
8,515
Views on SlideShare
8,347
Embed Views
168

Actions

Likes
22
Downloads
731
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
  • 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