17 Rock Solid Website Layout Examples for 2017
Some of the most creative websites out these focus on creative a good layout. There are more things at play than just layout design, this post doesn’t really care about.
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 great designs.
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 to most you see in eCommerce. The first thing you see is a giant green square that talks about free shipping. The square is accompanied with two other smaller squares of Instagram photos of their products. The three squares create symmetry in this design. It looks real 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. It then becomes not a matter of figuring out how to design the website but how to direct the photography.
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. You want that when you’re trying to sell things online.
I like Rudy’s website because of all the different but small movements that are incorporated. It gives the layout some interest. The squared photographs are pretty clean cut, there is nothing that unordinary about them. But the ever so slight animations make it that much more interesting.
Now, on this page, 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 on the bottom left. You don’t see that anywhere anymore. It looks like an article column from a newspaper or a magazine.
On the website, the text is not treated like that, more often than not, text gets more room than pictures. But not here!
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 looks a little odd.
But, all the photos are well aligned and clear cut; they aren’t messy, they are clean. That balance works very well here.
Happiness Abscissa is an interesting website, to say the least. The layout on their home page is fantastic! The are using parallax 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 a really fun touch!
Unlike most of the layouts on this list, ERDEM is alignment oriented. Everything is the same size, in the same grid, and repeated. 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 easily. 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. It’s followed by a section with close up background photos.
Then again followed by a section with boarders-less shoe displays. This pattern is repeated four times for four different kinds of shoe collections. They layout is not all 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 forwards.
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 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. That composition between the image and the text is executed well. Every block follows this rule except the display of the image and of the text varies a little each time.
10. Bill Bass
Bill Bass is showcasing the fall collection called Calm. The whole page is basically designated to all the items in the collection. But the items are layout 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 little bit of unalignment gives the design the necessary interest it is looking for.
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 normal grid, unlike Bill Bass. And it has big photos featuring their leather goods.
At the very to there is a gif of a leather wallet spinning. I think it’s the most brilliant gif as far as web design goes. It’s not a very exciting page by any mean but it gets the job of selling the leather goods done so well!
LOCALs has a few good thing going on in its layout. The home page opens up with a closeup photo of a hat. The hat has a label, which you can clearly read. It’s like they were inspired by BXXLGHT.
Then as you keep scrolling they show off some products in an atypical grid. Again, nothing too fancy just a play on 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 this whole landing page is great. But the pricing section caught my attention. Most pricing pages start with a table grid of all the different option but not here. Here the security device is front and center.
The different pricing tiers are surrounding it. The interesting thing is that they are not aligned in a typical format, i.e. from least to most expensive.
I have been in love with the web designers at Everlane for years. This time they did it again, the layout for this landing page is amazing! Things are overlapping. Things are interactive.
There is plenty of padding around the content on each section. There is a good balance between the sections that are alone and sections that overlap.
15. Wooden Dot
I’m including Wooden Dot on this list for two reasons. First, the layout is great. There is a use of a single full-width image and two in a row. This gives some variance to the layout. But the slight use of padding and the quality of photography make the layout work. It wouldn’t look as good with different types of photos.
The second reason is that some of the images are a gifs. You can’t see this in the static screenshot but they are using gifs too. It shows 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. But it’s a really fun website. The use of color and pattern is perfect. The split on the left between the call to action to order and the sample fortune cookie on the right is great.
The overlapping elements are all kind of busy. This is a vibrant design for sure!
17. Oi Polloi
Oi Polloi sells all sort of items including shoes. Their website is filled with colorful but minimal design elements. The design makes the page look really fun actually. The different typography – that’s a little out of place – and the photos of different items – like the jacket in the screenshot – are well executed here.
The design of Oi Polloi is simple and easy but oh so quirky and fun. I just had to include it in this list!
Do you have a website that has a really great layout? My advice to you is to look at it and analyze 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 practice from the design side. Learn from websites that inspire you!