June 2, 2020

48 Examples of Excellent Layout in Web Design

Beautiful graphics and colors are great and play a big part in web design, but most would agree that the backbone of a solid user experience is the layout. After all, what good is all of the eye candy if one can not easily read and digest the content. There is nothing better than opening a perfectly organized and readable website – a page where the layout invites you to browse the site’s content. There are several ways to organize and put together a nice layout for your website, and here we’ll show some examples of sites that use grids, columns and blocks to showcase their content.

Superawesome

contentsites01

leids film festival

contentsites02

Kokoro & Moi

contentsites03

UX Magazine

contentsites04

TRUF

contentsites05

The Bygone Bureau

contentsites06

Live Now

contentsites07

OURHYPE

contentsites08

Minimalist Design Magazine

contentsites09

Computerlove

contentsites10

Simon Collison

contentsites11

YCN

contentsites12

Arnaud Beelen

contentsites13

BB – Bisgrafic Blog

contentsites14

Derek Mack

contentsites15

Magnum Photos

contentsites16

The Canary Collective

contentsites17

Zachary Pulman

contentsites18

de51gn

contentsites19

The Grid System

contentsites20

iniva

contentsites21

graphito.net

contentsites22

TBWA – London

contentsites23

method.com

contentsites24

Theme

contentsites25

Jan Sochor

contentsites26

FYNN

contentsites27

AiGA NY

contentsites28

Draft

contentsites29

skyskraper

contentsites30

cheetos

contentsites31

Haik Avanian

contentsites32

Morphix

contentsites33

nocturn

contentsites34

Zaum & Brown

contentsites35

SF 70folk

contentsites36

Cool And The Guide

contentsites37

T Magazine

contentsites38

next room

contentsites39

Indextwo

contentsites40

The Feast

contentsites41

pips a la carte

contentsites42

Dojo Design Studio

contentsites43

Frieze

contentsites44

The Morning News

contentsites45

Rainfall Daffinson

contentsites46

Mark Boulton Design

contentsites47

design B studios

contentsites48

Sources:

Share

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

62 Comments

  1. James Reply

    It’s an impressively long list of websites but I’d be interested to know what the thinking behind why some of these are because apart from a few, there are some pretty average designs and layouts listed here.

    J.

    1. Gisele Reply

      The point is to show nice ways to organize content in web design! And also the idea is to reinforce that a good layout is very important and that you need to show your content in a way that gets the audience attention.

    2. Jesse Reply

      I have to agree with Paul on this one. 48 links to sites is far less useful than 10 links to sites with differing, but well crafted, layouts and an analysis of each. Most of these sites have the same type of layout, and you could easily argue that some are not easy to read. And to throw out a bunch of links with no explanation as too why they were chosen, or what makes them good isn’t really beneficial.

      1. j Reply

        seems like @ paul was making an observation. I tend to agree. These are great layouts and great ways to organize and present content, and I love the grid as much as the next guy, but I would love to see some that aren’t based purely based on, or so obviously based on the grid. Great collection- (thanks Gisele Muller) and great aesthetic, but a lot of similarity.

    3. Matt Reply

      I agree, not very interesting here. In fact this look like a ploy to get picked up by search engines on a story that uses a list. Something very popular these days is to provide a list of something and number it. People love numbers. By the way, not one of these sites truly sells a product. It would be nice to see some “nice design” put towards function in selling something.

  2. Joe Power Reply

    A lot of those are very nice sites, but by selecting only grid based sites you inadvertently demonstrate how cluttered and homogeneous the format can sometimes be when used to the exclusion of all others.

  3. Derek Reply

    Eh, these lists are all the same. Plus, many of the sites included aren’t laid out well in my opinion. There are a few nice ones, don’t get me wrong though.

  4. steve Reply

    These layouts were pretty mediocre at best and I agree, most come from the same design, faintly colored transparent boxes in horizontal grid.

    A for effort though

  5. cra Reply

    @mike,
    Paul didn’t complain – he asked a question.
    However, Jesse, Jordan (and I) agree with the implied constructive criticism and those two offered excellent suggestions.

    @mike – if Gisele is going to post stuff publicly on a site with COMMENTS enabled, then by-gawd we’ve all been around the net long enough to know that’s an invitation for comments – good & bad.

    What’s most ironic is that this post (and this site) is about good web design, but this site is poorly laid out. I’ve got about an inch or two of horizontal scrolling I have to do to read the width of the page and the layered ad at the bottom “create stunning flash sites” cuts off just to the right of the ‘G'(on yellow bkgrnd) whether I scroll or not – so I have no idea what word the ‘G’ begins.
    And the (too) colorful & disparate boxed ads on the right compete visually with the navigation, article headers, and screencaps on the left.

      1. Robert Reply

        That was about to be my question as well… As a developer and designer, you normally have a large screen with a high screen resolution and being that you’re on this site… I’m guessing you’re either a designer, developer, or you want to be.

        That being said, this site is set to a width of 1100px which is larger than the typical person’s screen on the internet.

        Although I may not think ALL the sites listed are examples of good layout, and even though the layouts repeat themselves on different sites listed, that doesn’t mean this is a bad list.

        Not everyone has the same taste in design. And the fact that the layouts repeat means that type of design really does work.

        Now it’s up to us as designers to take the knowledge, be it good or bad, and go create good design.

      2. Tony Wright Reply

        The same resolution that the iPad uses… and most netbooks.

        Any designer that doesn’t design for 1024 wide is more interesting than design guitar solos than serving users.

        (note: I’m writing this on my netbook).

  6. AhoyMan Reply

    I agree that this post is seriously lacking in information. Most of the examples are redundant and any nuances would be missed without explanation.

    One might argue that this is for inspirational purposes, not educational, however the lack of variety leaves much to be desired.

  7. Cbourgeois Reply

    I find these difficult to read not to mention that most of them have serious usability issues. I don’t think posting 48 links to be an insightful article without any explanation as to why they are “Excellent Examples”. Most of these are “layout diarrhea”.

  8. Mark Reply

    For the most part I have to disagree. So many grid-style layouts that don’t help direct the eye anywhere, and just lead to information overload. Grids everywhere!

  9. Trevor Stafford Reply

    That uxmag.com site actually made me laugh out loud. The layout is plain, copy-heavy and borderline unreadable.

    The icing on the cake though is its ‘common sense’ headline. Cramming copy in endless boxes is not common sense. Colour and whitespace is common sense.

  10. Tom Reply

    Aah, I was very excited to see this linked to from WedDesignerDepot, but it wasn’t exactly what I was expecting!

    A lot of the sites featured there are variants on the same boxed-out layouts, I was expecting truly innovative layouts fitting to the websites purpose – the kind you don’t see everywhere on the web!

    My hatred for boxes aside, there’s certainly some nice sites in the collection above (The T Magazine stood out the most for me) so thank you very much for that!

  11. @robhampson Reply

    Some nice sites here, some of which I haven’t seen before. They all use and adhere to strict grid strictures (apart from perhaps design b’s) making them all look quite similar and boxy. Not that there’s anything wrong with this style, but maybe the title of this article was named incorrectly. The design remind me of a lot of the sites seen on http://siteinspire.net

    Short summaries of why each design had been chosen would be good.

  12. kok Reply

    What good DESIGN makes is usability and look. At least one half of these examples is missing readability (usability). Title pass by the content. It should be: “48 looks good layouts”. Anyway good reason to debate about.

  13. wesley Reply

    I like it, they are all the same (with the grid/block thing going on) but some are really neat! I think it was a great idea to start with to display only “block” layouts, I know all the others, I don’t mind seeing some magazine kind of design once in a while, it’s refreshing! Good job!

  14. Sean Reply

    Fantastic post! The best part about these is that they are able to show a lot of content without the mess of over design.

    Thanks Gisele!

  15. Patrick Reply

    Kudos to you for scouring the net in search of designs that I certainly hadn’t seen until now. I did get some pretty good ideas.

  16. Doug Gough Reply

    I always appreciate these lists, here and on other sites, as a quick way to get exposed to different designs. Thanks for that. I agree with many of the comments in that I find a majority of these sites quite unreadable, and suffering from trying to fit everything on the home page. I prefer a design that suggests what content lays inside the site, and leads us into categories of interest.

  17. Tom Reply

    Disclosure: I’m a programmer.

    Many of these designs are horribly busy. They are not inviting. Even the Minimalist looks, well, decidedly NOT minimalist.

    Remember, this is a programmer saying this. We are the font of all busy UIs. Since there’s no commentary from the author, I’d like to give my, admittedly, non-designer, programmer, __end-user__ views on as many as I can fit time for.

    Superawesome: Looks like a dev made it and a designer came in after and centered it and put images atop each block.

    Leids: Someone *really* likes the idea of newspaper clippings pinned to the wall. Beyond busy and bordering on gaudy. Newspaper clippings. On a wall.

    Kokoro: Where the heck am I supposed to focus? Is there any thought to eye flow? I can’t find it. The combination of the pink triangles and the moire pattern at bottom right make my eyes vibrate. Unpleasant.

    UX: Again, a dev made a basic calendar-style grid and a designer came back through and tried to break it up with multi-block-sized chunks, but it’s still a bunch of blocks stacked atop each other. At least there’s eye flow – top left(red) to top right to mid-mid-right(smoker) to mid-right(long column) to bottom-left(wide block). At no point does any of it make me want to go there.

    TRUF: Well, it’s got more pictures, but it’s still a dime-a-dozen big-focus-block-at-top and many-smaller-blocks-below that is ubiquitous on the web these days. I’m seeing a trend here. Dev made a grid, designer modified it. The ***layout*** is boring. The images are mildly interesting, particularly in juxtaposition.

    Bygone: If you changed the palette to grayscale, it’s the Wall Street Journal. No, not the site, the actual, physical paper. From the extremely broken up article teasers all over the front page to the “navigation” on the right. I like the muted font-color choices, but that’s not layout. And look at all that wasted space up top. (I remind you, I am a programmer. That’s wasted space. 😉 ) This layout may be the most “interesting” so far. Still, I wouldn’t call it excellent layout. It’s a grid. Devs do this every day and designers complain about how boxy and busy our UIs are. Maybe UI design has gone the Volvo way.

    Our Hype: I’ll skip the colors this time. It’s about layout, right? Because those ARE hideous. They scream 1995. I wouldn’t be surprised to see a blink or a marquee, to be honest. To the Layout! How is the “excellent layout”? The articles are arranged in 5 thin columns. At least they’re not all the same height. How excellent is your design when that’s an actual complement?

    I’m out of time for now. I may do more later, but so far, I’m seeing a lot of programmer UIs that a designer has glossed over with a little color and font, with the occasional “make this block 2×1 and this one over here 1×2 and – stay with me – let’s make this one 4×2! Crazy!”

    I’m not saying designers are awful or little better than programmers, but these particular UIs, if they are the epitome of excellence in layout, give the suits more and more ammo when they say “we don’t really need an artist, do we?”

    What happened to innovation and uniqueness and eye flow? Why is it that the “best” design to my non-designer eyes – as far as I got in my commentary – looks identical to a 128-year-old print periodical whose graphic design has not materially changed since the 1940s? (see paragraph 4 of Beginnings at http://en.wikipedia.org/wiki/The_Wall_Street_Journal)

    Here’s a serious question: Is this the best that web designers, graphic designers, and artists have to offer in the way of ***layout***? Pretend all those pages are in black and white with no images. Blocks. Just black or white. Ok, I’ll give you gray, also.
    In fact, I’d love to see someone take each screenshot and simply photoshop over each block with a shade of gray that most matches the value of the image/text therein.

    THEN let’s see how excellent the layouts are. I personally thing they are busy and uninteresting or overstimulating(which has the same effect).

  18. Bob Reply

    Some great examples, but they are all very similar. As a few people noted, fewer examples, but good examples of varying layouts would be more helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *