In part 1 of our tips for laying out content in web design, we showed you four ways to display content in a web design. Though these tips are very useful in their own right, we have another four that we wish to bring to your attention, and we are going to start with a technique called progressive design.
Progressive Design: The idea behind this technique is that a user follows a natural flow over several pages to obtain the information he or she needs. This is normally navigated by buttons like “click next”, and so on and so fourth, and is often used for completing forms, where sections are displayed one after another. Another use is if your site wants to demonstrate to the user, a series of steps that were taken to complete a task. Hence the name of progressive design.
Grids: Undoubtedly the most essential element to any layout, is a grid. A good grid system will separate content on a web page in an almost seamless way. Many web designers believe that the grid system should be subtle, and some of the best grid systems are just broken lines that divide one section of the page from another. They also make the content very scannable, which is essential.
To make a good grid layout, aesthetics are everything, as chunky, padded grids do not make the best use of white space, and can be very off putting to users as the information will not be defined, and, or have a broken flow.
Accordions: Accordions work in a very similar fashion as sliders and carousels, as they display focused content in a box. Again they are very good if used for their purpose. The main difference is that they appear on top of related information, and one can be displayed one after another, like an accordion.
Accordions come into their own when several types of related information or related products are to be displayed. This shows the user that there is a relationship between the content that they are viewing, and like sliders and carousels, it is only viewed if the user wants to view it.
Mega Drop Down Menus: These are similar to rollovers, as they present information when the mouse hovers over the element, but as the name would suggest, a vast menu appears giving the user a choice of the information they want to see. This is technique is being used on many websites that feature products. The mega drop down menu can display information about it, or indeed another set of related menus.
These are particularly good because information is presented without having the user navigate away from the original page. This is technique is growing in popularity especially if there is a lot of information to be displayed about a product. Such as a car.
Together with the tips highlighted in part 1, we feel you have a good comprehensive guide to choose the best way to present your content. In many cases, it is the subtleness of the presentations that will win the day, and create that killer design. So think about what information is to be presented and the way to present it will choose itself.
The key to content layout is to give the site a natural flow that will either take the user on a journey, or simply give the user an option to select the content they wish to see. Content is King, and choosing the best way to present your monarch, is paramount to a successful design.
We hope these tips for laying out content in web design help you do exactly that.
Some websites could use a little progressive design. The pages are just too long that it feels like you’ll never stop scrolling down. It’s like they’re cramming everything into one small space.
You know what May. It is not only the newbies who will benefit on this wonderful article. We as experienced designers will only learn good techniques in brainstorming. I may say that, this article content is really informative. I do hope you can make lots of like this.
Richard is a genius. I have read most of his posts here and they are really relevant especially that I am into web designing. Thank you, Richard.
That is such a good point Luis.We really can’t do anything about other’s way of designing their website. Oh well I use those mega deep down menus. I find it fancy but classy at the same time.
Honestly, this is the best article I have read about laying out content in web design. As you all know, we newbies needs proper guidance with the designs we make. I don’t like to be the best newbie but your tips will help us a lot.
I should say, Thank you for making this article! You helped me a lot.
I don’t really like to have a mega deep down menus. Well, I respect your uniqueness. In my case, I find this one complicated. I’d really love to see my website as simple as possible.
I was kind of confused with the design I am doing but having read this, my vision is clear. I know that my site contents are now better. Cool tips!
@sandsoftime: Like you, I am also now incorporating the tips I read with my web designs. They are just helpful in most ways. Now, I know where my designs are heading!
This article is really beneficial. May and Celly, either you are a newbie or a pro, this article really makes sense. It is really informative.
Wow, I’m starting to follow your web design tips. I really like them and reading them is such a very enlightening experience. I’m totally adding a lot up in my sleeve when it comes to my web designing.