Whenever you dive into a new web design project, one of the first things you have to figure out is the framework.
Before you can paint, you have to have a canvas, and before you can use your canvas, you have to attach it to a frame.
It’s easy to get stuck in a rut of using the same layout, while it can be difficult, sometimes, to create something from scratch. I asked mysef, “Can’t the sum of web layouts be broken down and summarized into a short list of basic layouts?”
That’s when I found a great resource on the Design Shack, by Joshua Johnson, outlining ten basic layouts.
1. Three Boxes
This is the most basic. The top left is where you would drop a logo, while those scattered on the right could be some basic navigation. Mix it up, these are just suggestions to get you started. These boxes could be text or images. Showcasing or summarizing!
BONUS: You can grab the code here.
2. 3D Screenshots
Think: Apple cover-flow. This is great for showcasing screen-shots, and for those with the skills, dropping-in some interactive 3D effects.
BONUS: You can grab the code here.
3. Advanced Grid
Advanced, indeed! This is when you need to splash a crap-load of content on the page. Logo nav on top, followed by featured photo, these boxes on the bottom could be deep text on the left, with images on the right. Of course, that’s just an example, mix it up!
4. Featured Graphic
This is perfect for the digital business card or featured product. I think this makes a great landing page, as the top logo and nav boxes can stay in place, while the rest can break-out into something different. Again, just some ideas here people, this is just a layout, a canvas of sorts, waiting for your strokes of genius!
BONUS: You can grab the code here.
5. Five Boxes
Let your mind run wild with this layout. So many options.
6. Fixed Sidebar
Yes, sometimes it’s better to have your navigation on the side … of course, this is just a basic layout to get you going. There’s no reason the sidebar couldn’t go on the right, either.
7. Headline & Gallery
Gallery? Yes, please.
8. Featured Photo
This is all about the photo.
9. Power Grid
This is the mega layout. It has a magazine/news style that screams, “Fill-me up!”
10. Full Screen Photo
Amazing photo in the background, info parked in the front. Another good landing page option, or pages that don’t push very much text.
Design!
This list really captures the basic layouts commonly used on the web, today, and is a great place to begin a project. These are just basic suggested layouts, and there are many variants of each one.
Bookmark this page, and when you begin your next project, browse through these ten layouts and you’re sure to find a great starting point!
[via Design Shack]
Matt Carlisle says
Eric,
Thanks for the resource. What’s the URL? I love taking models like this and building templates on http://960.gs. Guess that makes me a geek. 😉
Eric Dye says
At the end of the post you’ll find the link to Design Shack. Look for some code on a few of these tomorrow!
Graham says
Nice. For the most part right now… the only website(s) I’m continually working on are WordPress and I’m sticking with all of 8Bit’s themes 🙂
So which one does Standard Theme fall under? I suppose either #6 or #8.
Eric Dye says
With some serious skills, all of them 😉