Elements, modules and components for web page design
The simple fact that a user lands on any page of a certain website represents an opportunity to convince or make conversions, the success depends largely on whether he finds the solution or answer to what he is looking for in a suitable and well-organized environment .
It is clear that the design approach on each page of a website is important, as well as the arrangement of the elements that are part of it, their placement in space and the way they are displayed on different types of devices. We do a review of the most common elements, components and systems that can be used in web page design, both in the corporate or commercial field, as well as in the development of the personal brand, get ready because there are quite a few.
Elements common to the different pages of the site
Headboard
The head of the page shows an image related to the activity that can also include brief explanatory or introductory texts to put the visitor in the situation. This in turn can be common in different sections or change according to the theme of each of the pages of the site. It is a highly recommended element to incorporate especially in main or landing pages, such as the so-called “home” of corporate websites, but it is also very useful to display charismatic photos in promoting personal brand as appropriate.
Bars or gadgets for the arrangement of Menus
The menus in horizontal or vertical arrangement (the latter less common) are essential to facilitate user navigation, always in the most intuitive way possible. The organization of the menus is closely related to the approach to an appropriate information architecture and the structure for the arrangement of pages on the website, to organize the different sections and sections that comprise it with the best criteria.
Visible titles of pages and posts
That the user knows at all times where he is thanks to the title that heads the page is important from the point of view of usability, not all developments contemplate the possibility of showing or not, depending on the case, more or less evident, the titles of the pages or posts. The systems that include or allow enabling this functionality guarantee the orientation of the visitor between the different sections or sections of the website, regardless of their complexity.
Side bars
The side bar or “side bar” is essential on web pages that host dynamic content associated with the publications of informative blogs or news, but also in online stores and portals with a large amount of content. Its main utility is to host the texts with hyperlinks of the different categories and tags to whose subject the publications are associated, but they can also contain other sub-elements such as advertising images and all kinds of functionalities implemented through widgets or plugins, both very resources used in applications for content management.
Widgets Areas
The widget areas fulfill an important mission in the sidebars and footers, since they allow the insertion of other modules with additional or extraordinary functionalities. Their placement and choice depends on the focus of the website, although it is they can find common content such as addresses or commercial locations, calls to action, or links to landing pages whose information is interesting to be displayed on all pages.
Footer
The footer is an essential element located at the bottom of the page, its function is to provide information common to all the pages of the website, in which other widgets or components can be included with the business address, search fields, forms, promotions, and even links to any other section of the site, including other pages and even blog posts. In this same space or after it, it is common to find links to very specific and common pages to many websites, site map, privacy policy, conditions, faqs, information about cookies, etc…
Elements for the provision of content on the pages
Boxes and text spaces
Spaces and boxes for text cannot be absent on the vast majority of pages, to introduce the visitor to the context of the publication, relying on other content such as images and audiovisual pieces. Well-formatted texts also fulfill the important mission of making it easier for search engines to categorize each page when indexing its content, offering more clues to differentiate them from others, apart from the usual titles and descriptions.
Boxes and spaces for images
The images reveal to the viewer the theme or the focus of the page at a first and quick glance. The first impression that the visitor makes about our activity will depend on the characteristics, particularities and strength that they transmit, gaining their trust and awakening interest in reading. The mission of the images is reciprocal to that of the texts, in most cases the lack of one or another material harms the perception and correct interpretation of the content from the user’s point of view, but also in what is refers to SEO.
Image Galleries
When it is necessary to organize several images related to a specific topic to display them on the same page, the best solution is to arrange them in a gallery, which can be designed in a grid format. The way of interacting with the images in a gallery can be varied, from clicking to view each image in a larger size in another URL, to doing it interactively through a floating advantage, which in turn invites a pass for slideshow.
Portfolio sections
If the objective of a certain page is to serve as a sample book to show work or projects carried out previously, the most interesting thing is to implement a portfolio system. The portfolio can show in its corresponding section representative images of each project in miniature, which allow access by clicking to the page that houses the information related to the entirety, with its specifications.
Interactive buttons
The buttons can be of almost any size and aesthetic, respecting the balance between a good appearance of the set and adequate usability to favor the user experience. Its correct placement and the choice of colors and shapes allow the user to perceive an intuitive navigability and even suggest the steps to follow, to continue learning or carry out a conversion.
Section divider or separator
With so many options for the possible arrangement of elements on the same page that must show very extensive information, it may be necessary to divide each part into sections to avoid confusion. The divider can be a simple continuous line, of dashes or points, with a specific thickness and color, and its mission is precisely this, to separate other elements from each other to limit their area of influence.
Video Players
The video player offers the possibility of inserting them to communicate in a more effective way when explaining concepts or narrating events, especially for visitors with a real interest in the activity associated with the entire website who have time to view them. The insertion of videos is relatively easy through most web development technologies, whether they are hosted on your own server, as embedded or “embedded” in the page thanks to scripts that include the routes or links to third-party platforms, that facilitate their downloading and viewing by the streaming system, in which case fewer resources are consumed on the contracted hosting services.
Audio Players
The audio player on the website makes available to the user the incipient need for information, instruction or delight in their travels, or carrying out other activities that do not imply being in front of a screen, thanks to podcasts or recordings in different file formats that facilitate its compression. More and more companies and professionals include audio guides inspired by the market, or by their products and services on the pages of their websites.
Image slider or carousel
Incorporating a module that allows displaying a succession of images can add value for the user to view different messages on the same page. This behavior is useful for displaying different types of associated services, offers and promotions in a more visual way, adding superimposed texts or forming part of each image, and in some cases allows the insertion of audio files to create an appropriate climax with background music.
Video slider
Some products or services require showing their characteristics, functions or performance through different clips or video pieces in the minimum space, including a slider that allows interaction to move through them in these cases is a very interesting option. The video slider is also very useful for viewing materials in the didactic or educational field, and as an exponent or promoter of audiovisual services.
