Do you know? 9 major trends in web design in 2015

In fact, many friends have translated or summarized similar articles to analyze the trends of excellent web design before, but I still hope that what I summarize can be more macro and bring something new to everyone.

Later, you may think that you may have seen these points I mentioned or applied them in some projects. Yes, if you haven’t seen them, it’s not a trend, haha! Summarize these things and apply them in your future designs, so that we can keep up with the trend and gradually lead the trend, otherwise we will just be a cursory glance.

Let’s explore through several websites and websites that readers remember. Although it’s just a glimpse of the whole picture, the trend is evident!

1. The rise of graphic design in web design

In the past, we may think that there is a big difference between graphic design, web design and UI design, and that people who are good at graphic design may not be good at web design, but it is time to reform this concept. In fact, good graphic designers will integrate their graphic design skills into web design. If we only refer to website design when learning web design, we will never make a breakthrough.

Whether it is using graphic design as the background, or using graphic design elements as web page controls or decorations, good graphic design will greatly enhance the visual impact of the website. Therefore, future UI designers must also be good graphic designers, or collectively referred to as visual designers, come on!

GROBA

[[143409]]

WIT

[[143410]]

2. Full-screen homepage (large homepage image, video background, special effect background, interactive homepage)

The full-screen homepage is a form of welcome page or landing page. With the current variety of websites, the responsibility of conveying the spirit of the website or company and attracting users to continue browsing has gradually fallen on the shoulders of this full-screen homepage. Whether it is a picture background or a video background, visual impact and pain point capture have become the main tasks of the homepage, which is also a way to screen potential customers. The copywriting of the first screen is also particularly important.

(1) Home page background image

I believe everyone is familiar with the form of homepage pictures, which are usually high-quality photographs, or product pictures on a solid color background, etc. The advantages are self-evident, that is, they have great visual communication effects and impact. And with the continuous improvement of network speed, it is not a problem for users to load a high-definition background of 100K in a few seconds.

(2) Home page video background

Using video as the background of the homepage is more visually impactful, and a good video promotional film can make the website even more powerful. However, the disadvantages are also obvious. At present, the domestic Internet speed is still relatively slow (even if it is a 30M optical fiber, it is actually a shared Internet speed in many places, and watching online videos will be stuck during peak hours), and the video background is usually played directly when the webpage is opened. If the Internet speed does not meet a certain standard, the video will be stuck and the experience is very poor. In addition, in order to make the video play smoothly, in fact, the videos of many websites are compressed into videos with relatively low resolution, and the clarity is quite different from that of pictures. I hope that in the future, there will be video buffering or preloading technology to improve the overall browsing effect. The key is still the Internet speed.

JONAS ERIKSSON

The video background of this website is quite shocking, which quickly displays the work to the audience and makes them curious.

(3) HTML5 special effects background

Let's take particle special effects background as an example. Compared with video background, backgrounds made with new network language are superior to video background in loading speed and imaging quality, and special effects background also has a great visual experience.

FiberSensing

(4) Interactive home page

Interactive homepage refers to making some elements on the webpage that can be controlled by mouse or keyboard to interact with users, so that users can stay on the homepage longer and enjoy the process, improving the user experience while enhancing the website's fun and corporate image. Interactive page design often uses many HTML5 or CSS3 technologies, such as the particle effects mentioned above.

Suanier

[[143411]]

The turntable can be controlled by the mouse, and a three-dimensional layered effect is formed through different steering perspectives and dislocations.

3. 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 desktop websites hide their menus entirely in the hamburger icon.

This kind of design was originally just navigation, called "full-screen navigation"; later, with the innovation of design and the addition of creativity, the content of this page became richer and richer, and the page added links to social media, contact information, and even message boards, etc. We call it "full-screen rich navigation."

This form of navigation is actually somewhat risky in terms of user experience, because it requires one more click, and it will cause many users to ignore detailed content, making it difficult to achieve the optimal design. This type of menu usually requires users to be quite familiar with the hamburger menu logo. At present, we recommend that websites using this type of menu have a guiding prompt to inform users of more information entrances, or add other entrances in addition to the menu entrance. One of the principles of user experience is to actively present the information users need to users or allow users to find the information they need within three clicks, so this type of menu hidden in an icon is still slightly risky. However, this risk will decrease with popularity.

#p#

4. The rise of 3D visual effects

This will put forward higher requirements for web designers. The web design will incorporate the 3D dynamic display of the product, which may require the web design to include UI and interaction design, industrial design and rendering, video editing, proficiency in HTML5 front-end, etc. It is precisely because of the high threshold of this design that the growth rate is slow; but with the explosive growth of product theme sites, using 3D in product introductions has become the choice of more and more web designers.

There are many ways to achieve a 3D preview effect, some through WebGL technology, some through mouse-controlled video playback technology, and many 3D dynamic displays are actually composed of multiple pictures from different angles, played frame by frame.

BLIZEYEWEAR

[[143412]]

MAC PRO

[[143413]]

5. Animation will become more popular and widespread

Initially, website animation was concentrated on the elements inside the page, but with the continuous development of web technology and creativity, animation has become ubiquitous in web pages. The switching between browsing modules in a single-page website is no longer limited to simple push switching or gradual switching; and the switching between pages on a multi-page website has become softer. Through the connection of animation effects between closing and opening different pages, you will think you are on the same web page from beginning to end.

The animation of the internal elements of the page, from a banner to a button, mouse hover or focus change, these elements have incorporated too many rich animations. Even GIF animations are gradually emerging on the web to supplement some animations that are difficult to achieve with code.

Most of the websites mentioned above have exquisite animation effects.

DIVI (WordPress)

[[143414]]

This website uses GIF to achieve display effects on some pages.

JOHO's

[[143415]]

In fact, many of the special effects we mentioned are reflected in this website, which uses a lot of new web technologies, such as WebGL technology, sequence frame animation...especially the dynamic effects when switching pages.

6. Single-page websites continue to rise

Similarly, with the increase in Internet speed and network technology, single-page websites are still on the rise. The most significant advantage of this type of website is that information is not easily missed. If you visit a site and click on many sub-sites or web pages, and the logic between these web pages and the homepage is confusing or unclear, then the browsing experience of this website must be very poor. Single-page websites solve this problem. The pages you see or jump to are actually still on this page. And technologies such as AJAX asynchronous loading also solve the loading speed problem of large single-page websites.

AQUATILIS

Click the button on the page, the new content will push the original page to the left, and restore it to its original position after closing it. It is like the page on the left is a timeline, and you browse the content on the axis one by one. The user experience is great.

7. Web Audio Effects

More and more web designs will add some sound effects to the page, which can be the background sound of the web page, the sound effect of the page scrolling, or the sound effect of the element when the focus changes. The common feature of these sound effects is that they are all very delicate and light, just like the sound of turning the knob of a safe, crisp and pleasant. This will not cause unnecessary trouble to the browser. In order to prevent users from being troubled, more and more browsers have added the function of turning off the sound effects of the current page.

MY/STATIC/SELF

[[143416]]

However, the sound effects of this website are not soft and pleasant, but a cool and scary sense of technology.

8. Mobile-first responsive design continues to be popular

Responsive design is already a commonplace topic, and I believe everyone knows what responsive design is. Many people have analyzed the pros and cons of responsive design before, so I will not repeat them here.

Many domestic websites do not choose responsive design at the beginning of their website construction. The reason is also more in line with my country's national conditions. There are many reasons such as low traffic, slow network speed, and insufficient 4G popularization. As a result, it takes a long time to load a responsive corporate website on a mobile phone. According to the 5-second rule, if users cannot open a website within 5 seconds, they will choose to close it. At present, the websites of BAT in China are basically designed separately for mobile and computer, and the responsive corporate website construction of many domestic website construction companies also contains some gimmicks.

However, responsive design is still rising steadily both internationally and domestically. With the continuous innovation of smartphone technology, mobile Internet users have gradually caught up with computer Internet users, and the number of Chinese mobile Internet users is leading in the world. The design of mobile websites is becoming more and more important, and responsive design is a good solution.

9. The use of vector fonts on Chinese websites is gradually increasing

We often see foreign websites using a set of fonts as their own website fonts. Even if the user does not have this font locally, the website will easily load the font and use it in the browser. Looking at Chinese websites, more than 90% of the website fonts are either Songti or Microsoft Yahei. If you want to use a few different characters, you have to make them into PNG images. The reason is very simple. The Chinese font library is too large. A set of Helvetica standard font size is 81.68KB, while a set of Microsoft Yahei regular font size is 20.5MB. Do you want users to load 20.5MB of data when opening a web page?

However, with the rise of Chinese online fonts and the development of online vector icon font creation tools, including the Zizhu Project, we can use vector materials as our fonts, not just limited to vector icons.

GOGORO

That’s all I have to say for now, I’ll add more later.