1. WinWire Technologies, Inc. Confidential
Design and Deploy great looking Portals
with SharePoint 2013
@WinWire
Wired2Win Webinar

2. WinWire Technologies, Inc. Confidential
•Limitations with SharePoint 2010
•Introduction to modernized User Interface in
SharePoint 2013
•Design by leveraging SP 2013 feature
•Customizing SharePoint UI
•Best Practices & Recommendations
Agenda

3. WinWire Technologies, Inc. Confidential
Limitations with SharePoint 2010 User Interface
Limited to
SharePoint designer
for creation and
editing
Limited Support
for Mobile
interface
‘Boxy’ look, too much
of ‘header area’
wastage,

4. WinWire Technologies, Inc. Confidential
Introduction to modernized User Interface in SharePoint 2013
Cleaner design and more efficient
standards driven technology like
HTML5
Support for tablet and smartphone
users using “Contemporary View” and
“Device Channels” features
Support for media files and external
videos embedded on pages
Enhanced preview features in libraries
and search results

5. WinWire Technologies, Inc. Confidential
Design by leveraging 2013 features
• Social Computing
• Drag and Drop file
upload
• Document Previews
• Streamlined
common Tasks
• New Search Interface
• Embedded Content

6. WinWire Technologies, Inc. Confidential
•Forum like
experience in
Discussion board
•Micro-blogging
using Newsfeed
•People & Tag
Following
Social Computing

7. WinWire Technologies, Inc. Confidential
• With IE9, and IE10, and current versions of Chrome and Firefox - drag
files into Library List View web parts.
• This is also possible with IE8, if you are using Office 2013.
Drag & Drop file upload

8. WinWire Technologies, Inc. Confidential
• Hover over a document in a library or search result allows a preview.
• Document preview works only when Office Web App server is installed.
Document Previews
Document preview
Track you are sharing with
preview
Edit, share or follow with
one click

9. WinWire Technologies, Inc. Confidential
Streamline common tasks
• “To-do list “ is tightly integrated with personal tasks .
• Aggregate tasks from Outlook, Project and SharePoint and publish them
to on the timeline.
• Connected experience - Aggregated tasks will also appear in Outlook
Add task to timeline
Task in timeline

10. WinWire Technologies, Inc. Confidential
New Search Interface
• Hovering on a search term that links to a document provides a detailed
document preview.
• For some file types, like images, a thumbnail appears in line with the search
results text.
• Filtering by ‘Modified date’ is a visual range on the bottom left of the screen

11. WinWire Technologies, Inc. Confidential
Documents Search Results with preview
Document preview
Visual date range filtering
based on ‘Modified date’

12. WinWire Technologies, Inc. Confidential
People Search Results with preview

13. WinWire Technologies, Inc. Confidential
• Site Assets library now includes
• Support for MP4 video
files
• Support for capturing
preview image from a
selected frame
• Generates Embed links for
content in the site assets
library to simplify re-use
• Can Embed
• Local SP2013 Content
• Outside 3rd party Content
(YouTube, Google
Maps, Feeds, etc…)
Embedded Content
Embedded Content
WMV video file
Embedded Content
You Tube video

14. WinWire Technologies, Inc. Confidential
You could do this…

15. WinWire Technologies, Inc. Confidential
• Provide a quick and easy way to apply lightweight branding.
• Allows to change the site layout, color palette, font scheme, and
background image.
• Can use either Preinstalled themes OR Custom themes
Or this… Customizing SharePoint UI - Themes

16. “Can the design have more
POP?”
“It needs to look like that other
website I saw – that was ‘Nice
looking’”
-Actual Customer Quote
But what do you still hear…

17. WinWire Technologies, Inc. Confidential
The ABC of SharePoint Design…
Audience
ContentBranding
When developing a
SharePoint solution,
it is important for the
SharePoint user experience
(UX) to be intuitive,
attractive, and
representative of the
organization's brand and
professionalism
in order to drive action and
adoption

18. WinWire Technologies, Inc. Confidential
Planning & Requirements Gathering
• Don’t just jump right into creating
SharePoint branding
• Gather design specific requirements
• Audience? Goals?
• Type of site?
• Major types of content
• Corporate Style Guidelines?
• Navigation needs? Searching?
Web Parts?
• Who will test it and compare to
what?

19. WinWire Technologies, Inc. Confidential
Planning Site Structure & Navigation
• Structure and Layout defined by
• Navigation requirement
• 3 Clicks principle
• Visual appeal vs. content
• Site navigation defined by corporate structure or
offerings but consider usability & attractiveness
• Tip: ASP.net navigation control or custom webparts
Planning Site
Structure and
Navigation

20. WinWire Technologies, Inc. Confidential
Creative Design steps for SharePoint
• Need for Wireframes does not go away
• Creative Mockup requires consideration of SharePoint
capabilities
• HTML Click-thru to provide clarity of user experience
Creative
Design / User
Experience
(UX)
Wireframes
Creative
mockups
HTML click-
thru
X

21. WinWire Technologies, Inc. Confidential
• Create a page in any standard
HTML editing tool, like
Dreamweaver
• Upload it to SharePoint and use it
as a master page
• SharePoint automatically creates
an .aspx page that it keeps in sync
with initial .html file.
• Continue to edit the .html file in
your preferred editing tool
• Every time you save, SharePoint
syncs up the .aspx file
Customizing SharePoint UI – Any HTML Editor

22. WinWire Technologies, Inc. Confidential
• Create and edit designs using only HTML and CSS, within the Web-design tool or HTML
editor
• Upload design into SharePoint.
• Design Manager becomes the central hub and interface for managing aspects of the
custom design, including packaging
Customizing SharePoint UI - Design Manager
Branding for regular
collaboration or team sites
would require the
development of master
pages within Visual Studio.

23. WinWire Technologies, Inc. Confidential
• To change the “look and feel” of the site.
• Contains a link to a master page URL, theme URL, background image URL, and
a font scheme URL
• Can be customized to cover – themes, font & master page
Customizing SharePoint UI – Composed looks

24. WinWire Technologies, Inc. Confidential
Use of Out-of-the-Box
Snippets to avoid
customization
Consider “Minimal
Download Strategy” so to
be inconsistent with other
OOTB features
Use Device Channels to
target multiple devices
Use jQuery to avoid entire
page refresh
As far as possible use CSS
based layout which will
ensure that it will support
all browsers and enhances
performance
Consider Responsive
Design methodology
Best Practices & Recommendations

25. WinWire Technologies, Inc. Confidential
Some Examples using SP13 Designs

26. WinWire Technologies, Inc. Confidential
Some Examples using SP13 Designs

27. © 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
WinWire Technologies, Inc. Confidential
Thank you
Mail your questions to: marketing@winwire.com
Visit: www.winwire.com
Follow: www.twitter.com/winwire