Skip to main content

Posts

Showing posts with the label Design

First YouTube Live Design Stream!

Ok, I finally did it! I did my first live stream on youtube and people actually showed up! Yeah it was not millions of designers looking for help but its a start. It was not promoted, and kinda a last minute thing on my part. I had a few request from some people to do one so I figured why not. If you want to get alerted about my next one please subscribe to my youtube channel here: Subscribe to my Channel I hope to do more steams soon. Please comment on this post on what types of things you want me to cover and I will try my best to fit them all in.

Less than 24 hours until my SP24 Session Starts!

This is very exciting! My Session on creating the ultimate user experience will be live in less than 24 hours! Please make sure to go http://www.sp24conf.com and register before all the slots are taken. I promise that my session will be fun, interactive, and you will absolutely learn some new skills, trips and tricks to create your own great experiences for your users. My Session Details below: SharePoint 2013 Creating the Ultimate User Experience April 17th 10AM EST Below is the session room that you will be able to view the session streaming the Google Hangout, chat, and ask questions. Also as part of my session this Ferrari will help guide us on the path to the ultimate user experience… So Buckle up, and hold on its going to be one hell of a ride! Session Tag: #SP24S005 Follow Me: @ErikJSwenson www.erikswenson.blogspot.com

SharePoint Conference 2014 User Experience

My journey in and around the Microsoft SharePoint 2014 Conference in Las Vegas this year has many high’s and lows. The lows of course are all the times that the casinos took my money but we just wont go there… Here is a little user journey for you on my path to and from the conference. I have been to this conference before and had a really good experience both times. I learned a lot and had a good time doing it. This year was a little different… I was one of the lucky ones that knew on the day that registration opened that I was able to go fully funded by my company Slalom Consulting (More about how awesome they are later in this post…) When I looked at the sessions I was really surprised at the lack of User Experience sessions that were offered. The previous conference was pretty much loaded with UX sessions since the design manager was new and the buzz was all around the new branding look and feel. So I started building MySPC calendar and noticed a trend that I was adding a l...

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ...

SharePoint 2013 Consistent Site Title & Description

With the new year a lot of people are finally making the move to SharePoint 2013. They have either never used SharePoint before and are getting a brand new experience or they have ridden the waves of 2007 and 2010 and are taking the steps to upgrading to 2013. With all the new great features of SharePoint 2013 I am still scratching my head on why the product team removed some basic features such as a consistent breadcrumb, site title, and description. In the video below I describe how to add back in the SharePoint site title and Description and ways that you can transform your 2013 site to a more constant experience that you had in pervious versions of SharePoint. Below are the code snippets that you will need to do this on your own. Site Title: <span class="custom-sitetitle"><SharePoint:ProjectProperty Property="Title" runat="server"/></span> Site Description: <div class="custom-sitedescription"><Sha...

SharePoint 2013 Photoshop Layered file!

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

Session 7: SP 2013 Managed Metadata Navigation

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

Session 6: SharePoint 2013 Composed Looks

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

Session 5: SharePoint 2013 HTML Page Layout

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

Session 4: SharePoint 2013 HTML Master Page

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.

Session 2: SharePoint 2013 Design Manager

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

Session 1: SharePoint 2013 UI Overview

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.

Speaking @ SharePoint Saturday NH 9/22/2012

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!

10+ Years of SharePoint Branding Progress

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...

Hide SP 2010 Page Layout Metadata - WebControls

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...

SharePoint 2010 Chrome Type CSS Classes

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; } ...