UX & IA Design Thinking

Thanksgiving just past and I was in the mood for giving! I just finished my SharePoint 2013 Layered Photoshop file. I have created these and shared them in the past for 2007 and 2010 . For this version I added in a couple of different templates and even some alternative background images for you to mess around with. All text, images, icons, logos, are editable and in their own layer. All fonts are to exact size per the OOTB RTM version of 2013. Use this file as your starting point for all your new 2013 branding projects. Provide feedback by replying to this post! Template Layers: Team Site Community Publishing Portal Download PSD File

When I attended the SharePoint conference 2012 a group of dream team SharePoint designers all came together over lunch to chat about design and the new design features within SharePoint 2013. One of the topics of conversation was around the Snippet Gallery and if there was a list of all the standard OOTB snippets. No one knew of any such list so I figured I would take a stab at it. See below the two galleries one for Master Pages and the other for Page Layouts. Master Page Snippets: Page Layout Snippets: Master Page Snippet Gallery: ~53 Snippets Navigation Top Navigation: The navigation snippets provide common navigation links and menu items on a site page. Vertical Navigation: The navigation snippets provide common navigation links and menu items on a site page. Search Box: Place the search box component on your page to allow users to search your site. Administration Site Title: Using the site title snippet rather than hardcoding th...

After reviewing the main CSS files that make up the base look and feel for the SharePoint 2013 look and feel. The number one font is “Segoe UI” which is applied to the global BODY element. One thing to note that for having over 13,660 lines of CSS within the corev15.css to only have 46 font-family references and 30 of them being the primary ones that shows the consistency and reduction in the amount of CSS used for this new version of SharePoint. Example: font-family:" Segoe UI ","Segoe",Tahoma,Helvetica,Arial,sans-serif; corev15.css : Primary CSS file referenced font-family:" Segoe UI "; (Used – 19 times) font-family:" Segoe UI Semilight " (Used – 7 times) font-family:" Segoe UI Light " (Used – 3 times) font-family:" Segoe " (Used as secondary – 11 times) font-family: Tahoma (Used as secondary – 6 times) font-family: Helvetica (Used as third – 21 times) font-family: Arial (Used as f...

25 FREE copies of my book will be given out Tuesday Nov. 13th 1pm at EMC Booth #629 . I will be there to Sign the books and provide a Q&A session after. Come on by to say hello! Add this event to your MySPC calendar!

In this session I will be going over how to configure your navigation to point to a managed metadata term service.

In this session I will be going over how to change your site using composed looks (Themes) and also creating your own composed look.

In this session I will walk you through creating a new HTML Page Layout and adding snippets.

In this session I will describe the process of taking an existing HTML file and converting it into a HTML Master Page within SharePoint 2013. The HTML file used is based on the Twitter Bootstrap responsive design.

In this session I will be reviewing what device channels are and how to use them.

In this second session I will be giving a brief overview of the 8 steps within the new SharePoint 2013 Designer Manager.

This is the first of a 7 part video blog series. Thank you for your patience. In this session I will be going over the SharePoint 2013 UI Overview and some of the design changes that have been made for the new version of SharePoint 2013.

Thanks for all the attended my session on Saturday 9/22/2012. The demo gods were with me and all things worked out. Per your request I have uploaded my presentation deck here: Erik Swenson SharePoint Saturday NH SharePoint 2013 Branding Because most of my presentation was in demo mode and it was not recorded, I am going to switch up my blog a little bit and start adding in some short recorded sessions. I have a 7 part series that I plan on having available shortly, which includes written and video how to’s. Session 1 – SharePoint 2013 UI Overview Session 2 – 2013 Design manager Overview Session 3 – Working with Device Channels Session 4 – Convert HTML to Master Page Session 5 – Creating page Layouts and using Snippets Session 6 – 2013 Composed Looks Session 7 – 2013 Managed Metadata Navigation If you have any suggested topics that you would like me to cover please reply to this post. Thanks!

I will be presenting a session on “ Intro to SharePoint 2013 banding and design ”. Here are some of the topics that I will hopefully be able to cram into the 1 hour session. I could easily spend well over 1 hour on each one of these topics… SharePoint 2013 UI Overview Design Manager Snippet Gallery Composed Looks (Themes) Device Channels SharePoint Designer 2013 Managed Metadata Global Navigation SharePoint Saturday NH Logistics: Where: Southern New Hampshire University (SNHU), Manchester, NH When: September 22th, 2012, Saturday Time: Registration 8-8:30am EST Cost: FREE! Website: http://www.sharepointsaturday.org/nh/default.aspx Twitter: @ErikJSwenson | #SPSNH I will be giving away a couple of my books out as prizes! Hope to see you there and do a little meet and greet after the session!

Since SharePoint was first introduced in 2001its standard visual design appearance has taken on quite a few different forms over the years. The base core features of document management and collaboration have stayed pretty static but the introduction of publishing and social features has transformed the product into a Swiss Army knife and can be used for many different things. Here is a look at its progress from 2001 all the way through 2013. Microsoft SharePoint Portal Server 2001 Core Features: Base included document management, search and what was called then a dashboard site to display webparts. Visual Design: This was before my time but from the looks of it the design came with a standard header that you could customize the logo or title of the site. Microsoft SharePoint Team Services 2002 Core Features: Ability to create lists and HTML pages. Visual Design: The design got a slight change to the header and also add...

In some cases when you need to add a footer to a custom brand you will notice that on pages that have really tall left navigations (Quick Launch) and a small content area the left side navigation will overflow and display on top of your custom footer. The reason for this is that your left side navigation is floating to the left of the content area. And therefore it is no longer being considered for height and will ignore your footer. By default your content area will push your custom footer down as it grows larger. Here is an example where the left navigation is really long and floats on top of the custom footer: To fix this you will need to set the footer div to have a inline-block property and also set the width to 100%. Your custom footer will be included right below that DIV. See below example. <div id="s4-bodyContainer">     <div id="s4-mainarea">         <div id="s4-l...

I just recently needed to add in the default audience field control to a publishing page layout. So that when you edit the page you can easily specify the target audience for the page without having to go to “Edit Properties” in the ribbon. The only issue is that it is not as simple as you would think. In my previous post I provided detail on how to Hide SP 2010 Page Layout Metadata – WebControls however the “Audience” field control requires some additional references to the Microsoft.Office.Server.UserProfiles field types. I found this blog here: Showing the Audience Target field in an EditModePanel #SharePoint #SP2010 #in #ProjectServer #PS2010 that really helped with solving my problem. So basically to add in the audience field control to the page in edit mode you would simply have to do the following within your custom page layout. Add in the following to the reference section near the top of your page layout. <%@ Register TagPrefix="OfficeWebControls" ...

If you ever needed to add in the local time and a date for the logged in user to your custom page layout or master page below are some ways that you can achieve this. Option #1 The first method uses a SharePoint Portal Web Control to display the logged in users current time. This control is normally used on the profile pages to show current time for the profile that you are viewing. One benefit that you get from this approach is that if you have users that view the site from multiple locations around the world they would see the current time based on the time zone that they have set in their my site Profiles. To add this web control to your master page do the following: Add in the following registration to the top of the master page: <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> Ad...

Have you ever struggled with the summary view for Links, Announcements, Events, Documents, Discussions or any other major type of SharePoint 2010 list or library on publishing pages? Well if so I hope this post will help with the identification/resolution of this bug. Hopefully Microsoft will supply a fix for this someday... Here is a common scenario: You create a SharePoint Publishing Site or you create a blank site and then enable the publishing feature. From that publishing site you create a simple links list. You add in a few links and want to then display it on your publishing page. You edit the publishing page and then click on a webpart zone and add the newly created links list on the page. From here instead of configuring the webpart to display in summary view you simply keep the current view and check the page in. You then edit/check out the page again and decide to modify the links list to show in “Summary View” to get it to display like a bulleted list...

In this post I will walk you through the process of adding in “Hidden” metadata to your page layouts so that they are only visible when editing the page. For example if you want to create a news article with categories, start date, end date, keywords, and other metadata that might not be relevant to the consumer then instead of forcing your content authors to create content in the edit mode and then force them to update metadata by editing the page properties why not have them all on the page. This allows for a single page authoring experience. This post also provides the specific field names for the most common SharePoint 2010 base columns and web controls. (Really good stuff) Microsoft.SharePoint.WebControls Namespace Standard columns that are used for most metadata column types. URL: http://msdn.microsoft.com/en-us/library/ms413880.aspx Example: <SharePointWebControls:RichTextField FieldName="MultipleLines" runat="server" /> Microso...

For content authors the ability to stylize web parts with just a few simple clicks is a big win. In some cases you might want to emphasize a web part on the page and make it stand out. There are basically 4 main web part styles/chrome that you can apply to any webpart. You will notice below that the chrome type “None” and “Title Only” do not have a unique class name so they will share the same style. The “None” style simply does not show the web part title. Chrome ( None ): . ms-WPBody { font-size:8pt; font-family:verdana,arial,helvetica,sans-serif; } Chrome ( Title Only ): . ms-WPBody { font-size:8pt; font-family:verdana,arial,helvetica,sans-serif; } Chrome ( Title and Border ): . ms-WPBorder , .ms-WPBorderBorderOnly{ border-color:#9ac6ff; border-width:1px; border-style:solid; } Chrome ( Border Only ): .ms-WPBorder, . ms-WPBorderBorderOnly { border-color:#9ac6ff; border-width:1px; border-style:solid; } ...