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


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


相关文章
|
8月前
Appium使用UiSelector封装文本定位方法find_element_by_text
Appium使用UiSelector封装文本定位方法find_element_by_text
92 1
|
4月前
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式,包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式,并提供了相应的代码示例。
89 11
Twaver-HTML5基础学习(29)界面交互
|
4月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(10)嵌入Table
本文介绍了如何在Twaver HTML5中嵌入表格(Table),并设置表格的列(Column)和样式。通过示例代码展示了如何在React组件中创建表格并添加数据,以及如何通过样式设置表格元素的颜色。
47 2
Twaver-HTML5基础学习(10)嵌入Table
|
4月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
47 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
移动开发 前端开发 JavaScript
HTML5新增元素之Canvas-实现太极八卦图和扇子
HTML5新增元素之Canvas-实现太极八卦图和扇子
|
敏捷开发 前端开发 开发者
UI框架-element(上)
UI框架-element(上)
|
人工智能
超实用!零基础搞定智能logo设计
超实用!零基础搞定智能logo设计
317 0
超实用!零基础搞定智能logo设计
|
人工智能
零基础搞定智能logo设计
海量创意一键生成,永久版权商用无忧
零基础搞定智能logo设计
html+css实战132-logo和nav布局
html+css实战132-logo和nav布局
164 0
html+css实战132-logo和nav布局

热门文章

最新文章