The SharePoint UI / UX Experience

This course is different. It's written for the new breed of web designers, developers and site owners, the ones with no ego and no bone to pick. It's co-authored by a web designer (Heather Solomon, author of the SharePoint Branding Experience) and a web developer (Dustin Miller, author of the SharePoint Web Developer Experience). And we guarantee that you'll leave the SharePoint UI / UX Experience feeling inspired, motivated and confident.

This course has been recently updated to include SharePoint 2013 demos, code and completed solutions. Whether you are using SharePoint 2010 or moving up to 2013, this class will meet your needs.

Learn how to apply your existing web developer and web designer skills to the SharePoint user interface. From planning and taxonomy to advanced CSS and jQuery, this course is custom crafted to speak to the needs of today's web designers and developers — and it's packed with lots of sample code and plenty of hands-on time for both SharePoint 2010 and 2013!

This course is for: CSS Geeks, JavaScript Gurus, SharePoint Rock Stars, Web Designers, Web Developers, Site Owners

SharePoint Version: 2010, 2013

Day 1

Business before technology, no exceptions

Yes, an entire day devoted to the business. No computers. No SharePoint. Just like-minded people committed to doing what's right for the business. It's a compelling story, and everyone has a part to play. Your actions on this day directly affect what kind of deliverables you create the rest of the week. Yeah, that's dangerous for the instructors, but it's a thrill ride for you!

• Who is the audience (user), and what is their motivation?
• What are the priorities and roles for the project?
• How do we write functional requirements?
• What is the information architecture?

Day 2

The SharePoint Design Process

This is not a substitute for our SharePoint Branding course. In fact, it's assumed that you already know how to handle the basics of master pages and page layouts. But we're willing to bet that you are missing out on a lot of what you can do with your custom master pages!

• Creating wireframes and prototypes to support a bulletproof SharePoint design process
• Using semantic code and HTML 5 in your master page
• Hacking and tweaking default SharePoint components to work the way you want

Creative CSS for Inspirational Designs

Our CSS workshop gets you started with CSS. Learn how to take your CSS skills and apply them to SharePoint. We update this content constantly to keep up with the latest trends and concepts in CSS-based web design.

• CSS-based layouts and CSS 3 hotness
• Required selectors and how to override them
• Fixing, floating, pinning and mobi-fying SharePoint sites and content

Day 3

Neuroscience. Yeah, Neuroscience.

You've always been told that, as a web designer, you need to understanding your audience. With a series of group experiments and demonstrations in the classroom, along with powerful stories about the way decisions are made, you'll get a new and more powerful insight into your audience.

• How the brain makes decisions and how emotions influence those decisions
• The right way to design for the way your users think
• Understand and take advantage of the human brain's natural "shortcuts"

JavaScript and CSS (Sittin' in a Tree)

Designers, look to your nearest developer. Developers, look to your nearest designer. Do you feel a little resentment? Fear? Ego? You're going to have to check that baggage. On day 3, we focus on designers and developers working together.

• CSS for accessibility, JavaScript for interactivity
• Using jQuery and other JavaScript libraries for world domination
• Developing thoughtful JavaScript enhancements to support designers
• Writing rational HTML and CSS to support developers

Everyone in the class writes JavaScript, HTML and CSS. Everyone.

Day 4

Crash Course in XSL

Time to collect all that HTML, JavaScript and CSS and use it to create custom views of your SharePoint data. Using the Data View Web Part, you can make SharePoint render any output for any data.

• Data View Web Part how-to
• Writing and re-using XSL
• Any markup from any data, any time

Custom Forms and External Data Sources

We get it. Requirements can really suck the joy out of the work you do. Some of them seem so impossible to accomplish with SharePoint, you just go out and buy a third party component to "make it work and get on with it". Slow your roll, there's more you can do to create a custom SharePoint experience.

• Working with external data sources including databases, external APIs, and social networks like Twitter, Facebook or LinkedIn
• Custom presentation of data entry forms (remember: any output for any data source — that includes forms!)
• Using list forms as a "poor man's publishing" solution

Day 5

Putting It All Together

Time to take everything you've learned and make the final push to SharePoint nirvana. We'll show you how to:

• Package your CSS / Master Pages / images — the right way
• Package custom views and data — the right way
• Minify and combine your code
• Create custom solution packages without using Visual Studio — We give you the tools you need (free ones, and they'll even work on a Mac)

What you need to attend this class

For you:

• A solid foundation in HTML and CSS is highly recommended; JavaScript and XSL experience is a plus
• A basic understanding of the SharePoint framework
• This course is designed for experienced web designers and developers

For your computer:

• SharePoint Designer 2010 (required)

What you will receive from this class

• Full color student reference guides and diagrams with post-class revisions and updates
• Access to recordings of all classroom sessions!
• Sample code and UI components. And we mean A LOT of code.
• Lots of great ideas on how to think outside of the SharePoint box!