The modern market of mobile devices for Internet surfing offers the client any type of product. If you go back even one decade ago, Internet users used several basic formats: a PC monitor and a mobile phone, for which their own laws of visual content layout were in effect. Today, the range of devices is represented by a much greater variety of formats, and developers need to create an online resource that will be equally well displayed on the monitor of each device. If you want to hire ux developers we recommend reading this article.
What recommendations should be taken into account when designing a website for various monitor formats?
Correct scaling of visual fragments of the site is very important for comfortable and convenient use. It is quite difficult to achieve an equivalently high-quality display of the site on various types of devices. Therefore, it is important to remember and follow certain rules for the design and layout of complex online resources.
- Consider the density, not the number of pixels. This rule applies to any type of site content, but most of all affects the user interface. Until recently, pixels were the main scalability language, the most commonly used abbreviation is dpi. This is the number of dots per unit area of 1 inch. Typical visual resolution for a monitor is 72 dpi.
- Modeling rules today are based on a slightly different quantity called PPI (or density). For designing user interface fragments, it is recommended to build on the density of the device monitor, and not on the number of dots (that is, dpi). This orientation will allow the site content to scale correctly on any display.
- If the developer creates the body of the interface button with a resolution of 150×60 dpi, then the fragment will be displayed with a resolution of 150×60 dpi on a monitor with a density of 170 ppi and 300×120 dpi on a display with a density of 340 ppi, that is, twice as much in relation to the original size.
- Since some monitors have higher resolutions, the content of the site is displayed differently on the screen of each format. At higher density values on the monitor, pieces of visual content are displayed 2.3 or 4 times their original size. Density-based visual modeling ensures correct scaling of all site fragments on a monitor with any resolution.
- Use a layout in 8 dp increments. The reason why developers stick to the eight-fold division when designing the site skeleton is very simple and straightforward. The fact is that most displays on modern devices are divisible by 8. Therefore, using the “rule of 8” allows you to achieve the most correct alignment of the site content on the screens of various devices.
- Apply color hierarchy for a comfortable website experience. Each color carries a certain semantic load. By balancing with certain swirls, you can highlight or hide certain fragments. The proportions of colors allow you to harmoniously distribute the functional components of the resource and build a logical hierarchy of content.
- First, the visitor should pay attention to the elements of the user interface, then to the advertising banners, then to popular articles, and so on.
Taking into account the growing role of animation on landing pages, it is also worth paying attention to the general guidelines for the development of animated graphics. Product design and development services are provided subject to the following elements:
- General timing. If the animation significantly increases the display time of the essence of the page, it needs to be simplified. When the page is overly dynamic, it is difficult to determine the meaning of the content and part of the target audience simply does not want to use the resource.
- Speed. As practice shows, the optimal animation speed of interface fragments should not exceed 500 ms. This rate of speed is based on the psychology of visual perception. Any animation graphics more or less than the stated characteristics are less identifiable by the user.
If you decide to use animation effects, do not exceed the recommended speed and duration. A few extra seconds are enough for a modern consumer to refuse to visit your site.
