10 Creative & Rich UI & How to Create Them

March 29th, 2009

Sometimes it’s just amazing to see, which level of usability, legibility and visual appeal can be achieved using some basic design techniques. In fact, some talented web-developers manage to deliver powerful, functional and gorgeous web-design in “look-and-feel”-style, which is easy to use and nice to see.

The User experience has dramatically improved over the past few years, resulting in rich and responsive user interface. AJAX, javascript and CSS are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

There have been plenty of posts on the number of awesome javascript, Ajax and CSS techniques and where to find them. Today, we will have a look at 10 creative & rich UI in modern day websites and how you can create similar interfaces using the techniques mentioned in this post.

1. Alex Buga (Slider, Draggable Footer and Animated Menu)

Creative & Rich UI interfaces

Beside the absolutely incredible design you will find:

2. Ricoverdeo (Slideshow)

Creative & Rich UI interfaces

A very clean and simple slider, complemented by great illustrations.

  • 2.1 Simple slider with effect on hover state
  • How To » Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content

    Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click or auto slide. Features include: continuous sliding, “go to first” and “go to last” button, hiding controls, optional wrapping markup for control buttons, vertical sliding and multiple sliders on one page.

    Creative & Rich UI interfaces

    Check out the demo

3. jasonreedwebdesign (Sliding Tabs, Accordion)

Creative & Rich UI interfaces

Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages. He also used a nice sliding tabs inside the accordion for a better structure in his interface.

  • 3.1 Sliding Tabs
  • How To » Auto Sliding Tabs

    Sliding Tabs is a mootools plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site. With an extra feature where the Sliding Tabs widget can change to the next or previous pane every few seconds

    Creative & Rich UI interfaces

    Check out the demo

  • 3.2 Accordion
  • How To » Horizontal Accordion

    This plugin provides some simple options to alter the accordion look and behavior.

    Creative & Rich UI interfaces

    How To » Creating Accordions with Mootools

    Creative & Rich UI interfaces

4. Dragon Interactive (Animated Menu)

Creative & Rich UI interfaces

I just love their amazing menu, it seemed to be a flash menu from the first look but after checking the code found it is just plain XHTML, CSS and Javascript.

5. Best Web Gallery (switch page layouts)

Creative & Rich UI interfaces

Most CSS Gallery gives their users the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.

6. Profoto (Breadcrumbs)

Creative & Rich UI interfaces

Profoto has a unique breadcrumb menu. Clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.

  • 6.1 Breadcrumb
  • How To » jBreadCrumb

    jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. As the length of a breadcrumb menu may be very long & the common method used for this problem is limiting th eamount of menus used, jBreadCrumb follows another route.

    Creative & Rich UI interfaces

    Check out the demo

7. Shelfari (Hybrid Buttons)

Creative & Rich UI interfaces

Shelfari has an interesting hybrid button/drop down menu to display actions on books. If you check the code you will notice there were no input fields created for those check boxes, only a background images are used.

  • 7.1 Custom Form Elements
  • How To » Custom Form Elements

    Ever wondered how you could style form elements like checkboxes, radiobuttons and select-fields in a way you like. Custom Form Elements enhances web-based XHTML forms in terms of style, usability and accessibility by using Javascript and/or CSS.

    Creative & Rich UI interfaces

    Check out the demo

8. CSS Ninjas (Cost Estimate Slider)

Creative & Rich UI interfaces

CSS Ninjas provide an interesting cost estimate slider that allows clients to know how much their service will cost by specifying the number of pages that need to be converted.

  • 8.1 Slider
  • How To » jQuery UI 1.7 Slider from a Select Element

    The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. You can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there.

    Creative & Rich UI interfaces

    Check out the demo

9. Facebook (Form Auto-completion)

Creative & Rich UI interfaces

Facebook’s address auto-completion form when you compose a message is one of the best examples of auto-completion feature in a form.

10. Design Flavr (Smooth Slideshow)

Creative & Rich UI interfaces

DesignFlavr, known for their great sources of design inspiration, put together a simple fadeIn / fadeOut slide show to showcase their featured artwork and corresponding descriptions.

  • 10.1 Form Auto-completion
  • How To » s3Slider

    s3Slider is a free plugin built in jQuery for cross-fading slideshow.

    Creative & Rich UI interfaces

    Check out the demo

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

57 comments for „10 Creative & Rich UI & How to Create Them
  1. Allie on March 29th, 2009 at 7:59 pm

    Nice list :D I’ve been looking for a tutorial for switching the layout interface like in #5.

  2. Lasha on March 29th, 2009 at 8:04 pm

    Great list! This saves me an unimaginable amount of time. Being able to do all these things, especially with jQuery, is AWESOME!

    • abhinash chaudhary on October 8th, 2010 at 2:35 pm

      really great one.. very useful also..

      keep it up

      Thanks for the useful post

    • Abhishek Hingnikar on November 7th, 2011 at 8:15 pm

      Aint that intresting that CSS3 can do most of these without even touching JS ??

  3. myfr3ak on March 29th, 2009 at 10:15 pm

    Thanks for the list! Loooove it!

  4. insic on March 29th, 2009 at 10:34 pm

    nice list here. twitting…

  5. macias on March 29th, 2009 at 10:57 pm

    i like goood articles at the morning…

  6. Bogdan Pop on March 29th, 2009 at 11:29 pm

    Alex BUga’s site really is about creativity. From content down to how it works. Or vice-versa.

  7. Ganesh on March 30th, 2009 at 12:20 am

    Awesome !!! Hats off !! I will surely implement these in my site !!!

  8. lslinnet on March 30th, 2009 at 12:20 am

    5. DesignShack (switch page layouts)
    The DesignShack site doesn’t allow you to change layout of the current page but gives you the ability to sort by the layout type you choose.

    but except for that nice article, really like the idea of taking an real world example and then be given the tools to implement something similar your self! :)

    • Noupe on March 30th, 2009 at 3:06 am

      Oops, thanks for pointing that. Fixed it now

  9. joyoge designers' bookmark on March 30th, 2009 at 12:31 am

    nice useful list thanks a lot..

  10. Danh ba web 2.0 on March 30th, 2009 at 1:12 am

    Great list. Thanks so much
    Nice day !

  11. mimo on March 30th, 2009 at 1:33 am

    Amazing list! :D

  12. Rami James on March 30th, 2009 at 1:40 am

    Hey, what a nice list of js interfaces. Thanks for this. I’m working on something now that this would be perfect for.

  13. Patternhead on March 30th, 2009 at 3:19 am

    Another awesome post. Thanks

  14. Brandon Cox on March 30th, 2009 at 3:42 am

    Wow, those are creative! And rich! Thanks for the work of putting htem together for us – quite inspiring.

  15. Design freak on March 30th, 2009 at 4:39 am

    wow, they are amazing…. thanks for the post

  16. Rahul on March 30th, 2009 at 4:45 am

    Thanks for this awesome list of UI interface design and the links too.

  17. Martin Gonzalez on March 30th, 2009 at 5:58 am

    very nice the sidershow jquery!!
    thanks a lot

  18. Sarah on March 30th, 2009 at 6:12 am

    wow, they are amazing…. thanks for the post..

  19. allison on March 30th, 2009 at 6:25 am

    How Alex get the lightbox to load so fast and seamlessly?

  20. Vivianne on March 30th, 2009 at 6:41 am

    I loved this post. Thank you so much! Look forward to more posts like this.

  21. MVCforge for programmers on March 30th, 2009 at 6:48 am

    wow, just nice jquery collections. Thanks.

  22. Jack on March 30th, 2009 at 9:29 am

    nice collection! i like the simple ones better the complicated stuff. if you need diagrams to explain to people what it does, something is kind of wrong.

  23. v-render on March 30th, 2009 at 10:49 am

    great article .. i was finding this for long time .. sliding galleries are really cool

  24. Jon Cage on March 30th, 2009 at 10:58 am

    Some interesting ideas – I’ve been trying to work out a menu system like Profoto’s for a while now and while it’s not perfect, it’s much better than a lot of other ideas I’ve seen / had myself.

    A couple of corrections / notes for your article:

    1.1 doesn’t work in firefox 3.0.8
    1.2 doesn’t work nicely if you try and link directly to a page (page appears and index is correct, but the page content still displays the intro bit, regardless of the page you linked to).

    1.1 and 2.1 have the same image.. ?

  25. Cron on March 30th, 2009 at 10:59 am

    Nice! This will help me a lot in some current projects.

  26. stef on March 30th, 2009 at 4:35 pm

    thanks a lot, very useful collection.

  27. dezynboy on March 30th, 2009 at 7:15 pm

    Amazing list. Most of these are directly applicable to projects i’m working on currently. Thank you for sharing. I’m looking forward to showing my colleagues.

  28. Kontaktlinsen Vergleich on March 30th, 2009 at 11:39 pm

    It looks great and it is funny to play with, but I create some times very nice and funny play websites and the people love the site. No one is converting he or she is playing with the site. I love it and I play also…

  29. WORDPRESSGALA on March 31st, 2009 at 3:32 am

    Great list. Thanks so much!

  30. sean steezy on March 31st, 2009 at 7:13 am

    awesome post, very useful! great resource – thanks!

  31. art2code on March 31st, 2009 at 10:47 am

    Very cool and useful post!
    Thanks a lot!

  32. Idemium on March 31st, 2009 at 11:05 am

    Added to my delicious !
    Thank you for this inspiration.

  33. Janko on March 31st, 2009 at 1:11 pm

    Great resources, thumbs up!

  34. Azad on April 2nd, 2009 at 9:01 am

    Great article. Must show this to the design team.

  35. Mahbub on April 2nd, 2009 at 10:45 pm

    Nice Picks. I likes those slider plugins. Will use easyslider for sure for my next projects.

  36. fakher on April 3rd, 2009 at 12:39 am

    great useful list

  37. joão on April 3rd, 2009 at 6:21 am

    Alex Buga’s website is AMAZING! :o

  38. mehedi on April 5th, 2009 at 1:05 am

    Really rocking! Thats why I love noupe. gr8!

  39. AlfredN on April 7th, 2009 at 8:38 am

    Some of these are just simply amazing. Props man!

  40. Serkan on April 8th, 2009 at 1:13 am

    its Great, Awesome ! Thank you..

  41. Snurf on April 8th, 2009 at 11:01 pm

    Nice list, I will be using some of these in my projects. Thanks

  42. AddictDownload on April 17th, 2009 at 7:25 pm

    I love jQuery!

  43. marko on April 20th, 2009 at 12:53 am

    great collection, thanx ;)

  44. atownsquare on April 21st, 2009 at 6:56 am

    WoW! Thank you!

  45. Marvin on April 28th, 2009 at 2:49 am

    Some are very nice, thanks!

  46. @mimojito on April 29th, 2009 at 8:42 am

    I was trying to locate a working example of Profoto’s breadcrumb nav that you have above but it doesn’t seem to be active any longer. The site is still up but not the crumb examples. Do you have screenshots you can email me so that i can explore in greater detail?

    thanks so much, @mimojito (aka Efren)

  47. Roshith Kaniyamchalil on November 11th, 2009 at 1:03 am

    Great List!! Thank you very much.

  48. Impact Branding & Design on December 14th, 2009 at 8:27 pm

    Great List. Thanks!

  49. Citec on August 2nd, 2010 at 8:12 am

    Great list, Some of are looking very nice. Thanks

  50. vinayaragavan on August 16th, 2010 at 6:50 am

    Excellent Design And Look Awesome

  51. njmehta on September 2nd, 2010 at 7:12 am

    A good informative read about how to create creative and rich user interfaces for your website or blog.

  52. alahi on October 8th, 2010 at 2:25 pm

    nice one ..awesome designs thanks for sharing..

  53. Shamila on June 2nd, 2011 at 7:44 pm

    nice posts.. thanks

  54. Md Shah Alam on December 23rd, 2012 at 2:44 am

    Nice Post, thank for share.