methink.com

It’s arguable whether or not UX folks need to know or understand CSS. Personally, when I design wireframes or mockups…I design for the browser. I like getting as close to the final product as possible, with click actions, scrolling, and all other benefits you get from seeing and experiencing the mockups on the browser level that you just can’t get with paper or photoshop mocks. I feel it helps both programmers and business folks conceptualize your UX and design ideas more effectively.

Also, I come from the school of table based layout. To get just the perfect spacings and design I need, tables and the ability to nest tables work pretty good. From a design and UI standpoint…I feel traditional tables based layouts can get me just about 90% of what I need as a UI guy. 

So why CSS? Trust me…like anyone, I’m adverse to change, but picking up CSS skills is definitely worth the learning curve. Without going too much in depth, first CSS encourages semantic markup. In summary, a well designed semantic site further separates code/data from presentation layer (benefits of which should be welcomed and understood by all designers). It allows for easily transformable design on the fly (ala the famous CSS Zen Garden). And in these days where the medium can be as varied from browsers to mobile devices to API’s, this separation is crucial.

Also, a well designed CSS markup clearly defines each element on the page, and having semantic naming conventions on site elements can go a long way in working with a team of developers and even with ongoing site maintenance. If designers and UI people worked in a bubble, perhaps tables would be pretty sufficient. But in the real world, where projects include multiple designers and programmers, it’s important to have a system to define and understand every element on the page as unique. 

I must admit, coming from the old school, I’m still learning to incorporate CSS into my best practices…yup still intermingling a lot of tables into my CSS due to speed of development vs learning something new…but you gotta start somewhere. Anyways…here’s what’s in my toolbox to help understand and develop CSS better:

Top 5 Tools for Working With CSS

1. Dreamweaver (been using this long before even UltraDev! Hard to let go of this great WYSIWYG editor…but it needs to be updated with better CSS support and make it run faster for Macs!) 

2. CSSEdit (a highly popular CSS IDE for Macs)

3. Firebug (an awesome Firefox add-on to view CSS on any website. You can even manipulate website on the fly by editing their CSS. A great way to see other designer’s best practices.)

4. Web Inspector (the Firebug alternative for Safari)

5. CSS-Tricks.com (a great video tutorial/podcast site to get you started step-by-step with CSS)

Yahoo just posted their new Wireframe Stecil Kit! It’s targeted towards UI designers to use in their wireframes to represent website elements offered through their patterns and YUI libraries. 

These stencils are free for download and seem pretty useful in offering some common graphical elements quickly. If your backend team already uses Yahoo’s YUI library…then these are pretty perfect for your wireframes. 

If you’re not yet familiar with Yahoo’s Developer Network, then browse around cause there’s a lot of valuable UI info there, and many of Yahoo’s own UI best practices spelled out. 

Ok, I know, this looks like something out of the Barbie website. But I’ve been using Skitch for a couple days now and find that it’s really a cool tool for simple image annotation and design collaboration. I wasn’t even sure to categorize this post as a “Tools of the Trade” or as a “Usability Design” example of great UI…so, I categorized it as both!

Tools of the Trade:

As a UI tool, Skitch is a great little gadget that I use to quickly annotate notes on mockups, designs, and wireframes. Just grab the design element in question and quickly mark it up with notes and comments. Another click of a button lets you email the image or send it via bluetooth to another device! It’s a simple and effective way to collaborate on designs and ideas. You can even quickly and easily upload onto the Skitch.com website to share collectively on the internet. (Here’s an example I created with Skitch in less than 1 minute)

Usability Design:

This is a great example of intuitive user interface. Every function is self-contained in the window container. It’s amazingly fun to use, and I no longer need to open up Mac Grab and Photoshop to do some simple image manipulations. Definitely a useful time saver! When I imagine future interfaces taking advantage of surface and multi-touch technology…I imagine an application like this, where most of the interaction can be accomplished by directly interfacing with the various areas of the application by touch. Even the “Save Image” function can be accomplished by a simple dragging of the bottom tab into a folder, desktop, document, etc…brilliant! 

Hard to describe how intuitive the interface is…just download Skitch and try it yourself for free! Here’s a cool video that shows you what you can do. Skitch definitely has a place on my Dock! (oh yeah, sorry PC friends…Skitch only available for Mac).