Brand my SharePoint Grafische Gestaltung von SharePoint-Webseiten Fabian Moritz | SharePoint MVP

Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript Einheitliche Plattform + Standards

Die Evolution von SharePoint 2001 2003 2007 2010 2013

Minimale Download Strategie (MDS)

Demo MDS in SharePoint 2013

Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript Einheitliche Plattform + Standards

Designs (Composed Looks)

v

Farben und Schriften

Demo Designs in SharePoint 2013

Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript Einheitliche Plattform + Standards

Design Manager Neues UI Management Tool Erstellung, Bereitstellung und Verwaltung von Design-Elementen Einfache Master Page-Generierung mit beliebigen Tools Export und Import

Einfache HTM

Snippet Gallery

Master Pages umsetzen 3 Optionen: Tools HTML Master Page Minimal Master Page Starter Master Pages (Codeplex) startermasterpages.codeplex.com Tools SharePoint Designer 2013 3rd Party Tools Browser Tools Nicht vergessen: Daten im TFS abspeichern!

Device Manager Verschiedene “Channels” für mobile Geräte Definition auf Basis des User Agent Strings Zuordnung einer Master Page Spezielle Controls für Channels

Demo SharePoint Master Pages umsetzen

Branding Projekte Ziele und Anforderungen Wireframes und Scribbles Designentwürfe und Styleguide HTML-Gerüste Master Pages, Page Layouts (inkl. Platzhalter) Webparts und Controls Optimierung, Nachjustierung Testing & QS Features, Solutions und Deployment

Wireframing

Wireframing Tools Blend + Sketch Flow for Visual Studio 2012 Balsamiq Mockups Microsoft Visio 2013 …

Demo Wireframes umsetzen

Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript Einheitliche Plattform + Standards

Möglichkeiten des UI Customizings Browser SharePoint Designer HTML, CSS, XSLT, JavaScript .NET 2010 Browser Apps HTML5, CSS3, JavaScript .NET 2013

Client Side Rendering (CSR) Daten + .JS = HTML XSLT ist Vergangenheit Technologien: JavaScript HTML CSS Deployment via App, Solution oder manuell

Demo Client Side Rendering mit SharePoint

Die Ebenen des Branding Standard UI Themes Design Manager & Master Pages UI-Customizings > Aufwand: 0 > Skills: wenig > Aufwand: klein > Skills: SP-Standard > Aufwand: hoch > Skills: HTML, CSS, SP > Aufwand: rel. klein > Skills: SP, JavaScript Einheitliche Plattform + Standards

Und jetzt? Laden Sie sich die Präsentation und Beispiele herunter http://sharepointcommunity.de/fabianm Machen Sie sich mit dem Design Manager vertraut http://msdn.microsoft.com/en-us/library/jj822363.aspx Nutzen Sie Wireframing Tools während der Planung http://www.balsamiq.com Beschäftigen Sie sich mit Client Side Rendering http://msdn.microsoft.com/en-us/library/jj220045.aspx Besuchen Sie BrandMySharePoint.de http://www.brandmysharepoint.de

Fabian Moritz ITaCS GmbH MVP SharePoint Server Fabian.Moritz@itacs.de http://www.itacs.de http://sharepointcommunity.de/fabianm @FabianMoritz