Element3 Logo是如何被设计出来的

简介: 关于Element3这个项目的来龙去脉,我仅在这里聊一聊Element3 Logo是如何设计出来的。

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。


1650852486(1).png


但作为一个设计师(室内设计师)出身的程序员,在没有更专业的设计人力支持时,我自告奋勇的担负起这个设计工作。


Element3 Logo


同样从3个方面来阐述一下Element3 Logo的设计语言


名称


Element3这个名称来自于Element+Vue3.0,意思就是支持Vue3.0全部新特性的Element-UI组件库。


形状


1650852520(1).png


在尽可能保留原Logo设计语言的基础上打破原本字母E的结构,重点突出3这个信息。好理解,易识别。而名称后新增的小三角播放按钮更代表了我们团队的能力所在,视频教学


颜色


要想生活过得去,身上必须带点绿。哈哈,开个玩笑。最近很多讨论都提到了我们是一个注重教育的团队,恰好我们公司Logo的品牌色也是蓝色+绿色,把3这部分变为绿色恰到好处,并且更加突出我们适配Vue3.0新特性这个信息。


社区参与


围绕这几点设计语言,我总共出了6版Element3的Logo设计方案,其实我们团队内部投票时的喜好并不是最后这个,但大圣老师说,我们要尊重开源社区共建的原则。


1650852553(1).png


所以我们在社区发起了投票,并最终采用了由社区投票选出的设计方案。


1650852594(1).png


设计方案确定后,先整了一批贴纸,后续还会出更多周边,用来奖励给积极参与社区共建的小伙伴们


相关文章
|
7月前
|
存储 编解码 算法
深度探索:使用FFmpeg实现视频Logo的添加与移除(二)
深度探索:使用FFmpeg实现视频Logo的添加与移除
288 0
|
7月前
Appium使用UiSelector封装文本定位方法find_element_by_text
Appium使用UiSelector封装文本定位方法find_element_by_text
83 1
|
7月前
|
编解码 Linux 数据安全/隐私保护
深度探索:使用FFmpeg实现视频Logo的添加与移除(一)
深度探索:使用FFmpeg实现视频Logo的添加与移除
177 0
|
7月前
|
机器学习/深度学习 编解码 算法
深度探索:使用FFmpeg实现视频Logo的添加与移除(三)
深度探索:使用FFmpeg实现视频Logo的添加与移除
113 0
|
7月前
Appium文本定位方法实现find_element_by_text
Appium文本定位方法实现find_element_by_text
63 0
|
文字识别
reimbursement relevant OCR document self-learnin
Combined with relevant OCR document self-learning services, you will be able to practice the document self-learning scenarios you actually use (such as finance and tax reimbursement, qualification review, internal business document structural identification, etc.) in no less than 800 words
95 0
|
运维 Kubernetes JavaScript
kuboard1.0标题logo修改
kuboard是k8s多集群管理界面,属于一个可视化运维平台。但是kuboard并不开源,所以无法找到源码进行修改,重新编译。只能对docker镜像中的dist源码进行动手改造。对应的docker镜像
132 0
|
人工智能
超实用!零基础搞定智能logo设计
超实用!零基础搞定智能logo设计
306 0
超实用!零基础搞定智能logo设计