Slideshows In Web Design: When And How To Use Them

Advertisement

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?

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.

Screenshot817

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.

Screenshot8

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.

Screenshot9

Showcase of Sliders

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

Screenshot11

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

Screenshot13

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

Screenshot15

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

Screenshot17

Josh Smith18
A very simple and minimalist image slider.

Screenshot19

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

Screenshot21

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

Screenshot23

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

Screenshot25

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

Screenshot27

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

Screenshot29

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

Screenshot31

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

Screenshot33

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

Screenshot35

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

Screenshot37

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

Screenshot39

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

Screenshot41

Behance42
A quick slider with convenient buttons and fade effects.

Screenshot43

Ricoverdo44
A fully styled and usable horizontal slider.

Screenshot45

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

Screenshot47

Deluge Studios48
Another website with grungy textures and fancy colors.

Screenshot49

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

Screenshot51

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

Screenshot53

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

Screenshot55

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

Screenshot57

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

Screenshot59

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

Screenshot61

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

Screenshot63

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

Screenshot65

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

Screenshot67

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

Screenshot69

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

Screenshot71

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

Screenshot73

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

Screenshot75

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

Screenshot77

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

Screenshot79

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

Screenshot817

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

Screenshot83

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

Screenshot85

Related Articles

Pleaso also consider our previous articles:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  2. 2 http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  3. 3 http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  4. 4 http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  5. 5 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  6. 6 http://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://paramoreredd.com/
  13. 13 http://paramoreredd.com/
  14. 14 http://www.obox-design.com/
  15. 15 http://www.obox-design.com/
  16. 16 http://spacecollective.org/
  17. 17 http://spacecollective.org/
  18. 18 http://www.joshsmith.ca/
  19. 19 http://www.joshsmith.ca/
  20. 20 http://benjamindavid.cc/
  21. 21 http://benjamindavid.cc/
  22. 22 http://www.designbyhumans.com/
  23. 23 http://www.designbyhumans.com/
  24. 24 http://www.lucashirata.com.br/
  25. 25 http://www.lucashirata.com.br/
  26. 26 http://designsensory.com/
  27. 27 http://designsensory.com/
  28. 28 http://www.thewojogroup.com/
  29. 29 http://www.thewojogroup.com/
  30. 30 http://www.qlear.nl/hello.php
  31. 31 http://www.qlear.nl/hello.php
  32. 32 http://www.envero.org/
  33. 33 http://www.envero.org/
  34. 34 http://www.eisforeffort.com/
  35. 35 http://www.eisforeffort.com/
  36. 36 http://hellothemes.com/
  37. 37 http://hellothemes.com/
  38. 38 http://macallanridge.com/
  39. 39 http://macallanridge.com/
  40. 40 http://www.globalonenessproject.org/
  41. 41 http://www.globalonenessproject.org/
  42. 42 http://www.behance.net/Sign_Up
  43. 43 http://www.behance.net/Sign_Up
  44. 44 http://www.ricoverdeo.com/
  45. 45 http://www.ricoverdeo.com/
  46. 46 http://www.scrapblog.com/
  47. 47 http://www.scrapblog.com/
  48. 48 http://www.delugestudios.com/
  49. 49 http://www.delugestudios.com/
  50. 50 http://www.dantestyle.se/
  51. 51 http://www.dantestyle.se/
  52. 52 http://pkulczycki.com/index.php
  53. 53 http://pkulczycki.com/index.php
  54. 54 http://www.worldconcern.org/
  55. 55 http://www.worldconcern.org/
  56. 56 http://www.delicious.com/
  57. 57 http://www.delicious.com/
  58. 58 http://www.household-design.com/our-clients/gallery/
  59. 59 http://www.household-design.com/our-clients/gallery/
  60. 60 http://www.volkswagen.co.uk/
  61. 61 http://www.volkswagen.co.uk/
  62. 62 http://creamscoop.com/
  63. 63 http://creamscoop.com/
  64. 64 http://www.cademartin.com/
  65. 65 http://www.cademartin.com/
  66. 66 http://www.barackobama.com/index.php
  67. 67 http://www.barackobama.com/index.php
  68. 68 http://www.thomasprior.co.uk/#2
  69. 69 http://www.thomasprior.co.uk/#2
  70. 70 http://www.jarnheimer.com/
  71. 71 http://www.jarnheimer.com/
  72. 72 http://logofolio.mvbwebdesign.com/
  73. 73 http://logofolio.mvbwebdesign.com/
  74. 74 http://jameslaicreative.com/
  75. 75 http://jameslaicreative.com/
  76. 76 http://www.trevorsaint.com/
  77. 77 http://www.trevorsaint.com/
  78. 78 http://www.creativestate.com/
  79. 79 http://www.creativestate.com/
  80. 80 http://icondesigner.net/
  81. 81 http://icondesigner.net/
  82. 82 http://www.threadlesskids.com/
  83. 83 http://www.threadlesskids.com/
  84. 84 http://www.phunkn.com/?viewAll
  85. 85 http://www.phunkn.com/?viewAll
  86. 86 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  87. 87 http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  88. 88 http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  89. 89 http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  90. 90 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    Great article, though I’m surprised you didn’t present your examples in a slideshow or carousel. ;)

    0
  2. 52

    Hi,
    can any body tell me any good slideshow for wp without flash and easy to install? besides nextgen.
    thx
    Kami

    0
  3. 103

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

    0
  4. 154

    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.

    http://www.selesti.com

    -3
  5. 205

    Simon Dabkowski

    March 13, 2009 8:08 am

    Great list! Thank you.

    0
  6. 256

    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?

    0
  7. 307

    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/

    0
  8. 358

    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.

    0
  9. 409

    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

    0
  10. 460

    Jason @ PHUNK'N CREATIVE

    August 4, 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!

    0
  11. 511

    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

    0
  12. 562

    Look at this simple and customizable Jquery slideshow example with html teaser, autoslide and ajax support: http://newbitsontheblog.com/jquery-slideshow/

    0
  13. 613

    Really cool list!

    0
  14. 664

    Daniel Mulvihill

    August 3, 2010 10:17 am

    Matt, thanks for compiling all these examples and for your analysis and research.

    0
  15. 715

    It’s very nice for inspiration. Thank U very much

    0
  16. 766

    Hulu.com has a nice one. It infinitely slides and has a paged navigation. It was built with flash, but I’ve re-built it as a standalone slider using jQuery/JavaScript if anyone is interested.

    As always, thanks for the amazing content Smashing!

    0
  17. 817

    really nice, thanks.

    -2
  18. 868

    I personally love slide shows. My website, http://www.fredericksburgagent.com, utilizes a slide show to offer Fredericksburg real estate listings. IDX Broker offers these tools for Realtors. I keep the framework small. I use slide shows for different categories of real estate. Keeping the slideshow above the fold captures many leads. You have some of the finest examples I’ve ever seen described in your blog. Thanks for the useful information.

    Tom Smith
    Century 21 Adventure Redwood

    0
  19. 919

    Our new and improved website takes sliders to a new level. We use a WordPress plugin to create sliders inside responsive frames. This inturn has improved our page conversion rates as it keeps the visitor on a page where they can then view a range of sliders without leaving the page. Take a look http://www.ggs.co.uk.

    Anybody else using responsive sliders? It’s improved our mobile and tablet retention rate no end.

    0
  20. 970

    I hate slideshow abuse!

    July 2, 2013 8:10 am

    I notice that almost all the cheerleading comments about slide shows come from web designers. Please realize that many of us in the general public absolutely loathe them. If you insist in using them, PLEASE have the courtesy to offer your reader, where feasible, the option to view the information on a single page instead.

    2
  21. 1021

    I think the problem is not slideshows in itself but how they are applied and under what circumstances. To just slap a big visual slideshow on every site no matter if its suitable or not, is not a good strategy.

    0

↑ Back to top