2014 Web page Design trends

In the past 2013 and 2012, the concept of web design is more or less influenced by the design style of large companies. Google has also made many tweaks to search algorithms over the past few years-paying more attention to the originality and usability of the site's content. HTML 5 Frees the designer's mind and has both pros and cons, and HTML 5 animations are sometimes overdone. As mobile Web Access continues to grow, responsive design becomes increasingly important.

Here are some examples of the web design trends of the 2014 that are described in simple cases. But, remember, don't overdo it. Not every trend is right for your customers. As a designer or web developer, you have the responsibility to follow the trend and tailor your customer's website.

Be ready to follow our footsteps to see how this year's trends go and then decide how you want to use them.

First, flat design

When Apple released iOS 7, not everyone liked the new flat design. Then, Jonathan Aivy know that this is the best time to remove the proposed materialization, the introduction of a minimalist, clean, tough design wind. After the release of IOS 7, a large number of flat style appeared on the network, this year is no exception. This is not only friendly to the mobile, but also more embodies the essence of design-the effective organization of the look and feel.

Mostlyserious

Complete flat design and a small amount of animation effect

Belancio

A flat case design

Not every site is suitable for flat design, such as your customer will require the use of materialized or 3D elements. For other content more than the site, you flatten some elements, often can play a role in simplifying the site.

Second, the customization of

Today's customization is more prominent, Internet brand competition needs to find a unique way to capture the same target market. Customized web design for customers has become a trend, especially in the use of HTML5, CSS3, jquery and other technologies. Many websites use pictures such as color overlay, blur and other effects. One-page Web site uses the overlay, picture Lightbox effect, scrolling parallax, and other interactive effects are also very common. Designers design Web sites that consider artistic fonts (described below), mixed fonts, or many other ways.

Dolox

The whole station uses parallax customization, very creative.

Hellomonday

The head compass is positioned and a lovely unique parallax is scrolled.

Customization is to avoid excessive caution, and sometimes you just want simple original items to make your site stand out.

Third, the artistic font

Web fonts open up creative web typography. Now that web designers are no longer limited to using only a few system fonts, over the past year, we've also seen more websites using creative fonts. Another advantage is that Web fonts can also be printed, which greatly facilitates the uniformity of the brand.

Art fonts:

Fixedagency

Handwriting fonts that match your company's image

Princeink

Use unique fonts to organize your structure

Artistic fonts are sometimes easy to go to extremes, a lot of text content is not suitable for the use of artistic fonts, otherwise difficult to read. In this case, you can choose the title using the art font, or as embellishment.

Four, rolling story-telling

More and more websites, including some sort of a scrolling story. This is typically used on a single-page Web site (although this trend is also used on pages or main pages), users scroll down to view the main information of the story. In the past, it was often used to tell stories, but more recently the use of text and images for parallax storytelling, mainly mobile.

Example of one-page scrolling web site:

Everylastdrop

Creating stories through a single-page Web site design enables users to be aware of social or environmental problems and solutions. Use a rich animation to make visitors more entertaining.

Sweez

E-commerce classes can also use scrolling parallax to tell stories.

In fact, the image story scrolling more than the text, it has advantages and disadvantages. Text too little does not favor search engines, as designers, you need to weigh in by setting some tags to make SEO optimization more friendly.

V. Theme Area

The topic area or lead area is derived from the terminology of the graphic design field, meaning that the page is designed with large pictures and a small amount of text. This way through a short snapshot of the site, in a few seconds to attract the attention of visitors, make people bright, create curiosity. Personal sites often use theme area design, and may be their great work can have a huge impact.

Moresleep

Use as little text as possible to tell them what to do and how they can benefit the customer.

plainMADE

Use one or two sentences to attract the audience.

Even most E-commerce sites use theme areas, often using very special images to attract audiences. If you can't bring your visitors below the subject area, it's dangerous. If users need to scroll a lot to see more, then it may be easy to get lost. If so, you can choose to hold the main navigation.

Six, video

Many websites are using video instead of text to tell their stories, to introduce their products, or to provide instructions on how to use the product. The great of the video is that it also enhances the search visibility of the site, especially by providing the necessary SEO search tags. One disadvantage of video is that some visitors prefer to look at titles and text descriptions, rather than 30 seconds to 2 minutes of video, meaning you need to provide a text replacement version.

Onlycoin

The theme area shows video, text and graphics scrolling down to storytelling, and letting visitors choose the way they like.

Savelli-geneve

The up and down navigation automatically hides, lets the video display maximize.

Seven, mobile priority

In the 2014, we will see more design that is biased toward mobility. It's not just a response, but a mobile-customized web design. Usually the font is very large, very long scrolling, card-type content organization, emphasizing social media and so on. Some sites are not only mobile friendly, but also want to make the website mobile application form. So you should also learn the design of mobile applications.

Responsive Resources:

Featured

Card-style display

Mottau

From top to bottom, large fonts, large buttons, large forms, more conducive to mobile reading.

Create a mobile version of the site, now most of the use of smartphones is far more than the computer. The same is the case for responsive design, where access to the PC side is also diminishing. So, ask your client what clients their audience is using to access the site, based on the numbers, recommend that they move for the first website design, or have a mobile app.

Eight, minimalist design

Minimalist design trends have been around for a long time and the site has only a very small amount of content. As more and more Web sites emphasize usability, minimizing elements, even large e-commerce sites are already starting to play a role. This type of site uses more than a single one or two colors, navigation remains concise and effectively organizes the menu. Pictures are replacing blocks of text, and even many people give up the sidebar to give readers a smoother reading experience.

Danebowen

Single color, easy navigation

Madeofsundays

Even these e-commerce sites can remain very simple.

Most designers know that the minimalist website attaches more importance to the embodiment of content. Minimalist design eliminates unnecessary elements and returns design for content services. However, some customers require streamlining in some areas, such as navigation, using cute illustrations or fonts to enhance the brand image.

X. Interactive Design

The interaction of the website is more and more prominent, the interactive experience of the organization can produce the emotion connection with the customer. Without the help of Flash, HTML 5 and CSS 3 combine to create a rich animation effect. In fact, HTML 5 is also the best technology to replace Flash on the move.

Thirdthrone

The theme area is unique to the instructions and text that scrolls down the unique cutting head pointing.

Minon

E-commerce site simple and creative interactive effect, by dragging food to the bread to try.

Puma

The meaningful exchange effects of slow loading

Games, tumbling animation buttons, scrolling animations, all become memorable parts of the user experience. Web sites use a series of interactive effects to help customers better find what they need, but be careful with loading sites, otherwise it's a heavy HTML 5 site. If your visitors don't like to wait (I think most of them are), try to minimize the interaction effect.

Xi. Fixed Navigation

A quick emerging trend of usability research is the fixed navigation menu. This type is usually a fixed top menu, then a long scroll, or click the menu to reach an area of the page.

Wedgeandlever

Fixed navigation bar increases availability

Justinaguilar

Access to different areas through different working sample menus.

Rook

Use a large, fixed navigation.

Not all sites need a fixed navigation. If you have a large amount of content that needs to be accessed quickly, consider navigating headspace. In fact, how many sites should be fixed (head or sidebar) without a choice of fixed?