Content is presumably a standout component among the most compelling parts of any great web design. A heap of data is of no use. The information needs to be presented in proper layouts so that the entire UI connects and the website seems to be in a good flow. In this article, Monks come up with 4 amazing layout structures and how using these while designing a website will ensure optimum content structure and hierarchy for your website.
Some of these that we recommend are sliders, tabs, organized frameworks, modal windows and rollover components.
1. Sliders
One of the very smooth and tested method to present the information in an interactive yet organized way is Sliders (Carousels). Sliders can be used easily and allow you to put content in a compact area and the information is depicted on demand. Adding amazing interactivity through thumbnails or icons for content or image slideshows makes it more appealing. It gives the user orientation about the navigation. These sliders can also be used to display dozens of products with circular button in the end for an example. Some sliders also come with vertical and horizontal clickbars with buttons on mostly top and bottom of the page to display snapshot items. Some of the resources that might help you develop such sliders are Agile Carousel, Slider Gallery, Coda-Slider 1.1.1. You can also select from the 100s of interactive sliders on Webby Monks library.
2. Tabbed Navigation Elements
Similar to sliders, Tabbed Navigation helps to keep the content compact. Such a navigation separates content into different blocks and then combines it into a common area. So, just to make it simple, instead of having all the tabs or sub-menus in the main header, some designers create tabbed navigation within the page. Most good tabbed navigators use different visual backgrounds, large clickable area and separate content blocks. They also use drop shadows and slightly darker background for those inactive tabs. To make the tabs look more prominent, some designers also make them appear like separated buttons. You can also use interactive icons just before each tabs to make it look really different. Some good sites to grab more information might be Yetii – A JavaScript Tab Interface, Tabbed Page Interface etc.
3. Modal Windows
Also known as floating windows, these windows make immense sense to display information when there is no space in the page layout. As it’s a modal window you get flexibility to show videos, images, text and alerts to the users and grab their attention. Making it interactive with easy option to close it down will make the UX enjoyable. Normally Modal windows are used for logins and signups as such a floating window will save a lot of space and eliminate the need of creating new landing pages altogether. Remember, when you use Modal window, fade out the background page with the drop shadow. Here are some of the freely available scripts - Fancy Lightbox, Jquery Alert Dialog etc.
4. Rollover Elements
Rollovers are again gaining extreme popularity. It makes a lot of sense to provide rollover on the elements you want your users to observe carefully and probably act upon. When users hover the mouse on any such element, the content will get displayed automatically in some other layout. Designers use rollover tabs as well as integrate them as content maps, slideshare and use them in so many more different ways. Coda Popup Bubbles and jQuery Tool tip are two great freely available scripts for implementing rollovers.
Summing it up, adding good elements on your main CTA or site content will ensure better conversion. Let us help you achieve the same with our 100s of components from our interactive library.
Webby Monks
Latest posts by Webby Monks (see all)
- 4 Amazing Layout Structures for Better Conversion and Perfect Content Placement! - September 24, 2023
- Twitter Bootstrap Infographic: It’s all about Stepping into the Right Boots! - September 23, 2023
- 5 mission critical mobile behavior to learn while designing for mobile - September 5, 2024
