Web Design Example: Micro-credit Third party Web page design process

Article Description: when you get the project, you need to calm down first. Instead of rushing to do it, most students will understand why. Here to say more is the first look at similar opponents of the situation. Because visual design relative to product function, is the most easy to pull off the part of the sense of difference. Perhaps a different set of visual strategies allows the product to move quickly out of most of its kind.

Recently more busy, finishing the work of the speed significantly slowed a lot. Today we summarize some of the previous micro-credit third party website. To be clear, it is a Web site that is not a separate page. More holistic issues need to be considered.

When you get the project, you need to calm down first. Instead of rushing to do it, most students will understand why. Here to say more is the first look at similar opponents of the situation. Because visual design relative to product function, is the most easy to pull off the part of the sense of difference. Perhaps a different set of visual strategies allows the product to move quickly out of most of its kind.

Most of the general

Most of the micro-letters are third parties, and seem to be less focused on the display part. That is, the visual part, faint some nouveau riche feeling. And now it seems that the company has been doing a group buying scene. Many, very many, finally lost in a piece of marketing of the ocean.

As a designer, first jump out to observe. In fact, we will be surprised to find that the universality of these stations is for you to do a micro-letter Mini station , is called the new era of marketing. The core functions are basically the same, as follows:

• Intelligent navigation (call geographic map interface)
• Online payment
• Panorama view (free picture combination)
• Lottery marketing Activities

Casually open the search "micro-credit Marketing experts", a bunch of similar micro-credit third-party websites. Now many entrepreneurs are doing similar projects, in short, many companies are doing similar attempts. Of course, any of the domestic areas are basically the same as hundreds of similar projects, can really operate down to the end of only 3-4.

Casually open one of the sites, found its promotion of the core point, as said above, the functional part of almost all the micro-letter third party do the same thing. If you open the Web page casually, do you think you will take the initiative to contact them? In the case of many similar products.

In addition to the outside of the third party, Tencent also has two excellent third-party platform, "Wind chimes and micro-life." From the interface can be seen that there are differences between the two, the direction of the solution is divided into different categories.

• Wind chimes demand display and marketing (in favor of the information number)
• The demand for micro-life is the mobile end of the store member solution (in favor of the service number)

In such a big environment, how can break through? The general understanding will find that these Tencent services are based on a large customer solution. The reason is the large area, the tail in the long tail is difficult to reach the part. is the so-called small and medium-sized shops. Their appeal, in addition to the display, is more of a wish to tell the user that they have the service. This is more important than simply creating a micro-credit service.

A small part of the unique

Of course, the above analysis, in the design phase, but did not think so deeply. It's all about writing this thing, and thinking about the "design management strategy" That's been talked about in the recent graduate program is a rather interesting part of the visual design. Previously did not pay much attention to, and now began more in the form of this part of the thinking recorded and summed up.

When you look at some of the overseas app sites, you will find that their ideas and we have a great difference. Perhaps the Chinese people prefer to see as much detail as possible, more likely that customers like your things as rich as possible. There may be just inertia thinking. At the very least, most people now look at the pages above and below, and it is estimated that most students will prefer the following case.

A similar site

PAPER Http://www.fiftythree.com/paper

Any. Do http://www.any.do/

So, the change of mode, should make its product introduction become more elegant and concise.

Of course, this may have been a departure from the target audience. The more beautiful things generally, the smaller the base of the service population. In the exhibition design of this piece, it is true that many foreign companies, especially small companies do very exquisite. You may not want to miss every user who enters the site. Keep some highlights on every page.

• Full-screen image/video usage
• The simplest text description
• Show different product/operation process

What can we do?

After communicating with the product team, feel that we should do more in the direction of elegance. To achieve this goal, in fact, their demand is "tall", designers feel the eyeful is tears. Translated into our language, is the elegant atmosphere, to reach this goal, the reference map is some of the domestic cottage of the micro-letter third party.

At this time, the designer should give their own reference suggestions. If someone gives you something, do it yourself. is very passive. The future team, mainly the demand side, becomes very strong, and the results are not necessarily good. Because you can not give any professional advice, then the product team is not a visual reference to become a big problem. Finally, the problem is stuck in the designer's side. The so-called do not have the feeling.

The 1th step: to point out that designers feel better style, and together discuss

There may be the following semi-finished products, which do not require much detail. Just according to the above proposed by the reference scheme of the visual manuscript.

Of course, demand side of the demand is simply to do a home page, there are picture rotation, navigation and footer, that is, the product introduction picture can be. The rest, like our strengths and real-world cases, are the new highlights that designers have put forward based on their experiences and related page references.

Really this is a good way, can more for the demand side more think, they only think you professional. The cost of communication in the future is much smaller.

2nd step: After determining the approximate style, refine the main parts

In fact, this part is the most troublesome part. As the teacher said, we all think that animation is very handsome. In fact, the real creative part on the front of that a small point, more is like a craftsman-like grinding the remaining cumbersome mechanical processes. Can't be lazy. Just a little bit of grinding

Make sure you finish a process and move on to the next step. This is very important, otherwise a lot of hard work will be easy to completely negate the possibility.

The rest of the setup work is then completed. The basic use or the means of fitting, the core function button fixed position. The background is related with the matching map.

3rd step: Unified into a flat style

Why be flattened. Because of the team discussion, the Roman and the powerful ads all seem strange. Indeed, the kind of modelling in light sense, texture and shape, if not a unified scene shooting, the whole may appear chaotic. Hard to combine, it also requires a considerable amount of time to unify the details.

So, the idea of conversion. Mainly also most of the inner page of the visual bias to flat, at this point, the conversion to flat is also considered one of the unified steps.

Flat does not mean simple processing, the simpler things, can not be presented in an accurate manner. is very rough, so that each flat shape can be linked to the subject is the hardest thing.

Product introduction

Why is the flat style, also starting from this page. Differentiation is the focus of thinking, when most of the pages, although also flat, but more is in the form of monochrome, color many used in mobile devices. In the Web page, a lot of color is still the use of the means of materialization.

So, the core features flat + color.

About Us

As for us, this is not the case at the beginning of the PM concept, as the UX first version assumes. Perhaps this is not the final visual presentation, there seems to be a classmate said, round like tt ... I'm thinking about it.

Micro-Transport website

Web site http://wy.city.qq.com/