UX & IA Design Thinking

Simply said, "Just because you can, doesn't mean you should" . I have noticed that I am saying this phrase to myself more often than not with SharePoint. When it comes to SharePoint Branding you/client/developers have allot of choices to make. Its never as easy as you think. I find myself going down the rat hole of making it overly complicated not because I don't know what I am doing, but because I know I have the power to do so. Within SharePoint master pages you have the ability to change the default class names. For example if I wanted to change the class name within a custom master page for the quick launch (ms-quicklaunch) to your own custom class (xyz-quicklaunch) its very easy to do in the master page. However you might be getting yourself into allot of headaches because with out really thinking about it you might have totally screwed yourself... Since you now have stripped that main class out of the page all of the default references to ms-quicklaunc...

Master Pages, Page Layouts, and CSS are the building blocks of SharePoint. Understanding the In's and Out's of all of these might require a Master's degree. But don't worry we have tools to make this process allot easier. I guess you could think of SharePoint as a house. To build this house, we need to start with a foundation (Master Page). As we start building we plan out the different rooms in the house and the layout (Page Layouts). Finally once we get the plumbing and electrical in (Controls/Webparts) we take out the paint brushes and start designing the look and feel.(CSS) Within the Master Page's Head is where the default CSS file is referenced. <SharePoint:CssLink runat="server"/> also within the master page is where main content placeholder is referenced. This main content placeholder is the Page Layout for publishing sites. <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> </asp:Content...

SharePoint has quite a few different drop down menus, within this post I will highlight the three primary drop downs and the CSS that drives it. #1 Main Navigation Drop down:   The Main Navigation drop downs are a new addition to SharePoint from its previous SPS 2003 version. Here are the following classes that make up this navigation: Class Name Details .ms-topNavFlyOutsContainer { border:solid 1px #c2dcff; } This is the outer container. Modify this for the outer border. .ms-topNavFlyOuts { background-color:#F2F8FF; font-family:Tahoma; font-size:8pt; } This is the inner container. Modify this for the drop down background and basic fonts. .ms-topNavFlyOuts a { display:block; *width:120p...

After a long time I finally decided to start blogging (Little help from Fox , Paul , and Natalya ). I was first looking for a nice free SharePoint blog site (Wanted to eat my own dog food), but I really could not find one. So I decided to go with Blogger. I figured that I would simply edit my posts in Word 2007 and publish it to blogger… Umm yea it works but not completely. Since Blogger is owned by Google it uses Picasa web as its native Image repository engine. So, low and behold Word does not integrate with Picasa web, and I could not use Word 2007 to post images. So I needed to find another solution. I found an article on the web talking about a new product called: Windows Live Writer … Hmmm never heard of it before. So I took a quick look and I was actually really surprised on how easy it was to use. It integrated with Blogger and Picasa web seamlessly. Here are some of the features that I use within Windows Live Writer: Creation of Categories Ability ...

"CSS" stands for: "Cascading Style Sheets'.  This means that the styles cascade and are applied in order as they are read by the browser. The browser reads CSS from top down. The first style is applied and then the second and so on. So if a style appears at the top of a style sheet and then is changed lower down in the document, the last one wins! For example, in the following style sheet, the div class "text" will be white, even though the first style property applied is black: #text{ color: #000000;} #text{ color: #FFFFFF;} The !important rule is a way to force styles out of order. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, simply add the !important property to the tag. So, to make the div class text always black, simply add the "!important" tag right before the closing semicolon. #...

I started out my career creating custom forms, stationary, and illustrations/diagrams for a book publishing company. You can see my old illustration art here: http://www.noreastdesign.com/erik/ *Keep in mind this was last modified back in 2004, so the resume is way out dated...* Back in 2004 I was working exclusively on a MAC. So when clients (Book Authors) sent us Visio files, we would cringe because all we saw was very rough boxes and squares. As my career changed to consulting, and my PowerBook laptop turned into a Dell Latitude, I started looking at Visio a little closer. After being  given a task to take screenshots and re-draw all SPS 2003 default pages and admin screens in Visio(~70 screens) I started seeing that this application could really be more than boxes and squares. So I put down my Illustrator, Freehand, and other vector programs and really dove deep into what Visio had to offer. I found it actually really easy to create great looking wireframes. Exampl...

This post was originally created in a 26 page PPT deck that I created. Here are the highlights of that presentation. Anything is Possible: With the ability to create custom Master Pages/layouts, the amount of customizations are endless... Examples of Highly Customized MOSS sites: Games For Windows Glue Mobile Games HedKandi Choose Chicago Hawaiian Air And Many More Please keep the following in mind Not all projects are the same. Some require more 1 on 1 attention Some defer all branding look and feel requirements to either their own internal marketing departments or external vendors for definitions. Some allow full creative freedom, while others are pre-defined. The Process The process described in this post is intended for internal small scale sites. And not intended as a basis for all implementations! What is UI Design? User Interface Design is the process of creating a consistent, successful, integrated design solution...