SharePoint UX: Styling and Branding. Design implementation

Previous related posts:

SharePoint UX: Styling and Branding. Design strategy

SharePoint UX: Styling and Branding . Do it right

Other important course on general UX: Daily UX Crash course (free and simple) 31 days in a row

Last day Kyle Schaeffer in his Styling and Branding class dove deeper into jQuery and how to use it to enhance User Experience in SharePoint portal.

Kyle said it clearly and easy to remember:


CSS is all about presentation

HTML is all about structure

JavaScript is all about behavior. (Jquery should enhance the interface but your basic structure should be functional even without jQuery)

Remember this and you design will be easy to manage.

This post is all about sharing resources that will get you started with such customization:

What to learn:

Fun resource to learn javascript, web fundamentals, jQuery

A free and recommended by Kyle book on html5

Recommended by Kyle a book to buy if a free book is not enough for you

What to do:

Pure design:

Image generator lorempixel

Text generator lipsum

Design site palette easy

Google Web Fonts

Web coding:

SharePoint blank master page starter

An example of quick jQuery magic - WP Tabify: transform a SharePoint web part zone into tabs

jQueryui - animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library

SPservices - jQuery library which abstracts SharePoint's Web Services and makes them easier to use


Do you want implement slide Image Carousel into your page?
Refer to: jQuery Cycle Plugin

The quick signposts to implement it in SharePoint:
Picture Library -> Content Query WP -> Item Style -> jQuery Script with jQuery Cycle Plugin

P.S. Item style is to change the presentation of the data

P.S.S. Not from Kyle but worth to know: Top 10 Mistakes in SharePoint 2010 Branding and UI Design