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. 

I love minimalist designs. The “less is more” philosophy is an important idea in web user experience…so why not translate this onto a business card? 

I recently ran into this business card concept on Guy Kawasaki’s (web startup guru) blog, and thought it was a brilliant example of great UI. Often, the first impression you make with a business card can lead you to a path to getting remembered…or forgotten. Much like websites, business cards must be clear, to the point, and usable…otherwise, it merely becomes pocket garbage. Props to the designer.