Picture narration in web design

Since the beginning of human history, the story has played a great role in our communication. Just because we tell the story to the screen rather than thousands the bonfire around the years ago, the appeal of the story remains unchanged. Most interestingly, the audience of the story is no longer word, because these "listeners" (who, in a sense, they are also users) can control the whole process and rhythm of the narrative through the actions of navigation buttons.

The information of the webpage mainly divides into two kinds, one kind is the language information which needs the human brain language system to handle, the other kind is the visual information which mainly takes the picture. Today's web page has been identified as a host of visual information of the media, although the Web page also displays a lot of text information, but with the speed of promotion, visual media such as pictures, videos, etc. slowly occupy our screen. A site without pictures looks lifeless and will be ignored. On the contrary, with the beautiful graphics, rich animation interactive Web page becomes the visual focus.

Visual narration creates a goal for web design, refining complex designs into a simple and dramatic story of conflict evolution that is easily accepted by users. Without a good visual narrative ability to express, your Web page will have no potential to tap.

　A picture wins thousand words

We have heard an old saying called "A picture wins thousand words". But do you know the underlying scientific evidence behind this? There is a theory called the "superiority Effect" (picture effect), which means that pictures are more easily memorized than text carriers, and that the same content is 6 times times more informative than text. Because pictures can transmit information from two dimensions, i.e. language and images, it makes the brain easier to encode and memorize.

Now that you know the importance of pictures, there are a few points in the process of using pictures that have to be brought to our attention:

1, in a Web site to use a unified style of the picture, but their content display to make a difference, to express the different levels of the page.

When we design light website Panney (click Demo), the material material of carpentry art looks close to natural wood color, so the whole all take natural log color as unify tonal, at the same time, each Zhang Quan big picture shows different content level, collocation different text content. Each screen shows a larger picture while also showing a small number of the next picture, as a reminder of the next step is extremely important.

2, do not repeat the same concept in your picture, try to link the concept of string into a line, become a narrative.

Light Web site Hathor (click Demo) in design, we consider using a guide page as the starting point for the story, a bit like the cover of a book. A small arrow icon in the lower left corner to remind readers to enter the "body"

We came up with four concepts, four concepts with different mapping, like the narrative of the site's "character characteristics" to describe. Here I put 2 picture maps here, you can click into the demo watch.

3. If you want to use a model in a picture, these models also need to be consistent throughout your story. The so-called unanimity here does not mean that they are the same object, but that they do not seem to come from a different world.

Light Web site Thoth (click Demo) design idea is so, the appearance of the model appears in the same page, dress is a unified style of modelling, the use of vertical arrangement will not appear to conflict.

The home page of this website is a large brand logo, occupy the first screen, click into a row like a window when the mouse over a picture, the color of the picture, like the window of the glass slide open, text disappears, guide users to further click into. This story is not horizontal, but vertical depth. Finally go deep into the image behind the product concept.

4, although the picture to carry on the narration, but this also does not mean that you cannot use the text, the text as the auxiliary may strengthen the narration the expression and the understanding.

Light Web site Athena (click Demo) graphics and text ratio is just half of the screen, in addition to showing pictures, more prominent text, text used in different colors of the pure color background, and the picture is more elegant gray and concise expression, at this time, the picture became a supporting role.

Each page uses a 22-phase color, so that each page is interconnected and not isolated.

Light Web site Merope (click Demo) graphics and text display is the main focus of the picture, but at the same time the text of this secondary focus. It's kind of like a note on a piece of paper that is posted next to a photo. Graphics and text to cooperate with each other to create a "comfortable" "warm" this kind of atmosphere, strengthen the entire wooden furniture to bring home warm feeling.

5, as far as possible the use of concise and impact of the picture, here the so-called concise and impact is actually in the entire screen to retain only a visual focus.

Light Web site Nireus (click Demo) Here's the trick, each picture shows only the facial expression of the character, through this clear and thorough expression, so that you draw closer to the distance with the model, and then fold a layer of transparent color on the black and white characters, slightly obscure the characters, and let you and the model forever separated by a distance. As far as near, bring tension to this distance.

　　The speed of the image

The user's attention is always limited, usually within 10 seconds, a person can determine whether the site is worth continuing browsing. If this is too much text information will discourage users, lazy to read and leave. When someone comes to your site to see a picture and instantly determine the approximate content of the page, this not only saves users energy and time, but also creates opportunities for them to continue browsing.

For example, light Web site Seawee (click Demo) at the beginning of design, we want to make a user come to this site can enjoy the overall situation of the page, while not leaving a single visual focus. It's not just to keep it simple, but to show enough information. That sounds a dilemma. So, we used the animation way to solve, the left and right each set an arrow, a point before, a point, respectively, in the mouse slide out before and after three pictures, so that you can move the mouse to get a general understanding of the general style of all pictures.

According to this idea, we also designed another site, light site Demeter (click Demo) is another type of gallery, and it is a very typical gallery, it is in line with the image of the collection form, and click on the left and right button to slide it sideways. This allows the user to browse all the content in the gallery at the first time, and then further select the pictures that need to be viewed.

　Postscript

The narrative of a Web page can be applied to almost any kind of modality, and you can use the light Web site mentioned above to build your own story and use your own narrative technique to express the product or service.