Internet product Design: a solution to the unity of visual elements of products

Article Description: the meaning and process of the standardization of graphic language in products.

Now with the development of Internet enterprises and business expansion, over time, a company's products may become more and more rich and diverse, the same product with the continuous function of improving and expanding, with a product "grow up" products need to use the icon will also be more and more, this time a large number of product image presentation, The performance of visual primitives such as product icons, how to adapt to the whole product or company's strategic plan, at this time in the visual presentation of graphic language, semantic expression, recognition and other aspects of the need to make a comprehensive and meticulous consideration.

Let's take a look at a few typical examples and review the evolution of the Adobe product line, which has been greatly enriched since 2005 when Adobe acquired its largest competitor, Macromedia, and then in 2002 Adobe established Creative After the suite concept, the continuous introduction of new products, the huge product line in a kind of presentation in front of the user has become a very important topic. In the figure below I have outlined an evolutionary transformation of the Adobe product logo:

Product lineup of the powerful Adobe Empire in the Creativesuite 3 when the release of all of its products logo for a color loop map, very good showing the color of each product logo relationship and a complete color system.

Let's take another example, Apple in 2010 and 2011 has the itunes and the App Store logo made a more significant adjustment, to the Max OS Lion version, the two platform-level product new image at the same time displayed in the user Mac dock. Without an accurate official answer, but from one of the two commercially available products of the entire Apple product resource application and a source of entertainment content, they are clearly expected by Apple, in a sense that they are being endowed with a more thick, atmospheric image of this change, Be able to serve the business strategy of the company well.

In addition, after the release of itunes 10, the sidebar icons all become monochrome, the change I think is to highlight the store's core resource area, emphasizing the platform of the product, and the above analysis, the same visual performance level of the adjustment for the entire product of the resource business strategy services.

Now back to our own products, now "My Ali" as a network business users of the right-hand man, user's home, "My Ali" content and application in the growing, the system is more and more huge, the same site visual graphic language collation, solve the original accumulated long visual performance "chaos" is also increasingly urgent.

In the "My Ali" visual elements of the first step, many application icons are the first entry point, we from the meaning of the icon, classification, size specifications, design rules, style performance and other aspects of a overall direction of planning, summed up a set of design guidelines.

In the category of icons, we divide the site icons into the following three categories:

A product icon (Logo)

It is a product in the brand level definition, refers to a product system image, positioning and appeal of the centralized graphical performance, product icon (Logo) to the product or company to identify the promotion role, through the image of the graphic logo so that users know, remember and familiar with a product.

Product Icon Design principles:

1 can be a good interpretation of the products carried by the functions and to be like users to convey the value and image of the product;

2 graphics are easily remembered and well known by the user, and have strong exclusive (not easy to confuse with other icons).

Function and tool icon in the product interface

In a product interface, using a generalized refined image to represent a certain type of function or operation set of functional graphic identification, often have a group of regular in a functional module appears. Color modeling performance can be exquisite and expressive, but also simple and clear, pure texture.

Features, tool icon design principles:

1 The table meaning is clear, uses the element graph which everybody has accepted the specific meaning;

2 visual experience Unified, visual language from the system;

A function module inside the icon size to have a better visual balance;

A functional module or even the entire product icon texture, color saturation to be unified;

A set of multiple icons, graphic semantics to have a better consistency.

3 need to pay attention to the various aspects of the icon in the sense of inheritance problems, to avoid the user caused the difficulty of identification.

[1] [2] Next page