Smashing Magazine - we smash you with the information that will make your life easier. really.
Slideshows In Web Design: When And How To Use Them
The key to smart strategic Web design is finding an appropriate and interactive way to display information. One comes upon endless possibilities when searching for ways to display information. One solution, slideshows and sliders, is an excellent way to display information such as images in an organized and compact manner. Slider galleries are excellent for organizing content into a nice clean module.
There are many reasons to use a slideshow or image slider. The slideshow is a universally known tool, and anyone who has used the Internet will know how to work a slideshow. Therefore, they are very usable and convenient for any user, and they can be used almost anywhere.
This article focuses on how to implement the slideshow technique correctly. We will cover when you should use a slider and how to make a good slideshow, and we will showcase good slideshows and content sliders.
Please also consider our previous articles:
- User-friendly navigation menus
- Search box design showcase
- Block quotes and pull quotes
- Web Form Designs
- Pagination: Examples and Best Practices
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
When to Include a Slider?
According to our recent review of 2009 Web Design Trends, slideshows or carousels are becoming more and more popular in modern web designs. Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.
Instead of clicking through various sections of the website for their favorite stories, users can quickly skim through the available stories without vertical scrolling or unnecessary mouse movements. The result: users save time, and the carousel focuses their attention sharply on the content, instead of on interacting with the browser. Such slideshow navigation is often used on entertainment websites and big blogs, but designers also make use of it in their portfolios to showcase their work in a more interactive way.
Let’s take a look at some common places where the sliders are often used.
1. Portfolios
When designing a portfolio, there are many different ways to organize your projects. One good way is to use a slider. Using a slideshow to showcase different images from a single project is even more common. Some websites will use it to slide through each project, and each slide brings you to a more detailed description of the project.
2. Slider of Information
Sliders are very popular on home pages of corporate websites. They are very useful for showing important information about a company. Generally, corporations will include an explanation of what the company does, a brief preview of the products, an explanation of what sets their products apart, and many further user options.
Take a look below at the excellent use of the slider technique on Mint.com. This home page slider contains information explaining Mint and what you can do with the service. Also included are graphics, which provide a nice visual to back up the information. This is a very good use of the slider and is extremely convenient for new users on Mint looking to learn more quickly.
3. Featured Blog Posts
Many blogs use slider galleries to feature top posts. It is a great way to show many top posts and not take up too much space. By fitting numerous featured posts into a smaller element, you are allowing more space for other content.
How to Make a Good Slideshow
Although almost every user will know how to work a slideshow, there are still a few ways that you can take it to the next level of usability.
Provide Thumbnails, Numbers or Buttons
Thumbnails are one of the more important elements of a good slideshow. They give the user a sense of where they are in the slideshow and where the slideshow is going. It allows for quick navigation and the convenience of finding a desired slide.
There are many ways to achieve this quick navigation. The first is by providing numbers. Highlighting the number of the current slide is very important. Secondly, provide thumbnails for each slide. Finally, buttons can be useful for even easier navigation.
Make it Auto and Manual
You will notice that many sliders work in one of two ways: they either slide automatically or buttons are provided for the user to click through manually. The best way to do this is to give both options. It is a good idea to have the slider start automatically, but you should still include buttons so that the user can find a certain slide.
Don’t Overdo It
As mentioned, the slideshow is a universally known element, so there is no need to overdo it in an attempt to make it more usable. The main focus of a slideshow is on the content. Only use what’s needed, and avoid using extra buttons and unnecessary features.
Button Placement
The key to a usable slideshow is the buttons. More important is where you place those buttons and how they appear. Buttons should most often be placed directly under or over the slider, or on either side (i.e. “Next” and “Previous”). This is standard practice, and there is no need to do anything different.
Good Transitions
The way the slideshow moves from slide to slide is actually more important than you may think. There are many transition effects that can be used in a slider, such as fading, horizontal sliding, vertical sliding, the list goes on. Try to pick the transition that best captures the style of the website. For example, if you have a very minimal design, you will want to go with a subtle fade that matches the style.
Border and Button Styling
There are not too many styling options within the slideshow itself, but there are a number of ways to style the space around the slider. Most obvious is the border of the slideshow.
The slider below is a very beautiful image-based one. The border gives the appearance of a stack of images, and the slideshow uses great lighting transition effects that go nicely with the excellent photography. Notice how the border style goes nicely with the theme of the website as a whole, and the transitions also support that theme.
Showcase of Sliders
Miro
A very clean and simple slider, complemented by great illustrations.
Paramore
A beautiful image carousel with nice slide effects, great borders and a convenient explanation feature.
Obox Design
Simple and clean, this image slider gets the job done without any unnecessary features.
SpaceCollective
This website uses a few nice manual image sliders. This allows for the selection of videos and other objects to be more compact.
Josh Smith
A very simple and minimalist image slider.
Benjamin David
A nice slider gallery with a smooth vertical transition effect.
Design By Humans
This website uses a very large slider to show featured products. The backdrop also changes along with the product, which is a very nice feature.
Lucas Hirata
This very creative portfolio uses a sliding layout to fit a large amount of projects onto one page.
Designsensory
A standard image slider, with a number selection feature and text to accompany each item.
The Wojo Group
A great slider layout that flows nicely with the thumbnail selector.
Qlear
A good manual slideshow to showcase projects in the portfolio.
Envero.org
Another simple-featured slider with numbers to direct the user.
Rob Young
This is a very creative and unique portfolio. When clicking on a project, the laptop slides back into view with the new project. This is a very smart way to showcase the work.
HelloThemes
This website uses a simple manual slider with large buttons and smooth horizontal slide effects.
MacAllan
Each image in this slideshow displays for a set duration. A graphic is included in the corner to show the user when the image is about to change.
Global Oneness Project
This home page uses a plain simple slider to show a list of featured videos.
Behance
A quick slider with convenient buttons and fade effects.
Ricoverdo
A fully styled and usable horizontal slider.
Scrap Blog
An in-depth slideshow with a number of usable features and a Cooliris effect.
Deluge Studios
Another website with grungy textures and fancy colors.
Daniel Stenberg
This is an excellent portfolio that shows a horizontal sliding layout to navigate through the project modules.
Piotr Kulczycji
A nice border and tilted display, along with great effects, make this slider worth a look.
World Concern
This is a great Flash-based slider that features some really cool selection buttons.
delicious
The familiar Delicious home page slider is very simple but serves its purpose nicely.
Household
This is a very well-thought-out image gallery with very smooth sliding and a clean layout.
Volkswagen UK
This selection tool here is very usable because the user has the option of using either the buttons or the scroll bar.
Cream Scoop
One more example of a simple image slider in a clean portfolio.
Cade Martin
A very minimal image slideshow, with clean fonts and basic effects.
Barack Obama
Obama’s website uses a Java-based slider with creative effects.
Thomas Prior
Another portfolio with a slider to show featured projects. This slideshow has usable buttons and indicators to show where the user is in the slideshow.
Viktor Jarnheimer
This is a very clever portfolio slider that uses an iMac to enclose the images, thus achieving a clean layout.
MVB Web Design
A very simple slideshow on a simple website.
James Lai Creative
A grungy slideshow with subtle but well-placed navigation buttons.
Trevor Saint
This is a great website and includes a slideshow. The slider uses good vertical sliding effects.
Creative State
This video slideshow looks nice and has usable buttons with preview hover effects.
Icon Designer
A very large slider of featured projects with a nice layout.
Threadless Kids
These two sliders change images when the user hovers over the button.
Phunk’n Creative
A nice dark portfolio with a slideshow of featured products.
Related Articles
Pleaso also consider our previous articles:
- User-friendly navigation menus
- Search box design showcase
- Block quotes and pull quotes
- Web Form Designs
- Pagination: Examples and Best Practices
(al)
Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.
(No votes yet)
Loading ...- 63 Comments
- 1
- 2
March 9th, 2009 9:18 amSecond!
- 3
- 4March 9th, 2009 9:47 am
This is an amazing post for any web developers out there.
- 5March 9th, 2009 10:00 am
Great stuff, and some excellent examples. You make some very good points about the fact that everyone seems to understand how to use them, I think I’ll certainly hope to include them more in my work. Great post.
- 6March 9th, 2009 10:04 am
n00b question, but how are most of these made? Flash?
Also, @Quakeulf: if you need to show, say, a portfolio… how else would you propose doing it?
e
- 7March 9th, 2009 10:06 am
Thank you for featuring the Obox Design site in this post. We actually made a tutorial on how to create that slider using CSS and jQuery.
I am blown away that we are actually on Smashing Magazine :)
- 8March 9th, 2009 10:06 am
Very useful writeup Matt, I like the article as i personally designed few of the slideshows modules for my clients. Thanks for your effort in putting all this together.
DKumar M.
- 9March 9th, 2009 10:26 am
Thanks for the very nice links. Slideshows are a good way for showing specific content like design portfolios etc. A good way to promote products or any kind of info.
- 10March 9th, 2009 10:44 am
great post and beaituful web designs, thanks..
- 11March 9th, 2009 10:51 am
Fantastic article. Just what I needed for my own relaunch.
It is everytime amazing how you hit the nail at his head.Beautiful designs and great inspiration. Stay tuned …
- 12March 9th, 2009 11:03 am
Matt, great post.
Could you amend the post (or post a comment) with the technology used in each of these slideshows?
Thanks.
- 13March 9th, 2009 11:11 am
Thanks for including the great write up before presenting the showcase. Also bonus points for not having a number in the title. I like it!
- 14March 9th, 2009 11:12 am
@Bob, @ed
Sliders like this are generally made using Javascript techniques and there are many tutorials out there that can help you achieve a slideshow effect like these. Most of these are Java-based, but I think a few are Flash.
- 15March 9th, 2009 12:02 pm
I do like the use of slideshows if it is used right!
It can be used very handy if you want to make one page website.Thnx for the post!
- 16March 9th, 2009 12:08 pm
It is called “miro”, not “micro”.
- 17March 9th, 2009 12:41 pm
ed:
Simple; carefully orchestrated thumbnails in a well-thought gallery presentation. Slideshows are for printed portfolios. Every gallery worth its salt has a simple “next/previous image” feature which eliminates any need for overly complex slideshow-solutions that might just end up being more choppy than smooth. What’s the big deal really, you’re just flipping from one picture to the other, there’s no need in making it part of the big waiting game for impatient people who just want to see content. - 18March 9th, 2009 1:19 pm
I can understand the reasoning but I have to disagree with the first couple posters. I think that slideshows actually enhance usability by allowing the designer to use progressive disclosure to simplify the complexity of a content rich site. In our example (global oneness project) the goal was to always feature one new short film but still offer some of the latest short films “above the fold”. The cleanest way to accomplish this was with a simple / no frills javascript based carousel.
Shawn Collins
Visual Designer
Global Oneness Project - 19March 9th, 2009 1:26 pm
My university just updated their homepage at wsu.edu with a really nice application of a slideshow. Check it out and what do you think? It seems really fluid and it loads really fast… Thoughts?
- 20March 9th, 2009 1:53 pm
This is nice. The sliders are very good. It would have been cool if there were a couple of links to some nice sliders though.
- 21March 9th, 2009 1:59 pm
@Quakeulf
The typical gallery with little thumbnails are imho the worst thing ever invented…
What is the point to have dozens of tiny worthless pictures, too small to see anything, clustering your design? You have to blind click on them anyway to get the content, so you may as well have the big pictures slide… ^__^
Nice examples btw, thanks
- 22March 9th, 2009 2:06 pm
While sliders can be used in the above instances, aren’t they also used in tons of commerce sites to show off a large amount of content in a very limited space? Like Barnes and Noble, Borders, iTunes, Amie Street, etc. This effect completes the metaphor of looking through a vast catalog of things that are typically on shelves. Only instead of physically moving from shelf to shelf, the shelves themselves move.
One complaint of mine though is hitting the end of a carousel. They should be endless, or so large you shouldn’t be able to hit the end. They seem to be to show off a vast amount of information while you are browsing, and hitting the end after only a few “Next” clicks, when I don’t find anything interesting, is a frustrating user experience.
- 23March 9th, 2009 2:33 pm
Personally, I hate slideshows, and as cool as the designs and effects are on many of these, they are still a pain.
- 24March 9th, 2009 5:26 pm
Uh, guys, I think there’s been some sort of messup, because my website Icon Designer, is definitely not called K4 Laboratories.
- 25March 9th, 2009 7:34 pm
Been looking for a how-to on good slideshows for a week or so now. You guys just smashed me :)
- 26March 9th, 2009 8:48 pm
Very nice collection. Just what I was looking for.
I’m wondering what people think is a better javascript library for slideshows: jQuery or Mootools? I am seeing Mootools has better and smooth transition effects. Any suggestions?
- 27March 9th, 2009 9:56 pm
http://www.manulife.com.hk/en/about/Documents/community/slideshow/en/index.html
here is my writing photo slide show. - 28March 9th, 2009 10:24 pm
Oh My GOD!
Can you read minds or somehting?
I just needed this for a website I’m making!!Thanks a lot guys!
;-) - 29March 9th, 2009 10:28 pm
Great writeup – and one that I’ll be coming back to quite a bit in the future as I do a ton of slider designs for my own clients. As a side note, I find it awesome that the U.S. president’s website can be called out in such an esteemed list as this :)
- 30March 9th, 2009 10:43 pm
Ahem!! if slide shows were such a pain then they wouldnt be used so commonly…
And they are nothing new… developers are using it since the longest time.. the only difference is the improvement in techs.. earlier it was mostly transitions in flash… now we have the same things possible with scripts… which are prefered if u look at it from developpers POV.
- 31March 9th, 2009 11:04 pm
Great list! Thanks a lot ;)
- 32March 9th, 2009 11:57 pm
Not so sure about your reference to Obox – for a feature on when and how to use them – I’d expect them to behave intuitively. When you get to the end, either left or right, you have no feed back as to this and you’re still left with a next and previous button with a hover state that does nothing.
- 33March 10th, 2009 12:37 am
I think you have to think very carefully about the transition. I Have a slider on my website: http://www.lineofdesign.dk and one of my primary goals were exactly, that the viewer should be able to browse through my showcases fast… Therefore the transition is also fast, and not very “wow-effected”.
I think another think could be said about sliders. And that is, that it would be great, if you could youse the scroller on the mouse for further conveiniense, and usability…
So use:
buttons,
slider,
and scroller- If you can figure it out how to make them…! ;)
- 34March 10th, 2009 12:38 am
I’m not a fan of slideshows in web design, but I have to admit that, in some cases, they can be useful.
I think there is a little typo in the first link of the “Showcase of Sliders” section of the article: it’s “miro” not “micro”.
- 35March 10th, 2009 12:41 am
Nice selection Smashing Magazine. There are some pretty great ideas out there !
And thanks a lot for talking about my portfolio website !
- 36March 10th, 2009 12:45 am
Thanks Matt, t’hat’s an impressive list ! Unfortunately, I haven’t seen the one i’m using for photo or slideshows sharing : Joomeo ( http://www.joomeo.com ).
I thought you could add it ;)
- 37March 10th, 2009 1:12 am
Great collection, some really nice designs here. I’ll be using some of these later in the week for a few e-commerce shops I’ve got on…
Although file size is often a problem with some of these slideshows, don’t suppose you have any tips on how to bring the sizes down? - 38March 10th, 2009 1:18 am
Great post!
- 39March 10th, 2009 2:36 am
In my personal oppinion, the best way between Make it Auto and Manual is makin’ it slide on mouseOver… And YES – the posted designs are gorgeous – as usual =)
- 40March 10th, 2009 4:00 am
The article not only explained how to implement the slide show but also explained why the implementation is necessary. This thing made me feel satisfaction about this article.
- 41March 10th, 2009 4:03 am
This article really impressive
- 42March 10th, 2009 4:12 am
Nice article.
- 43March 10th, 2009 6:35 am
I hate slide shows flash tables xhtml flash php java Etc.
I want a wagon and horses and a banner and a little orphan child to gather people as I sell me anti-web elixir.
Come One Come All!!! Throw down your IE’s and euthanize your Fire Foxes I offer the art of of human to human interaction.
- 44March 10th, 2009 7:07 am
binocle:
Naive statements, as it seems you did not quite read my post. Who says thumbnails have to be small and a thumbnail gallery have to be cluttered? I prefer the option of choice when looking through things, not being forced to take things one picture at the time. I don’t want linearity in my surfing experience, for linearity you might as well watch a showreel instead.
- 45March 10th, 2009 7:10 am
Can anyone offer a site where I can find a good tutorial on producing on of these?
- 46March 10th, 2009 7:23 am
Daw560
Check jquery plug-in wiki or who ever your perfer you can find plug-ins and more often then not how they did it or just look at the source code//////
- 47March 10th, 2009 11:45 am
I use a slideshow to offer whats new at my company or going on… information, and SEO all without taking up so much real estate. My company We have events, concerts, sales, new models, ect going on all the time, it’s a great way to hi-light what’s new, and it’s not Flash :) All inline text for the search engines to gobble up.
- 48
- 49March 10th, 2009 2:19 pm
Hi
check my new website, he have a lot of slider, particulary on the home page Meetday [Meetday.fr] - 50March 12th, 2009 4:01 am
Hi,
There is a mistake in the attribution of one of the slideshows in this article. It’s the one attributed to Dean Oakley wich, actually, it’s a banner designed & developed for our studio website.
I’ve contacted you through the Contact Form yesterday but still haven’t received an answer.
Could you check it please?
Thank you very much. - 51March 12th, 2009 4:35 am
nice post, but would be better without “lazy loading” for images… or at least reserve the proper space so its content isn’t constantly moving around
than you!
- 52March 12th, 2009 7:48 am
Great article, though I’m surprised you didn’t present your examples in a slideshow or carousel. ;)
- 53March 12th, 2009 8:18 am
Hi,
can any body tell me any good slideshow for wp without flash and easy to install? besides nextgen.
thx
Kami - 54March 13th, 2009 3:47 am
@MrJones – Just to let you know, we’ve since modified the slide show to hide the Next and Previous buttons when you reach either side, we’ve also created script which will return to the beginning when you reach the end as well, all depending on what other designers who are using our Scroller have asked us for.
- 55March 13th, 2009 5:40 am
A great set of examples here, cleverly using mainly JS, Ajax, Jquery et al.
We stuck with flash for ours so it could play video and images with a Vimeo inspired scrubber bar.
- 56March 13th, 2009 8:08 am
Great list! Thank you.
- 57March 17th, 2009 8:58 am
How can SEO and a search engine marketing campaign improve Leadsmarketer website (www.leadsmarketer.com) position in the search engines? Our marketing and sales department invested a lot of resources in writing all the content for our web site but we just can’t seem to be ranking high enough in the engines, while our competition is on top. Do we have to re-write it all over again?
- 58March 20th, 2009 2:52 am
I’ve used a combination of Horizontal image slider and Horizontal images scroller (iCarousel – MooTools) for my project (portofolio of oil paintings). Combining the components was somehow difficult, so feel free to make use of them.
I’m very pleased with the result :)
http://www.emivega.com/ - 59March 23rd, 2009 12:51 pm
Great compilation, now if you can do one on the different scripts out there so that we can implement these ourselves. I haven’t seen a good resource on that, and I’ve had a lot of trouble finding one that can be easily customized to work the way I want it to.
- 60June 10th, 2009 9:17 am
I need help with my slide show….
There is a very large gap above the slideshow. I would like to get rid of that but I do not know how. If anyone could plz help me, then I would really appreciate it. Thx again, plz go to the following page to see what I am talking about. Thx
http://www.myspace.com/nldm2002 - 61August 4th, 2009 6:52 am
Thanks for featuring my site: http://www.phunkn.com
However I have since updated my design and no longer use the slideshow.
I have archived my old design here though if you’d like to update the link.
http://www.phunkn.com/_phunkn%20v2008/
Thanks!
- 62August 5th, 2009 12:18 pm
I love the Mint.com content slider.
Can someone point me in the direction to where I can find out how to do that?Thanks,
Jenn - 63January 10th, 2010 9:16 am
Look at this simple and customizable Jquery slideshow example with html teaser, autoslide and ajax support: http://newbitsontheblog.com/jquery-slideshow/
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
- Beautiful, Elegant and Free 48px Icon Set - http://bit.ly/cSWcBR
I personally dislike the use of slideshows. They seem more like a leap back in usability than anything else as of now, and probably will in the future too given their set-up.