I mentioned recently that I had been blogging less because of a side project I was working on. Time to let the cat of the bag. I've been working with SharePoint 2007 a lot lately, specifically from a branding and UI customization standpoint. This has led to me collaborating with some other folks on a book specifically on the topic of SharePoint 2007 design. The book is with Wrox press and will be released in September of this year. Here is a link to the book on Amazon (yes my ugly mug is on the cover):

Wrox: Professional SharePoint 2007 Design

Also, I have a blog specifically focused on SharePoint design under the pseudo-name "The Mossman":

The Mossman - SharePoint Design Blog

Oh, also I quit my job at a consulting company to focus on SharePoint design full time.

Everyone is familiar with Mark James (FamFamFam) and his famous free icon set known as Silk. It contains over a 1000 16x16 PNG icons that are incredibly useful. Well, some folks have taken it upon themselves to further the collection:

• Damien Guard's 450+ Silk Companion 1
• Daniel MacDonald's 2 State Silk Icon Set (basically grayed out versions of the original Silk set)
• Don Albrecht's CSS Sprite Blueprint Plugin for Silk

Anyone know of any others? Post the link in the comments.

Say what you will about Yahoo, but they have some very cool projects that aren't at all search related. One such project is the Yahoo Design Pattern Library. They have taken it upon themselves to strive for creating a robust set of standard visual tools to aid in true web design. One of the newer additions (at least from what I have seen) is the Design Stencil Kit. This includes design mockups (for all sorts of things like forms, cellphones, widgets, etc) that can be used to create wireframes easily. Let's hope if they get bought out (by whomever, that hot projects like this stick around).

Yahoo Design Stencil Kit

This website attempts to answer the age old question of whether cross browser UI needs to be identical. Though, I question their methodology for answering the question, I applaud the effort.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Was looking for some nice gradients to load into Photoshop and stumbled across Deziner Folio, which has some excellent free gradients (along with some other nice samples and psd's that are free to download).

Check out the download section at dezinerfolio.com

Recently, I was researching which fonts were the most prevelant throughout all types of servers and I came across this study performed by codestyle.org. They have been surveying system owners for several years now and tabulating the data in various ways. According to their top most chart, the following ten fonts are currently the most common:

Mac - American Typewriter - 96.00%
Mac - Monaco - 95.96%
Mac - Arial - 95.83%
Mac - Arial Black - 95.68%
Mac - Helvetica - 95.57%
PC - Arial Black - 95.52%
Mac - Courier - 95.31%
PC - Verdana - 94.37%
PC - Comic Sans MS - 94.04%
PC - Arial - 93.97%

Interestingly enough, my favorite font (Helvetica) and my least favorite font (Comic Sans) made the top 10.

Top 40 Font Survey

Gotta commend these guys for listing the 53 CSS Techniques You Couldn't Live Without. Just listing fifty two would have been lazy... thank god they went the extra mile!

Interesting move by Microsoft... they spent a lot of time and effort making improvements to the Office 2007 UI, and now they are letting developers use the look and feel in their own applications for free. I haven't read through all of the terms of use, but here are some quotes from the FAQ:

• What limitations are there?  The primary limitation is that licensees need to comply with the Design Guidelines.  That means creating an application that has consistent overall functionality as well as look and feel.
• Can any applications use the license? The license is available for applications on any platform, except for applications that compete directly with the five Office applications that currently have the new UI (Microsoft Word, Excel, PowerPoint, Outlook and Access).  We wanted to make the IP available broadly to partners because it has benefits to Microsoft and the Office ecosystem.  At the same time, we wanted to preserve the uniqueness of the Office UI for the core Office productivity applications.   

Apparently developers across platforms can use the UI whether the apps are web based or traditional, you just have to be true to the original design and not compete directly with the main office products.

p.s. Somewhat related free plug for a SharePoint 2007 blog aggregator I created called SharePointFeeds.com, check it out if you are interested in SharePoint.

Some of you may have seen the Royale theme for XP that was based on some UI work Microsoft did for the Media Center XP experience. A little while ago the designer at Microsoft released a secret Noir version of it that is pretty dark, sorta Vista looking. And then for the release of Zune, Microsoft retooled it to add some oranges in it to go with the Zune. Either way, they are pretty nice designs and they are signed by Microsoft so they automatically work in XP without any hacks. Check them out here.

I'm sure most designers out there have the latest Adobe Photoshop CS2 installed on their machine, but if you are like me, you dutifully ignored the Adobe Bridge and Version Cue products. Well, I'm here to tell you that they are pretty sweet. Used in conjunction, you and your team can have the equivalent of a developer's software revisioning repository. If you've heard of CVS, Subversion, or Visual Source Safe, this is kind of what you have... only from a designers perspective. Once installed and projects are setup, you can see all of your team members projects on the network by browsing in Bridge. Also, you can preview PSD's as well as old versions of files with ease. As you are working in Photoshop, rather than saving off Widget_v1.psd and Widget_v2.psd and Widget_v2.bak... you simply 'Save a Version' from inside Photoshop. Then later if you have some sort of emergency crisis, you can check out your previous versions simply by rolling them back.

Now, I know some of you are saying, whoa I can do this for free with Subversion. While that may be true, if you already have the Adobe Creative Suite, you already have this software, and I'm here to tell you the usability of it is superior from a designer's perspective. Also, you aren't limited to Adobe products, you can drop any file in to your Bridge project and every save will be a new revision.

IE Tab (http://ietab.mozdev.org/)
I'll admit it; I have been an IE guy for years. From a design standpoint you absolutely cannot ignore the IE browser share. Depending on the type of site you are running, IE can be upwards of 85% of the traffic. This extension allows you to render IE content right in Firefox. While this is pretty cool... its nothing compared to the ability to flip back and forth with a flip of a switch, comparing design details and tweaking on the fly.

Web Developer (http://users.skynet.be/mgueury/mozilla/)
This is Mozilla's answer to the IE Developer Toolbar (or perhaps the other way around). This basically has everything you'd ever want in a developer toolbar. Disable web content, outline areas, dom inspector, source options, sizing, you name it.

HTML Validator (http://users.skynet.be/mgueury/mozilla/)
I'm not a huge stickler for W3C conformance (as can be seen from this site). But if I'm getting paid to design, I might as well conform when possible. This extension highlights your problems and makes suggestions. Note: if you install the IE Tab mentioned above, make sure you are in Mozilla mode before validating.

FireBug (http://www.joehewitt.com/software/firebug/)
Haven't played with this one much yet, but looks like a pretty darn good Javascript, DOM inspector/debugger.

So, I recently came to the realization that I was burned out on being a lead developer for a while. I decided to take a position as an interface designer for a large consulting firm. While I have always had a descent design eye, this is the first time I've ever been employed fulltime to perform that function. In the process of switching gears I've been refactoring my toolkit to assist me with my day to day duties. Over the next couple days, I'll blog some of the software I'm using to make the design process easier.

I had never realized this before but the FedEx logo has some hidden iconography in it. Take a look and see if you can spot it.

There is a really great interview with the designer of the logo at TheSneeze. He describes the hidden imagery and the design process they used to come upon it.

Blue Vertigo has collected together a nice big pile of design resource links. Including many places to go for free stock photography, vector clip art, free fonts, pixel fonts, logo collections, sound libraries, Photoshop brushes, Poser models, and color mixers. Their site design causes me to have minor seizures, but I can look past it for the quality links. Also, they seem to keep up with their links by removing or marking dead ones.

As programmers we probably spend most of the day staring at our favorite editor (mine is Homesite... though maybe Dreamweaver 8 will finally break me) so we might as well make our experience as comfortable as possible. Changing your editor font can make a huge difference. This site lists many of the best monospace / fixed width fonts with screen shots of what they look like. If you've got a favorite, let me know.

Pretty cool article about how the Xbox folks designed the UI for the new Xbox 360. Long story short, they took their time, included a bunch of design houses, and did a ton of usability testing (I think they also used Visio, and some home-brewed Flash IDE).

Ever wonder how supported a particular font is in various browser configurations? If so check out Fonts for the Web, they chronicle many system fonts and how they came to be, along with listing how supported the font is natively for various site visitors.

Dead pixels in LCD's are annoying. This site claims to be able to help you locate whether your LCD has any. I didn't see anything, so I can't attest to its goodness. Hopefully that means my LCD is fine.

Seems to have some cool complimentary color features: ColorScheme2.

Had to create a banner ad for the first time the other day, so I wanted to get some inspiration. If you'd like to do the same, visit BannerReport.com. Many of them are banners for movies though.

Here's a cool monitor calibration graphic, seems to work better nicely on my monitors.

I'm sure you've seen it before:

This age old text has been used as a placeholder probably more often then any other piece of text. For all the info you can stand on the topic, including a handy Lorem Ipsum generator, visit Lipson.com.

Someone else blogged this a while back, but its still cool none the less. Free graph paper of all shapes and sizes can be printed from PDF's at http://www.incompetech.com/beta/plainGraphPaper/.

Sometimes with logo design a little inspiration goes a long way. Luckily the folks at Digital Wisdom were kind enough to archive mainly of the worlds most popular corporate logos at their site http://www.trademarks-logos.com/.

If you have ever needed to match a paint color to a color you were using on the computer, EasyRGB.com is a life saver. You can RGB or Hex color values to many major paint manufacturers paint colors. Example: FFAB20 matches Dutch Boy 3-Y-7 Comet.

Found this blogged on MediaDiva thought it was cool enough to repost. 300ImagesFrom1800Sites has examples of 300 different web icons categorized by type (print, cart, post, etc.). Pretty useful to get an idea of what is already out there in the way of iconography.

Microsoft has an excellent document on the guidelines they followed while creating their XP icon sets.  They take you through the steps from pencil sketch to final format for an existing XP icon.

An article from the Software Usability Research Laboratory at Wichita State University, published on internettg.org has a very interesting study on where users expect to see content located on a webpage. All in all, I'd say the results are pretty obvious, but the way the data is displayed is worth a look.

Sometimes UI design can be a daunting process even for those of us with considerable experience. When in doubt, you can use design patterns like those archived by Martijn van Welie. A design pattern is a proven methodolgy for solving a well known design problem. Martijn's site has many of the most common problems and solutions for not only web UI design, but traditional and mobile UI design as well.

ColorMatch Remix is a great online tool for creating visually appealling color scheme. You select a starting color and ColorMatch will give you several complimentary and matching colors.

Update: Interactive Learning Unit has another oldie but goodie color scheme helper!

WhatTheFont is an awesome web application for finding the font used in a graphic. The cool part is you can upload an image of the text you are trying to identify, and the application will find the letters and ask you which ones you want to use for identification. You are then presented with a bunch of fonts that could match your graphic.