Content organizations may be the most important and influential aspect of any good web design . Organizing information in a beautifully structured layout is the foundation of a Web site and should be made clear before styling is considered. Without a good layout, the site looks as if it is not flowing properly, and there is no way to connect.
In this article, we'll discuss eight useful layout solutions and techniques that will help you create a clean, well-organized content layout. These eight technologies include sliders (sliders), tabs (tabs), progressive layout (forward layout), structured grids (structured grid), modal Windows (pop-up windows), rollover Eleme NTS (tumbling Element), accordions (accordion) and Mega Drop-down-menus (large Pull-down menu).
You may also be interested in the following related articles:
1. Sliders and carousels (sliders and merry-go-round)
The slider, also known as the Merry-go-round, is a well-organized, interactive, and fluent way to express information. The slider is a very popular technique because it is really practical. You can put a lot of content in a fixed compact area, if there is no slider, the content has to be placed in some parts of the page, in many cases, you may not have space for him. You may want to display some information when you need to. Silders can help users focus on only one piece of content at a time, which is useful and convenient. That's why slider will come in handy sooner or later.
Example of the examples of the Sliders slider
thumbnails and icons in the navigation area thumbnails and icons in the navigation area
When you want to design a content slider or a picture slide, it's best to give the user a simple, intuitive navigation by using some icons or thumbnails in the navigation area. Thumbnails and icons give users a brief description of what they are doing on the slide and give some options for navigation. (for example, a slide can have vertical and horizontal navigation). In addition to these, users can quickly select specific pages from within the slider.
In the application of a slider in Coda site , you can see some tabs (tabs) above the slider. They create a hybrid element of a slider/tab. This is a great idea, because by looking at thumbnails, users can simply find a page. Also, icons add a very strong, difficult to forget and clear visual support. In addition to icons and labels, you can use some thumbnails or even numbers to achieve the same goal.
Slider is used to navigation in product items The slider is coming to the product display navigation
Unlike the example above, the slider (slider) can be used not only to display large chunks of information, but also to help groups of users browse thousands of products in a convenient way. Here's an example,sourcebits(see below) uses multiple selectors (sliders) (one vertical level) to provide users with a compelling way to browse the CD cover.
The slider (slider) has a circular button on either side to indicate how to navigate. A smooth transition, so the slider (slider) looks very attractive and comfortable to use. You can also find that there is a good gap between each illustration, so you can simply click on each individual icon and have a good organization. Each item also has a great laser hover effect.
Vertical content sliders with large horizontal "clickbars" has a horizontal large click Bar Vertical Content Slider
Let's take a look at the use of the slider (slider) in quicksnapper . The Functional vertical slider (slider) is perfectly used in the layout. The slider (slider) contains a large number of snapshots of items. Such an orderly arrangement makes it easy for users to find items within the element. The best part of this slider (slider) is the two buttons up and down, and they extend the width of the slider. This large button makes the slider (slider) more simple to use.
Here's an example, if you select one of the display products and then decide to look at other items, you can simply click on the big buttons above or below to browse. It's very convenient and friendly. And, if you go to the site and try it, you'll find these buttons very good, and the activation and focus effects look great and enhance usability.
Slider Scripts Slider Script
You can implement these techniques using some of the following scripts, techniques, and tutorials:
2. Tabbed Navigation Elements tab navigation elements
Basically tab (tabs) navigation is a technique similar to a slider. You can keep a lot of data in a compact area, which is much smaller than the size you normally need. tab (tabs) navigation is a convention that everyone is using, and there are some ways to implement it. Here we will focus on using tabbed navigation elements on one page rather than using him (tabs) to do the main content of the site navigation. One tab element clearly splits different chunks of content, while placing them in a small area.
Example of Examples of tab Elements tab elements
Distinctive backgrounds, large clickable areas, clear separation special background, clickable chunks, clearly isolated
The first example comes from the "Performance" section of Mac Pro website . This is a perfect example of a Well constructed tab (tabs) element. The tabs on these tabs are readable, have large click areas, and are good to visually isolate, so they look like most users do. And you can see that the background of the Currently open tab (tabs) is the same as the background of the area where the main content is displayed, while the Inactive tab increases his depth with a slightly darker background and shadows that appear to be hidden behind the Activation tab. This is a very simple effect but very effective.
Clean tabs with separation of buttons neat tabs for standalone buttons
Here's another example of a compact way to make the most of a tab (tabs) to express information. The layout of the atebits has been created, and there is not much room to display multiple content blocks. So they put three chapters in tabs and kept them neat and orderly. The currently open tab is the same color as the primary content area, but the Inactive tab uses a darker gray background. You will notice that a good separation between tabs further defines each button. A slight bevel is used to clear the separator button.
Clean separation of the entire tab set Clear separation of this tab collection
Fontcase has another very good set of modern-sense tabs. Although such a design does not isolate each tab, the active option has a clear boundary that is separate from the inactive. And you can see here that the tab set has a separate boundary on the line. These tabs use icons and spaces to support text, making tabs easier to use.
Script for tab Scripts tabs
You can implement these techniques using some of the following scripts, techniques, and tutorials:
3. Modal Windows pop-up window
Pop-up windows (Modal windows), or floating windows (floating windows), are a great way to express supplemental information in a layout that doesn't have enough space. In the pop-up window, you can present a larger picture, additional content, warnings, tips, videos, etc., so that users can more easily notice. When you put information in a pop-up window, you need to let your users know how to close the window.
It is also important to trigger a pop-up window with a link, thumbnail, icon, or any image element that should be closely related to the contents of the pop-up window. A similar icon, caption, or visual effect can help the user establish an association between the original link and the open window.
Examples of Modal Windows pop-up window example
Modal windows for logins and signups pop-up windows for registering and logging in
The most commonly used elements in pop-up windows (unlike traditional media files like pictures, audio, video, screenshots, etc.) are login and registration windows. When you use a floating window in order to sign in/register, you are saving a lot of space for each page. Also, users don't have to load a completely new page just to log in. They can log on to any page without interrupting their current session. Of course, if the designer determines that the login or registration process can be implemented behind the scenes with Ajax.
Grooveshark with a good registration window on every page of the site. Note the login button (Login-button) does not open a new page in the Registration window (Signup-window), but instead registers the form with a signed form. This is a very convenient and friendly way.
Fade out of the page Or/and use a drop shadow fade out the page or use a shadow
If you are going to use a pop-up window, it is important to fade the page behind the window. You can use semi-transparent backgrounds, projections, or both. By doing this, you have made two important design decisions. First, you lead your users to the pop-up window and away from the page behind the window.
In addition, you increase the depth of the page and the pop-up window is isolated from the page, which makes the window look real and physically floating. In the screenshot below (kissmetrics), you can see that a login form is included in a floating window, and the following pages fade blurry. By the way, note that the Cancel/login button is also designed very well.
Realmacsoftware replaces the entire page's fading with a shadow behind the window. This technique also adds a good depth and a sense of isolation.
Modal Scripts Popup Script
You can implement these techniques using some of the following scripts, techniques, and tutorials:
4. Rollover Elements Rolling Flip element
A scrolling flip element (rollover Elements) is an increasingly popular design element today, especially in company websites, work files and product sites. His main idea was that when the user's mouse hovers over certain elements, such as a button, some content will automatically pop up on the page. Here are some examples to help you better understand how it works
Examples of the rollovers tumbling example
Rollover Tabs Flip Tab Items
Below you can see them from the screenshots of the Miro ' s homepage website yo You've got a good design for a taxi flip element (rollover Elements). This element is similar to the slider, but does not use a button to slide through these pages, which automatically occurs.
subtle rollover hover elements a small flip hover element
Taoeffect is a good example of using flip elements (rollover Elements) to express additional information very nicely. (The first time this effect is used on CODA's website is that we use this example instead) this information is presented in a very friendly way, all you have to do is to hover your mouse over the button.
If you visit this site, you can see that the flip is very good and very fluid dynamic over. This open process is swept out with a vertical gradient. Finally you can see the background is translucent. It also uses prominent boundaries to increase the degree of isolation from other content.
A content map with rollover elements content map with flip element
Onehub uses a flip element (rollover elements) to achieve another effect. Similar to a map, this page is divided into many quick hints. When the user hovers over a hint, the additional information is automatically realized. This effect is useful for sites that want to show the features of a product or give users more explanations and instructions.
rollover element integrated in a slideshow flip elements that are consolidated on a slide
Squaredeye gives another interesting way of designing. A merry-go-round menu allows the user to preview the previous and next pages with a flip element. In some cases this method is very useful.
tooltip/hover element Scripts hint box/hover element script
You can implement these techniques using some of the following scripts, techniques, and tutorials:
5. Progressive Layouts-forward layout
A forward layout (progressive Layouts) is a way to describe a series of blocks of content in a certain order, not the usual way to organize content, but there are many sites that use it. A forward layout (progressive Layouts) can help users navigate a long series easily.
Example of examples of progressive Layouts forward layout
An entire site consists of progressive pages a website with forward-form pages
The rendering of the entire collection of sursly.com (see below) is based on a forward-style layout (progressive Layouts). You can see a Go button in the upper-right corner of each page. We can find it through the page in front of it. The forward system of this page is a substitute for navigation bars and menus. Of course, the main disadvantage of this layout is that it is difficult to navigate or even to achieve the goal of interaction.
Although in this layout each individual page can be labeled with anchor points, it is difficult for some random users to get an overall image of the available navigation options immediately. In addition, this layout is usually only used in one-way navigation-forward. From a usability standpoint, that's not good.
Progressive Vertical Page Vertical Forward-page
Danny Blackman (see below) a work set is presented using a forward layout (progressive Layouts). All of these independent elements are rendered vertically on one page. The automatic scrolling function can lead the user from one page element to another. Moreover, the menu and main navigation are not used, and only the button is used to lead the user from one to the next or back.
Scripts for Scrollto script scrolling
6. Grids Grid
No layout-telling article can mention grids. Grids are often considered to be an essential part of any balanced, orderly, and concise layout of the Web page. Many designers use them to provide users with a more efficient way to communicate a lot of information. A grid can display information without any other technology. A good grid system can put all the information of a page in a smooth layout, but it can also take into account the readability and legibility of each of the different blocks.
In the following website, you can see that it uses a very precise grid layout. This whole site has only one content page, so this page is going to show quite a lot of information. However, the information is organized in a neat two-column grid, creating a very precise, visible and fixed layout with a large amount of clearance, and the content is readable and readable.
Using different backgrounds to separate sections of a grid dividing a grid area with a different background
When you create a grid, you may want to put a lot of information in a very compact area. You need to keep it neat and orderly, but you don't have enough space. So you can use a different background for each grid. You can use very little inner space instead of leaving space between the two squares, and it looks good. valleycreek.org (see chart below), you can see that this very strategy is used to create a good structure of the layout. You can see that a very thin line is used to divide different squares, except that the color contrast can also provide a very clear separation.
Grid generators, templates, and tools mesh builder, template, and tool
7. Accordions accordion
Accordion menus and sliders and tabs are based on the same concept: they compress a lot of information into a smaller area. The accordion is blocky and organized in a vertical or horizontal manner, just as a video card is clicked, one piece of content slides to the other-the accordion menu, hence the name.
Examples The example of the accordions accordion
Functionality and large clickable areas functional clickable chunks
Alex Cohaniuc used a carefully designed accordion menu. It is wise to put all the work in the portfolio in an accordion because he hides (non-essential) Some details about the project and displays them only when necessary. The accordion design is very good for the following reasons, first you can notice that each canvas header is very large and easier to click. Also, you can see that each header is marked with a triangle to indicate whether the accordion key has been opened. Finally, in this design, the title head of the current wind keys uses a very different background color.
Horizontal Content Slider Horizontal Content Slider
Jason Reed uses an accordion to put all the content of the entire site on one page. The accordion uses the same style and elements as the rest of the page rather than with elements that look completely different. In addition, the accordion is horizontal (although the navigation options are also vertical). And, let's take a look at the tab. First, you'll see a lot of gaps between tabs. These tabs, header headers, are not separated by the previous example, so a lot of space is used as a separator. Moreover, the large readable label is placed inside the accordion. These small details are important because the user needs to know exactly what is inside each tab item.
accordions containing images and information accordion that includes pictures and information
Marius Roosendaal with another very good vertical accordion design to display pictures. Each piece of content shows a piece of work with a picture. However, each picture has a text label. You can see a small button to show/hide its description. You will also find that you can link to a pop-up window with a larger and more detailed work. You can no longer display a lot of information in the accordion, so the usual practice is to put a link that will lead you to more information.
Accordion Scripts Accordion Script
You can implement these techniques using some of the following scripts, techniques, and tutorials:
8. Mega-drop-down-menus Big Pull-down Menu
Navigation is not necessarily a simple collection of links; Recently he has been completely transformed not only to navigation options, but to a hierarchical structure of web content. Therefore, the large Pull-down menu is often used in E-commerce or product layout to show the product details. Menus like this are a new trend and can be discovered very quickly by users. This is similar to the concept of a flip element (rollover elements) because he can instantly provide the information the user wants, without any clicks.
Example of the examples of the Mega-drop-down-menus large pull-down menu
A classic example of a large Drop-down menu is the index of Ruby on Rails Guide (Guide index). This menu is used as a two-level navigation menu that is well organized and clearly articulated. Unlike the superior menu, this menu has a switch button on the right hand side to trigger the Pull-down menu. You can also note that there is a very soft shadow to increase the depth of the menu and let him highlight it.
Multi-level menus with information multi-layered menus containing information
Porsche (see chart below) is a perfect example of the technology described above, and Porsche's home page contains a multilevel menu that allows users to browse all of the Porsche-produced cars without needing any clicks. On the third floor, there is a window that displays information about the selected car. This window contains car-related pictures, links, and some summary information. Of course, a large content block is also a clickable area, so all the detail features can be clicked immediately. To better understand this technique, click on the image below to access the entire page.
Search results displayed in a drop-down-list The search results are displayed in a drop-down menu.
A trend associated with this technology is the strategy of including search results in a down menu. This technique is used in Media Temple knowledge Base. Designers use display information in a drop-down menu instead of a new page to display search results, so the results can be updated with your input. However, note the fact that you should not forget to provide a link to jump to a page that provides comprehensive search results.
providing extra information in drop-downs provide additional information in the down menu
Again, on the gateway.com you can see a large menu that is used to show the product-related information and attach a link. The products in the Pull-down menu are well organized and the images are used to increase visual support. This menu also provides a lot of information, such as the price of each computer. This can help users select products before browsing that page, because many potential customers may be primarily concerned about the price-at least at the initial stage of the purchase. A large menu like this ultimately makes navigation easier and provides a better way to display the information that users are looking for.
Menu Scripts Menus Script
Further resources more
You may also be interested in the following articles:
About the author about the author
Matekronin (Matt Cronin) is a fanatical graphic designer, web designer/developer, programmer, photographer, digital artist, and so on. He also enjoyed writing and wrote a lot of articles for smashing Magazine.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
