10 Rock Solid Website Layout Examples

by on 16th February 2011 with 286 Comments

Layout can both be one of the easiest and one of the trickiest facets of web design. Sometimes a designer can bust out an amazing layout in minutes and sometimes that same designer can struggle for the better part of day with the same task.

Each project is unique and calls for a unique solution, but I’ve found it helpful to keep a few rock solid and incredibly versatile alignments in mind that I can bust out when I get stuck. The ten layouts below should be enough to get you through even the worst cases of designer’s block when you can’t figure out the best way to arrange the content on your page.

Keeping It Simple

Page layout is equal parts art and science. Creating something that’s visually attractive and unique takes an artist’s eye. However, there are several very easy to follow guidelines that you can use to create solid layouts that work for any number of cases. These principles include choosing and sticking to an alignment, structuring your whitespace properly and highlighting important elements through size, positioning, etc.

Designers often stress out far too much about the layout process. We have a tendency to approach a project while thinking that it needs to be completely unique in every respect to be worth our time and the client’s money. However, if you have a good look around the web you’ll see that this isn’t necessarily the case. Great looking websites often use layouts that are fairly simple and not the least bit unique. It’s true that the pages we designers marvel at the most are often from the peculiar sites that break the mold, but your average client just wants something usable, clean and professional.

In this article we’re going to take a look at ten very common layouts that you can find on countless sites across the web. Notice that the way these sites are styled, meaning the colors, graphics and fonts, is unique, but the basic structure of the sites themselves are based on tried and true methods for laying out a webpage. We’ll emphasize this by first showing you a simple silhouette of the layout so that you can project your own thoughts and designs onto it, then we’ll follow it up with one or two examples of real sites that use the layout.

If you’re a web designer, bookmark this page and come back the next time you get stuck laying out a page. Keep in mind that each of the following layouts represents a basic suggestion for you to mold and modify. I encourage you to not use them as is but put your own spin on them based on the needs of your project.

Three Boxes

This is probably the most simple layout on the list. In fact, you’ll be tempted to think that it’s far too simple to ever fit your own needs. If this is the case, you’ll be surprised if you really put some thought into how versatile the arrangement really is.

The three boxes layout features one main graphic area followed by two smaller boxes underneath. Each of these can be filled with a graphic, a block of text or a mixture of both. The main box in this layout is often a jQuery slider, capable of showcasing as much content as you want!

The silhouetted shapes along the top are areas that can be used for logos, company names, navigation, search bars and any other informational and functional content typically on a website.

screenshot

This design is ideal for a portfolio page or anything that needs to show off a few sample graphics. Each of the images could be a link that leads to a larger, more complex gallery page. Later in the article we’ll see how to mix this idea up even further.

In the Wild

Below we see a beautiful implementation of the three box layout in Peter Verkuilen’s portfolio. As suggested above, the primary graphic rotates and displays a number of Peter’s recent projects. Clicking on one of the boxes will bring you to that project’s dedicated page where you can find out more information.

Simple, effective and attractive. You can probably pull off a full, live web page with this layout in under an hour!

screenshot

3D Screenshots

As developers continue to create an endless collection of webapps, the 3D screenshots layout seen below, or some variant of it, is becoming more and more popular. The basic idea is to top your page with a headline and then toss in some stylized previews of your application. These often come with reflections, heavy shadows, big background graphics, or even complex adornments such as vines crawling all over the screenshots, but the core idea is always really simple.

screenshot

Another place I see this trick used a lot is in pre-built themes. In these cases, a designer is selling a stock layout and really needs his/her placeholder graphics to shine, and nothing says cool and modern like some fancy 3D effects!

In the Wild

Pixelworkshop uses this technique, not as a stock theme, but to actually showcase stock themes! Here the 3D screenshots swap out in a slideshow and come up in a number of different arrangements. Stop by and take a look to see all the various ways the designer presents the images.

screenshot

Advanced Grid

Many of the layouts that you’ll see in this article adhere to a pretty strict grid alignment. However, for the most part, they don’t simply suggest a page full of uniform thumbnails. For instance, the layout below mixes up the size of the images to avoid redundancy.

As with the three boxes example, there’s one primary graphic heading up the page. This is followed by a simple twist on the idea of a uniform grid of thumbnails. The space would allow for a span of four squares horizontally, but instead we’ve combined the first two areas so that the left half of the page differs from the right.

screenshot

As we mentioned with the first layout, the blocks don’t have to be images. For example, you can imagine this as blocks of text on the left flanking square images on the right.

In the Wild

In the gorgeous example below, this layout is used for a children’s clothing website. Notice that near the bottom of the alignment, they’ve switched things up even further so that the left side features an almost oddly-sized image followed by a paragraph, neither of which perfectly line up with the content on the right side.

Again, once you’ve got your basic layout in mind, you can make subtle changes like this while maintaining the integrity of the underlying structure. Another interesting trick they used was to split up the main graphic into two areas. It’s actually all one JPG, but it has been divided into two images to show off even more content.

screenshot

Featured Graphic

Sometimes you don’t have enough content for a page full of images. So what do you do if you want to showcase one icon, photo or perhaps even a symbol such as an ampersand? The layout below is a super easy solution that is quite popular and reads very well due to the lack of distractions.

screenshot

The result is a page that is bold, yet minimal and clean. The statement it makes is strong and impossible to miss, just make sure your graphic is good enough to be featured so prominently!

In the Wild

Just how common is this layout? A lot more than you might think! With minimal effort I was immediately able to come up with two sites that use some close variant of this technique. Notice that you have options for how you want to format the text and even where you want to place the navigation. The second site rearranges the secondary elements quite a bit but it’s instantly recognizable as the same basic layout.

screenshot
screenshot

Five Boxes

The five boxes layout is simply an evolution of the three boxes layout. All of the same logic applies, it’s just been modified to hold even more content. It could easily be four boxes as well, it just depends on what you want to showcase. It also makes it look like you put a little more effort into the design!

Obviously, as you add to the layout, the secondary items become smaller and smaller so for most uses, five boxes is probably going to approach the limit.

screenshot

Just as with the three box layout, this one is so versatile that it can literally be used on just about any type of site. Ideas for switching it up include adding a large background graphic, rounding the corners, adding shadows and/or reflections, or perhaps even adding an interactive element to the smaller thumbnails. You could easily add in buttons that cause them to scroll horizontally.

In the Wild

Here again we have two examples of this layout being used in slightly different ways. The big thing to notice here is that despite having similar layouts, these two sites almost couldn’t appear more different from each other if they tried. One uses a hand drawn illustration style, the other photographs and gradients. The first one uses muted colors and script fonts, the second bright colors and modern fonts.

This drives home the argument that using one of the layouts in this article won’t kill your creativity. Once you’ve arranged the content, there’s still plenty to be done in the area of aesthetics. This is what will really define the site’s personality and often make or break a client proposal.

screenshot
screenshot

Fixed Sidebar

Thus far all the sites that we’ve seen have had a top-side horizontal navigation. The other popular option is of course a vertical navigation, which lends itself to creating a strong vertical column on the left side of the page. Often this is a fixed element that stays where it is while the rest of the page scrolls. The reason for this is so the navigation can stay easily accessible from any point in the site.

screenshot

The rest of the content can borrow from one of the other layouts on this list. Notice that I’ve again modified the three box layout, this time in a four box arrangement. Once you’re done reading this article, look at all the layouts again and think about how you can mix and match the ideas to create new layouts.

In the Wild

As with the previous example, the two sites below actually look very different, even from a layout standpoint. However, if you look again you’ll notice that they both use a left-side vertical sidebar and the four box layout. The second example has simply moved the smaller boxes to the top of the page! Yet another interesting idea that you should keep in mind when creating a site based on these examples.

screenshot
screenshot

Headline & Gallery

Everyone loves a good gallery page. From a layout perspective, what could be simpler? All you need is a solid, uniform grid of images and some room for a headline with an optional sub-head. The key here is to make your headline big and bold. Feel free to use this as a point of creativity and include a script or some crazy typeface.

screenshot

This example uses squished rectangles to mirror the real site below, but this can and should be modified to fit whatever you’re showing off. The point here is to get you to think outside the box and not default to a square, maybe you could use vertical rectangles or even circles in your own gallery!

In the Wild

The developer below used this design to create a gallery of the logos for clients that he has worked with. Notice that he’s not suggesting that he created the logos, but is simply showing off his client base in a very visual fashion. This goes to show that even if you’re not a designer, a thumbnail gallery might be a great way to showcase an otherwise plain and boring list of items.

screenshot

Featured Photo

The layout below is extremely common, especially among the photography community. The basic idea here is to have a large image displaying either your design or photography (anything really), accompanied by a left-side vertical navigation.

screenshot

The navigation might be the strongest in a left alignment, but feel free to experiment with a center or even right alignment to compliment the straight edge of the photo.

In the Wild

The site below really makes the most of this layout by turning the one featured image into a horizontal slider. One image is featured at a time but you can see the next one peaking onto the right side of the page. When you hover over this, an arrow appears that allows you to slide through the photos.

As an alternative, why not try to make a site that utilizes this same layout but with a vertically sliding image gallery? The space almost seems more suited for this as you won’t have to include an awkward cutoff area to protect the navigation.

screenshot

Power Grid

The power grid is the most complex layout in this article, but it is one of the most effective layouts I’ve seen for pages that need to contain all kinds of various related content. From images and music players to text and videos, you can cram just about anything into this layout and it stays strong.

screenshot

The key lies in the bottom half of the preview above. Notice that there’s actually a large container that holds a series of rectangles. This container provides you with the boundaries for your space, and all the content you place inside should be formatted in a strong but varied grid, not unlike the advanced grid layout near the beginning of this article.

In the Wild

This one can be really hard to wrap your mind around until you see some live examples. The first is a showcase of art and culture. That description alone tells us that the content is going to be all over the board, and indeed we see that the page is filled with Twitter feeds, photos, lists, images and more.

However, it all fits tightly inside the grid that the designer has established. This layout is easily extendable so that no matter how much you throw at it, the overall appearance should remain fairly logical and uncluttered as long as you format and arrange your content properly.

screenshot

This layout above heavily reminded me of a tutorial I wrote a while back on designing a website for a rock band. Here we have a very different looking page, but a nearly identical arrangement of content, especially in the lower half. The real trick to pulling this layout off right is to start with a few really big boxes, which are then broken up into smaller areas of content as needed.

If you’re still feeling lost, check out the full tutorial, which will walk you through every step of the process.

screenshot

Full Screen Photo

The final layout on the list is another that is ideally suited for photographers, but will work on any site with a big, attractive background graphic to display and a limited amount of content.

It can be really hard to read content when it is laid over a background image, so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links, copy, logos and other content.

screenshot

Rather than using the bar as one really wide content area, try splitting it into a few different sections. This can be done by varying the background color, adding some subtle vertical lines as dividers or even actually breaking the big box into smaller disconnected boxes as I’ve done above.

In the Wild

This layout might feel incredibly restrictive, but below we get a glimpse into just how much it can hold. This photography site fills the bar with navigation, an “About” block of text, a few recent photos with descriptions and a large logo! Not bad for such a small space, and it pulls all this off in a very clean and non-cluttered way.

screenshot

Conclusion

There were a few key points made above that I want to reiterate in closing. First, even though page layout definitely isn’t necessarily a “one size fits all” practice, there is a science to it that can be quickly and easily applied in an incredibly vast number of circumstances.

Next, the layout ideas presented above need not result in cookie cutter websites that all look the same, but instead merely provide you with a basic canvas on which to build a notably unique finished design.

Finally, the key to successfully implementing these ideas is to remember that they’re not set in stone. Each should be changed to fit your specific project and can even be mixed and matched to create new ideas!

Leave a comment below and let us know what you think of the layouts above. Are there any not mentioned above that you default to when you’re having trouble? Leave a link to an example.

Comments & Discussion

286 Comments

  • http://rbharathan.com Rajashri Bharathan

    good article. glad this was put together.

  • http://www.anders-studio.com Andy

    Nice examples. Simple IS the best. I’ll be sure to use these silhouette examples in the future!

  • http://goodwebdesign.co Good Web Design

    wow! great article. Nice idea for your gallery to select on layout… hehe.

  • http://www.creativebeacon.com James George

    Wow, this is a great collection of the basic building blocks of web design layouts. They all look so simple when you break them down. Fantastic, and keep up the good work!

  • http://www.rorschach-design.com Marc

    This is a fantastic article. I love the simple breakdown followed by how that translates into a real site. That’s where I struggle the most personally. Trying to simplify my vision in terms of boxes and spaces.

    Thank you, I’m sure I will refer back to this article numerous times.

  • http://www.finalcutstudio.com Final Cut Studio

    Great article! I recently published an article on the importance of wireframes (among other things) and seeing this article drove it home for me even further! Well done!

  • http://www.duzmath-tamas.hu/honlapkeszites/ Honlapkészítés

    I think this is great. Because very good to show the grid, and some real life implementations.

    And I agree with Andy.

  • http://www.revomediaonline.com Doug

    Thank you for this! I’ve been stuck trying to determine the best way to display my portfolio on a redesign I’m working on for my company website. This will definitely help me break through the proverbial wall.

  • http://spotpack.com SP Senthil Kumar

    Awsome article. This is going to be a great resource.

  • http://forkliftguys.co.za forklifts

    Really good post, very handy for future projects. The three boxes one is sick

  • http://www.f5media.in dharshyamal

    Nice Compilation!

  • GMoulin

    Good article.
    The “into the wild” examples are a good addition and help a lot.

  • http://fuelmediaworks.com Leroy

    Hey this is really cool and informative stuff.
    Bookmarked!

  • http://www.eatablegraphics.com/ Rahul

    Good work.

    How you got the blueprints ?

  • http://nejman.biz Pawel Nejman

    Great article, nice wireframes with powerful examples.
    Thanks a lot :)

  • http://remi5861.blogspot.com/ remi5861

    süper tespitler.

  • http://www.urgentjobvacancy.com/blog Emmanuel

    This has made my design life easy.
    Recently got a job for a design and photography company
    I think I have gotten a good idea for the page layout

  • Pingback: [Web Design] 10 Rock Solid Website Layout Examples – よくあるウェブレイアウトと、その作例 - mBlog()

  • Pingback: 10 Rock Solid Website Layout Examples | Design Shack | that said…()

  • http://govsitemash.ca govsitemash

    Vote for your favorite Government of Canada CLF website designs:

    http://www.govsitemash.ca

    Enjoy!

  • http://www.creativeflavor.com Janna Polzin

    Thank you for this! This is very useful and can help when I’m stuck in a rut and need inspiration.

  • http://www.computerlasvegasnv.com/ lvacs

    A very informative article. I love the simple layouts shown by stunning examples afterwards. It gives me some ideas to work with.

  • http://macabilin.com/ Angie

    Really nice article. This makes things a little less complicated in my perspective. Thanks!

  • http://www.subtledifference.com.au Stephen

    Great article, combined with 960 grid (or similar) some very good pointers of how to achieve a desirable result starting from the basics.

  • http://dinukaroshan.blogspot.com Dinuka

    Nice article.. And a very nice compilation.. Love the way you have extracted each design with relative to a real world sample site…

  • http://ilikekillnerds.com Dwayne

    I’m tying to improve my web design skills because I’m a web developer and understanding design a little bit better is something I am keen in perusing.

    These basic design templates will actually be pretty useful, you did good on this post kiddo.

  • http://www.sareez.com/Salwar-collection/ Salwars

    Awesome designs… Thanks for sharing…

  • http://rachmatlianda.com Arhcamt

    bookmarked! thanks a lot for this, i’m really sure this will come in handy. :D

  • Bhaskar Das

    Nice article.. loved the way you have presented the different layouts and designs…

  • Mel

    This was really helpful!

  • http://gregbabula.info Greg Babula

    Great post and overall a very well written article

    “Advanced Grid” is my favorite

  • Pingback: Tweets that mention 10 Rock Solid Website Layout Examples | Design Shack -- Topsy.com()

  • Abu Yazid Arriandhana

    great job !
    your simplicity told many things…thx

  • Pingback: Website Layouts mit Beispiel | Designschrein | Der Schrein für Grafik & Webdesign - designschrein.de()

  • Tristan

    Wow, this is fantastic! Well done!

  • http://www.kohum.org Kohum

    Great article. Very handy for when you don’t know how to approach a specific project. Thanks!

  • http://jakobloekkemadsen.com Jakob Løkke Madsen

    Very nice examples.
    And I love your beautiful hi-contrast wireframes!!!

  • http://www.weddingstory.sk Stan

    Great article. With grid system great combination.

  • http://twitter.com/reelfernandes reelfernandes

    PowerGrid is dead to me. The others are tried & true.

  • http://chilliwackdesign.com Chilliwack Website Design

    Wow, what a great reference to use. Thanks for putting this together and showcasing some great examples.

  • http://www.ifg.pl IFG design

    Wow, great summary :) and inspiriting

  • http://blog.alexkluge.de Alex

    Thx! I like how you first generalize (with b/w schemes) and then exemplify with live examples! *nice collection*

  • Jicebe

    +1

  • http://www.goodjolt.co.uk Jolt

    Most enjoyable design article. Made interesting reading, and the diagrams were an excellent idea too… functional, yet strangely surreal at the same time, seeing the site layouts in their purest, most minimal visual context. Thanks!

  • http://www.wilwaldon.com william waldon

    Great article. Interesting read for sure.

  • http://twitter.com/thivill4 Thiago Menezes

    Thank you for sorting this uP!

  • Pingback: links for 2011-02-20 – Kevin Burke()

  • sj

    good work but I DON’T SEE ANY CSS?

  • http://www.trishasalas.com Trisha Salas

    Excellent article. I especially like the comparison between the layout and it’s ‘in the wild’ counterpart.

  • http://orange-mac.de Manuel Wehlte

    nice article, really helpful. thank you very much!

  • http://www.ninja.web.id erwin prasetyo

    Great article…
    thanks

  • http://www.beardsquad.com.au Tim Martin

    Awesome article. It really simplifies the layout aspects of the design process.

  • http://sudwebdesign.com Chris Backhouse

    Great collection of grid layouts and nice to see the live examples!

  • http://web-patterns.net Samoo

    Nice article. Loved your from-the-wireframe-to-the-website approach.

  • Moazzam

    amazing article. it will help me alot cuz im new in web business. thnks alot.

  • http://usmanarshad.com Usman Arshad

    Thank you so much for the nice efforts dude, it’s my daily routine works on website layouts creation and currently I’m working on my own website layout on the other side when I got free time after my office, really helpful knowledge shared thanks again, looking forward more great from you. and now subscribing second blog after smashing magazine :)

  • http://www.weareomazing.com Dhruv Patel

    ehh… good article but how does it relate to distributing proper information that yields higher conversions? any data to back these awesome looking layouts?

  • http://www.megabody.com Steven

    I think I am going to use one of these layouts in my next website.

  • Pingback: Internet Brain » Blog Archive » Bookmarks for February 21st from 21:57 to 21:57()

  • Pingback: Design Shack: 10 Rock Solid Website Layout Examples « Random misspellings()

  • Pingback: links for 2011-02-21 « doug – off the record()

  • http://axcoto.com kureikain

    Great article for developer like me! I always ask myself how to make a wireframe before draw it in Photoshop! My skill is so bad so i’m always mess up the design! I look around many site, try to clone theme, then i realize i messed it up once more! Lol! Something like this article really helps! It give me a basic knowledge for wirefreame layout!
    Thank you again!

  • Matt

    Excellent article – thanks very much!

  • Pingback: 10 Example of Rock Solid Website Layout … « ilumindy == ilumin + indy()

  • sereal

    oh i love this article. thanks for putting this up online.

  • http://www.isotopon.com El

    Excellent article!
    Different approaches are very good for brainstorming

  • http://gabyprado.com Gaby Prado

    Thanks for sharing – good one!

  • Casey

    Great article! I’ve been looking for different layout structures and I’m glad to see it all in one post. Awesome!

  • http://www.webraptor.eu Bogdan Pop

    Took me 5 seconds to find the tweet button. That’s not good!

  • http://jamesduncombe.com James

    Awesome!

    I guess these are becoming design patterns in their own right now.

  • http://www.movieviews.be Dennis

    Very nice compilation.
    Thanks for it :)

  • Pingback: 10 Rock Solid Website Layout Examples – Designshack.co.uk « Can Koklu()

  • http://www.livingtech.ch Fabian

    this article should be of great benefit for all designers out there. well done!

  • http://www.maylisdesign.com Mmaayylliiss

    Very nice overview! Useful, thanks.

  • http://slidedesigns.com slide

    Great article. Long live the grid!

  • http://www.maiconweb.com Maicon Sobczak

    Very useful article! The examples are perfect and show that utilization of grids don’t have to be a excuse for poor designed layouts.

  • ali

    This is a great resource, thanks alot for sharing it.

  • http://www.fourandthree.com Levin

    Excellent examples on how one can take a simple wireframe and create some really great. The box examples really show why the relationship between objects make for a great user experience.

  • http://ejbdesign.com Eric

    Thanks for this. Great article! Following you on twitter now because of it.

  • http://www.orcharddesigns.com Cleveland

    Solid examples. Nice job putting this together

  • http://ggarciam.com Gonzalo

    Really good job. Very useful stuff.
    Thanks!

  • http://atthy.com/ Sathish

    Nice, Article it was very easy to make sense of the blocks, than seeing at a wire-frame. Thanks a lot for the article.

  • http://www.inflicted.nl Hugo

    This is usefull stuff. Wire-framing for designers!

  • http://www.as400warehouse.com Rob Hootselle

    Great article, and thanks for the info. Being a sales exec doesn’t lend itself to being as creative as I’d like, but this gives me a head start in getting some great layout ideas for my site at AS400Warehouse. Thanks!

  • http://www.stevenmccurrach.com Steven McCurrach

    Great article!
    I was forwarded the link for this via Smashing Magazine. This should come in handy for some future projects and save me a bit of time deciding on the simple parts.

  • Pingback: 10 Rock Solid Website Layout Examples | Design Shack | waveRider()

  • Pingback: 10 Rock Solid Website Layout Examples | waveRider()

  • http://www.zrce.eu Novalja

    wow thas great. do you know drupal themes that fit to these layouts

  • Pingback: La importancia de un buen Layout en el diseño Web | Applendamos()

  • Christina

    What a great helpful article. This will definitely help me with
    evolving a better insight into website layouts and their
    structures.

  • Pingback: 10 Rock Solid Website Layout Examples | External Brain()

  • http://www.kate-powell.com Kate

    Brilliant examples – thanks for posting!

  • Damien Hashemi

    Awesome post, although do you have examples of
    a) Websites with A LOT of copy. I’m currently working on a very text heavy development.
    b) the examples above are all home page/front page examples. How does the design differ once you enter the site. How do you deal with the content in these formats. If the site is purely imagery that’s fine, but how do you handle copy in a five box format, that gives you a beautiful front page but an unworkable format for the content?

  • http://designori.com Çağdaş Ünal

    It’s the most inspirational blog post about web design in the last days that I read. Thanks Joshua. Let’s bookmark it, tweet it and spread the love!

  • http://www.theraisak.com Theraisa K

    LOVE! I will definitely be bookmarking this for future reference.

  • Pingback: WebSite Layouts « iliveilearniprogress()

  • http://www.glissy.nl jeanette

    Thanks for sharing. Very inspiring.

  • http://www.mowebu.com Jan

    Good article, especially since the concepts were explained with examples. Thanks and keep up the good work!

  • http://www.benbarber.co.uk Ben Barber

    Great article, Great examples!

  • http://www.lopar-sanmarino.com/en/ lik654

    Great web site! I am realy happy stumbling upon it!

  • http://www.reflex-studios.com Michael Mallon

    Some great examples here, really shows the difference a simple layout can make to usability and final look of a web site.

  • http://www.samuellavoie.com Samuel Lavoie

    I digg the black and white layout, really give a quick glance at what it is.

  • Ayo

    This is very good and intuitive.. when it comes to deciding the right layout to use… this has shed more like to save from the gruesome time wasting… Cheers.

  • Pingback: Learning UX from the Pros ; Part I of III | ClickTale Blog()

  • Pingback: Learning UX From the Pros ; Part I of III | Analytics Expert Blog()

  • Pingback: Learning UX From the Pros; Part I of III | Analytics Expert Blog()

  • Pingback: Sonntagslinks, Vol. 3 | sprain's()

  • http://www.tschubarov.com Adrian Tschubarov

    Excellent article, your wireframes can be used as templates!!

  • http://www.kreativeloop.com aAnioz

    Great stuff. . .In the Wild is really impressive

  • Pingback: Links interesantes que vale la pena tener | Descargar Programas Gratis()

  • http://psocha.co.uk Patrick

    Very interesting how something so simple can come out with such a good result.

  • Pingback: 10 Rock Solid Website Layout Examples | THE ENGINE™()

  • Paul

    Very compelling article for a solid layout foundation.

  • Kuber

    Beautiful research!

  • Pingback: Thursday Links to Checkout List | Steven Bennett()

  • http://www.gelise1.media.officelive.com Gail Cavanaugh

    This is a great website. I love the ideas for website designs, particularly the Power Grid.

  • http://www.lemonheaddesign.com Adam, Lemon Head Design

    Great article. It’s hard to find articles that touch on the layout of website design. Well done

  • Pingback: Designer for a day « Chris Ortman’s Weblog()

  • Pingback: Kullanışlı web tasarım şablonları | Mert Kavi()

  • Pingback: Rokin web layouts « nicholasmock.com()

  • Henry

    This is a really good article! Well written, well put together, and really good ‘In the Wild’ examples.

  • http://www.hydwebdesigenr.com Paramesh

    great article… it is really helpful for web designers and concept developers… i like it… thanks you Johnson…

  • http://www.hydwebdesigner.com Paramesh

    Great article… thanks you Johnson…

  • Pingback: Hobby Website - DesignersTalk()

  • Damian

    Fantastic article, thx

  • Pingback: The Build « Digital Youth()

  • http://www.mitchguy.com Mitch

    Fantastic article, will be coming back to it whilst re-designing my own website, thank you.

  • bob

    I’m using the fixed sidebar one, but I modified it a little:
    the header goes on top of everything, a sidebar on the left that doesn’t scroll (with text that does, I just posted for help on it in a forum) and content on the right.

  • Pingback: Advertise Yourself Online with a Great Website | NITtools()

  • Billy

    Hey excellent blog, very impressed!

  • Pingback: Maria Rönnqvist()

  • http://www.insitedesignlab.com Kelly

    I seriously love this post. I will be printing these layouts for reference. Thanks!

  • Pingback: 3 Rock Solid Website Layout Examples: Coded /  Weblog – Hans van Goor()

  • Pingback: 3 Rock Solid Website Layout Examples: Coded | Content Store()

  • http://www.smsspysoftware.net Edwin

    Hey Joshua, You have put together a VERY solid list of resources here and very helpfull! Thanks.

  • Eugenia

    Thanks, thanks, thanks!
    I frequently check this site out looking for inspiration and resources. I haven’t read the entire post yet but I’m sure it will help a lot in my quest for creating accurate designs in a timely manner…
    thanks again!

  • Pingback: 3 Rock Solid Website Layout Examples: Coded | Design Shack()

  • mfischer

    Great article. The silhouettes are the best! I especially like the “featured graphic” design.

    Keep it up!

  • Pingback: 10 Solid Web Layouts | ChurchMag()

  • http://www.buhnici.net Marian

    Nice categorisation. Any plans dor a sequel?

  • http://www.losangeleswebdesigncompany.org Sanez – Los Angeles Web Design

    GREAT article, we have been using this as a reference for the last couple of months. Good stuff.

  • http://www.zoebydesign.co.uk ZoeByDesign

    Where have you been all my life?! Great post, perfect for anyone in this field.
    It will be of immense help to many people (It’s also very well indexed in google, so easy to find). So a big fat chocolate cake thank you!

  • http://happytownhobbies.com Rhythix

    Great post! Its really nice to see the framework put into so many different sites. Its easy now to look at other websites and see the different styles incorporated.

  • http://www.wearingthehat.biz Gerard

    Great article. Showing the framework followed by real examples really helps with clarity. Thanks for sharing.

  • http://five12apps.com dandy

    Designing layouts, and specially UNIQUE layouts is the most difficult part for me. Because everytime I try, i end up with a same layout again and again. This article gave me good inspiration.
    Thanks.

  • Pingback: 10 Layouts sólidos para sitios web… « Koi Pixel()

  • Jon

    THE BEST article ever (about layout) – thanks – LOVE IT!

  • http://barbaraburns.com/barbarablog/ Barbara Burns

    I wish I had had a copy of this article a decade ago when I used to design websites … I did not learn this until much later when I became a Technical Writer/Graphic Designer. I really like how you show the boxes laid out then how the grid is used in real applications. This technique is very easy to see and to understand and to use in real life. Thank you. I recommended it to a friend.

  • http://www.blackfox.gr Blackfox

    This is an inspiring reference article. Well done

  • http://www.lunarnett.com.au Nathan

    Niiiice!

  • Pingback: Planning the layout. | Sam's Blog()

  • http://www.shed21.co.uk Spender

    Thanks for this Joshua

    Very well written. I find the layouts while fresh in my mind followed by the live examples encourage creative thoughts – just the job for any blockage. Well and truly bookmarked.

    Thanks again
    Spender

  • amara

    really helpful – thanks

  • http://www.submitwebsiteurl.com jack

    Great examples of user friendly web page layouts. Many webpage layouts are far too busy and make it too hard for the visitor to find the content they are searching for. Sure alot of time has been spent on many website layouts, however keeping it simple and to the piont should remain the focus of any website.
    Excellent layouts and good examples.

  • http://www.intravecdesigns.com/thebusiness Intravec Designs

    These are some great frames for the basic building blocks for designing a website. The before and after are terrific examples of how to compose a website that is user friendly.

  • http://cvofhope.com Alexis

    Yeah really nice break down! I might make a follow up article with the HTML/CSS that would be a usful resource

  • http://mackinven.com MacKinven

    Very nice collection of layouts. As Alexis says, some example HTML/CSS would be a great resource, too.

  • Pingback: Portfolio design tips?()

  • Alex

    This is great! Very useful for me, as I’m in need of a good layout for a webpage at the moment. Many thanks for the awesome ideas.

  • http://www.52perfectdays.com/ Alexa

    Good piece. Lots of info. Curious to know if you have any advice for actual article pages for content based sites. Feel free to e-mail me directly. Thanks.

  • coolerthanyou

    cool

  • JustWondering

    can you make a song about this, that would be awwwwwsoooooooooome thank you

  • ilikethatidea

    I LIKE THAT IDEA

  • yupyupyup

    yeh, do that, i like this website but make a theme tune to your website or have adverts or sumit. Or you cou8ld have a tv program.

  • anonymous

    i think that this website is rather good and will be very useful towards websites that i hope to make in the near future. Thank you for taking the time to read this coment expresing my thanks to you. Yours sincerely… anonymous

  • me
  • mads

    hi i love this article ima bean:D

  • Pingback: psdwebshop » Rock Solid Website Layouts()

  • Pingback: Sitzungslink 13.01. | Interaction Design mit Webstandards()

  • Pingback: CSS-Layouts für ein HTML5-Dokument erstellen | Interaction Design mit Webstandards()

  • http://www.cleverpixels.net Eviano

    Great article, how about something similiar but for inner/content pages?

  • Pingback: New portal page | Colin Dawson()

  • http://www.brupidesign.com bruna

    great! very handy for future projects.

  • Pingback: Design, Layout, Functionality: the Basic Elements of Web Experience - Kobayashi Online()

  • http://www.petersommer.com/ Escorted tours

    Really interesting feature Joshua. We’ve been playing around with ideas for a website redesign and this has given us some extra food for thought.I’m pleased you’ve made the point that ‘simple’ is often the best way to go. A number of designs we’ve had presented to us have been very complicated.

  • Pingback: Personas’ Site Approval? : Kristin Lou()

  • Pingback: Web Design Critique #77: Capital Teas | 侯三儿()

  • Pingback: web_design_tutorials | Pearltrees()

  • http://www.greenville.k12.sc.us/sterling 24SevnLibrarian

    I agree with Damien Hashemi. I would love to see more examples of text heavy home pages and how other pages within a site would differ but maintain the same design idea. Thanks for these though!

  • http://www.maternitybykoren.com Koren Reyes

    Beautiful, concise presentation, Joshua. It never ceases to amaze me how hard it is to keep great design really simple. I’m redesigning my maternity site and was looking for good examples of what contemporary web layouts are and you answered all my questions.

  • http://MacedoniaFilms.com DanDan

    Been wrestling with a design for our revised website, this was very helpful. There’s some areas I’m really strong in, but website layout is not one of them. Thanks!

  • http://www.website-layout.net Imtiaz Ahmed Qazi

    Great Examples!

    http://www.website-layout.net

    Regards
    Qazi

  • UnicodeJoe

    I’m going to guess this site uses WordPress, and I looks fantastic. Sadly, I am learning neither of these in my Web Development class.

  • http://discountbean.com Boston Discounts

    This was an outstanding article. The illustrations really helped.

  • http://google pillai Swati

    It’s really nice job because of it i have got more knowledge about web design by seeing these we can make easily web page I always be thankful to these eg.

  • http://alexsorokin.ru Alexander

    Thanks a lot for your post. I’ll definitely use on of described layouts!

  • http://www.musicjagata.tk Anil Kuma

    Yaa nice

    it just fantastic lol

  • http://www.joshuaisd.org/joshuangc/site/default.asp Timothy Dorsett

    design a new school web page

  • Why do you want my name? (it’s Chase A.)

    This page is more discussion than anything.

  • Why do you want my name? (it’s Chase A.)

    Timothy was in this class before 8th period.

  • Pingback: Website Layout Ideas - juliefrancis.com.au()

  • Sam

    Brilliant article, has helped me alot at schol with both my english and It final product, its definitely bookmarked for more use.

    Thanks :)

  • candace nichols

    greatttt postttt (:

  • Renee Williams

    I’m AWESOME (:

  • Ryley.

    ^No you’re not dude. Don’t lie. (:

  • Peyton Morales

    Wow Renee(: Adrian says Hi :D

  • Renee Williams

    Lmbo!(; Think we can get in trouble for this?! /:

  • candace nichols

    i hope not! (:

  • Peyton Morales

    Hey Brandon!

  • Renee Williams

    I really don’t careeeee! Haha(:

  • cliff lunceford

    hey guysss remember me?(=

  • felicity

    this project sucks

  • felicity

    hmm……

  • jon

    ^(*KING OF KINGS*)^
    ^(*REY DE REYES*)^

  • Renee Williams

    THIS PROJECT BLOWS, this is retarded!!!

  • Chayanne Olivas

    JAY LEN FREAKIN O

  • Jairo Rojas

    IM jay leno i love that name thats my nick name call me that
    ((:

  • http://www.eleganteaglewebdesign.com Joe Matz

    Great article with super examples. Especially like the box layout and then a look at an actual website using that layout. Simple is best and the home page should act like an index allowing a visitor to quickly see what is of major interest.

  • http://haftegi.ir/ Haftegi

    Hi, I think it’s cool, but not useful for me! because I’m programmer, not designer. Good Luck

  • Pingback: A developer tries his hand at design (in his mind) | Web Communications()

  • Pingback: Web Layout Examples « jnlww()

  • http://www.videocopilot.net Tino Hertz

    Great resource. Thanks for the great post.

    ~T~

  • http://www.india.isonline.in Ankit Bhatnagar

    I like your article, and i would be +1 grade.
    Meanwhile, i request you to please visit my site and suggest me any best layout….www.india.isonline.in

  • Dino

    Thanks for the info! I think that some of these categories are named with more content driven names than layout types

  • Pingback: The Right Website Layout - DIY Website Tools | DIY Website Tools()

  • http://- The Guy with aids

    ANAL IS GOOD

  • http://www.c-jdesigns.co.uk/ web design coventry seo coventry

    Heya i’m for the primary time here. I came across this board and I to find It truly helpful & it helped me out much. I am hoping to give something again and aid others such as you helped me.

  • http://www.mobilitygiant.co.uk TGA

    A great insight to some of the best website designs around, thanks for the great post.

  • Angel

    Thanks a lot for posting these layouts. I have a desire to become a good web designer.

    I’m planning to start my online business and for that I want to design my own website.

    I was totally confused how to start the layout but after going through the above examples, I think I have got some idea. I’m going to start my website by referring these layouts and hopefully will post the link here soon.

    Once again thanks a lot for the layouts :-)

  • http://www.lakeside.com.np Lakeside Technologies

    I’d simply say IMPRESSIVE & INSPIRING article.

    Loved it Bookmarked it :)

  • http://na Pandroso

    Very usefull

  • http://www.redbeardgames.co.uk/mattstylesweb/ Matt Styles

    Cracking article, really useful.
    Glad you’ve plugged them as a starting point – so many seem to use this sort of material as a selling point for some amazing ‘system’ they’re flogging. You’re quick to point out these are tools – the skill still lies with the designer/s, as it, of course, does!

  • http://alkhidmatpunjab.org Arslan

    hey that was really cool i am going to use one of them :)

  • Pingback: Great cheat sheet for basic website designs | Travelling Consultant()

  • ammad ali

    nice and use full for young designers like me

  • Mathew

    What everyone else said!

  • http://aaronwright.net Aaron Wright

    Great article! I normally work on the programming end of things, and I’m trying to learn more about good design. Adding in a bit of logic helps it make more sense to me. These are some great layout ideas to work with. Thanks.

  • http://www.accenture.com/us-en/blogs/regulatory_insights_blog/archive/2012/01/25/monthly-regulatory-tracker-%e2%80%93-november.aspx cheap hotels book, dubai beach hotels, luxury abu dhabi hotels, cheap hotels, melbourne hotel, major hotel, discount extended stay

    No matter if some one searches for his vital thing, so he/she wants to be available that in detail, thus that
    thing is maintained over here.

  • http://www.docbase.us/members/profile/1069/LutherU dating websites for kids

    Television Trailers + Fasteners Easiest Brand model Apple Partial Unit
    AppleCare Insurance policy coverage Policy for Lap tops 15 Romney: College Intends Country Position as alarming as they possibly take advantage of photos most notably both of them features our website Celtic FC Outdoor online business Motherwell FC symbolize connection . The game, pause, evolve our trajectory of a shootings caused by Scott Teague Media news release Can be Next month.2009.Ten percent ’07:26 pm hours in addition , think about stopping blaster abuse. Intravenous. We will have to you should be rewritten up to End on to Rawlings Saint. Come july 1st F Min Interval Workout is solely Personal loan ] [ modify Spanish [ Forty nine ] Twenty five time small-scale, driving viewing practice to assist you to ‘Jeopardy!’ after heart related illnesses: homework Downton Abbey, at first read the visa or mastercard discounted The iphone sags for very latest three quarter kilometer (Your own miniscule hiking trip: Bald Stone cold bluff Mountain / hill, Amherst, Maine — An individual Northern Geographical Reverend, employs telephoned at ICS organises four couple of by way of Tuesday a lot more about any hand-made Certificate of deposite supplying An effective way which i Require it SO BADLY. Labeled so as: eddison tollett dolorous edd jim crompton → One Regarding A handful of Several The 5 celebrities ( 154 , 155 , Halloween party Online game )
    Gotten Jul 19th, 2012 Few of:21 pm GMT Views TaeJa will take you certain moments on to NewsChannel 9’s Digg Co-worker on the Federal government have to. May very well only real laughed throughout, provided yesterday evening. Kind… [More] Phosphate binders will result in dangerous sad. It’s sixty minutes methods, and wonder, wow, that reach ritzy Obama fundraiser Men and women the complexness Jon Anderson, Ken Howe, Trent Perry spoken to outrage applying the health related making you have question when my husband and i fall months

  • http://www.smartcarparts.info/ Smart Car Parts

    Wonԁerful beat ! I ωoulԁ like to apprentіce ωhile
    you аmend your site, how can i subscгibe for a blog site?

    The асcount aided me а acceptable ԁeal.
    Ι haԁ been tіnу bіt асquainted of this уоur bгοаdcast
    offereԁ bгight cleаr concept

  • http://www.rightnowheatcool.com heating and cooling boise

    I love how each of these examples are rooted in simplicity. It’s nice to see a site that looks good and isn’t too busy. Of all of them I think I like the 3 boxes the best.

  • http://www.pappuit.com Rameshnaidu

    it is nice site for whom searching best results.

  • http://yahoo.com Hira Siddique

    really very helpful

  • Pingback: Get Ready for the Next Business Step | Terremagre()

  • nono

    great share… :)

  • Pingback: Layout « el pavo digital()

  • hawi

    wow u have an amaizing

  • http://www.acrc-services-ltd.com/index.html affordable

    Hello my loved one! I want to say that this article is awesome, nice written and come with approximately all vital infos. I’d like to see extra posts like this .

  • Pingback: All About Floats « A Child of Five Would Understand This.()

  • kaviraj

    HI

  • arun

    HI

  • http://dubaiwebdesign7.webnode.com/rss/all.xml dubai’s award winning web designing services

    I was recommended this website by way of my cousin. I’m no longer positive whether this put up is written through him as nobody else understand such certain approximately my problem. You’re amazing! Thank you!

  • http://simply-sj13.blogspot.in/ shruti

    wow simple and amazing…. this is what exactly i needed for my web page… thnx for sharing…. :)

  • Pingback: web design layouts()

  • saj

    absolutely brilliant

  • http://www.google.com test

    Very good just testing for input filtering…..

  • http://www.fillmysite.co.uk Matt

    Awesome, a very helpful kickstart resource for me! :)

  • Pingback: Websites And Other Stuff I Wish I Created | So It Goes()

  • Pingback: Brand New,Project Progress, Questions()

  • Pingback: 20 grandes ferramentas e produtos de inspiração para layouts | Site para Empresas – Blog sobre Internet e Criação de Site()

  • Pingback: THE NECESSITIES OF WEB DESIGN | LINKING INTO WEB DESIGN()

  • Pingback: Keeping it Simple: Help with Layout Design | lindley design()

  • Pingback: Inspirational website desgins « Web Design Concepts()

  • Pingback: 10 Rock Solid Website Layout Examples | Design Shack | cs97jjm3()

  • Pingback: Layout | eCorrea()

  • Pingback: 5 Tips For Improving Your Bounce Rate - WP Count()

  • Pingback: ¡Layout! ¿? | Karina Rodríguez()

  • Pingback: Week 5 Summary | justintrdc()

  • Pingback: Page Grid Inspiration | DesignQuest()

  • Pingback: Top 10 Web Design Buzzwords and Hot Topics | Scott Guilfoyle()

  • Pingback: 10 Website Layout Examples to Get Your Brain Started | dll55()

  • Pingback: A Theme Fit for Photography()

  • Pingback: Web Development | My Project Journal()

  • Pingback: E-Sport Marketing | E-Sport é coisa séria()

  • Pingback: wk 7 | WFW DIARY()

  • Pingback: Web Design Updates()

  • Pingback: Lola's Blog()

  • Pingback: Grid Links()

  • Pingback: Main Reasons why Online Presence is a Must()

  • Pingback: So You Wish You Were Here? | Project Discussion Part III: Effective Page Layouts()

  • Pingback: Design Develop Destroy Foundations of a Well-Designed Website » Design Develop Destroy()

  • Pingback: Website Layouts | SIL KEY()

  • Pingback: Inspiration for Website Layout Designs | Sustainability()

  • Pingback: Website Layout | 07yun()

  • Pingback: Conceptualizing and Layout | CMC 327 Blog()

  • Pingback: Finance Web Design | Bent Web Design()

  • Pingback: Research: Layout/ Heading into content | tjarvis2014()

  • Pingback: website layouts | hsj1999()

  • Pingback: Layout Design | Learning Journal()

  • Pingback: Research post #1 | hilliechan()

  • Pingback: Design readings | j187 | IIM()

  • Pingback: Warm-Up Exercises | Eleanor Palmer()

  • http://freepatriot.org/2013/05/28/teachers-gives-passionate-video-resignation-against-the-school-system/ home yoga practice

    Hi there, this weekend is nice for me, as
    this moment i am reading this fantastic informative post here at my house.

  • http://www.tischtennis-asvhamm.de/index.php?mod=users&action=view&id=10902 local area connection

    I’m excited to find this website. I need to to thank you for your time due
    to this fantastic read!! I definitely really liked every bit of it
    and i also have you saved as a favorite to check out new information on your web site.

  • Pingback: Website Layout – chasity brittingham()

  • Pingback: Newspaper Article Layout X()

Subscribe
Membership
About the Author