2016 Web design trend of HD design

One of the hottest techniques in web design is the HD background, which benefits from the popularity of high-definition displays. But in the face of complex trademarks, it is difficult to deal with.

In this article, we look forward to the future of web design. Whether the HD web design can lead the network, this is not the problem, the key is the high resolution screen when the popularization, this is to enhance the visual design of the necessary conditions.

Now we're going to explore how to use pictures, videos, or animations to create an HD background and combine everything in a hierarchical way.

Image

Large, focus, full screen diagram.

The above words, the most suitable to describe the modern web design background picture. Designers not only stay on the thinking side of the HD design, they play to the extreme, using the background image to occupy the whole picture.

Macquarie-park

This design technique is effective because the user is a natural visual animal. After all, when we understand the world around us, vision dominates the subconscious. Also, pleasing images can create a better user experience to some extent because we take for granted that attractive things are better. This may seem extremely superficial, but in design, perception is the truth.

Junctionmoama

High screen resolution creates a great opportunity for the user to see the previously imperceptible details. Small details in the picture--such as the junction texture of the Macquarie Park used by the Moama (two of the above)--enhance the granularity of the interface and help a critical first impression.

Wearedandy

5 tips for using high-definition images:

Make the main picture the visual focus-although the picture is the background, does not mean it can occupy the center of the stage. Excellent photos can connect with the user, learn the subtlety of the picture, and see how it affects the visual level of the design.

Consider using multiple graphs--use the slide or card style structure we mentioned in the Web UI mode to deal with content-rich or photo-collection-type designs.

Adding an effect to a picture--blur or color overlay--can increase or change the tone of a picture (for example, the full red tone is more positive). This works well on high-definition images because the images are high enough to be clear in detail.

Consider the effect of a picture on a different screen size--Arrange the background image under various sizes so that it adapts to any breakpoint and does not reveal a solid color block (which is actually a real background).

Break the limits--the photo background does not have to follow the standard 1:1.5 camera proportions, or you can use pictures cropped from their backgrounds.

Background photos Create a simple visual attraction. Choose excellent photos to strengthen the brand, product or information, the best effect. Remember, sometimes you use multiple background photos to make sure that the design structure and the surrounding elements work well with each picture.

Video

High-definition video backgrounds may be one of the most popular techniques this year--especially with a large number of fast-moving lenses with a sense of madness. From giants like Airbnb to almost all types of small websites, video quickly became an important landscape in web design.

Life of Pi Movie

The first batch of websites that use background video is the movie site. For example, "juvenile fantasy Drifting" official website, using a movie trailer as a background (and also downloadable format).

Rileyscycles

The emergence of video as a design technique has nothing to do with its novelty. Before the launch of HTML5 (and smartphones that can play high-definition video), many browsers and network-connected environments simply can't handle full-screen video backgrounds.

Any discussion of high-definition video should revolve around the final product. Whether it's a surreal black-and-white technique like Dunckelfeld's, or a more realistic montage like Airbnb, you need to adjust its saturation and frame rate to make the video more appealing without distracting people.

It's not enough to have a video. All the tips for making good movies-framing, zooming, panning-are equally important in web video, even as a background.

Brindisatapaskitchens

Brindisa Tapas Kitchens has done a great job by editing a lot of short films to showcase its food and environment. Video is shot from multiple angles, some clips are accelerated with reduced-time photography, others are deliberately slow to create the right atmosphere.

Similarly, there are 5 recommendations for using High-definition video in your design:

Note The video length-the background video should present a visual story in a matter of seconds, allowing the user to feel the atmosphere. The optimal cycle interval is 10-30 seconds.

Turn off the sound--for most users, the sound is still a very extreme autoplay element. If you want to use a sound, also set the default mute.

Focus on loading time-although high-definition video is interesting, it does not slow down the load of the site. If the user exits in the load process, the video is no use.

Consider alternatives-some devices cannot render high-definition video. View the most commonly used equipment for visitors in Goolge statistics, and design according to the situation. Typically, you will choose a static picture as an alternative.

Stick to high quality video-whether you shoot it yourself or not, to get a clear picture, it's best to hire someone to do it, or use a copyright video. Not only because it is used in high-definition environments, but also because it requires pretty good quality. Like a photo, if the resolution of the original piece is used, the video is destroyed.

Web design, especially the use of background video pages, are creating a movie-like experience. The HD video in the Web site creates a complete multimedia experience that delivers information on top of the movement's background.

Animation

HD background animations are present in the design of fixed images because they often contain both fixed and motion elements.

It is also popular with load animations, and the principles of design have barely changed for decades. The only change is the level of quality that the HD display can present.

Made by fieldwork

The key to successful high-definition animation is Time control. The animation should have smooth and no trace effect. All looping animations have to be connected to the end.

Acnplwgl

As described in the 2015 and 2016 Web page design trends, we propose to keep the following 5 principles in mind:

Stick to simple animations-too complex stories and actions can exacerbate cognitive burdens, and if you can achieve the perfect basic animation, do not create complex effects.

Use bright colors to associate the interface--for example, you can change the link color by starting with a simple mouse hover effect. Consider choosing the brightest color in the color palette as the hover color of the mouse, making people notice the animation effect. The amplification of text on hover is also a visual clue that can play an extra role in stress. These simple tools help to highlight specific user actions.

Take advantage of the features of High-definition screens-use scalable picture formats, such as vector graphics, for optimal visual effects.

Use video to make animations-the same subtlety applies to animations. Discordant movements and objects, such as sounds, should be avoided, which can make users feel bored.

Make animations for the right audience-although many designers often combine animations and illustrations, this doesn't necessarily apply to every site.

Also, pay attention to the details. According to the website and the user's different, the animation can be the cartoon, the video style, or is only the illustration environment in a series of movement feeling. Animations can be triggered by user actions--click, scroll, or mouse clicks--or simply play them automatically.

Layer-by-layer architecture: integrating all content

An HD background is only as effective as a layer of information. A wonderful picture, video, or animated Maki-you have to consider how it relates to other things on the screen.

Here are 3 simple case studies that combine them very well.

Adidas Design Studio

Adidas Design studio with a variety of techniques to deal with the sharp pictures of large size, called for people to join.

The full-screen background is actually linked to a video, and the scrolling operation also has a visual difference effect that guides the user through the entire product line and related information. Clear pictures Match the same clear text. In a gentle way, the visual hierarchy is constructed by color.

Flipboard

Flipboard skilled in the use of fixed background graphics, which relies heavily on traditional photographic art.

High-definition images contain a lot of detail, but not aggressive. The picture also extends beyond the screen, allowing people to imagine that the table will extend in all directions, and that is true at different screen resolutions. The whole hue shapes the image into a background element, keeping the focus on the brighter message of action.

5 Eme gauche

The 5 Eme gauche features a large background with multiple elements, including bottom navigation, social media icons, and a logo and homepage link in the center of the screen.

Each layer of content is interactive with the background and is differentiated so that you can see the layered relationships on the screen at a glance. The internal hierarchy of this site is clear because all pages are in the same layered format and scrolling animation.

　　Conclusion

Although the HD background is becoming popular in recent years, it cannot be regarded as a trend. Their emergence is the result of the availability of technology at last.

This means that people will not get tired of HD design for a day and turn to the next trend. As a growing visual industry, this creative skill is definitely worth learning.