10 Creative & Rich UI & How to Create Them
- By Noupe Editorial Team
- Posted in DESIGN
- 57 comments
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)
Beside the absolutely incredible design you will find:
- 1.1 A menu with a nice animated effect on hover state
- 1.2 A sliding post panel.
- 1.3 A draggable footer
How To » Super elastic effect to design high impact web menu
This tutorial explains how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework.
How To » Elegant animated weekly timeline for websites
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects.
How To » Drag & Drop and Resize in an event delegation fashion
Only the parent element is handling events. In this case it’s the editor container element. If you add dynamicaly elements into the container you don’t have to bind any events on it.
2. Ricoverdeo (Slideshow)
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.
3. jasonreedwebdesign (Sliding Tabs, Accordion)
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
- 3.2 Accordion
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
How To » Horizontal Accordion
This plugin provides some simple options to alter the accordion look and behavior.
How To » Creating Accordions with Mootools
4. Dragon Interactive (Animated Menu)
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.
- 3.1 Animated Menu
How To » Animated Menus Using jQuery
5. Best Web Gallery (switch page layouts)
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.
- 5.1 Switch Page Layouts
How To » Easy Display Switch with CSS and jQuery
A simple way to allow your users to switch page layouts by using CSS and jQuery.
6. Profoto (Breadcrumbs)
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.
7. Shelfari (Hybrid Buttons)
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.
8. CSS Ninjas (Cost Estimate Slider)
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.
9. Facebook (Form Auto-completion)
Facebook’s address auto-completion form when you compose a message is one of the best examples of auto-completion feature in a form.
- 9.1 Form Auto-completion
How To » FCBKcomplete v 1.09
Fancy facebook-like dynamic inputs with auto complete & pre added values.
10. Design Flavr (Smooth Slideshow)
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.
Allie, 29 March 2009
Nice list :D I’ve been looking for a tutorial for switching the layout interface like in #5.
Lasha, 29 March 2009
Great list! This saves me an unimaginable amount of time. Being able to do all these things, especially with jQuery, is AWESOME!
abhinash chaudhary, 08 October 2010
really great one.. very useful also..
keep it up
Thanks for the useful post
Abhishek Hingnikar, 07 November 2011
Aint that intresting that CSS3 can do most of these without even touching JS ??
myfr3ak, 29 March 2009
Thanks for the list! Loooove it!
insic, 29 March 2009
nice list here. twitting…
macias, 29 March 2009
i like goood articles at the morning…
Bogdan Pop, 29 March 2009
Alex BUga’s site really is about creativity. From content down to how it works. Or vice-versa.
Ganesh, 30 March 2009
Awesome !!! Hats off !! I will surely implement these in my site !!!
lslinnet, 30 March 2009
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, 30 March 2009
Oops, thanks for pointing that. Fixed it now
joyoge designers' bookmark, 30 March 2009
nice useful list thanks a lot..
Danh ba web 2.0, 30 March 2009
Great list. Thanks so much
Nice day !
mimo, 30 March 2009
Wow!
Amazing list! :D
Rami James, 30 March 2009
Hey, what a nice list of js interfaces. Thanks for this. I’m working on something now that this would be perfect for.
Patternhead, 30 March 2009
Another awesome post. Thanks
Brandon Cox, 30 March 2009
Wow, those are creative! And rich! Thanks for the work of putting htem together for us – quite inspiring.
Design freak, 30 March 2009
wow, they are amazing…. thanks for the post
Rahul, 30 March 2009
Thanks for this awesome list of UI interface design and the links too.
Martin Gonzalez, 30 March 2009
very nice the sidershow jquery!!
thanks a lot
Sarah, 30 March 2009
wow, they are amazing…. thanks for the post..
allison, 30 March 2009
How Alex get the lightbox to load so fast and seamlessly?
Vivianne, 30 March 2009
I loved this post. Thank you so much! Look forward to more posts like this.
MVCforge for programmers, 30 March 2009
wow, just nice jquery collections. Thanks.
Jack, 30 March 2009
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.
v-render, 30 March 2009
great article .. i was finding this for long time .. sliding galleries are really cool
Jon Cage, 30 March 2009
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.. ?
Cron, 30 March 2009
Nice! This will help me a lot in some current projects.
stef, 30 March 2009
thanks a lot, very useful collection.
dezynboy, 30 March 2009
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.
Kontaktlinsen Vergleich, 30 March 2009
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…
WORDPRESSGALA, 31 March 2009
Great list. Thanks so much!
sean steezy, 31 March 2009
awesome post, very useful! great resource – thanks!
art2code, 31 March 2009
Very cool and useful post!
Thanks a lot!
Idemium, 31 March 2009
Added to my delicious !
Thank you for this inspiration.
Janko, 31 March 2009
Great resources, thumbs up!
Azad, 02 April 2009
Great article. Must show this to the design team.
Mahbub, 02 April 2009
Nice Picks. I likes those slider plugins. Will use easyslider for sure for my next projects.
fakher, 03 April 2009
great useful list
joão, 03 April 2009
Alex Buga’s website is AMAZING! :o
mehedi, 05 April 2009
Really rocking! Thats why I love noupe. gr8!
AlfredN, 07 April 2009
Some of these are just simply amazing. Props man!
Serkan, 08 April 2009
its Great, Awesome ! Thank you..
Snurf, 08 April 2009
Nice list, I will be using some of these in my projects. Thanks
AddictDownload, 17 April 2009
I love jQuery!
marko, 20 April 2009
great collection, thanx ;)
atownsquare, 21 April 2009
WoW! Thank you!
Marvin, 28 April 2009
Some are very nice, thanks!
@mimojito, 29 April 2009
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)
Roshith Kaniyamchalil, 11 November 2009
Great List!! Thank you very much.
Impact Branding & Design, 14 December 2009
Great List. Thanks!
Citec, 02 August 2010
Great list, Some of are looking very nice. Thanks
vinayaragavan, 16 August 2010
Excellent Design And Look Awesome
njmehta, 02 September 2010
A good informative read about how to create creative and rich user interfaces for your website or blog.
alahi, 08 October 2010
nice one ..awesome designs thanks for sharing..
Shamila, 02 June 2011
nice posts.. thanks
Md Shah Alam, 23 December 2012
Nice Post, thank for share.