Web design: 8 tips for creating neat and orderly content layouts

In web design , content organization is probably the most important aspect that affects the design quality. How you organize your information into a good layout is the foundation of a Web site and should be decided before you consider the appearance. Without a good layout, the flow of information on the web is not delivered correctly, and nothing can establish a reasonable connection.

In this article, we'll discuss eight layout solutions/Tips that will help you create a neat and orderly content layout. These eight tips include: Sliding Doors (sliders), tabs, progressive layouts (progressive layouts), structural grids, modal windows (modal window), flip elements, accordion effects (accordions), and oversized drop-down menus ( Mega Drop-down-menus).

1. Sliding style with conveyor belts (sliders and carousels)

Sliding Doors (sliders), also known as conveyor belts (carousels), are an orderly, interactive, and very smooth way of displaying content. Sliding door style is a very popular technique that everyone thinks is very handy and allows you to fill a large amount of content in a fixed block. Without the help of sliding doors, the content may have to be placed in separate places on the page. Most of the time, you're always stretched when you're using page space. Or, some of the content is you want to "user requirements" after the appearance. This helps users to focus on only one content block at a time, and also in line with their own convenience requirements.

Examples of sliding door styles

Navigation area provides thumbnails and icons

When using sliding doors and slide styles, it is best to provide icons or thumbnails in the navigation area to make navigation easier and more intuitive. Thumbnails and icons point out the way to the user, explain to them where they are currently located, and what browsing options are available (for example, slide navigation can be horizontal or vertical). In addition, it is also convenient for them to quickly select specific sliding door pages.

The top of the sliding door of the CODA website is designed with a tag card that uses a "sliding door + TAB" blending style. The idea is very clever, because by looking at thumbnails, users can quickly learn the contents of a particular sliding door page. Also, these icons provide powerful, impressive, clean and neat visual support. In addition to the icons and labels you can also add a small picture to the title, or use only numbers.

Sliding door style for displaying products

In contrast to the above example, sliding doors can be used not only for large-capacity information organizations, but also for users to browse a large number of product entries. The Sourcebits (see below) uses a multilayer sliding door (a horizontal, vertical) that uses a record cover as a navigation entry.

Water smooth door at both ends have large circular arrow icons, real-time reflection of the availability of left and right navigation. The slide has a smooth animation and is very comfortable to use. At the same time, you can see that each element spacing is carefully designed, which helps the content organization and also increases usability. The mouse is slippery, and each entry has a nice spotlight effect.

Vertical sliding content and oversized horizontal "click Bar"

Next look at the sliding door of the quicksnapper. This is a perfect integration of the overall layout of the page is very easy to use the vertical sliding door. There are a large number of screenshots in the contents of the sliding door, and the contents are organized in an orderly manner. The best place for this sliding door is the button navigation on the upper and lower sides. The button is wide and the whole sliding door, the big button makes "push-pull" sliding door easier.

Also, these buttons: active and: The focus effect is also very beautiful.

Sliding Door Script

You can refer to the following script, tips and tutorials to make your own sliding door:

• Slick Accessible slideshow using JQuery
• Coda-slider 1.1.1
• Jquery.scrollable 1.0.2
• Create an Amazon books Widget with JQuery and XML
• Agile Carousel
• Easy Image or Content Slider
• Slider Gallery
• Coda Slider Effect
• Icarousel