Eight tips to help you play the background design of the website

Almost all designers know the importance of using graphs in web design, but in actual projects, how do you do well in picture design? This article will share with you how to design with the intention of grasping pictures.

Advice to designers: do not hurry to find material before making a picture!

If you can do two preparatory work, it will be helpful to the designers:

　　1, comb The type of pictures you want in your Web site

Working directly without thinking is the culprit of inefficient design.

Before the picture design, the designer best can refer to the existing Web page rough layout and the column, and so on, combs lists the desired picture type in the website.

For example, according to the columns and modules to the desired picture categories: Banner, Business Introduction, Product Introduction/display, Company Introduction, Team Introduction, news/information, customer cases and so on.

Of course, designers can also be based on the actual situation of the project, or the most suitable for their own methods to use a better picture classification.

Comb the picture type is helps the stylist to comb the website content, lets the later work more plan and the pertinence.

　　2, clear the intent of the picture

In a Web site, the image you see when browsing the web should not only attract the attention of the user, but also let the user through the visual image, accurate sense of the information delivered to the site.

In fact, the picture on the Web page is not just a beautiful pixel block, all the pictures should be intentional.

Understanding the intent of the picture, for the designer is the clear picture of the design goals, this is a very important step in the work.

We summarize a few common picture intentions: Show product features (advantages), relate to text, maintain element consistency, help people understand something, teach people to use (a product), guide users with their eyes, create atmosphere, render emotions, and shape brands.

Here is the actual case sharing:

　　Show Product Features:

The above case is the banner map of the FiftyThree website.

In a Web site, the first screen of the user's initial impression of almost decisive role, and the banner map in the first screen location, determines its importance. Especially for marketing-oriented websites, the banner chart is the best place to show the product.

The picture in the case shows the use of "Pencil" on the ipad (Apple series), which is a feature of the product.

The case of the picture intent is very clear, and text collocation together, both publicity, promote the role of products, but also a guide to the user to participate in the entrance.

　　associated with text to maintain element consistency:

The above case is the AIIA product blog banner, the picture here is highly related to the text, not only maintain the consistency of the elements, but also through the tone of the bright and dark processing, presented a visual beauty.

After the user opens the blog, will also focus on the text and background of the product picture, in the mind left a visual impression.

In fact, for designers, graphic correlation is a basic principle in design. But most websites ignore this, and even cause the information not to pass correctly, the sale opportunity reduces and so on.

There's a study from web usability guru Jakob Nielsen: Simple decorative images are subconsciously overlooked by our brains.

This study shows that the importance of graphic correlation becomes the guiding principle of design.

"Picture and text-related" should be used by designers in project practice.

　　Help people understand

Zuli site for users to display is a novel smart home products, which home banner to the product use scene for the background.

How is this product used? Figure above helps users quickly understand the content of the site.

Here the picture after the professional shooting and processing, clear, clean, and will originally need a large paragraph of text description of information, successfully "look at the picture to speak" way directly to the user show, to help users better understand the product.

　　Teaching people to use

On the "How It Works" page of the Zuli Web site, the Web page combines a combination of graphics and text to show multiple usage states or scenarios for a product.

The Web page of all the image style is consistent, the image design are mainly physical images, through the flat icon to establish a product and mobile phone app virtual contact between easy to understand.

The intent of the picture here is to teach the user to use the product.

When the user browses the webpage, the picture can attract the attention, and lets the user be highly sensitive to the picture content, then actively browses the text to understand the product to use deeply, stimulates the bigger interest.

In general, the design aims to "teach people to use" pictures, more suitable for new products or the use of complex products, this way can help users to quickly master the use of skills, reduce the cost of product use, access to the user's favor.

　　Guide the user in the eyes of the people

Women on the Ines Maria Gamler site are facing their faces, staring at the text in the middle of the site. When you open a Web site, most people will first focus on the face of the person and be further guided by the person's view.

With the people's eyes, users will further focus on the text and graphics in the middle of the page.

This design method has two key: generally first through the beautiful model (or other characters) to attract the attention of users, users will continue to follow the model's attention point of view, focus on products, copywriting or logo, to achieve the goal of the image design.

In the famous you looking where They look study, the eye-movement research on the baby diaper retailer's website concludes that the user's eyeballs can be guided by the sight of the model (or character) in the advertisement.

Through the clever guide of the characters ' sight, the important information of the website can be displayed and the problem of the model is improved.

　　Create atmosphere

Open the 23snaps website, the left picture instantly attracts people's attention, giving a kind of intimacy.

To the user, the life of the picture condensed people's daily life a scene, have a familiar feeling. Pictures from the whole to create a warm atmosphere, and the characters happy expression can affect people's mood, so that users feel a happy, warm family atmosphere.

Here also uses the character to guide the user, follow the picture in the child's view, the user will further attention to the picture copy and registration/login area.

The case also shows the app usage scene from the overall composition, conveying the "Share Family Photos" positioning to the user.

　　Rendering emotions

Udo Web site uses a large number of pictures to show a lot of beautiful scenery, layout and color of the overall collocation, from the visual to bring users a fresh and comfortable feeling.

Aesthetic is the nature of everyone, a website is good-looking, the user at the first glance will have intuitive judgments. Affected by the "primitive person" in the brain, the appearance of the picture can really affect the user's first impression of the site.

The picture in this case gives the user a good impression on the visual design, stimulates the user's imagination, and releases the feeling of beauty, freshness and tranquility, which makes the user feel relaxed and willing to continue browsing the website.

　　Brand Creation

Katia Bongiorno is a brand web site, the case of products/services through a series of unified high-definition large graphics Full-screen display, in the user community to create high-end, exquisite brand image.

To the user, the big picture of high quality is often more popular, the picture of the unified style has both the visual shock force, and it is easy to leave a deep impression, which attracts the user's attention for a long time.

Successful brand can be a long time, through the unique visual, arouse the subconscious impression, let users associate with the brand.

Here, the large high-definition image and picture style unification is the key factor of shaping the brand, virtually deepened the impression of people, leaving long-term influence.

The above examples are the most common picture intentions, and are also the goal to be achieved in the design of the picture.

Designers need to do is to deepen the project needs and customer Company's business understanding, in order to more clearly the site of the various columns of the design goals.

Once the preparations have been completed, and the results of the requirements analysis phase are taken into account (design ideas, web content structure, website style, etc.), designers can begin to prepare to shoot or collect picture material.