Grafische Gestaltung von SharePoint 2013-Portalen

3. Die Evolution von SharePoint
2001 2003 2007
2010 2013
Veranstalter

4. Die Ebenen des Branding
Standard UI Themes Design Manager Master Pages
> Aufwand: 0 > Aufwand: wenig > Aufwand: mittel > Aufwand: hoch
> Skills: wenig > Skills: SP-Standard> Skills: HTML + CSS > Skills: SP + HTML
+ CSS + ASP.NET
Einheitliche Plattform + Standards
Veranstalter

5. Minimale Download Strategie
(MDS)

6. Demo
MDS in SharePoint 2013

7. Die Ebenen des Branding
Standard UI Themes Design Manager Master Pages
> Aufwand: 0 > Aufwand: wenig > Aufwand: mittel > Aufwand: hoch
> Skills: wenig > Skills: SP-Standard> Skills: HTML + CSS > Skills: SP + HTML
+ CSS + ASP.NET
Einheitliche Plattform + Standards
Veranstalter

8. Themes (Composed Looks)
Veranstalter

9. Veranstalter

10. Demo
Themes und Composed Looks

11. Die Ebenen des Branding
Standard UI Themes Design Manager Master Pages
> Aufwand: 0 > Aufwand: wenig > Aufwand: mittel > Aufwand: hoch
> Skills: wenig > Skills: SP-Standard> Skills: HTML + CSS > Skills: SP + HTML
+ CSS + ASP.NET
Einheitliche Plattform + Standards
Veranstalter

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

13. Neue Design Tools
• 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
Veranstalter

14. Einfache HTM
Veranstalter

15. Veranstalter

16. Veranstalter

17. Snippet Gallery
Veranstalter

18. Demo
SharePoint Design Manager

19. Die Ebenen des Branding
Standard UI Themes Design Manager Master Pages
> Aufwand: 0 > Aufwand: wenig > Aufwand: mittel > Aufwand: hoch
> Skills: wenig > Skills: SP-Standard> Skills: HTML + CSS > Skills: SP + HTML
+ CSS + ASP.NET
Einheitliche Plattform + Standards
Veranstalter

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

21. Wireframing
Veranstalter

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

23. Demo
Wireframes umsetzen

24. Master Pages umsetzen
• 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!
Veranstalter

25. 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
Veranstalter

26. Demo
Mobile Ansichten umsetzen

27. Die Ebenen des Branding
Standard UI Themes Design Manager Master Pages
> Aufwand: 0 > Aufwand: wenig > Aufwand: mittel > Aufwand: hoch
> Skills: wenig > Skills: SP-Standard> Skills: HTML + CSS > Skills: SP + HTML
+ CSS + ASP.NET
Einheitliche Plattform + Standards
Veranstalter

28. 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
• Besuchen Sie BrandMySharePoint.de
http://www.brandmysharepoint.de
Veranstalter

29. Veranstalter

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