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


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


相关文章
|
5月前
|
SQL Java 数据库连接
MyBatis 与 Spring Data JPA 核心对比:选型指南与最佳实践
本文深入对比Java持久层两大框架MyBatis与Spring Data JPA,从核心理念、SQL控制力、开发效率、性能优化到适用场景,全面解析两者差异。MyBatis灵活可控,适合复杂SQL与高性能需求;JPA面向对象,提升开发效率,适用于标准CRUD系统。提供选型建议与混合使用策略,助力技术决策。
1476 158
|
5月前
|
数据采集 监控 测试技术
2025年住宅代理IP服务商TOP10榜单最新出炉
2025年主流住宅代理IP服务商盘点:SmartProxy凭高性价比和易用性脱颖而出,适合中小团队;NetNut、Bright Data、Oxylabs等各具优势,涵盖SEO、电商、广告监控等场景。
|
7月前
|
搜索推荐 算法 JavaScript
基于springboot的健康饮食营养管理系统
本系统基于Spring Boot、Vue与MySQL技术,融合大数据与AI算法,构建个性化健康饮食管理平台。结合用户身体状况、目标需求,智能推荐营养方案,助力科学饮食与健康管理。
|
8月前
|
网络虚拟化 虚拟化 Docker
记一次Windows端口占用问题排查
netstat命令排查不出的Windows端口占用问题的解决方案,附快速排查脚本
886 0
|
前端开发 JavaScript Java
计算Java项目|基于SpringBoot的协力服装厂服装生产管理系统的设计与实现
计算Java项目|基于SpringBoot的协力服装厂服装生产管理系统的设计与实现
320 0
|
XML 前端开发 JavaScript
详解Ajax与axios的区别
详解Ajax与axios的区别
|
Oracle Java 关系型数据库
2022 年超详细过程步骤讲解 CentOS 7 安装Maven。以及Mavne配置文件的修改
这篇文章提供了在CentOS 7上安装Maven的详细步骤,包括从官网下载Maven、创建文件夹、上传和解压Maven安装包、配置环境变量、设置Maven源为阿里云、指定jar包仓库位置、配置JDK版本,并验证安装是否成功。
2022 年超详细过程步骤讲解 CentOS 7 安装Maven。以及Mavne配置文件的修改
|
JavaScript
在vue中引入elementui
这篇文章介绍了如何在Vue项目中引入Element UI库,包括使用npm安装Element UI、在main.js文件中引入并注册,以及如何调用Element UI的组件。
|
Ubuntu
Ubuntu20.04安装SNMP服务
至此,你已经成功在Ubuntu 20.04上安装了SNMP服务。你可以使用SNMP工具来监视和管理你的系统,或者将其集成到网络管理系统中。
1448 3
|
存储 编解码 人工智能
中科星图——Sentinel-2_MSI_L2A数据集
中科星图——Sentinel-2_MSI_L2A数据集
762 1
下一篇
开通oss服务