Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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:

When to Include a Slider? Link

According to our recent review of 2009 Web Design Trends6, 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.

Screenshot637

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 Link

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 Link

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.

Screenshot8

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 Link

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.

Screenshot9

Showcase of Sliders Link

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

Screenshot11

Paramore
A beautiful image carousel with nice slide effects, great borders and a convenient explanation feature.

Screenshot

Obox Design
Simple and clean, this image slider gets the job done without any unnecessary features.

Screenshot

SpaceCollective12
This website uses a few nice manual image sliders. This allows for the selection of videos and other objects to be more compact.

Screenshot13

Josh Smith14
A very simple and minimalist image slider.

Screenshot15

Benjamin David16
A nice slider gallery with a smooth vertical transition effect.

Screenshot17

Design By Humans18
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.

Screenshot19

Lucas Hirata
This very creative portfolio uses a sliding layout to fit a large amount of projects onto one page.

Screenshot

Designsensory20
A standard image slider, with a number selection feature and text to accompany each item.

Screenshot21

The Wojo Group22
A great slider layout that flows nicely with the thumbnail selector.

Screenshot23

Qlear
A good manual slideshow to showcase projects in the portfolio.

Screenshot

Envero.org24
Another simple-featured slider with numbers to direct the user.

Screenshot25

Rob Young26
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.

Screenshot27

HelloThemes
This website uses a simple manual slider with large buttons and smooth horizontal slide effects.

Screenshot

MacAllan28
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.

Screenshot29

Global Oneness Project30
This home page uses a plain simple slider to show a list of featured videos.

Screenshot31

Behance32
A quick slider with convenient buttons and fade effects.

Screenshot33

Ricoverdo34
A fully styled and usable horizontal slider.

Screenshot35

Scrap Blog36
An in-depth slideshow with a number of usable features and a Cooliris effect.

Screenshot37

Deluge Studios38
Another website with grungy textures and fancy colors.

Screenshot39

Daniel Stenberg40
This is an excellent portfolio that shows a horizontal sliding layout to navigate through the project modules.

Screenshot41

Piotr Kulczycji
A nice border and tilted display, along with great effects, make this slider worth a look.

Screenshot

World Concern42
This is a great Flash-based slider that features some really cool selection buttons.

Screenshot43

delicious44
The familiar Delicious home page slider is very simple but serves its purpose nicely.

Screenshot45

Household46
This is a very well-thought-out image gallery with very smooth sliding and a clean layout.

Screenshot47

Volkswagen UK48
This selection tool here is very usable because the user has the option of using either the buttons or the scroll bar.

Screenshot49

Cream Scoop50
One more example of a simple image slider in a clean portfolio.

Screenshot51

Cade Martin52
A very minimal image slideshow, with clean fonts and basic effects.

Screenshot53

Barack Obama
Obama’s website uses a Java-based slider with creative effects.

Screenshot

Thomas Prior54
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.

Screenshot55

Viktor Jarnheimer56
This is a very clever portfolio slider that uses an iMac to enclose the images, thus achieving a clean layout.

Screenshot57

MVB Web Design
A very simple slideshow on a simple website.

Screenshot

James Lai Creative
A grungy slideshow with subtle but well-placed navigation buttons.

Screenshot

Trevor Saint58
This is a great website and includes a slideshow. The slider uses good vertical sliding effects.

Screenshot59

Creative State60
This video slideshow looks nice and has usable buttons with preview hover effects.

Screenshot61

Icon Designer62
A very large slider of featured projects with a nice layout.

Screenshot637

Threadless Kids
These two sliders change images when the user hovers over the button.

Screenshot

Phunk’n Creative
A nice dark portfolio with a slideshow of featured products.

Screenshot

Pleaso also consider our previous articles:

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  2. 2 https://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  3. 3 https://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  4. 4 https://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  5. 5 https://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  6. 6 https://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  7. 7 http://icondesigner.net/
  8. 8 http://www.mint.com/
  9. 9 http://www.loveincolor.com/
  10. 10 http://www.getmiro.com/
  11. 11 http://www.getmiro.com/
  12. 12 http://spacecollective.org/
  13. 13 http://spacecollective.org/
  14. 14 http://www.joshsmith.ca/
  15. 15 http://www.joshsmith.ca/
  16. 16 http://benjamindavid.cc/
  17. 17 http://benjamindavid.cc/
  18. 18 http://www.designbyhumans.com/
  19. 19 http://www.designbyhumans.com/
  20. 20 http://designsensory.com/
  21. 21 http://designsensory.com/
  22. 22 http://www.thewojogroup.com/
  23. 23 http://www.thewojogroup.com/
  24. 24 http://www.envero.org/
  25. 25 http://www.envero.org/
  26. 26 http://www.eisforeffort.com/
  27. 27 http://www.eisforeffort.com/
  28. 28 http://macallanridge.com/
  29. 29 http://macallanridge.com/
  30. 30 http://www.globalonenessproject.org/
  31. 31 http://www.globalonenessproject.org/
  32. 32 http://www.behance.net/Sign_Up
  33. 33 http://www.behance.net/Sign_Up
  34. 34 http://www.ricoverdeo.com/
  35. 35 http://www.ricoverdeo.com/
  36. 36 http://www.scrapblog.com/
  37. 37 http://www.scrapblog.com/
  38. 38 http://www.delugestudios.com/
  39. 39 http://www.delugestudios.com/
  40. 40 http://www.dantestyle.se/
  41. 41 http://www.dantestyle.se/
  42. 42 http://www.worldconcern.org/
  43. 43 http://www.worldconcern.org/
  44. 44 http://www.delicious.com/
  45. 45 http://www.delicious.com/
  46. 46 http://www.household-design.com/our-clients/gallery/
  47. 47 http://www.household-design.com/our-clients/gallery/
  48. 48 http://www.volkswagen.co.uk/
  49. 49 http://www.volkswagen.co.uk/
  50. 50 http://creamscoop.com/
  51. 51 http://creamscoop.com/
  52. 52 http://www.cademartin.com/
  53. 53 http://www.cademartin.com/
  54. 54 http://www.thomasprior.co.uk/#2
  55. 55 http://www.thomasprior.co.uk/#2
  56. 56 http://www.jarnheimer.com/
  57. 57 http://www.jarnheimer.com/
  58. 58 http://www.trevorsaint.com/
  59. 59 http://www.trevorsaint.com/
  60. 60 http://www.creativestate.com/
  61. 61 http://www.creativestate.com/
  62. 62 http://icondesigner.net/
  63. 63 http://icondesigner.net/
  64. 64 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  65. 65 https://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  66. 66 https://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  67. 67 https://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  68. 68 https://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

    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.

    0
  2. 2

    Also see Glider which is useful for slideshows as well.

    0
  3. 3

    Personally, I hate slideshows, and as cool as the designs and effects are on many of these, they are still a pain.

    0
  4. 4

    Second!

    0
  5. 5

    This is an amazing post for any web developers out there.

    0
  6. 6

    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.

    0
  7. 7

    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

    -1
  8. 8

    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 :)

    2
  9. 9

    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.

    0
  10. 10

    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.

    0
  11. 11

    joyoge designers' bookmark

    March 9, 2009 10:44 am

    great post and beaituful web designs, thanks..

    0
  12. 12

    Simon Harlinghausen

    March 9, 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 …

    0
  13. 13

    Matt, great post.

    Could you amend the post (or post a comment) with the technology used in each of these slideshows?

    Thanks.

    0
  14. 14

    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!

    0
  15. 15

    @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.

    0
  16. 16

    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!

    0
  17. 17

    It is called “miro”, not “micro”.

    0
  18. 18

    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.

    0
  19. 19

    Shawn Collins

    March 9, 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

    0
  20. 20

    Quinn Ianniciello

    March 9, 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?

    0

↑ Back to top