Let’s get our hands dirty with some web design masonry. We’ll figure out what it is, why it’s effective for some big name brands, why you might consider it for your own website, and which WordPress themes can help you achieve a masonry website layout.
First Question: What is a “Masonry Grid”?
A masonry grid is a grid-like layout which supports items of varying sizes. The name was arguably coined by Dave DeSandro, creator of the JavaScript Masonry library released back in 2009. On the Masonry site it’s described as “sort of like a mason fitting stones in a wall”. You know, like this:
But instead of stones and bricks, it’s all of your brilliant work, projects, photos, or whatever.
Why Does This Layout Work So Well?
Masonry-style grids are a familiar and user-friendly way of organizing content. They feel sortable and simple, and visually organize content in a way that’s easy to navigate without being boring.
It’s a popular format for micro-blogging platform Tumblr. Here’s an example from Coca-Cola, one of the biggest brands using Tumblr with a masonry-style grid layout:
Social-media-slash-inspiration site Pinterest also uses a grid layout to organize a massive amount of content. Here’s an example from Pinterest user Rayt, who has built a following of nearly six million:
Why This Layout Works for Portfolio Sites
Masonry grid layouts are especially useful for personal portfolio websites. If you’re a designer or artist, then it’s a great way to showcase your projects and provide a visual representation of the work you’ve done. If you’re a writer, you can use the grid-style to represent stories or published work. If you’re a photographer, showcasing your photographs and creating a sortable gallery by photo type is useful. I’ve used masonry grid WordPress sites to talk about side projects, newsletter designs, event planning work, and more.
Next Steps: Find the Right WordPress Theme
While Tumblr and Pinterest are both masonry-style, they’re not the right choice for a portfolio site; the social-blogging aspect of them makes it complicated and adds elements that are out of your control. Using WordPress to build your portfolio site means it’s all under your control, from the domain (like yournamehere.com) to the formatting and stylistic choices. Plus, using WordPress gives you the freedom to create a website that’s as simple–or complex–as you’d like.
Envato runs the largest online marketplace for WordPress templates. Here are eight hand-picked WordPress themes that have great masonry-style grid layouts:
1. Stag
From designer DeliciousThemes, this one comes with lots of different demo layouts, so you can imagine all the possibilities without having to do too much design work yourself–and it’s easy to switch up the look of your site. It comes with Visual Composer, Slider Revolution, and Templatera Addon. Pictured: the “Typed Hero Text” demo.
2. Hygge
Hygge is a Danish concept that reflects comfort and coziness, which is how you want your website visitors to feel, right?
3. Joker
This is one the best-rated photography themes on our market. It has masonry-style albums and gallery pages, plus full-width and other layouts for variety.
4. Onliest
With Visual Composer, Revolution Slider, and homepage PSD files included, this theme is great for those with a little more coding experience (though it’s not a requirement!). The design team is highly rated for their product support.
5. Huntington
A symmetrical grid layout with a left-aligned navigation menu. The menu makes the site simple to look through, and social media buttons easy to find.
6. Werkstatt
Werkstatt is a WordPress theme that shows up on many different lists, because it’s adaptable for many website needs. The simple masonry portfolio is a winning layout, but if you want to switch it up, there’s a number of impressive demos and site designs included.
7. Pofo
This theme’s typography makes it a standout choice. It also includes a WooCommerce-ready shopfront and Yoast SEO plugin!
8. Haar
Saving one of the best for last, Haar is a beautiful, creative theme with lots of different layouts and demos. It’s created by Power Elite designer Edge-themes, but with not too many sales (yet!), so it’s a unique choice. I love the way the demo sites have example content that stick to a three-color scheme with its illustrations and imagery.
Go Forth and Build Masonry!
Looking for more WordPress themes? Check out more creative portfolio themes on our marketplace.
