Formatvorlage des Untertitelmasters durch Klicken bearbeiten Platin-Partner: Gold-Partner:...

Formatvorlage des Untertitelmasters durch Klicken bearbeiten

Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner:

Brand my SharePointGrafische Gestaltung von SharePoint-Webseiten

Fabian Moritz | SharePoint MVP

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Die Evolution von SharePoint

2003 2007

2010 2013

2001

Minimale Download Strategie (MDS)

DemoMDS in SharePoint 2013

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Designs (Composed Looks)

v

Farben und Schriften

DemoDesigns in SharePoint 2013

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

• Neues UI Management Tool• Erstellung, Bereitstellung und

Verwaltung von Design-Elementen

• Einfache Master Page-Generierung mit beliebigen Tools

• Export und Import

Design Manager

Einfache HTM

Snippet Gallery

• 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

• 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

DemoSharePoint Master Pages umsetzen

Branding Projekte

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

Wireframing

Wireframing Tools

• Blend + Sketch Flow for Visual Studio 2012

• Balsamiq Mockups

• Microsoft Visio 2013

• …

DemoWireframes umsetzen

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Möglichkeiten des UI Customizings

HTML, CSS, XSLT,

JavaScript

.NET

BrowserSharePoi

nt Designer

Browser Apps

HTML5, CSS3,

JavaScript

.NET

2010

2013

Client Side Rendering (CSR)

• Daten + .JS = HTML• XSLT ist Vergangenheit• Technologien:

JavaScript HTML CSS

• Deployment via App, Solution oder manuell

DemoClient Side Rendering mit SharePoint

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

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

• Beschäftigen Sie sich mit Client Side Renderinghttp://msdn.microsoft.com/en-us/library/jj220045.aspx

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

Fabian MoritzITaCS GmbHMVP SharePoint Server

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

@FabianMoritz

http://sharepointcommunity.de/fabianm