Accordions provide a perfect way of making content heavy pages appear less so.
Made up of multiple items containing a head/title and body with expanded content, the accordion gives a chance for brands to get creative with design and animation.
Let’s take a look at some power examples of accordions used by some leading brands for inspiration and review.
- 1. All Clad
We’re impressed with the accordion within an accordion (accordion-ception anyone) provided by the team at All Clad. With clear highlighting for the active parent accordion titles, it’s very easy to follow where you are and the current selected item. Great job guys!
- 2. DeLonghi
The DeLonghi FAQ page uses accordions to separate questions and answers. Whilst the design is quite simple, it does fit the look and feel the page. What would be nice to see is snippets of answers instead of just links to find out more which makes the purpose of the accordion redundant.
- 3. Parafix
Here is another great example of accordion integration, with clear highlighting and the icon changes to show the active accordion element. On brand and consistent with the page design, it really is a winning element.
- 4. Samsung
Samsung’s accordions work well as they offer both icons and subtitles to help direct users as to the type of content they’ll be viewing. The look of the accordion pane is also creative and fits in well with the overall design.
- 5. Dow Chemicals
Dow’s accordion styles is bordered, showing clearly defined regions for each section of content. There isn’t a separator between each title and pane, but we think this adds to the overall aesthetic!
- 6. GE
GE’s careers pages have a very interesting use of accordions to display full job details for each position available. The head is constant with the position and location, so you can easily follow each block of data.
- 7. Ferrari
We love the Ferrari accordion design as each title supports multiple lines of text. With a clearer highlighting for the active item this would really be an accordion to be reckoned with!
- 8. Tesco
Tesco present another example of accordion-ception – and we aren’t disappointed! We’re not sure if the + and – icon sizes are as large as they are by design, but a small drop in size and shift in position would be fantastic.
- 9. Beats by Dre
For one of the world’s most stylish audio equipment manufacturers, we aren’t surprised about the quality of the accordion design. Using an image alongside each title really helps to showcase the quality of the products, plus the active accordion has a horizontal line under it to separate it from other content.
- 10. Mint
You won’t find many examples of minimal accordion design as good as this. Granted, there aren’t any icons for active and passive accordion items, but we don’t feel it’s needed either.
- 11. Philips
Philips have a rather safe, but clean design for their accordions, which will fit the needs of many a corporate site. There is no animation used when changing between slides, which we think is a major shame.
- 12. Kimberly Clark
Kimberly Clark’s FAQ page has a very conventional, but effective accordion design and usage. Icons open/close are placed on the left, which is different but does help to align content. We also love the fact that you can have multiple panes open at any given time.
- 13. Heineken
Heineken have hit the nail on the head with their accordion design, which is transparent and blends in perfectly with the background of the web page. Spacious and easy on the eyes, we can certainly get behind this one!
- 14. Costa
We’ll close with the coffee maestro, Costa. Not only is their accordion design consistent with their brand, but the active pane is kick ass giving the impression of a speech bubble when selected – awesome.
What’s your thought with our list? Do you have any examples of accordions that you think stand out amongst the crowd?
We’d love to hear your feedback, so why not take part in the conversation using the comments section below!