微信号:coding_net

介绍:Coding.net 提供代码托管,运行空间,质量控制,项目管理等功能,为开发者提供技术讨论和协作的平台.关注新浪微博@Coding,联系我们请邮件至:link@coding.net

四周年 • CODING 品牌升级实录

2018-08-08 10:55 扣钉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、动效展示

特别鸣谢:

  • 罗雪梅(负责网站和品牌视觉改版设计)

  • 许坦(负责网站页面动效设计)


 
扣钉Coding 更多文章 CODING 携手筑想科技,深度优化企业研发管理模式 深圳 | 云服务时代如何打造企业级的服务架构 深圳 | 聊聊开源落地的那些事儿 开拓创新,砥砺前行 CODING 牵手奇石缘,切实保障企业数字资产安全
猜您喜欢 【重要通知】中国首席信息官联盟关于开展2017年优秀首席信息官评选表彰工作的通知 DevOps与合规性:鱼和熊掌兼得指南 51CTO学院两日营收350万,引领知识付费时代 马云为什么能发财?看完这组漫画,你的脑洞就打开了! Linux 书单推荐