Branding 101:       g :                  Concept to Production   SharePoint Saturday Houston, TX #SPSHOU April 13, 2013
The Test       1 .Back_Row{       2 move to front       3}
For Coders   1 $(“tr:last”).each(function () {   2 moveForward();   3 });
Welcome to SharePoint Saturday Houston        Thank you for being a part of the         4th Annual SharePoint Saturday    ...
Information• Speaker presentation slides will be available at  bit.ly/GoSPSHOU within a week• The Houston SharePoint User ...
Please Leave Feedback During Q&AIf you leave sessionfeedback andprovide contactinformation in thesurvey, you will bequalif...
About meD’arce HessDeveloper, Athlete and MusicianPixelMillBlog: www.thebrandingbutterfly.comWebsite: www.pixelmill.comEma...
PixelMill       Developing        SharePoint       SharePoint      Branding and UI     solutions since     Specialists    ...
Once upon a time      pThe owner of your company recently met with a consultant who showed himseveral examples of what you...
Web page title            http://www.Ferrari.com
Where do you begin?         y     g
jProject Planning               gThe Path to Success requires:     Have a Project Manager       Has vision of needs and g...
Site Map Example       p     p
WireframesCreated to get an idea of where general items will be placed for the mockup ofthe design.They can be adjusted la...
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 eleme...
Did you know?    y
RWD Considerations     Audience              Positives                   Negatives                   Resources   Mobile U...
pMockupUse Photoshop to create alayered .PSD of what your sitewill look like finished
The Journey    J     y
Site Templates        pNot all SharePoint sites use the same branding   Team Sites   Publishing Sites   My Sites   Sea...
SharePoint 2013 Team Site      Team SitesPublishing not available     on these sites   Uses Wiki layout Not as customizabl...
MySites                         Uses the Wiki layout                  SharePoint 2010SharePoint 2013
Themes & Composed Looks            p         Recommended way to brand Foundation and non-publishing sites           ShareP...
SharePoint 2010
SharePoint 2013                               Themes available out of the box                     Posed l     Composed look
The Building Blocks           g            Master            Page            Pages            Layouts                     ...
Master Pages         g
What do they do?What do they do?           yContains the     Defaults visitors      Used to        Contains Contentreferen...
Masterpage without Page Layout content
Page Layouts  g    y
What do they do?             yOnly available   Create custom    Loads after   Can be used asin SharePoint    layouts to ad...
Page Layout in Edit Mode                            with Empty Web Part                            ZonesPage Layout once I...
CSS (Cascading Style Sheets)             g y
What does it do?Add colors and   Uses “ID” and        Gives ability to   Referenced indesign to HTML   “Class” to target  ...
Javascript & jQueryJ       p JQ y
What do they do?              yUsed to create   Allows for   Hides Quick   Addscustom drop      Slideshows   Launch       ...
Navigation in                  SharePoint 2010Navigation inSharePoint 2013
Web Parts
What they do           yPlaced in page   Makes it easier    Used to create      Can createlayouts to add   for users to ad...
Web Part                                 Categories and Web                                 Part ZonesMenu used to edit a ...
Demo
Additional ResourcesCSS: Heather Solomon’ Chart                   s Home Page CSS Reference by Benjamin Niaulin Brandin...
Thank you      y
Thanks to all our Sponsors!            48
Branding 101 extended
Branding 101 extended
Upcoming SlideShare
Loading in...5
×

Branding 101 extended

585

Published on

Branding 101 Slide deck from SharePoint Saturday Houston 2013

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
585
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Talk about what is important in this discussion
  • Branding 101 extended

    1. 1. Branding 101: g : Concept to Production SharePoint Saturday Houston, TX #SPSHOU April 13, 2013
    2. 2. The Test 1 .Back_Row{ 2 move to front 3}
    3. 3. For Coders 1 $(“tr:last”).each(function () { 2 moveForward(); 3 });
    4. 4. Welcome to SharePoint Saturday Houston Thank you for being a part of the 4th Annual SharePoint Saturday for the greater Houston area!• Please turn off all electronic devices or set them to vibrate.• If you must take a phone call, please do so in the hall so as not to disturb others.• Thanks to our Title Sponsor: 4
    5. 5. Information• Speaker presentation slides will be available at bit.ly/GoSPSHOU within a week• The Houston SharePoint User Group will be having it’s next meeting Wednesday April 17th. Please join us at www.h-spug.org 5
    6. 6. Please Leave Feedback During Q&AIf you leave sessionfeedback andprovide contactinformation in thesurvey, you will bequalified for a book, 5.71"ebook or DVDgiveaway.Scan the QR Code tothe right or go tobit.ly/spshou72 6
    7. 7. About meD’arce HessDeveloper, Athlete and MusicianPixelMillBlog: www.thebrandingbutterfly.comWebsite: www.pixelmill.comEmail: dhess@pixelmill.com @darcehess www.linkedin.com/in/darcehess/ http://www.youtube.com/user/DarceHess
    8. 8. PixelMill Developing SharePoint SharePoint Branding and UI solutions since Specialists 2004 Developer of Your Cost effective SharePoint SharePoint Branding Templates Experts
    9. 9. Once upon a time pThe owner of your company recently met with a consultant who showed himseveral examples of what your SharePoint site CAN be. Your boss has nowcharged you with recreating the same “Wow” factor in your company’ sSharePoint site.
    10. 10. Web page title http://www.Ferrari.com
    11. 11. Where do you begin? y g
    12. 12. jProject Planning gThe Path to Success requires:  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
    13. 13. Site Map Example p p
    14. 14. WireframesCreated to get an idea of where general items will be placed for the mockup ofthe design.They can be adjusted later. NOT FINAL Balsamiq Just in Mind Visio Photoshop
    15. 15. Responsive Design p g
    16. 16. Desktop View Tablet View Mobile View
    17. 17. 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.
    18. 18. Did you know? y
    19. 19. 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
    20. 20. pMockupUse Photoshop to create alayered .PSD of what your sitewill look like finished
    21. 21. The Journey J y
    22. 22. Site Templates pNot all SharePoint sites use the same branding Team Sites Publishing Sites My Sites Search Site
    23. 23. SharePoint 2013 Team Site Team SitesPublishing not available on these sites Uses Wiki layout Not as customizable SharePoint 2010 Team Site
    24. 24. MySites Uses the Wiki layout SharePoint 2010SharePoint 2013
    25. 25. 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.
    26. 26. SharePoint 2010
    27. 27. SharePoint 2013 Themes available out of the box Posed l Composed look
    28. 28. The Building Blocks g Master Page Pages Layouts Javascript & CSS Web Parts jQuery
    29. 29. Master Pages g
    30. 30. What do they do?What do they do? yContains the Defaults visitors Used to Contains Contentreferences 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
    31. 31. Masterpage without Page Layout content
    32. 32. Page Layouts g y
    33. 33. What do they do? yOnly available Create custom Loads after Can be used asin SharePoint layouts to add the Master templates forServer, not columns and Page more than oneFoundation position page content
    34. 34. Page Layout in Edit Mode with Empty Web Part ZonesPage Layout once ImageViewer and Content EditorWeb Parts have beenadded and saved
    35. 35. CSS (Cascading Style Sheets) g y
    36. 36. What does it do?Add colors and Uses “ID” and Gives ability to Referenced indesign to HTML “Class” to target create one page vs.structure specific areas for Responsive inline. design Design through Media Queries
    37. 37. Javascript & jQueryJ p JQ y
    38. 38. What do they do? yUsed to create Allows for Hides Quick Addscustom drop Slideshows Launch functionality todown and custom Navigation formsnavigation web parts when needed
    39. 39. Navigation in SharePoint 2010Navigation inSharePoint 2013
    40. 40. Web Parts
    41. 41. What they do yPlaced in page Makes it easier Used to create Can createlayouts to add for users to add custom list views custom viewsfunctionality images, video with SharePoint for search and media to Designer results sites and pages
    42. 42. Web Part Categories and Web Part ZonesMenu used to edit a Web Part.i.e. “Content Editor” Web Part
    43. 43. Demo
    44. 44. Additional ResourcesCSS: Heather Solomon’ Chart s Home Page CSS Reference by Benjamin Niaulin Branding Series for Beginners by Benjamin Niaulin 20 Useful Resources for Learning about CSS3Frameworks: Responsive SharePointStarter Master Pages: Jumpstart Branding for SharePoint 2010 Starter Masterpages for SharePoint – Randy Drisgill Responsive V5 Masterpage for SharePoint 2010 – Kyle Schaeffer
    45. 45. Thank you y
    46. 46. Thanks to all our Sponsors! 48
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×