-
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.
14 examples of accordions that will blow your mind
Posted by Emanuele Ricci on 11 Aug 2016 reading time
Emanuele is a designer at Debunc. A graduate of Graphic Design at the Academy of Fine Arts Santa Giulia, his skills span both digital and traditional media. Emanuele is also an avid illustrator and in his spare time works on personal artistic projects.
-
Can you DIY design?
Many companies and start-ups reach a hurdle when it comes to design, as cost and creativity become limiting factors. There are ways of reducing marketing expenses by doing some of the design work in-house. Careful planning and preparation…
Posts -
The benefits of image-free HTML design
Many designers and developers struggle with creating HTML email designs that are functional yet aesthetically pleasing; especially when images have been disabled by an email client or web browser. Making sure your email design...
Posts -
How to wow your customers with stunning visuals + imagery
First impressions count. Does your web imagery wow customers and encourage engagement?
Posts -
Top 8 property maintenance websites
Having recently launched a web project in the property maintenance space, we thought why not take a look at some of our client's competitors and highlight what we like about their sites.
Posts
