Microsoft’s User Experience Guidelines

July 10, 2009

Microsoft published a set of rules (not hard and fast rules though) so that people designers can design well and tested visual design patterns to improve their UI (User Interface). And since they are Microsoft and they want to be popular among the programmers and alike, they made the guideline  absolutely free for download! Here’s the link:

http://download.microsoft.com/download/e/1/9/e191fd8c-bce8-4dba-a9d5-2d4e3f3ec1d3/ux%20guide.pdf

Enjoy!

Advertisements


Resetting Your Styles with CSS Reset

June 5, 2009

Source: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

A very informative article about the CSS Reset design practice which resets the default margins/paddings that a browser applies to elements. Web Browsers most of the time applied a bit of styling to certain elements even if you are not using any stylesheets at all. You can see it in action when you create a <a> element. Most of the browsers render it as a blue, underlined text. But by resetting this behavior, you can view what a certain element would look like with no style applied to it at all.

This design practice was first introduced formally by Andrew Krespanis in his article entitled CSS Negotiation and a Sanity Saving Shortcut.


Content visualization techniques and views

May 29, 2009

Original Source: http://www.noupe.com/javascript/10-smart-javascript-techniques-for-manipulating-content.html

  1. jQuery pageSlide: jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.
  2. Create a simple ul list with a nice slide-out effect for li elements: We want to obtain this effect: when an user clicks on a link (”Hide”), the related
    element disappear with a nice animated slide out effect. A simple way to implement an animated “disappear” effect using MooTools slideOut()
  3. Portfolio Layout Idea Using jQuery: Benjamin Sterling created an interesting portfolio layout and added a nice easing method to the main content panel using easeOutQuad and easeInQuad using jQuery easing plugin.
  4. Creating a Slick Auto-Playing Featured Content Slider: Niall Doherty’s Coda Slider inspired lot of designers and got them started quickly designing around it. Chris Coyier created a Slick Auto-Playing Featured Content Slider using Coda Slider plugin pretty much “out of the box” and added to it.
  5. Easy Image or Content Slider: Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.
  6. mooSlide: mooSlide is nice replacement of the common “lightbox” module. It has some interesting options to influence the look and behaviour of the sliding box.
  7. jQuery.SerialScroll: jQuery.SerialScroll allows you to easily animate any series of elements, by sequentially scrolling them.
  8. Agile Carousel: Agile Carousel allows you to easily create a custom carousel.
  9. Animated JavaScript Slideshow: This extremely lightweight JavaScript animated slideshow script includes a number of cool features to to style your content: description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
  10. Sexy Lightbox 2: Sexy Lightbox 2 is a sexier and lighter clone of the classic Lightbox. Supports displaying images and HTML elements.
  11. UI.Layout: Was was inspired by the extJS border-layout. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.