Brand My SharePoint

30
Brand my SharePoint Grafische Gestaltung von SharePoint 2013-Webseiten Fabian Moritz MVP SharePoint Server

description

Grafische Gestaltung von SharePoint 2013-Portalen

Transcript of Brand My SharePoint

Page 1: Brand My SharePoint

Brand my SharePointGrafische Gestaltung von SharePoint 2013-Webseiten

Fabian MoritzMVP SharePoint Server

Page 2: Brand My SharePoint
Page 3: Brand My SharePoint

Veranstalter:

Die Evolution von SharePoint

2003 2007

2010 2013

2001

Page 4: Brand My SharePoint

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

Page 5: Brand My SharePoint

Minimale Download Strategie (MDS)

Page 6: Brand My SharePoint

DemoMDS in SharePoint 2013

Page 7: Brand My SharePoint

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

Page 8: Brand My SharePoint

Veranstalter:

Themes (Composed Looks)

Page 9: Brand My SharePoint

Veranstalter:

Page 10: Brand My SharePoint

DemoThemes und Composed Looks

Page 11: Brand My SharePoint

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

Page 12: Brand My SharePoint

Veranstalter:

• Neues UI Management Tool• Erstellung, Bereitstellung und

Verwaltung von Design-Elementen

• Einfache Master Page-Generierung mit beliebigen Tools

• Export und Import

Design Manager

Page 13: Brand My SharePoint

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

Page 14: Brand My SharePoint

Veranstalter:

Einfache HTM

Page 15: Brand My SharePoint

Veranstalter:

Page 16: Brand My SharePoint

Veranstalter:

Page 17: Brand My SharePoint

Veranstalter:

Snippet Gallery

Page 18: Brand My SharePoint

DemoSharePoint Design Manager

Page 19: Brand My SharePoint

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

Page 20: Brand My SharePoint

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

Page 21: Brand My SharePoint

Veranstalter:

Wireframing

Page 22: Brand My SharePoint

Veranstalter:

Wireframing Tools

• Blend + Sketch Flow for Visual Studio 2012

• Balsamiq Mockups

• Microsoft Visio 2013

• …

Page 23: Brand My SharePoint

DemoWireframes umsetzen

Page 24: Brand My SharePoint

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

Page 25: Brand My SharePoint

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

Page 26: Brand My SharePoint

DemoMobile Ansichten umsetzen

Page 27: Brand My SharePoint

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

Page 28: Brand My SharePoint

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

Page 29: Brand My SharePoint

Veranstalter:

Page 30: Brand My SharePoint

Veranstalter:

Fabian MoritzITaCS GmbHMVP SharePoint Server

[email protected]://www.itacs.de

@FabianMoritz

http://sharepointcommunity.de/fabianm