FOR MORE INTERNATIONAL DESIGN IDEAS AND EDGE - CUTTING VISIONS
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.

点点网的设计主要重点是规划。一个网站信息构架足够复杂是需要更加缜密和系统的规划才可以保持网站的整体概念和气质。宏观的信息架构层级入手,清晰每一个产品的流程对其进行整体的层级划分,梳理出每个产品模块的功能主线和分线。后期设计元素的扩展性和可重用性是遇到的最大挑战。

设计以简洁为主要核心。界面风格的简洁,操作体验的简单。清晰的层级是简洁的搭建基础。比如目前国内所有网站在主页的设计上只是做了分栏,但却没有真正达到分栏的目的。分栏的目的是为了让信息分清主次而不是为信息找到放置的位置。在视觉上一定要突出主栏在哪里。点点的分栏是6/4开,左面是关注人的文章更新页面右边是功能操作和用户推荐。整体通过透明度和不同色阶的区分来确立主次关系,左面是白色微微凸起表现出每篇文章,右边是凹下去的暗色半透明底色。左栏的白色和右栏的深灰之间作过渡,背景的颜色明度是在这个过度色条的偏左1/3处,这样层级关系是正确的。整体页面在宏观上黑白灰的比例恰到好处,在绘画过程中经常要起身向后眯起眼睛看每个元素和整体的关系。做界面的设计要不停地做比较和调整。

上面是用设计解决了信息架构层级的问题,在一个产品的品牌上也需要设计确立起独特的风格。在概念和颜色系统上要做到有自己的规则和方向。颜色是和界面结合最紧密的品牌元素,颜色的运用要贯穿整个产品主线。每一个功能模块的设计从动作的开始到结束都有品牌色引导着整个主线。比如发布的产品设计,从最上方的博客名到发布功能的标题到下面的主要编辑区域再到最后的发布按钮,都是统一的蓝色。这样用户可以很隐晦的感受到整个页面的主线和分线在哪里。

点点的整个品牌颜色是红黄蓝,三原色。蓝色主要出现在重要的位置,红色是和用户内容区域,黄色是产品功能和提醒区域。白色是辅助颜色,分级排列是品牌色-白色-灰色这样的拍刘顺序适合前面提到信息架构分级是一样的。

另一个品牌特点是局部性光影写实。这样让简洁的界面中加入了活跃的元素和小小的惊喜。跳出时一个简单的翘脚,喜欢时一个微微抖动的心跳都是用最准确的还原现实中的拟物设计。局部写实的意义就在于它起到了画龙点的作用。他的定位确立了运营、渠道、市场部门配图的方向。写实准确视觉图片表现加上简洁干练的文案。文案本身的层级是考平面的板式和留白来实现。

上面提到了留白,点点的整体设计简洁但不凌乱,界面中在不加入任何样式元素做辅助的情况下要保持信息、功能层级架构清晰必须依靠系统的板式,也就是说留白的间隔之间是具有比例关系的。这些负形体正式区分板式的重要元素。在有合适的比例关系之后,简洁到位的把每个细分区域通过板式的调节做出了划分。为什么中国大部分网站设计都没把品牌风格做清晰,就是因为期间请出了很多“外援设计”来辅助建立界面的层级关系,但这样只会使整个页面更加复杂,距离品牌更加遥远。所以点点的设计语言使用最传统的板式方法来处理。

站点以UGC’为主,可以创立自己独特的博客,自定义html,通过标签划分独立分页面。产品的先进性可衍生出个人作品展示、旅游心情随感、私人日记记录、创业团队博客、团队期刊杂志等互联网产品。

整个产品的气质是温文尔雅的,即使广告的位置也是具体的尺寸比例规格。讲究一种平和的阅读和写作体验,我们愿意为了一个细小的体验尝试各种解决方案,达到用户无法接受其他样子。

点点的一些子产品比如说FM、实验室、商店等等所有的视觉系统是按照品牌的视觉设计系统。让用户可以清晰透彻的了解和使用点点这款产品。把设计的概念延伸到每个角落,一个好的品牌概念是少而精的,少体现在形式上的独一无二,精体现到经得起推敲并且具有更加宽广的延展性。

在这里设计为了更好的树立品牌,交互与产品设计要解决质量问题,视觉设计要解决识别问题,品牌设计要解决欲望问题。当最基础的需求满足之后,人们对于品牌的消费是对于他们品味的满足。品牌作为产品,有两种价值,第一是由心理产品层次的欲望价值,第二是实体产品与扩展产品层次的定位价值。

一个好的产品要体现消费者欲望的、企业可满足的、同时未被满足的买点这就是品牌定位,在现实当中品牌名称+品牌标识+品牌宣言+品牌宣传=消费者眼中的品牌。所以尽力去做好树立品牌的工作。

Light Blogging Diandian

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.

11月份进入点点这个网站来改动他的界面设计,到现在一直没时间总结这次改版的心得,那么这是一个很大的设计系统的规划。每个系统都会进行详细介绍,今天说一下publish的icon设计。点点是一个鼓励发现兴趣激发用户本身原创能力的博客平台,自然“创造”成为了概念的主题。图形在传达概念上是关键点,他的任务是映射出产品的性格和方向。

点点publish的icon设计有两点与众不同,第一每个icon在本身意义上具有了深层的关联性。第二打破了常规的静态图形设计。惯性思维中的90%icon是表现具象的物体本身或者和物体相关符号。

文字:用字母Aa或T

图片:一般表示都是山和太阳的照片或者相机

声音:音乐符号

视频:矩形中放置着播放的三角按钮或小电视

链接:单端小锁链

这些表述在识别上没什么问题,但在产品本身的品牌与视觉上就没有达到什么作用。并且图标之间没有任何联系。大家所用的icon都千篇一律,好像已经成为思维的定式。

首先我要打破这个千篇一律的惯性思维,在设计上要让他们关联起来,每个icon都要站到同一个发力点,让他们在一起传达一个概念,团结就是力量,使图形达到品牌效应的目的。
为了和“创造”这个概念相互吻合,我提炼出了文字、图片等这几个文件形式的共同点——创造工具。再配合一些创造时的动态效果,使得所有icon动了起来,每次发文章时鼠标移到icon的一瞬间都会感觉到一种在拿起工具在创造的感觉。文字:不是单一的符号T而要我们拿上手中的笔去书写。

图片:不是单一的日出图而要我们端起颈上的相机去拍摄。

声音:不是单一的乐府而要我们握住手中的话筒去歌唱。

视频:不是单一的播放按钮而要我们拿起场记板去录制。

链接:不是单一的链条而是要我们用鼠标去敲击每一个字符。

这几个icon站在一个发力点上把博客中传统单一的“上传”改成了“创造”这才是博客的真正的概念。博客永远是内容原创的发源地。有时做好设计很简单,那个本来属于你的概念和语言就在你的眼前。不要浪费每一次表现他的机会。