Starting from 1 easiest to 5 hardest (requires dev skills)

1. Office 365 (Personal and Tenant Wide) Themes – You should start here.

Office 365 themes
041116_1350_5WaysofBran1
After you’ve created your theme
  • Custom logo optionally clickable: Select the image and upload your own JPG, PNG, or GIF with a resolution of 200 x 50 pixels, no larger than 10 KB. This appears in the top navigation bar on every page.
  • Top Nav Background image: Your own JPG, PNG, or GIF, no larger than 15 KB. The background image appears in the top navigation bar on every page.
  • Prevent users from overriding theme: Option to enforce theming at the user level so that everyone in the organization sees the theme you create. The exception to this is a high contrast theme used for accessibility purposes.
  • Accent color: Select a color to use for the app launcher icon, mouse over color, and other accents.
  • Nav bar background color: Select a color to use for the background of the navigation bar. Appears at the top on every page.
  • Text and icons: Color to use for the text and icons in the top navigation bar.
  • App menu icon: Color to use for the app launcher icon
You’ll see your new theme on the Office 365 admin center right away and after a short delay, you’ll see it throughout Office 365 including Outlook and SharePoint pages. You can remove your custom icon or custom colors at any time. Just return to the theme page and choose Remove custom theming or Remove custom colors.
IMPORTANT: In addition to customizing your theme, you can add custom tiles to the My Apps page and then add them to the app launcher or add them to the navigation bar.
Office 365 Branding goes beyond SharePoint
When considering any a custom UI for SharePoint, always consider other services such as One Drive, User Profiles, and Delve. Any CSS, JS, or master-page customization applied to SharePoint as these will not automatically propagate across these other workloads. The only shared tool at this point is the top suite bar. Fortunately, this for the most part is customized by using Office 365 themes. Themes are limited, but this is where you should start. Outlook does have some personal theming, but shouldn’t need much branding anyway. For email you could use Outlook.com add-ins, and recommend company signatures for consistency.
Refrence link : https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530?ui=en-US&rs=en-US&ad=US
2) Office 365 site options: SharePoint Site Look and Feel branding “Change the Look”
Another good place to start with changing the look of your site while clearly staying way within boundaries is with the Look and Feel section of site settings.
Add a site title, pick a logo, add simple base colors. I would avoid doing too much here or your site will look like it came from FrontPage 98. The out of the box theming engine of composed looks are actually quite ugly in my opinion, but the ability to customize these is in the SharePoint UI and very easy to do. Site themes and composed looks are well covered on the web. The “Change the look option” site theme has skins and additional colors. Changing the navigation is simple and this also is benign and expected. 
041116_1350_5WaysofBran3
3)  Provisioning template in PnP Partner Pack for responsive UI for Office 365 SharePoint Online
Alternative CSS is much more lightweight, but still will require testing and maintenance. Join the Office Dev PnP community where you can share code and best practices. First, use alternative CSS instead of adding references to files on your master pages. You can test in our browser by changing the browser size, but ultimately need to test. A good practice is having a couple of tenants… one in early adopter with a handful of test users and the other in the normal adoption rate.

4) Office UI Fabric
“Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language. The framework is used internally on products within Office 365—such as our suite branding, OneDrive.com, Outlook.com, Delve and the Video Portal. With Office UI Fabric you can apply simple CSS styles to make your web applications look and feel like the rest of Office. The styling takes into account typography, color, icons, animations, responsive grid layouts and localization.
5)Use JavaScript Injection to embed custom scripts and/or third-party libraries into your sites
“You can use the Office 365 JavaScript UI controls to add an Office 365-style navigation bar to your app and also let users access data about people in Azure Active Directory (AAD). These JavaScript UI controls do not require server-side code, and can be integrated into a single-page application (SPA) with just a few lines of code.”
The Office 365 JavaScript UI controls are supported by the following web browsers:
  • Internet Explorer 10+
  • Chrome 43+
  • Firefox 39+
Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon