Element Logo
在设计之前,我先从3个方面对原Element Logo的设计语言做了一番解读
名称
众所周知,Element是饿了么(eleme)前端团队的开源UI组件库。element的英文是“元素”的意思,UI组件库是由一个个组件构成的,构成网页的最小元件也是一个个的element。参考
document.createElement
。而恰好在Element中竟然完整的包含饿了么(eleme)的全拼,真是太巧妙了,打心眼儿里喜欢这个名字。
形状
大部分UI组件库喜欢把自己类比为一个
盒子
、工具箱
、积木
... 代表了开箱即用,内含工具丰富,模块化的意义。在我看来,Element的Logo也是采用了类似的设计,但更为巧妙的是,Element利用白色部分构造了一个大写字母E
出来,既是名称的首字母同时也非常显眼,易识别。
颜色
毋庸置疑,应该是来自饿了么(eleme)的品牌色系。
我在团队里主要负责Flutter、ReactNative、小程序等跨端开发内容,工作上较少涉及Vuejs和Element-UI。
但作为一个设计师(室内设计师
)出身的程序员,在没有更专业的设计人力支持时,我自告奋勇的担负起这个设计工作。
Element3 Logo
同样从3个方面来阐述一下Element3 Logo的设计语言
名称
Element3这个名称来自于
Element
+Vue3.0
,意思就是支持Vue3.0全部新特性的Element-UI组件库。
形状
在尽可能保留原Logo设计语言的基础上打破原本字母
E
的结构,重点突出3
这个信息。好理解,易识别。而名称后新增的小三角播放按钮更代表了我们团队的能力所在,视频教学。
颜色
要想生活过得去,身上必须带点绿。哈哈,开个玩笑。最近很多讨论都提到了我们是一个注重教育的团队,恰好我们公司Logo的品牌色也是蓝色+绿色,把
3
这部分变为绿色恰到好处,并且更加突出我们适配Vue3.0新特性这个信息。
社区参与
围绕这几点设计语言,我总共出了6版Element3的Logo设计方案,其实我们团队内部投票时的喜好并不是最后这个,但大圣老师说,我们要尊重开源社区共建的原则。
所以我们在社区发起了投票,并最终采用了由社区投票选出的设计方案。
设计方案确定后,先整了一批贴纸,后续还会出更多周边,用来奖励给积极参与社区共建的小伙伴们