Website Production Example Analysis: Search SNS visual design whole process

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

To tell you the truth, I really did not really say in public the process of the birth of the white society, her appearance is how we sketch out step-by-step. This time, with the help of Ued blog's upcoming opening, is officially published.

In the White Society design task, when the SNS flying design styles are Facebook, happy, school style, then, we think, how to break through? How to get out of the information architecture, page layout patterns and visual elements everywhere Let a person at least in the first sense does not feel that this is a market of the same SNS skin.

In this, we tried a lot of innovation, situational-like interface, Apple Dock-like navigation bar, very cool interactive way, looking at the film "Iron Man" generally High-tech interface. But after a period of divergence, we found that we walk in a misunderstanding, visual design is not those shiny surface for the display of skills, visual design should be through the appropriate means, better meet the needs of users, transmission of information. The so-called visual communication is a bridge between users and information, helping users to receive information quickly, efficiently and cheerfully, rather than dancing alone and ignoring others.

At the same time, white society's Virtual User role design is also in full swing, as a participant, we also thought that since the virtual user role can help product design and interactive design more accurate positioning of user needs, then it can also help visual design in the vast sea to find the target user's visual preferences, To meet their visual taste, more targeted for their design? Then we started a project called the Virtual User Vision model, which is to accurately position the design style by simulating the visual tastes and preferences of the target user. Whether it is the color of the product style, or the text style, the app widget design, can have a certain guiding role.

This is how we define a visual model:

1. The user Role Vision model is based on the virtual user role card and is a visual fill of the user role.

2. The visual model only uses a series of pictures to speak, further enriching the user role, make it more intuitive to show.

3. Through each picture contains the color information, the texture expression and the atmosphere contrast, gradually groped out the user role in the visual release surface the hobby.

4. The visual model will be perfected with the continuous improvement of the character information to form a continuously populated library.

5. There will also be some subjective ideologies in the model, which, based on some suggestions, continue to be refined.

Here is our visual Model flowchart:

In this Visual model library, we gradually find the feeling. All of our visual elements are not from the designer's personal preference, not from the owner's preferences, from anyone's individualism, but from the preferences and expectations of the target users.

After the visual model was helped, we gradually found a set of visual expressions that belonged to the target population of white society, and began a series of design attempts.

First of all, we found that elegant color can let white-collar office workers diastolic pressure, mental relaxation, since white society is a white-collar "live elsewhere" place, that first in the visual transmission to make people feel relaxed and happy, as well as some intimate warmth. In the first draft design, we try to convey this feeling with some little fresh color, even 10243.html "> visual designers have put forward some ideas that are like real-time weather, simple and easy to use, and are rich in the overall tone of the page, and also have changed the layout of some pages. such as the position of a sentence, the position of the navigation bar.

But because the first version of a lot of details have limitations, the traditional layout of the page is common, but also without losing its truth, so we adjusted a version of the draft according to the actual situation. This time, we also put forward to add the day version and the evening version of the small design, although the function is small, but can let the user feel some intimate warm ah ~ Careful students will find, because the development time is more tense, we have no Name, logo are Sohu SNS hehe.

This is the daytime version:

This is the night edition.

Before this version, or did not feel the expression of a thorough, so we decided to change the idea, from the white-collar side of the office culture, the next version is we change a larger version, but also in the beta when the continuous use of a version. This version of the visual style will be heavier, wood grain desktop, origami notes and so on, the use of a long time will make people a bit depressed, after all, deep tones will be easy to some suppressed feeling. At the same time, this version we also began to join the IM, left and right app list and IM panels have been made to shrink the way. Although this extends the middle of the content area, but the operation is not intuitive and convenient.

My favorite is the daytime version of the Sun on the page, like the morning sun on the desk feeling, let people feel good vitality ah.

The night version of the spotlight is also my favorite, warm coffee red, the most flavor in the night.

In the continuous design of this version one months later, even the first very like the design of the engineer So-and-so will tell me that he every day on this page some feel depressed. From all aspects of feedback, this version of the design although in a short period of time more eye-catching, but the use of a long time is not to make people comfortable. So on the line there are one months time, we have a bite, change!

Or return, after a long period of repression, release easier than the original easier, that is, now we see the white society as a whole design. We add a lot of release elements, expand the rendering atmosphere of the logo head map, combined with real-time weather and hand-painted logo and a significant no boss small superscript, full rendering a simple and relaxed atmosphere. At the same time, in order to allow the IM panel on the right side of the browser does not mix with the right scroll bar, there are some visual space, we also added a cute boss key, small details are set to enhance the atmosphere rendering. The day and night editions are also more pronounced.

The visual level of the overall page through a small folding processing of the middle of the content area is obviously prominent, so that users easily put the visual center in the feed area. The list of IM because there are a lot of heads, easy to make the page become flowers and chaos, we also try to weaken the background color, so that he does not disturb the user. In addition to the first page of the other pages will be collected.

And then we have an egg. Oh, energy-saving edition.

The birth process of white society in a short period of time, our visual design team accepted a large number of challenges, the harvest is also a lot of, whether the design method or design process or visual experience design, and so on, of course, we continue to continue to optimize continue to modify, Continue to provide users with the best visual experience. Welcome to the White Society direct experience to see.