AddyOsmani.com | Where Web Businesses Grow

 

Hi guys. Today I wanted to share with you interface tutorials for some of the ideas I’ve found quite inspiring over the past few weeks. In this post you’ll find tutorials that will teach you how to create easily switchable gallery views, a 3D rotating share button carousel, the Facebook Admin Panel and much more. We often come across small pieces of design that make us pause and think .. “Wow. I really want to do that..” so I hope that this post goes a little way towards helping you add a few special touches to your own interfaces.

 

Before we begin, I just want to let everyone know that I’m currently working on a really interesting post on how to create brand new User Interface form elements based on the logic *you* define. Think about radio buttons that have more than just two states or checkboxes which do more than just check or uncheck. It’s a topic I don’t believe has been covered in depth anywhere else before so hopefully it will be a good read. I’m hoping to have it finished some time this week so stay tuned for some more jQuery action soon!. Anyway.. let’s charge forward with this post.

 

 

How to create the image-less from Google.com

 

Recently, Google invested in a team of graphic designs and engineers for one simple goal – to create a set of form buttons that had all the style of their image-counterparts but didn’t actually contain any (really..a whole team? Yipes). The benefit of this is that they created visually appealing buttons through CSS and could thus offer users a fast homepage experience regardless of whether they were browsing using broadband, 3G or something slower. You don’t need CSS3 or any specific next-gen features in your browser to make these buttons work which is why they fascinated me when I read about them. This tutorial will teach you how to re-recreate the Google image-less buttons and it’s certainly worth checking out.

 

 

 

 

 

 

 

 

 

 

 

How to Create an Image Gallery with easily Switchable Views

 

Renowned developer Soh Tanaka provides this slick and very easy to learn technique for offering your users a variety of “switchable” views for your image galleries. It effectively allows you to choose whether you want to see images as a list with detailed information, as a gallery of just images or as a list of pure links. Putting the choice of view style in the hands of you users is a very powerful tool and this tutorial will teach you exactly how to implement it. Recommended reading.

 

 

An Animated Sharing-Bar that includes a 3D Carousel Effect

 

Sharing features are important for just about any blog, but in a lot of cases you’ll find site-owners using the same boring layout and UI to display theirs (no comment on mine!)– this is usually some variation of a row of icons, but wouldn’t it be interesting if we spiced that up a little?. This excellent tutorial from TutorialZine harnesses the power of 3D Carousels to display share buttons in a way that definitely catches your attention with both animation and reflection effects through into the mix thanks to some jQuery. A good read.

 

 

Facebook Style Footer Admin Panel with CSS and jQuery

 

Bottom navigation bars are becoming a trend with Facebook, MySpace and now the Wibiya toolbar offering users a consistent way to interact with a site. This excellent tutorial will teach you how to implement your own Footer Admin Panel and it’s very comprehensive.

 

 

How to use the Sliding-Doors Technique to create buttons using Sprites

 

Image Sprites are a great way to decrease the number of images your page needs to download, but did you know that there’s an easy way to use sprites to create buttons of any length for your site?. I’ve had to deal with this problem lots of times, and let me tell you guys – there is nothing worse than having to constrict the text you use in a button just because you don’t want to create a static image for it and your background image isn’t long enough to fit behind. Well..perhaps herpes, but I’m trying to be serious here. This great tutorial shows you how you can create buttons of any size using the same Sprite image with all the bells and whistles you need. A recommended bookmark.

 

 

jQuery Mega-Menu with slide-down effects

 

Mega-menu’s offer a richer navigation experience, allowing developers and site-owners to offer users a much more in-depth view of the pages available on a site. Where previously a site-map may be used for this purpose, we’re now finding that a lot of this content can be neatly categorized and placed in a Mega-Menu instead.  This excellent tutorial will show you exactly how to add a slick mega-menu to your site in no time.

"border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="168" alt="image" src="http://addyosmani.com/blog/wp-content/uploads/2010/01/image_thumb4.png" width="454" border="0" />

 

jQuery Fly-To-Basket Effect for Online Stores

 

The Fly-to-basket effect was something I first saw done in Flash a few years ago and now it’s available in jQuery with all it’s cross-browser compatible glory. This is an excellent example of how to make your user interface feel more interactive and the effect is surprisingly easy to achieve. This effect has been popping up on quite a few sites recently and I’m sure that the code-samples will come in useful for anyone currently thinking of adding this to their site. For a comprehensive tutorial, hit the link above.

 

 

Fancy Quotes using jQuery, CSS and Ajax

 

This is an excellent tutorial that will show you how to provide your users a way to scroll through a large list of content without having to click through any scrollbars at all – mouse movements control most of the UI. Admittedly, it can take a few moments to get used to the interface, but I could easily imagine it being used to rate or view all sorts of content. Everything from the latest tweets about Britney Spears latest wig to financial stock tips – This a UI that minimizes necessary interaction and maximises the content that can be displayed in a very small space. A+ in my books.

 

 

GivaLabs iButtons – a different way of displaying your checkbox

 

Whilst Giva aren’t the first group to try creating a “switch-like” alternative to the standard checkbox, they have turned it into something of an art, including animations of all sorts into the mix and in general making the element appear a lot more interactive than previous iterations. Switches aren’t for everyone, but these examples are worth looking at if from a UI elements perspective if nothing else. Recommended reading.

 

 

jQuery Impromptu – A Sleek, light-weight and simple way to add user-prompts

 

What I like about Impromptu is that it was build from the ground-up specifically for the purpose of providing developers with a sleek, easy way to display user prompts. Prompts are treated in the same way that JavaScript alerts are and you can define all of the mark-up for your prompt within jQuery, without needing to store it in a hidden div on some other part of the page. It’s an elegant solution and one I would certainly recommend to anyone developing Rich jQuery Applications.

 

 

 

 

NiceForms – Easy Form Skinning for the masses

 

NF is a nice alternative to using jQuery UI and ThemeRoller to skin your everyday forms. It’s relatively light-weight and allows you to easily skin an entire form using just JavaScript and some CSS without needing to do a lot of manual work to add the right class names to all your elements. One of the benefit’s it offers are beautified skinning of the radio, checkbox, select and input field elements and it helps you do this with little pain. I’d definitely recommend checking this out.

 

 

A Very Simple Change to your Layout – Fade in and Fade-out effects for main page icons

 

Fade-in and fade-out effects take less than 5 minutes to add to an image using jQuery, but from a user appreciation perspective, they’re fantastic. Sure, you’re not handing them a bucket of money, but users do notice things like animation effects on web-pages and icons are a perfect place where hover/fades are suitable. They don’t constrict the page or any functionality, gracefully degrade and are the type of eye-candy that can help your design pop-out.

 

A Colorful Accordion with Bounce Effects

 

I’m not usually a big fan of Accordions because in a lot of cases I see them being used incorrectly. ie. “filling that spot” to the side of the page where developers replicate their top-navigation because they have nothing else to put there. My word..some people deserve to be chased into busy traffic. Anyway, there are a lot more intuitive ways of displaying navigational content so why am I including an accordion on this list you may ask. Well, to be honest it’s because these developers included a few very small, very subtle changes in this accordion such as the inclusion of animated bounce effects and a varying colour scheme which easily distinguishes every top-level category in a way other accordions sometimes fail to. Recommended for fans of the accordion.