08月20日
四周年 • CODING 品牌升级实录

品牌概述

CODING 是一个高效的研发流程与管理平台。秉承 “让开发更简单” 的使命,致力于提升软件研发的管理效率。提供了任务协作、代码管理、GIT/SVN 代码托管、在线编辑器等一系列研发管理和支撑工具。

品牌升级背景

Coding.net V1 页面至 2014 年上线后,在设计上一直未做改版,风格上早已落伍与当下设计流行趋势。过去的页面上缺少品牌特征和衍生图形,导致页面呈现上单一,缺乏层次感。

本次品牌体验意将形象与开发者的「极客精神」结合,营造出 CODING 一贯给用户的一种年轻活力多元化的感觉。

图片

什么是极客?

Geek 是一种在互联网时代创造全新的商业模式、尖端技术与时尚潮流。是一群以创新、技术和时尚为生命意义的人。

图片

设计关键词

此次品牌升级设计中,创新、技术、时尚这三个关键词最为核心,围绕这三个关键词我们找了一些符合极客设计风格的关键词。作为后期参考素材的关键词搜索来源。

图片

从极客精神入手,我们找了一些具有极客风格的公司和产品,像 Google、Slack、苹果、Adobe 等等。

图片

提炼基础识别

最终我们选择了 Google、纪念碑谷、乐高作为学习和参考对象。Google 在以创新著称的互联网公司中是首屈一指的。纪念碑谷是一款探索解密类的游戏,通过发现视觉错位走出纪念碑迷阵,在关卡的设计上非常具有技术含量。乐高是唯一一个不分年龄层的玩具,不管什么时候它一直都是经典和时尚的代表。

从 Google 上提取:科技蓝作为一级辅助色;
从纪念碑谷提取:三围立体色块作为视觉象征图案;
从乐高上提取:马赛克拼图形式图标。

图片

品牌色的制定

CODING 新版品牌色在 V1 的基础上增加了「科技蓝」作为强调色,其它衍生色在饱和度上做了微调,并减少了灰度色的使用数量。

图片

品牌标志的优化

品牌标志有助于建立品牌识别, 同时传达出品牌信誉与稳定性。新版的品牌标志的在配色上加深了一度,在图形标志和文字标注的间距和大小上略做优化。并且制定了 50% 和 100% 的安全区域。

图片

UI 应用

1、Icon 系统

Icon 是用户在平台接触最自然的品牌设计元素。统一的 Icon 可以帮助用户更容易的识别品牌属性,建立高品质的品牌视频系统。旧版沿用是 Font Awesome 字体图标,图标过于圆润,与硬朗中性化的极客风格大相径庭。新版根据极客风格打造了一套全新 Icon 系统。

图片

2、字体系统

品牌专用字体是品牌视觉识别的重要部分。品牌专用字体风格有助于建立品牌独特的美感。「苹方」做为 CODING 的中文品牌专用字体, 被用于品牌产品及品牌视觉传达中。

图片

3、网站 & APP 界面升级

图片

4、动效展示

图片

图片

特别鸣谢:

  • 罗雪梅(负责网站和品牌视觉改版设计)
  • 许坦(负责网站页面动效设计)
900