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”?
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 twenty hand-picked WordPress themes that have great masonry-style grid layouts:
This WordPress theme from designer KrownThemes has nearly 5,000 sales and is geared towards portfolio sites. There are four navigation styles, a page builder, and a modular grid. It’s mobile-responsive, with clean code.
Best for “creative professionals that love grid and minimalistic design”. Mug is a flat-style theme. It has plugins that are compatible with Dribbble and Twitter, so it’s great for designers.
There’s a lot to like about this one: the space-themed designs on their demo, the rounded serif fonts, the included Visual Composer, the interactive maps, the SEO-friendly code, the uncluttered home page...
With the full-width header and the blog post formatting, this one is especially good for writers and those who need something a little more word-oriented. The left sidebar menu is a unique choice.
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.
Hygge is a Danish concept that reflects comfort and coziness, which is how you want your website visitors to feel, right?
A bold portfolio theme, North is made for agencies and freelancers. It’s tested to work across browsers and it’s super easy to customize.
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.
Made by Elite web designer Onioneye, this WordPress theme is simple and straightforward. A good choice if you have a logo or want something that’s timeless.
This grid layout mixes the sizing of the squares, resulting in a portfolio layout that’s complex, without being too chaotic.
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.
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.
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.
This theme’s typography makes it a standout choice. It also includes a WooCommerce-ready shopfront and Yoast SEO plugin!
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.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post