17 Rock Solid Website Layout Examples for 2018
Some of the most creative web designers out there focus on creating a good layout. In web design, there are actually more things at play than layout design, however this article doesn’t really care about those.
I’ve gathered 17 websites from around the web that have fantastic layouts. I’ll discuss what makes each layout great to give you a better understanding of how layout matters in web design.
Let’s get started with The Horse’s design!
01. The Horse
The Horse is an Australian leather maker. The company’s home page is a little different than most you can see on eCommerce websites. The first thing you’ll see is a giant green square talking about free shipping. The square is accompanied by two smaller squares displaying Instagram photos of their products. The three squares create symmetry in this design. It looks really elegant.
BXXLGHT’s layout is, more or less, non-existent. To create a sense of layout they are using photos on their home page. It makes for an interesting design detail. Then, it becomes not a matter of figuring out how to design the website but how to lay out the photos.
That’s a whole other ball game. But, it came out exceptionally well because their page looks really great. Actually, it looks really different and unique. This is what you want to achieve when you’re trying to sell things online.
I like Rudy’s website because of all the different but small movements that are incorporated into the design. It makes the layout interesting and eye-catching. The squared photographs are pretty clean-cut. In fact, there is nothing really unusual about them but the slight animations make it so much more interesting.
On the product pages, there are other kinds of photos. Most of them are of standalone shoes. They don’t look like boxes. I like this because it breaks up the pattern of square photos we see on just about every website, including this one.
I was drawn to this website because of that small paragraph in the bottom left corner. You don’t see that kind of product description anywhere anymore. It looks like an article column from a newspaper or online magazine.
On the website, the text is not treated like that. More often than not, text gets more room than pictures. But not here, on Stuff’s website!
05. So Worth Living
So Worth Living is a fashion website with many little design quirks. The thing I like the most about their design is that photos are placed on top of one another. It makes the sections look a little bit odd.
But, all the photos are well-aligned and clear-cut; they aren’t messy at all but quite clean. That kind of balance works very well here.
Happiness Abscissa is an interesting website, to say the least. The layout of their home page is fantastic! They are using a parallax effect with a few random pictures of decoration and a few images of their products.
As you scroll down, the layout changes to have just text accompanied by a single decoration. The decorative shapes are really fun touch!
Unlike most of the layouts on this list, ERDEM is alignment-oriented. Everything is of the same size, placed into the same grid, and repeated similarly. I’d almost categorize this layout as OCD, it’s just so perfectly aligned! But hey, it does a great job! The layout helps create a professional and high-end look for the fashion brand.
It makes browsing and looking at the different pieces pretty easy to do. The layout alone makes for a pleasant design experience for the user.
People Footwear has a more irregular layout. Their home page is filled with big photos, followed by a section with close-up background photos.
Then comes a section with boarders-less shoe displays. This pattern is repeated four times for four different kinds of shoe collections. The layout is not all that crazy because there is some repetition that keeps is grounded. By the time you scrolled past the second collection, you know what to expect going forward.
SALt is an eyewear company. Their home page is one of my favorites on this list. The layout is broken down into various blocks. I’m more interested in what’s inside of these blocks.
There is a pattern that this design follows: a single and high-quality image coupled with a small bit of text. The composition of the image and text is executed well. Every block follows this rule but the display of the image and the text a little bit varies each time.
10. Bill Bass
The website of Bill Bass showcases the fall collection called Calm. The whole page is basically designated to all the items in the collection. However, the items are laid out in an unconventional grid.
They are still, more or less, aligned but it‘s not a typical grid you’re used to. It’s not like ERDEM for sure. But, this kind of unalignment makes the design interesting and memorable.
I’ve come across this leather maker’s website a few times while looking for design inspiration. I like this website because it’s so simple. It has a grid, a regular grid, unlike Bill Bass. And, it has big photos featuring their leather goods as well.
On the right, there is a gif of a spinning leather wallet. I think it’s one of the most brilliant gifs I’ve ever seen. The page itself is probably not very exciting but it gets the job of selling leather goods done so well!
LOCALs has a few good things going on in its layout. The home page opens up with a close-up photo of a hat. The hat has a label you can clearly read. It’s like they were inspired by BXXLGHT.
As you keep scrolling, they show off some products in an atypical grid. Again, nothing too fancy just a play of squares. Two small ones next to one big one. It’s a nice way to break up the images and draw attention to the products.
The pricing section of CUJO is interesting. The design of the whole landing page is great. However, the pricing section caught my attention. Most pricing pages start with a table grid of all the different options but not here. Here, the security device is at front and center.
The different pricing tiers are surrounding it. The interesting thing is that they are not aligned in the typical format, i.e. from the least to the most expensive item.
I have been in love with web designers at Everlane for years. This time they did it again, the layout of this landing page is amazing! Things are overlapping. Things are interactive.
There is plenty of padding around the content in each section. There is also a good visual balance between standalone and overlapping sections.
15. Wooden Dot
I’m including Wooden Dot on this list for two reasons. First, the layout is great, as it uses both full-width images and image grids at the same time. This gives some variance to the layout. However, the slight use of paddings and the quality of photography make the layout work. It wouldn’t look as good with different types of photos.
The second reason I like this design so much is that some of the images are gifs. You can’t see this in the static screenshot but you can check it out on the live site. The gifs show how the furniture pieces actually function.
16. OK Cookie Co.
This is by far the simplest layout in this list. That’s because there is nothing else on this page, however it’s a really fun website. The use of color and pattern is perfect. The split between the call to action to order on the left and the sample fortune cookie on the right is a great choice as well.
The overlapping elements are all kind of busy. This is a vibrant design for sure!
17. Oi Polloi
Oi Polloi sells all sorts of items, including shoes. Their website is filled with colorful but minimal design elements. This kind of design makes the page look really fun. The different typographical elements and the photos of the items like the jacket in the screenshot are well executed on this site
The design of Oi Polloi is simple and straightforward but oh so quirky and fun. I just had to include it in this list!
Do you know a website that has a really great layout? I would recommend you looking at it carefully and analyzing the design. What makes the layout great? What design elements support the layout? Which ones exploit it? Hell, try to recreate it to see how the layout comes together in the work of other designers! Learn from websites that inspire you!