Brand my SharePointGrafische Gestaltung von SharePoint 2013-Webseiten

Fabian MoritzMVP SharePoint Server

Veranstalter:

Die Evolution von SharePoint

2003 2007

2010 2013

2001

Veranstalter:

Die Ebenen des Branding

Standard UI Themes Design ManagerMaster Pages

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: wenig

> Skills: SP-Standard

> Aufwand: mittel

> Skills: HTML + CSS

> Aufwand: hoch

> Skills: SP + HTML

+ CSS + ASP.NET

Minimale Download Strategie (MDS)

DemoMDS in SharePoint 2013

Veranstalter:

Die Ebenen des Branding

Standard UI Themes Design ManagerMaster Pages

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: wenig

> Skills: SP-Standard

> Aufwand: mittel

> Skills: HTML + CSS

> Aufwand: hoch

> Skills: SP + HTML

+ CSS + ASP.NET

Veranstalter:

Themes (Composed Looks)

Veranstalter:

DemoThemes und Composed Looks

Veranstalter:

Die Ebenen des Branding

Standard UI Themes Design ManagerMaster Pages

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: wenig

> Skills: SP-Standard

> Aufwand: mittel

> Skills: HTML + CSS

> Aufwand: hoch

> Skills: SP + HTML

+ CSS + ASP.NET

Veranstalter:

• Neues UI Management Tool• Erstellung, Bereitstellung und

Verwaltung von Design-Elementen

• Einfache Master Page-Generierung mit beliebigen Tools

• Export und Import

Design Manager

Veranstalter:

• SharePoint Designer 2013 ist kein Muss mehr (kann aber verwendet werden)

• Master Page Gallery kann via WebDAV geöffnet werden

• Bearbeitung mit beliebigen HTML Tools

Neue Design Tools

Veranstalter:

Einfache HTM

Veranstalter:

Veranstalter:

Veranstalter:

Snippet Gallery

DemoSharePoint Design Manager

Veranstalter:

Die Ebenen des Branding

Standard UI Themes Design ManagerMaster Pages

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: wenig

> Skills: SP-Standard

> Aufwand: mittel

> Skills: HTML + CSS

> Aufwand: hoch

> Skills: SP + HTML

+ CSS + ASP.NET

Veranstalter:

Branding Projekte planen

Ziele und Anforderunge

n

Wireframes und Scribbles

Designentwürfe und

Styleguide

HTML-Gerüste

Master Pages, Page Layouts

(inkl. Platzhalter)

Webparts und Controls

Optimierung, Nachjustierun

gTesting & QS

Features, Solutions und Deployment

Veranstalter:

Wireframing

Veranstalter:

Wireframing Tools

• Blend + Sketch Flow for Visual Studio 2012

• Balsamiq Mockups

• Microsoft Visio 2013

• …

DemoWireframes umsetzen

Veranstalter:

• 3 Optionen: 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!

Master Pages umsetzen

Veranstalter:

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

Device Manager

DemoMobile Ansichten umsetzen

Veranstalter:

Die Ebenen des Branding

Standard UI Themes Design ManagerMaster Pages

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: wenig

> Skills: SP-Standard

> Aufwand: mittel

> Skills: HTML + CSS

> Aufwand: hoch

> Skills: SP + HTML

+ CSS + ASP.NET

Veranstalter:

Und jetzt?

• Laden Sie sich die Präsentation und Beispiele herunterhttp://sharepointcommunity.de/fabianm

• Machen Sie sich mit dem Design Manager vertrauthttp://msdn.microsoft.com/en-us/library/jj822363.aspx

• Nutzen Sie Wireframing Tools während der Planunghttp://www.balsamiq.com

• Besuchen Sie BrandMySharePoint.dehttp://www.brandmysharepoint.de

Veranstalter:

Veranstalter:

Fabian MoritzITaCS GmbHMVP SharePoint Server

Fabian.Moritz@itacs.dehttp://www.itacs.de

@FabianMoritz

http://sharepointcommunity.de/fabianm