This blog has moved here: woorkup.com
Wednesday, September 10, 2008

7 Stunning tutorials to design modern interfaces for websites

Are you looking for some ideas to design an original interface for your next website project using the most popular JavaScript Frameworks such as Prototype, MooTools and Scriptaculous?

Take a look at this short compilation which includes a Facebook-style lightbox; a nice interface library to develope advanced interfaces for web applications, web sites and widgets; a gallery/slideshow system which simulate Flash animation; an image slider to create Flickr-like slideshow; an advanced image gallery to design Apple-like images galleries; an ajax based slider and a ligtbox.

1. FaceBoxFacebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
Read more...


2. MochauiMochaUI is a beautiful web applications user interface library built on the Mootools JavaScript framework to develope quickly Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows and Modal Dialogs.
Read more...

3. SmoothGallery 2.0 This javascript gallery and slideshow system (using mootools v1.11), allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website. Absolutely Awesome!
Read more...

4. MooSlide revamp slider Revamp of mooSlideBox is an ajax based slider easier to use than ever before, as it now has become a class. There are some options that can influence the look and behaviour of your box. Of course you can also have more than one box on your page! In addition you can now define, from where the box should fly in: from top or from bottom ( sample links show both variants ).
Read more...

5. MooFlow Mooflow is an advanced image gallery with the following features:autoresize on changes of window dimensions, fullscreen option, scrolling with mouse wheel, scrolling with key input (left and right cursor), autoplay presentation loop, reflections via javascript, load images via json (with event or on startup), load images from a html-source with selector-filter, creates the UI automatically, UI skinable via CSS,fullsize viewer option, can run multiple instances and more.
Read more...

6. Simple images slider to create Flickr-like slideshows If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.
Read more...

7. Slimbox, the ultimate lightweight Lightbox clone Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
Read more...

blog comments powered by Disqus
Ryan said...

Nice list. Thanks!

Sean Nieuwoudt said...

great stuff as always Antonio!

Rodrigo said...

hey, muy buena lista
muchas gracias

Anonymous said...

Cool stuff. Shadowbox is a great one too.

web blog said...

very nice information blog

web blog said...

very nice information blog

Anonymous said...

Great list for those familiar with the workings of MooTools. I don't, yet every site seems to assume prior knowledge.

Roho said...

I like the the list, but I think the title is misleading. This is not about interface design it is about libraries for the implementation of interface elements.

Interface Design is about what it looks like and how the user uses it.
These libraries are mainly the technical schaffolding for getting these things done.

Still a great list

Sugar Web Design said...

Thanks Antonio, I'm going to use Slimbox right now. Just what I was looking for. I agree with roho though, your title is a bit misleading. Still great info though.

Jimbo said...

Mille grazie!

Andreas said...

The MooFlow thing is quite slow, isn't it? At least for me (Firefox, Opera, Epiphany). Perhaps there is a more smoother javascript solution like the solution on amazon.com (unfortunately flash)...?

Sexy pinay said...

thank you man great tips! i love it!

bloitt said...

I like the list and I really admire your blog.

If I can make an addition to the list, I will go for rokbox from rocketwerx.com as it supports a large number of media formats.

By the way, thanks for your great tutorials!

fma said...

@Andreas: Have you tried Chrome? ;) Seriously, though, it IS smoother.

lostkore said...

Grazie Antonio!
Es una gran colección.

Anonymous said...

Don't forget YUI!

Javascript Library
http://developer.yahoo.com/yui/

Interface Library
http://developer.yahoo.com/ypatterns/wireframes/

It's an awesome library!

(also you can skin you interface interfaces)

Abhisek said...

so now it's daily inspiration, huh? Cool. Very cool

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Support this blog with a micro subscription
If you like this blog you can contribute with a micro subscription via PayPal.
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News
Web Templates
Stock Vectors
THE CSS AWARDS