As I was researching SharePoint 2010 Design for our new book Beginning SharePoint Designer 2010 (wrox), I collected several links to good resources. I hope you find them as helpful as I did. I tried to bucket them in order of design/dev cycle. Why? Probably because I’m an Information Architect at heart. No reason really.
Key Resources
- The most important source of information is the SDK.
- The other critical SharePoint 2010 Branding & Customization resource is MSDN’s Real World Branding with SharePoint 2010 Publishing Sites
Planning and Design
Usability
- 20 Do’s and Don’ts of Effective Web Design
- Introduction to Good Usability
- 10 Useful Usability Findings and Guidelines
- Universal Usability Guidelines
Information Architecture
- Information Architect by Peter Morville
Wireframes and prototypes
- Mockflow – I love love love this web app. WIreframes, interactive flow and site map all at once.
- Adobe Illustrator - I recommend Adobe Illustrator for the fastest wireframes with loads of content.
- Notable – I use this app religiously. Works so well for remote discussions about visual requirements.
- SharePoint 2010 Visio Stencils by John Chapman
Web Content Management
- WCM improvements in SharePoint 2010 – Mike Ferrara
- Content Strategy – Kristina Halvorson
- SharePoint 2010 Web page planning worksheet – Technet (What a gem for planning SharePoint 2010 publishing sites. Much better than SharePoint 2007’s page planner!
- Plan Pages in SharePoint -Technet
- IntranetFactory – Get a Content Inventory of your SharePoint site
- Jumpchart – a great tool to give to your marketing team to work on content while you are building your SharePoint solution. It may sound hacky but it keeps marketing out of a site that isn’t yet finished. (that’s good for everyone)
User Interface Design
- SharePoint 2010 Layered Photoshop File! – Erik Swenson
- The Pursuit of Interface Design Simplicity -Luke Wroblewski
- Visible Narratives: Understanding Visual Organization -Luke Wroblewski
- Common Visual Design Misconceptions – Luke Wroblewski
Implementation
Microsoft SharePoint Designer 2010
Downloads:
CSS and HTML Resources
SharePoint 2010 requires a better understanding of CSS than you needed in SharePoint 2007. You really should be able to plan your css. If you can use the box model on purpose. If you know how to clear a float. If you understand a stacking index, you are okay. If you don’t, practice on plain old HTML first. Build your own HTML from scratch and style it. Draw a design and build it from scratch Plan it.- XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) -w3.org
- Grid Builder – developer.yahoo.com/yui
- CSS Box Model – css-tricks.com (Advanced CSS design patterns are used in SP2010. You need to understand the impact of changing a value in one place.)
- CSS Overflow (you need to know the impact of this property)
- CSS Overflow (css-tricks.com.)
- JS Sticky Footer If all else fails, use this JS Sticky Footer. Be sure to test your site with real content!! If it’s not in the body of the site, look to the CSS overflow as the culprit.
- Understanding Floats (another advanced technique but helpful alternative to overflow)
Themes
- SharePoint 2010 Themes – Erik Swenson
- How the SharePoint 2010 Theming Engine Works – Buta No IE
- SharePoint 2010 keeps copy of modified theme
General SharePoint CSS and Markup
- SharePoint 2010 CSS Reference chart – Heather Solomon
- The Shiny New CSSRegistration Control in SharePoint 2010 – Buta No IE
- SharePoint 2010 CSS references in Master Pages – Erik Swenson
- https://www.nothingbutsharepoint.com/sites/eusp/Pages/Use-font-face-in-Rich-Text-Editor-of-SharePoint-2010.aspx
SharePoint Navigation
Master Pages
Starter Master Pages
- Starter Master Pages on CodePlex – Randy Drisgill
- Starter-Master-2010-v1.0.txt – Kyle’s SharePoint Karate, theSUG.com
- Fixed Ribbon Starter Master Page – Kyle’s SharePoint Karate, theSUG.com
- Microsoft’s SharePoint 2010 Starter Master Page – MSDN
- GreenShade Free Master Page - TopSharePoint.com
Master Page Tips and Tricks that will save your ARSE
- Fixed Width Master Pages in SharePoint 2010 – Elumination Blog
- How to Create a Fixed-Width 3 Column layout – Tom Wilson, Styled Point
- Imtech Master Pages and Page Layouts Extension – Imtech
- Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues
Simply Cool Tips and Tricks
- Image slideshow with CQWP in SharePoint 2010 - Christian Stahl
- Sing Chan on general and SharePoint 2010 branding – Sing Chan
- Location aware content rollup – Serve’s SharePoint Blog
- Display Dynamic Messages in the Status Bar – Tobias Zimmerman
- Dealing with Background Images in Your Dialog Boxes – Heather Waterman
- How to print SharePoint 2010 page without header and navigation – sharepoint-sandbox.com
Upgrading 2007 Designs
Ribbon
- Some SharePoint 2010 User Interface Terms – Mindsharp
- SharePoint 2010 developer – UI Enhancements – Ted Pattison
- Architecture of the Ribbon – msdn
- Customizing the Ribbon – msdn
- Customizing the Ribbon – Part I– Chris O’Brien Sharepointnutsandbolts.com
- Ribbon Customization Part 2 – Adding Items – Chris O’Brien Sharepointnutsandbolts.com
- Ribbon customizations – dropdown controls, Client Object Model and JavaScript Page Components – Chris O’Brien Sharepointnutsandbolts.com
- Enabling a Button on the Ribbon Based on Selection – Blogs.MSDN.com/SharePoint
- Creating a Custom Ribbon Tab in SharePoint 2010 – SharePoint Solutions.com
- Un-Floating the Ribbon in custom Master Pages – Randy Drisgill
- Ribbon Customization: Changing Placement, Look and Behavior – Tom Wilson, Styled Point
- Customizing Ribbon Positioning – Jonathan Kern UX Developer, SharePoint Foundation
- Code to Hide the Ribbon and Site Actions Menu for Anonymous Users – Elumination (Useful for public facing SharePoint sites)
Mobile
Templates, Tools & Themes
SharePoint Design Galleries
Videos
- Creating complex SharePoint 2010 ribbon elements – Yaroslav Pentsarskyy
- Getting started with SharePoint 2010 ribbon – Yaroslav Pentsarskyy
Developer Links
- Customize the ribbon programmatically from web parts and field controls – (sharepointnutsandbolts .com – Chris Obrien)
- Creating a SharePoint 2010 Ribbon extension – part 1 (Wictor Wilen)
- Creating a SharePoint 2010 Ribbon extension – part 2 (Wictor Wilen)
Posts
