Jun 21 2009

7 Rich & Creative User Interfaces and How to Create Your Own

Advertisement

There are plenty of perfectly acceptable and functional websites out there that don’t use dynamic content. But what if you want to give your site that little something extra that makes your visitors say “Wow”? What then?

Maybe you’ll find your answer below. There are tons of great, creative user interface options featured below, from modal windows to live search to hover effects. But they aren’t just for looks; each one also adds valuable functionality and improves the user experience of your site. And to help you try out each of these techniques, we’ve also included tutorials and plugins to get you on your way to creating your own dynamic user interface.

Modal Windows

Modal windows, the descendent of annoying popups, are being put to great use all over the Internet. Examples range from using them for simple functions like replacing a dedicated login screen to creating a single-page website that uses modal windows to provide additional content. And there are plenty of usages that fall somewhere in between.

Below are some examples of great modal windows that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Nasi Briyani Lounge uses a modal window to login. It’s a simple but effective use of this option, saving time by not requiring visitors to navigate to a separate page to login.

The Typographic Desk Reference uses a simple modal window to view interior pages of the book. It’s another simple but effective example, and allows the site to be a single page while still providing plenty of information to potential buyers.

The First Twenty is another single-page site that uses modal windows to provide additional information without requiring users to navigate to new pages. The use of a blue shadow behind the window works well with the site’s overall color scheme.

Third & Grand uses modal windows to display video content on their site. Again, it allows the page to be simpler while still allowing more information to be displayed without having to move to a new page.

Art Republic uses modal windows to provide a quick overview of different prints they sell. The window is slightly transparent, giving it a very elegant appearance.

How To Create Modal Windows »

Sliding Layouts

Sliding layouts are most commonly used to create sites that exist on a single page, where navigation causes the page in one direction or another to a new section (rather than linking to a new page). Effectively, this means that an entire website can be built on a single page, speeding up a user’s experience.

They’re also implemented to show additional information under a topic heading or other subject. This type most often pushes content on the page out of the way when they’re expanded, but don’t actually move to a new section.

Below are some examples of great sliders that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Goodworks Media uses sliders to keep their website a single page. When you click on any of the links on the homepage, a slider opens up below, showing the content for that topic. Each slider stays open until you click on it again to close it.

Viget Labs is another site that uses sliders to keep all of their content on a single page. But this time the entire page slides left or right to show new content. They also use a number of other, smaller sliders within in the site to provide even more information. Overall, it’s a very slick interface.

Volll uses a vertical slider to display each section (page) within the site. One of the best bits about this site, though, is that the background makes a complete image (sky, shore, in the ocean, and on the ocean floor). It’s a nice touch to give the site an overall sense of cohesiveness while also giving each section its own look.

Danny Blackman Web & Graphics uses a very deliberate vertical scroll and points it right out on the homepage. Instead of a traditional navigation menu, it simply instructs users to click for the next section. There are interesting transitional elements between some of the sections, too.

SeventhStreet uses a slider that requires users to click and drag to get to the next section. A hover effect instructs users of this. You can also “flick” the slider, a bit like the iPhone interface.

How To Create Sliding Layouts »

Hover

Hover effects are often used to provide additional, useful information without cluttering up a page. Some uses include showing additional information about a file download, a preview of a project or another page, or simply to highlight an element.

Below are some examples of great hover effects that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Legwork Studio uses hover in their portfolio to give a preview of their work. When you hover over a project name, not only does it highlight the name, it also displays a modal window with an image of part of the project. It’s a great way to give a brief overview of their work without requiring users to click through to each separate project page.

Household uses a hover effect that displays the name of the particular project and puts a light shadow over other projects on the page. It’s simple but effective.

Coda uses another simple hover effect to provide more information about the download, such as the file size, system requirements, and a link to release notes, when hovering over the download link.

Dragon Interactive uses a colored hover effect on their navigation. When you hover over any button on the page, it transforms into a blue gradient button. It’s simple but offers a big impact.

Squared Eye uses a hover effect in their slideshow to show the next or previous image when you hover over the respective navigation control.

How To Create Hover Effect»

Slideshows

Slideshows are most often used to display portfolios or similar content, though there are other uses. The key to an effective slideshow is to make it relevant to what your visitors are looking for, whether that’s your portfolio or something else entirely.

Below are some examples of slideshows windows that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

FreeAgent uses a slideshow to show visitors the different kinds of people using their app. It’s a simple but effective use, with obvious “next” and “previous” controls, along with a tabbed navigation for checking out each image.

Tea Round App uses a slideshow with a slider effect to showcase the different parts of their iPhone app. Since the slideshow actually shows up in an iPhone mockup, it’s quite effective.

thirtytwoRound uses a vertical slideshow to showcase their projects. Within each project there’s also a more traditional slideshow with more detailed images. It’s simple but effective. The only drawback is that you can’t use the scroll wheel on your mouse to scroll up and down the page.

Piotr Kulczycki uses a slideshow in his header to showcase some of his travel photography. Navigation is obvious with “next” and “previous” buttons and each image is labeled with the city and date.

Cade Martin Photography uses a very simple slideshow for displaying her work. But because the emphasis should most definitely be on her photography, it’s a stunning example. “Previous” and “next” links are below the images, along with which number slide you’re on.

How To Create Slideshows»

Embedded Audio and Podcasts

Podcasts and other audio content are becoming incredibly common place online. So many designers miss the opportunity these kinds of content provide for creating unique user interfaces. Whether it’s simply offering up more than your standard MP3 or iTunes download or creating a completely custom UI for listening, there are plenty of ways to make the audio content on your site stand out.

Below are a few examples of great embedded audio and podcasts that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Shaun Inman embeds audio into his site between earbuds, allowing the content to be immediately identifiable without any obvious labels.

College Park Church offers a number of options for accessing their online sermons. You can listen online, download an MP3, download a transcript of the sermon, or download a zipped file that includes the audio, transcript, a study guide, the service bulletin, and other information. They also include an option to subscribe via iTunes. It’s an effective layout that offers plenty of options without becoming cluttered by using icons instead of text for each choice.

Grooveshark has one of the nicer interfaces for listening to music online. Searching is simple with results displayed in real time. It’s easy to add songs to your playlist, to listen to those songs, and to control how your playlist is played (via shuffle and repeat options). Overall, a very intuitive and user-friendly interface.

Last.fm’s radio stations use a great interface that integrates images with their audio (kind of like an automatically generated music video) while also providing additional options to users, like the option to download the track, tag it, share it, or get it as a ringtone. Other option are intuitive (a heart to favorite the song, a square for the stop button, etc.)

NPR offers a great interface for getting their podcasts. There are three different options for adding the podcast subscription to iTunes, My Yahoo!, or Zune, as well as for downloading into another podcast tool. Or you can opt to just download the MP3 file for the podcast of your choice. It’s user-friendly and offers the major options their listeners might be interested in without cluttering up the page.

Search

Most sites have a basic search box somewhere. But search is another one of those areas that’s often overlooked by designers. There are tons of different ways to make search more useful and more user-friendly if you’ll only take the time to do so.

Below are a few examples of great search features that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Footnote uses modal windows for offering more information when performing a search. Again, using modal windows for providing additional content without new page loads is a popular theme.

Get Satisfaction uses a real-time drop-down menu to give you search results as you type. The drop-down also offers tips for better searching.

Accept Innovation Community uses a search box with a modal window that shows ideas that have already been submitted, and to offer users the option of adding an idea that isn’t already there.

SideStep is a travel search engine that allows you to search across multiple travel sites at once. The search function for choosing an airport shows real-time results as you type in the name of a city. It’s a very useful feature that saves time for visitors.

Roost uses a standard search box but what sets it apart is the addition of sliders for refining your search results before actually performing the search. Sample searches below that round out the search experience and make it very user-friendly.

Tabbed Navigation

Tabbed navigation is more intuitive than most other types of site navigation. A tab suggests moving from one page to another, as you would if you used a tab within a notebook. But tabs don’t need to be limited to the regular horizontal variety (though those are still very effective). There are tons of other options for using tabs, including outside of your main navigation.

Below are a few examples of great sites with tabbed navigation that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Outlaw Design Blog uses oversized tabs for their primary navigation. It’s immediately apparent to new visitors and extremely effective.

Kuantic uses tabs with vertical text for their main navigation. It’s more unique than standard horizontal tabs while still being very user-friendly.

Fancast uses tabs for navigation their popular videos. The active tab turns into an opaque arrow, while the inactive tabs are rectangular and semi-transparent.

BART uses tabbed top navigation with hover-activated drop-down menus. It’s effective while remaining simple and uncluttered.

Veer’s tabbed navigation uses slightly different shades of gray for each tab and a drop shadow to emphasize their separation. It’s a very elegant design that still has plenty of personality.

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

About the Author

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.

Homepage

Comments and Discussions
  • Robin, 21 June 2009

    I’ve been looking for some tips on how to produce really effective user interfaces – there’s some excellent advice here, thanks!

    • sumit, 22 June 2009

      looking for good design for video sharing site for learning purpose with personalization feature.

  • Jon, 21 June 2009

    Some inspirational sites there. Thanks

  • Nicholas Z. Cardot, 21 June 2009

    Some of those are really cool. Most of those effects I have seen as I have browsed the web but it’s nice to have them all in a quantifiable list. Thanks for taking the time to put this together. It must have taken you a while. Great work.

  • timkg, 21 June 2009

    Thanks for this collection! I specially liked the fact that you combined different examples with links to the sites AND links to tutorials.
    Just one small thing: these aren’t 7 “user interfaces”, but 7 ui patterns. A ui is the complete set of controls and displays of the whole application, a pattern a solution to a specific problem.
    But don’t get me wrong – you helped me a lot with this post! Thx!

  • idur, 21 June 2009

    fantastic inspirational information..
    thanks cameron

  • cssah, 21 June 2009

    Thx,nice collection, I love Volll design.

  • subassy, 21 June 2009

    These are some nice ideas. And that you didn’t split this feature up over 21 different pages is to be commended (thanks).

  • Kiran, 21 June 2009

    Numero Uno post on creative UIs! Kudos girl, wonderful coverage of nex-gen UIs. Only if I can get some design sense ( I am a developer!) , I can put them into practice in various applications. Thanks again!

  • evan tictoc, 21 June 2009

    great collection and tuts, awesome! i more like volll creative interface design. great job girl, thanks.

  • dlv, 21 June 2009

    great post
    it’s really nice explanations, examples and resources
    thanks for share them
    adeux!

  • Manish Kutaula, 21 June 2009

    Gr8 article…loved it

  • Ankit, 21 June 2009

    I was into developing a web application and i had little time to spare for these user interfaces . I initially used some free css template but now i would like to design my own interfaces .
    Thanks !

  • Xun, 21 June 2009

    this is an awesome collections. thanks!

  • Greg Raby, 21 June 2009

    Loads of good stuff, thanks for the sum up.

    One question. Would somebody have a nice tutorial to recreate BART’s nav cross browsers ? I’ve been trying to find some clean stuff but in vain so far.

    Thanks
    greg

  • Maxime Perron Caissy, 21 June 2009

    Good collection, one of the design I especially like is the Squared Eye site, really good typography and choice of colors.

    MPC

  • Rohit, 22 June 2009

    Really a wonderful collection. Worth a stumble from me.

  • Designer Forum, 22 June 2009

    Very Interesting and inspirational and needs to be bookmarked, in modal windows i liked Nasi Briyani Lounge. It not only less annoys the visitors but also doesnt takes much place, hope visitors sees the websites in background am i right? I do have seen some of them.

  • Ijaar, 22 June 2009

    Excellent tips. Really like the Modal Window concept, it is the least intrusive for users and provides a rich experience.

  • Rahul Jadhav, 22 June 2009

    Simply loved this post. Great info. The examples tht you shared were awesome

  • Rahul, 23 June 2009

    Impressive. Cheers to Cameron. Nice example of the latest web trends.

  • Kemp, 23 June 2009

    Really a wonderful collection. Worth a stumble from me.

  • Niraj, 23 June 2009

    thnxx for dis awesome info ive been searching them from weeks thnxxxx…..

  • Ezrad Lionel, 24 June 2009

    You never miss the noupe till the blog.. err.. maybe I should have given that a little more thought

  • Mamdouh, 24 June 2009

    nice,very good thanks alot

  • Aneslin, 25 June 2009

    thanks a lot bro.
    can try these things n my new theme :)

  • robb, 28 June 2009

    i know some of them. but now u mentioned a lot more of similar sites.
    great job there.
    thx for sharing.

  • Alisa, 29 June 2009

    Wow! Thank you for this! First visit here and I love it!

  • Eyitope Lala, 29 June 2009

    Great resources and creativity. Thanks a great deal for sharing!

  • Webhostright, 10 July 2009

    Thanks for these, of them all im most likely to look further into tabbed navigation.

  • Interface, 11 July 2009

    Great collection. Found it through a tweet…I particularly like what Danny Blackman has done with his portfolio!

  • kre8iveminds, 14 July 2009

    Nice collection. This is one of the nice posts I have seen till date.

  • Jaspal Singh, 31 July 2009

    Really inspiring, thanks for sharing.

  • Robomaster @ CoolAppSite, 04 December 2009

    I only wish I had the money to pay for a custom design like these…

  • nev, 03 March 2010

    good thanks

  • Gopal Raju, 05 April 2010

    Wowsome! Great to see some innovative designs :)

  • njmehta, 02 September 2010

    I was into developing a web application and i had little time to spare for these user interfaces . I initially used some free css template but now i would like to design my own interfaces . Thanks !

  • iman, 08 December 2010

    nice job cameron.

  • diwaker srivastava, 06 September 2012

    amazing user interface. Thanks for sharing Dax Hamman. Specially viget labs i like this very much.

search form
 
image description image description