SlideShare a Scribd company logo

Branding 101

•Download as PPTX, PDF•
•
D'arce Hess
D'arce Hess

This document provides an overview of branding and design concepts for a SharePoint site redesign project. It recommends starting with project planning, creating a site map, wireframes and mockups. It discusses responsive design approaches and considerations. It also explains the building blocks of SharePoint branding like master pages, page layouts, CSS, JavaScript, web parts and themes/composed looks. The document demonstrates these concepts and provides additional resources for learning about CSS, frameworks and starter master pages.

Related slideshows

Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 
Create Engaging Branded SharePoint Portals and Plan for Content
Create Engaging Branded SharePoint Portals and Plan for ContentCreate Engaging Branded SharePoint Portals and Plan for Content
Create Engaging Branded SharePoint Portals and Plan for Content
 
Intro to design_manager
Intro to design_managerIntro to design_manager
Intro to design_manager
 
1 of 45
Branding 101: g : Concept to Production SharePoint Saturday Austin, TX #SPSATX – March 2, 2013
THANK YOU FOR BEING A PART OF SHAREPOINT SATURDAY AUSTIN! • Please turn off all electronic devices or set them to vibrate • If you must take a phone call, please do so in the hall • Wi-Fi is available, you will need your Guest ID/password (at registration desk) • Feel free to tweet and blog during sessions. Remember to follow @SPSATX and tag #SPSATX in your tweets! SharePoint Saturday Austin is hosted by the Austin SharePoint User Group (@AustinSPUG) 2 | SharePoint Saturday Austin 2013
About me D’arce Hess Developer, Athlete and Musician PixelMill Blog: www.thebrandingbutterfly.com Website: www.pixelmill.com Email: dhess@pixelmill.com @darcehess www.linkedin.com/in/darcehess/ http://www.youtube.com/user/DarceHess
PixelMill Developing SharePoint SharePoint Branding and UI solutions since Specialists 2004 Developer of Your Cost effective SharePoint SharePoint Branding Templates Experts
Once upon a time p The owner of your company recently met with a consultant who showed him several examples of what your SharePoint site CAN be. Your boss has now charged you with recreating the same “Wow” factor in your company’ s SharePoint site.
Branding 101
Branding 101
Where do you begin? y g
j Project Planning g Ideally, you should have the following before beginning your project:  Have a Project Manager Has vision of needs and goals of project. Make sure goals can be measured.  Site Map Architecture What subsites and pages will you have?  Content Architecture What shows up in each part of the site map? i.e. the Home page  Wireframe (Can be adjusted)  Mockup (NOT the same as a wireframe)  Build it  Test it in every browser possible
Site Map Example p p
Wireframes Created to get an idea of where general items will be placed for the mockup of the design. They can be adjusted later. NOT FINAL Balsamiq Just in Mind Visio Photoshop
Branding 101
Responsive Design p g
Desktop View Tablet View Mobile View
Which is best for you? y Responsive Design: Uses CSS3 media queries and proportion-based grids. All elements continue to be shown as screen width changes. Adaptive Design: Uses CSS3 media queries to hide elements as screen width lessens. Progressive Enhancement: Design for the mobile view first, then add elements as the screen increases in width.
Did you know? y By the end of 2013, there will be more mobile devices on Earth than people. (Source: Cisco, 2013) Mobile search will generate 27.8 billion more queries than desktop search by 2016 (Source: BIA/Kelsey report, 2012) Smartphones and tablet computers will increase mobile Web traffic by 26 times during the next four years (Source: Cisco Systems, 2011)
RWD Considerations Audience Positives Negatives Resources  Mobile Users  One Masterpage that  Bandwidth  Responsive Web Design by adapts to all devices. Ethan Marcotte  Desktop Users  Wide Lists and Site http://bit.ly/bcKwQS  Uses Fluid Grids Settings pages are not mobile friendly  Responsive Framework at  Uses HTML5/CSS3 Media CodePlex Queries http://responsivesharepoint .codeplex.com  Limited Overhead  Configure SharePoint Server 2010 for Mobile Device Access http://bit.ly/cg6Yo
p Mockup Use Photoshop to create a layered .PSD of what your site will look like finished
The Journey J y
Site Templates p Not all SharePoint sites use the same branding  Team Sites  Publishing Sites  My Sites  Search Site
SharePoint 2013 Team Site Team Sites Publishing not available on these sites Uses Wiki layout Not as customizable SharePoint 2010 Team Site
MySites Uses the Wiki layout
Themes & Composed Looks p Recommended way to brand Foundation and non-publishing sites SharePoint 2010 SharePoint 2013  Needed to be created using MS  Name: the name of your composed look; PowerPoint.  Master page: the master page that you want to use;  Theme URL: the URL to your color palette;  Needed to import and link through CSS  Image URL: the URL to your background sheet into a Masterpage. image;  Font Scheme URL: the URL to your font  Used for MySites and Team Sites scheme;  Display Order: this will be used to arrange your composed looks ordering.
SharePoint 2010
SharePoint 2013 Themes available out of the box Posed l Composed look
The Building Blocks g Master Page Pages Layouts Javascript & CSS Web Parts jQuery
Master Pages g
What do they do? What do they do? y Contains the Defaults visitors Used to Contains Content references to to IE8 even if standardize PlaceHolders to tell CSS and JS, using IE9 branding over SharePoint where to JQuery files. multiple sites load features. i.e. Navigation
Masterpage without Page Layout content
Page Layouts g y
What do they do? y Only available Create custom Loads after Can be used as in SharePoint layouts to add the Master templates for Server, not columns and Page more than one Foundation position page content
Page Layout in Edit Mode with Empty Web Part Zones Page Layout once Image Viewer and Content Editor Web Parts have been added and saved
CSS (Cascading Style Sheets) g y
What does it do? Add colors and Uses “ID” and Gives ability to Referenced in design to HTML “Class” to target create one page vs. structure specific areas for Responsive inline. design Design through Media Queries
Javascript & jQuery J p JQ y
What do they do? y Used to create Allows for Hides Quick Adds custom drop Slideshows Launch functionality to down and custom Navigation forms navigation web parts when needed
Navigation in SharePoint 2010 Navigation in SharePoint 2013
Web Parts
What they do y Placed in page Makes it easier Used to create Can create layouts to add for users to add custom list views custom views functionality images, video with SharePoint for search and media to Designer results sites and pages
Web Part Categories and Web Part Zones Menu used to edit a Web Part. i.e. “Content Editor” Web Part
Demo
Additional Resources CSS:  Heather Solomon’ Chart s  Home Page CSS Reference by Benjamin Niaulin  Branding Series for Beginners by Benjamin Niaulin  20 Useful Resources for Learning about CSS3 Frameworks:  Responsive SharePoint Starter Master Pages:  Jumpstart Branding for SharePoint 2010  Starter Masterpages for SharePoint – Randy Drisgill  Responsive V5 Masterpage for SharePoint 2010 – Kyle Schaeffer
Thank you y
Branding 101
THANKS TO OUR SPONSORS! 45 | SharePoint Saturday Austin 2013

More Related Content

Branding 101

  • 1. Branding 101: g : Concept to Production SharePoint Saturday Austin, TX #SPSATX – March 2, 2013
  • 2. THANK YOU FOR BEING A PART OF SHAREPOINT SATURDAY AUSTIN! • Please turn off all electronic devices or set them to vibrate • If you must take a phone call, please do so in the hall • Wi-Fi is available, you will need your Guest ID/password (at registration desk) • Feel free to tweet and blog during sessions. Remember to follow @SPSATX and tag #SPSATX in your tweets! SharePoint Saturday Austin is hosted by the Austin SharePoint User Group (@AustinSPUG) 2 | SharePoint Saturday Austin 2013
  • 3. About me D’arce Hess Developer, Athlete and Musician PixelMill Blog: www.thebrandingbutterfly.com Website: www.pixelmill.com Email: dhess@pixelmill.com @darcehess www.linkedin.com/in/darcehess/ http://www.youtube.com/user/DarceHess
  • 4. PixelMill Developing SharePoint SharePoint Branding and UI solutions since Specialists 2004 Developer of Your Cost effective SharePoint SharePoint Branding Templates Experts
  • 5. Once upon a time p The owner of your company recently met with a consultant who showed him several examples of what your SharePoint site CAN be. Your boss has now charged you with recreating the same “Wow” factor in your company’ s SharePoint site.
  • 8. Where do you begin? y g
  • 9. j Project Planning g Ideally, you should have the following before beginning your project:  Have a Project Manager Has vision of needs and goals of project. Make sure goals can be measured.  Site Map Architecture What subsites and pages will you have?  Content Architecture What shows up in each part of the site map? i.e. the Home page  Wireframe (Can be adjusted)  Mockup (NOT the same as a wireframe)  Build it  Test it in every browser possible
  • 11. Wireframes Created to get an idea of where general items will be placed for the mockup of the design. They can be adjusted later. NOT FINAL Balsamiq Just in Mind Visio Photoshop
  • 14. Desktop View Tablet View Mobile View
  • 15. Which is best for you? y Responsive Design: Uses CSS3 media queries and proportion-based grids. All elements continue to be shown as screen width changes. Adaptive Design: Uses CSS3 media queries to hide elements as screen width lessens. Progressive Enhancement: Design for the mobile view first, then add elements as the screen increases in width.
  • 16. Did you know? y By the end of 2013, there will be more mobile devices on Earth than people. (Source: Cisco, 2013) Mobile search will generate 27.8 billion more queries than desktop search by 2016 (Source: BIA/Kelsey report, 2012) Smartphones and tablet computers will increase mobile Web traffic by 26 times during the next four years (Source: Cisco Systems, 2011)
  • 17. RWD Considerations Audience Positives Negatives Resources  Mobile Users  One Masterpage that  Bandwidth  Responsive Web Design by adapts to all devices. Ethan Marcotte  Desktop Users  Wide Lists and Site http://bit.ly/bcKwQS  Uses Fluid Grids Settings pages are not mobile friendly  Responsive Framework at  Uses HTML5/CSS3 Media CodePlex Queries http://responsivesharepoint .codeplex.com  Limited Overhead  Configure SharePoint Server 2010 for Mobile Device Access http://bit.ly/cg6Yo
  • 18. p Mockup Use Photoshop to create a layered .PSD of what your site will look like finished
  • 19. The Journey J y
  • 20. Site Templates p Not all SharePoint sites use the same branding  Team Sites  Publishing Sites  My Sites  Search Site
  • 21. SharePoint 2013 Team Site Team Sites Publishing not available on these sites Uses Wiki layout Not as customizable SharePoint 2010 Team Site
  • 23. Themes & Composed Looks p Recommended way to brand Foundation and non-publishing sites SharePoint 2010 SharePoint 2013  Needed to be created using MS  Name: the name of your composed look; PowerPoint.  Master page: the master page that you want to use;  Theme URL: the URL to your color palette;  Needed to import and link through CSS  Image URL: the URL to your background sheet into a Masterpage. image;  Font Scheme URL: the URL to your font  Used for MySites and Team Sites scheme;  Display Order: this will be used to arrange your composed looks ordering.
  • 25. SharePoint 2013 Themes available out of the box Posed l Composed look
  • 26. The Building Blocks g Master Page Pages Layouts Javascript & CSS Web Parts jQuery
  • 28. What do they do? What do they do? y Contains the Defaults visitors Used to Contains Content references to to IE8 even if standardize PlaceHolders to tell CSS and JS, using IE9 branding over SharePoint where to JQuery files. multiple sites load features. i.e. Navigation
  • 29. Masterpage without Page Layout content
  • 31. What do they do? y Only available Create custom Loads after Can be used as in SharePoint layouts to add the Master templates for Server, not columns and Page more than one Foundation position page content
  • 32. Page Layout in Edit Mode with Empty Web Part Zones Page Layout once Image Viewer and Content Editor Web Parts have been added and saved
  • 33. CSS (Cascading Style Sheets) g y
  • 34. What does it do? Add colors and Uses “ID” and Gives ability to Referenced in design to HTML “Class” to target create one page vs. structure specific areas for Responsive inline. design Design through Media Queries
  • 36. What do they do? y Used to create Allows for Hides Quick Adds custom drop Slideshows Launch functionality to down and custom Navigation forms navigation web parts when needed
  • 37. Navigation in SharePoint 2010 Navigation in SharePoint 2013
  • 39. What they do y Placed in page Makes it easier Used to create Can create layouts to add for users to add custom list views custom views functionality images, video with SharePoint for search and media to Designer results sites and pages
  • 40. Web Part Categories and Web Part Zones Menu used to edit a Web Part. i.e. “Content Editor” Web Part
  • 41. Demo
  • 42. Additional Resources CSS:  Heather Solomon’ Chart s  Home Page CSS Reference by Benjamin Niaulin  Branding Series for Beginners by Benjamin Niaulin  20 Useful Resources for Learning about CSS3 Frameworks:  Responsive SharePoint Starter Master Pages:  Jumpstart Branding for SharePoint 2010  Starter Masterpages for SharePoint – Randy Drisgill  Responsive V5 Masterpage for SharePoint 2010 – Kyle Schaeffer
  • 45. THANKS TO OUR SPONSORS! 45 | SharePoint Saturday Austin 2013

Editor's Notes

  1. Talk about what is important in this discussion