9 Trends of web design in the 2015

Today @ Zhang Yi alcohol a little confused students of this summary than the foreign grounding gas, more comprehensive than before, in-depth analysis, the case is wonderful enough, want to keep up with the web design trend in the second half of the students can harvest slightly.

In fact, there have been many small partners have translated or summed up similar articles to analyze the trend of excellent web design, but I still hope that I summed up something more macro and bring you something new.

Later reader may feel that I said these several may you have met or oneself also in some projects to use up, yes, have not seen not called the trend, haha! These things are summed up and used in their own future design, so that we can keep up with the trend and gradually lead the trend, otherwise it will only be a superficial.

We through several websites and reader memory of the site together to explore it, although it is glimpse, but the trend can be seen!

　　The rise of graphic design in web design

In the past, we may think that graphic design and web design and UI design is very different, the graphic design people may not be able to do a good job of web design, but this concept is the time to innovate. In fact, good graphic designers will be their own graphic design skills into the web design, if we are learning web design when only the reference site design, then we can never break through.

Whether the use of graphic design as a background or a graphic design elements as a Web page control or decoration, in fact, good graphic design will greatly improve the visual impact of the site. So the future UI designers must also be a good graphic designer, or collectively known as visual designers, come on!

　　Groba

　　WIT

　　Second, Full screen home page (home big picture, video background, special effects background, interactive homepage)

Full Screen home is a welcome page or landing page form, the current site a variety of, can be the first time to convey the spirit of the site or enterprise and to attract users to continue to browse the task gradually fell on the shoulders of this Full-screen home page. Whether it is a picture background or video background, visual impact and pain point crawl has become the responsibility of the home page, which is a way to screen potential customers. The first screen copy is also particularly important.

(1) Home big picture background

Home big picture of the form of believe that everyone is not unfamiliar, usually high-quality photographic pictures, or on the solid color background of the product pictures and so on. The advantage is self-evident, that is has the very good visual transmission effect and the impact force. And with the speed of the continuous upgrade, a few seconds to load a hundred K HD background is not a problem for users. Excellent network has recommended a number of High-definition Gallery station, a little search will be found.

(2) Home video background

The use of video as the background of the homepage in the visual more impact, good video promotional film is a menace to the site. But the shortcomings are also more obvious, the current domestic speed is still relatively slow, (that is, 30M of fiber, in many places are actually sharing speed, peak to see an online video card), and video background is usually open directly to the page is played, in the speed of the network can not reach a certain standard, the video will play, the experience is very poor. And in order to make the video playback smooth, in fact, many of the site's video is compressed into a lower resolution than the video, clarity and picture differences. Hope that in the future can appear video buffer or preload technology to enhance the entire browsing effect, the key or speed.

　　JONAS ERIKSSON

The site's video background is quite powerful, quickly showing its work to the audience and making the audience curious.

(3) HTML5 effect background

We take the background of particle effects as an example. Compared with the video background, the background used in the new network language is better than the video background in loading speed and imaging quality, and the special effects background has a great visual experience.

　　Fibersensing

(4) Interactive Home

Interactive home refers to the Web page to do some can use the mouse or keyboard control elements to interact with the user, so that users stay on the home page for a longer time, but also enjoy the process, improve the user experience at the same time enhance the site's fun and corporate image. Interactive page designs are often applied to many HTML5 or CSS3 techniques, such as the particle effects mentioned earlier.

　　Suanier

The mouse can control the turntable, and through different steering perspective and dislocation formed a three-dimensional hierarchical effect.

　　Three, full-screen rich navigation

In traditional web design, navigation menus are usually placed at the top or side of the page, but more and more computer-side websites hide the menus in the burger icon.

This design was initially just navigation, called "Full screen navigation", and to the late, with the design of innovation and creativity to join, the content of this page is more and more rich, the page joined the social media links, joined the contact information, and even some added a message board, etc., we call it "full screen rich navigation."

This form of navigation in the user experience is actually still a bit risky, because more than one click, and will lead to many users ignore the details of the content, difficult to achieve the optimal design, and this menu often need to build on the user's Hamburg menu logo is quite familiar with the basis. At present, we recommend that websites using this kind of menu will have a guided prompt to inform users of more information, or add additional entries in addition to a menu entry. One of the guidelines for user experience is to proactively present the information users need to the user or to get the information they need within three clicks, so the menu hidden in an icon is still a bit risky. But this risk will be reduced as the popularity level.

　　The rise of four or three-dimensional visual effects

This will have a higher demand for web designers, web design will be integrated into the product's three-dimensional dynamic display, which may require web design includes UI and interactive design, industrial design and rendering, video clips, proficient HTML5 front-end and so on. It is also because the design threshold is higher, so the growth rate is slow; but with the explosive growth of product-specific stations, the use of three-dimensional in product introductions has become more and more of the choice of web designers.

Three-dimensional preview effect of a lot of ways, some through the WEBGL technology, some through the mouse control video playback technology, there are many three-dimensional dynamic display is actually a number of different angles of the picture mosaic, a frame for playback.

　　Blizeyewear

　　MAC PRO

　　Five, the dynamic effect will be more popular and extensive

At the beginning of the period, the site will focus on the internal elements of the page, and with the development of web technology and creativity, dynamic effect in the Web page becomes ubiquitous. The switch between the browsing modules in a single page Web site is no longer limited to a simple push-or-change transition; the switch between Web pages in multiple Web pages becomes softer, and the animation effect between different pages closes and opens, and you'll think you're on a page from beginning to end.

The internal elements of the page dynamic, large to banner small to a button, mouse suspension or focus of change, these elements are integrated into too much rich dynamic effect. Even the animated image of the GIF is gradually rising in the Web page to complement some of the code that is difficult to achieve.

Most of the sites mentioned above have exquisite dynamic effects oh.

　　DIVI (WordPress)

The site is a display of the dynamic effects of some of the pages implemented through GIF.

　　Joho ' s

In fact, many of the special effects we mentioned have been reflected in the site, using a lot of new web technology, such as WEBGL technology, sequence frame animation ... Especially in the page switch when the dynamic effect.

　　Six, one-page website trend continues to rise

Similarly, with the Internet and the rise of network technology, Single-page Web site is still showing an upward trend, the most prominent advantage of this site is that information is not easy to omit, if visit a site by clicking and point out a lot of child stations or Web pages, and these pages and the logic between the homepage is more confusing or not clear The browsing experience of this website must be very bad. and a single page of the site to solve the problem, you see or jump to the page, in fact, is still on this page. But the Ajax asynchronous loading technology also solves the huge single page website loading speed problem.

　　Aquatilis

Click on the button in the page, the new content will be the original page to the left, after the return to the original position, like the page on the left is a timeline, and you will browse the contents of the axis, the user experience is very good.

　　Seven, the webpage sound effect

More and more web design will add some sound effects on the page, which can be the background sound of the Web page, or it can be the scrolling sound of the page, or the sound of the element when the focus changes. The common features of these sound effects are very delicate and slight, lightly dotted, just like the sound of turning the safe knob, crisp and sweet. This does not add unnecessary trouble to the viewer. And more and more browsers to prevent users from being bothered, increased the ability to turn off the current page sound effects.

　　My/static/self

But the site's sound is not soft and sweet, it's a cool, scary technology.

　　Eight, mobile priority response design continues to prevail

Response design is a cliché, and I'm sure we all know what a responsive design is. Many people have analyzed the pros and cons of response design, and I will not repeat them.

Many domestic websites do not choose response design at the beginning of construction The reason is also more in line with China's national conditions, less traffic, slow speed, 4G popularity, and many other reasons, resulting in the mobile phone to browse a response to the corporate web site will consume a long time to load, and according to the 5-second principle, Users can not open a Web site within 5 seconds, they will choose to close. At present the domestic BAT's website basically still moves and the computer design separately, but many domestic construction station company's response type enterprise constructs the station, also contains some gimmick.

However, the response design in the international and domestic but still steady rise, with the continuous innovation of smartphone technology, mobile end of the Internet users have been gradually chasing computer users, and China Mobile network name in the world is the number of leading. The design of mobile web sites is becoming more and more important, and responsive design is a good solution.

　　The use of vector fonts in Chinese websites is gradually increasing

We often see the site on the foreign site using a set of fonts as their own site fonts, even if the user does not have this font locally, the site will be easily loaded into the font and use in the browser. And throughout the Chinese website, more than 90% of the site font is not the song is Microsoft Ya Black, want to use a few different words will have to make PNG pictures, the reason is very simple, the Chinese font is too big. A set of Helvetica standard font size is 81.68KB, and a set of Microsoft YA Black conventional body size is 20.5MB, do you want users to open the page when loading 20.5MB data?

But with the rise of Chinese online fonts and the development of online vector icon font tools, including the spider program, we can use vector material as our font, not just vector icons.

　　Gogoro

Say so much first, slowly add later.