From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Wikipedia tells us that “thumbnails are reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words.” And as we all know, a picture is worth a thousand words, so using an image in a nice and beautiful form can give your layout a very neat look.
Since images are a very important part of a website, we decided to gather some examples of how websites are using thumbnails to organize and showcase their content. From layouts completely based on thumbnails and others using a few to get attention to a specific subject, we have a lot of inspiring examples to show you. Enjoy!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Arnaud Beelen
Beautiful and simple layout based on perspective thumbnails.
Two Fish Illustration & Design
Jacob Souva uses a single page layout to present his work and ideas. The page is really clean and he uses beautiful monochromatic thumbs to show his work.
twoto
twoto also have a simple design based on thumbnails to showcase content/work.
Kokokaka
Kokokaka have thumbnails as background to showcase content. Sidebar comes and goes and you hover it. 😉
Brave Nu Digital
Thumbnails here are elegantly used to showcase work. The geometry and minimalism of the layout is really neat.
F O U N D E D
Simple and plain design using thumbnails to organize/showcase content.
Idea Exhibit
Clean HTML5 layout using typography, geometry and thumbnails to organize content.
astronaut design
Beautiful and simple layout based on perspective thumbnails.
Marc Kremers
Gradient in the background and thumbnails to showcase previous works.
Purpose
Clean and simple layout based mainly in typography and thumbs.
Rejane Dal Bello
Rejane Dal Bello uses several thumbnails sizes to present her work in a clean and minimal layout.
James De Angelis
Another example of differently sized thumbnails to organize and showcase content/work. The textured background, the colors and typography complete the clean and straight forward layout.
Harpoon
Beautiful layout. No explanations/comments needed here. 😉
Baubauhaus
Another simple layout totally based on thumbnails.
Viktoria Klein
Grid based design with thumbnails to showcase work.
Uniform
Beautiful and clean layout with thumbnails to showcase main sections of the website.
typetoken
Minimal layout based on thumbnails, typography and white spaces.
Blank
Thumbnails that keep reloading and changing, a lot of action and subtle colors.
Craig and Karl
Nice layout combining great colors, shapes, typography and thumbnails.
Franklin Gaw
Clean. Simple. Beautiful. Nothing else to say. 😉
Komplex 457
Thumbnails here are used to get attention to whom is presenting which day. Nice touch to get attention from the grid/typographic based layout.
Dust + Mold
Nice framed thumbnails showcasing their works. The textured background gives a nice touch to the layout.
Dan Mall
Nice and clean layout using rounded thumbnails to showcase featured work and latest articles.
Sisu
Minimalist and clean layout based on thumbnails.
Adam
Another good example of different sized thumbnails to present content/work.
Thumbnails has been and will be a foundamental estructure in web design. Technology changes and everything becomes moore simple, despite that we have also the work of mix that with eyeline design, the graphical design, and the structures, really good article!, congrats giselle! is really usefull
good collection! !
I was looking for ideas and inspiration to me.
Nice selection. It came as a trend to create thumbnail for projects on various portfolios and works. The best way to have a significant preview of the project.
May I suggess to add my portfolio^^
http://www.julienlavallee.com/portfolio
Nice collection! Thanks for sharing!
I couldn’t click on the thumbnails of “Blank” and the page for “Idea Exhibit” didn’t fit on my screen for some reason, but other than that they were all great
Thanks for sharing this wonderful list. I think usage of thumbnails on home page has started very recently and is getting very popular. Many sites (as evident in the list) are using them and it clearly brings a unique feel to the site.
@Julien.
Très bien, ton site. Goût très fin, très sûr. Bref, élégance et simplicité.
Félicitations
Like This ^_^
Nice Collections!!!
Hi Nice collections and i saw many one, some are awesome and unique patterns..
Thanks for sharing.
Awesome Collection – I have not Yet Seen any Post Like this – Thanks alot for Sharing !
Best Regards :
Conroy James
Nice Collection. Is there any Good Tutorial on how to do the same banner like this http://www.modularweb.net/
Nice examples ! I was precisely looking for some ideas to implement a new gallery i’m building, will certainly take some ideas from here..
Great webdesign examples! Thanks for sharing.
great collection
Thanks for posting a great collection of sites, Thumbnails are being used to great effect in modern web design, they are often used as snapshots to show whats to come, intriguing the viewer to progress further into the site to discover the content. SISU’s simple geometric layout works beautifully with each thumbnail revealing a small portion of whats to come.
Thank you very much. Very nice collection! It’s great to see websites in such perfection! Thank you for sharing!
What about my site? 🙂
http://www.moretech.it
Nice collection… I used thumbs back in 2008 for my website…. still fresh 3 years later http://www.icancreate.ca/portfolio
Hey Gisele. I like your collection of sites posted above. Especially the site of Arnaud Beelen. I would agree with the comments here that thumbnails are one of the foundations of the contemporary style of webdesign now. It is not new to use thumbnails, so creative use of them is adviced. My favourite of your examples is actually Dust + Mold. It seems that making a symmetric designs with thumbnails is becoming trendy. Very interesting if you ask me.