SharePoint 2010               Intranet Branding               #SPSUK25SharePoint Saturday12th November 2011Aonghus (Gus) F...
SharePoint 2010 Intranet Branding    Introductions    Branding – What & Why?    Branding – How?    Governance    Demo...
Gus Fraser   SharePoint Evangelist & Lead Consultant @ C5   Developing Enterprise Solutions since SharePoint 2003   Twi...
#SPSUK25
C5 Client Base#SPSUK25
#SPSUK25
What is Branding?#SPSUK25
#SPSUK25
What is Branding?   Identity   Ownership   Culture   User Experience#SPSUK25
Why Brand?#SPSUK25
“I DON’T WANT IT TO LOOK   Why Brand an internal system?   LIKE SHAREPOINT!”#SPSUK25
Why Brand an internal system?   EVERYBODY is a client!   Adoption - faster/easier/cheaper..    Sometimes necessary!   M...
Internet vs Intranet#SPSUK25
Public Facing SharePoint WCM Site   Rigid design   Low number of contributors   Lots of great examples      www.topsha...
SharePoint Intranet   Must be flexible   Wider scope   High number of contributors – everybody    in the organisation! ...
How to Brand SharePoint 2010#SPSUK25
Wireframing     Start with a Wireframing tool (e.g. Balsamiq)#SPSUK25
Branding Governance     Defined set of guidelines:        Master pages & CSS        SharePoint Designer policy        ...
Without Governance..#SPSUK25
#SPSUK25
Without Governance     Navigation     Adoption     Consistency     Search#SPSUK25
SharePoint 2010 Branding Options   Low Effort      Out of the Box Master Pages & UI with Themes      PowerPoint/Word 20...
Demos#SPSUK25
Top Tips – Do & Don’t  Do:   Use wire framing to define the UI/UX first   Cut HTML & CSS outside of SharePoint first   ...
Useful Links     Professional SharePoint 2010 Branding and User Interface Design:      http://amzn.to/ucG30x     Balsami...
Thank You   Gus Fraser   Twitter: @gusfraser   Email: af@c5.je#SPSUK25
Upcoming SlideShare
Loading in...5
×

SharePoint Saturday UK - Intranet Branding for Developers

1,607

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,607
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Ogier portal – David Edge / Thomas /
  • Who is in the room
  • Mechanics
  • SharePoint Saturday UK - Intranet Branding for Developers

    1. 1. SharePoint 2010 Intranet Branding #SPSUK25SharePoint Saturday12th November 2011Aonghus (Gus) FraserSharePoint Lead Consultant, C5 Alliance www.c5alliance.com
    2. 2. SharePoint 2010 Intranet Branding  Introductions  Branding – What & Why?  Branding – How?  Governance  Demos  Master pages & CSS  Control adapters  The Ribbon  Top Tips  Examples  Useful Links#SPSUK25
    3. 3. Gus Fraser  SharePoint Evangelist & Lead Consultant @ C5  Developing Enterprise Solutions since SharePoint 2003  Twitter: @gusfraser  Email: af@c5.je  C5 Alliance; ~60 IT consultants (17 SharePoint)  Based in Jersey & Guernsey  Probably the highest concentration of SharePoint consultants on the planet* *unconfirmed  Use the #SPSUK25 hashtag for opinion/feedback/debate#SPSUK25
    4. 4. #SPSUK25
    5. 5. C5 Client Base#SPSUK25
    6. 6. #SPSUK25
    7. 7. What is Branding?#SPSUK25
    8. 8. #SPSUK25
    9. 9. What is Branding?  Identity  Ownership  Culture  User Experience#SPSUK25
    10. 10. Why Brand?#SPSUK25
    11. 11. “I DON’T WANT IT TO LOOK Why Brand an internal system? LIKE SHAREPOINT!”#SPSUK25
    12. 12. Why Brand an internal system?  EVERYBODY is a client!  Adoption - faster/easier/cheaper.. Sometimes necessary!  Marketing/communications stakeholder  Just because you CAN… doesn’t mean you SHOULD#SPSUK25
    13. 13. Internet vs Intranet#SPSUK25
    14. 14. Public Facing SharePoint WCM Site  Rigid design  Low number of contributors  Lots of great examples  www.topsharepoint.com#SPSUK25
    15. 15. SharePoint Intranet  Must be flexible  Wider scope  High number of contributors – everybody in the organisation!  Few examples; not many companies willing to share#SPSUK25
    16. 16. How to Brand SharePoint 2010#SPSUK25
    17. 17. Wireframing  Start with a Wireframing tool (e.g. Balsamiq)#SPSUK25
    18. 18. Branding Governance  Defined set of guidelines:  Master pages & CSS  SharePoint Designer policy  Web part policy  Ribbon options (Font restrictions etc.)  Procurement/preferred supplier list  Reduces risk of non-compliance with style guide  Quality assurance#SPSUK25
    19. 19. Without Governance..#SPSUK25
    20. 20. #SPSUK25
    21. 21. Without Governance  Navigation  Adoption  Consistency  Search#SPSUK25
    22. 22. SharePoint 2010 Branding Options  Low Effort  Out of the Box Master Pages & UI with Themes  PowerPoint/Word 2010  Medium Effort  Custom CSS & Background Images  SharePoint Designer 2010, Notepad, Photoshop  High Effort  Custom Master Pages, Page Layouts, CSS, XSLT, Etc.  Visual Studio 2010, SharePoint Designer 2010#SPSUK25
    23. 23. Demos#SPSUK25
    24. 24. Top Tips – Do & Don’t Do:  Use wire framing to define the UI/UX first  Cut HTML & CSS outside of SharePoint first  Use a simple base master page (not v4.master)  Package in Visual Studio (CKS:DEV) – Web Templates  Educate the designer(s) Don’t:  Break SharePoint…  Get lost in SharePoint Designer for days hoping for the best…  Accept a SharePoint-agnostic design/designer/agency#SPSUK25
    25. 25. Useful Links  Professional SharePoint 2010 Branding and User Interface Design: http://amzn.to/ucG30x  Balsamiq: http://www.balsamiq.com/ & http://mockupstogo.net  Starter Master Pages: http://startermasterpages.codeplex.com/  Heather Solomon:  http://blog.sharepointexperience.com/2011/09/09/just-the-essentials- sharepoint-master-pages/  http://sharepointexperience.com/csschart/csschart.html  CSS Reset: http://kyleschaeffer.com/sharepoint/css-reset/  CSS 3 Pie: http://css3pie.com/  Randy Drisgill: http://blog.drisgill.com/  CKS:DEV: http://cksdev.codeplex.com/#SPSUK25
    26. 26. Thank You  Gus Fraser  Twitter: @gusfraser  Email: af@c5.je#SPSUK25
    1. A particular slide catching your eye?

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

    ×