PLEASE CONTACT ME WITH
The design of diandian.com focuses on planning. A complex network information requires more careful and systematic planning, in order to keep the overall concept and temperament of the website. Starting from the macro information architectural level, clarify the process of each product for overall level division, sort out the main lines and sub-lines of each product module feature. Expansibility and reusability of the late design element is the biggest challenge.
The design adopts simplicity as its core. The interface style and operation experience are simple. Clear layer is the foundation for simplicity establishment. For example, current all domestic websites only carry out sub-column on the homepage, yet do not truly achieve the purpose of sub-column. The sub-column aims to draw a clear distinction between the primary and the secondary information, instead of finding the position for information placement. Visually, it must highlight the position of main column. The sub-column of diandian.com is 6/4. The white color in the left column transits to the dark gray in the right column.
The background color brightness is at 1/3 left of this transition color bar, so that the hierarchical relationship is correct. At macro level, the ratio of black, white and gray in the whole page is perfect. In the drawing process, the drawer has to always get up, lean backward and narrow eyes to observe the relationship between each element and the whole. When designing the interface, the designer shall continuously make comparison and adjustment.
The information structural layer problem is solved through design. For a product brand, it is also necessary to determine unique style through design. Stick to our own rules and direction in concept and color system. The combination of color and interface is the closest brand element, and the application of color shall penetrate the whole product’s main line. From the start to the end of movement, there is brand color guiding the whole main line for the design of each feature module. For example, when designing the published products, the uppermost blog name, the title of publishing feature, the main editing area and the publishing button uniformly use the blue color. In such a way, users can subtly feel the position of main line and sub-line in the whole page.
The brand color of diandian.com is three primary colors - red, yellow and blue. Blue mainly appears in the important position, red is the area for user contents, and yellow is the area for product feature and reminding. White is auxiliary color, and the grading sequence is brand color - white - gray. Such sequence is the same with the above mentioned information structure layers.
Another brand feature is local realistic light and shadow. As a result, active elements and little surprises are added into the simple interface. A simple leg lifting when jumping and a slightly shaking heartbeat use the most accurate physical objects in reality for design. The local realistic style has played the role of put the finishing touches. Its position has determined the image direction of operation, channel and market department. Through realistic and accurate visual images and simple documents, the layer of documents is realized through the plane plate and white space.
White space is mentioned above. The overall design of diandian.com is simple but not disordered. There is no style element in the interface. To keep information and feature layer structure clear, it is essential to rely on systematic plate, that is to say, there is proportional relationship between the white space gap.
These negative spaces are key elements to distinct the plates. After having proper proportional relationship, divide every sub-segment area by adjusting the plate.
Why does most of China’s website design fail to make brand style clear? This is because many “external design” are invited to help establish the layer relationship for the interface.However, such a method can only make the whole page more complex, and become farther away from the brand. Therefore, the design language of diandian.com adopts the most traditional plate method.
The site focuses on UGC’. You can create your own unique blog, customize html, and divide the independent pages through marks. Product advanced property can derive personal works show, travel free mood, private diary record, entrepreneur team blog, team periodical and magazine, and other internet products. The whole product has the soft gentle temperament, and even the advertising location also uses the specific dimension scale specification. We focus on a peaceful reading and writing experience. We are willing to try every solution for a tiny experience, and meet the user needs.
Some sub-products of diandian.com, such as FM, Lab, Store and other visual systems, design the system in accordance with the brand vision, so that users can clearly and thoroughly understand and use this product of diandian.com and extend the design concept to every corner. A good brand concept is less but better. The few is reflected by unique form and the better is reflected by scrutiny and broader extension.
Here we design to better build the brand. When interacting and designing products, the quality problem shall be solved, recognition problem shall be solved for visual design and the desire problem shall be solved for brand design. When meeting the most basic needs, brand consumption is their satisfaction of tastes. As a product, the brand has two values. The first is the desire value at the psychological product level, whereas the second is the positioning value at the physical products and extended products.
A good product shall reflect the consumer desires. The purchasing points that the enterprises can meet and have not be met is the brand positioning. In reality, brand name + brand identity + brand declaration + brand promotion = the brand in the sight of consumers. Therefore, we try our best to build the brand.
We began to change the interface design of diandian.com website since November, and haven’t got time to summarize the revision experience up to now, and it will be a large design system planning. We will further introduce each system. Today we’ll talk about the icon design of publish.diandian.com is a blog platform encouraging to find interests and stimulating the user’s original creativity capabilities, and natural “creativity” has become the theme of concept. image is a key point in conveying the concept, which aims at mapping the product features and directions.
There are two unique points of diandian.com publish icon design. First of all, each icon has profound relevance in its sense. Secondly, it has broken the conventional static image design.In habitual thinking, 90% of icons are symbols representing specific objects themselves or related to the objects.
Text: use alphabet Aa or T
Image: generally use photos of mountain and the sun or camera
Sound: musical symbols
Video: triangle button or small TV is placed in the rectangle
Link: single-end small chain
There is no problem in recognition for these representations, yet have no effect in the product brand and vision. Besides, there is no correlation between icons. The icons are stereotyped, which seems to become the thinking set.
First of all, I have to break the stereotyped habitual thinking, make them correlate in design, make sure every icon is at the same power point, and enable them to convey a concept: unity is power, so that the images can achieve the brand effects.To match with the concept of “creation”, I extract the common ground of texts, images and other document forms – creation tools, and use some dynamic effects in creation to make all icons move. When publishing articles every time and moving the mouse to the icon, you will feel that you are creating with tools.
Text: not single symbol T, but we have to write with pen in hands.
Image: not single sunrise image any more, but we have to shoot with camera on the neck.
Sound: not single music, but we have to sing with the microphone in hands.
Video: not single play button, but we have to clapper board to record.
Link: not single chain, but we have to click every character with mouse.
Standing on the same power point, these icons transforms the traditional single “upload” in the blog into “creation”, which is the true concept of blog. Blog is always the cradle of original contents.Sometimes it is easy to design well. The concept and language belonging to you is before you. Don’t waste every chance to display it.