Related reading:

  • Let me introduce Element3 formally
  • Talk about Element3 now and in the future

The context of the Element3 project has been made clear in the articles of the two teachers. I’m just going to talk about how the Element3 Logo was designed.

Element Logo

Before the design, I first interpreted the design language of the original Element Logo from three aspects

The name of the

Element, as we all know, is the open source UI component library for eleme’s front end team. The UI component library is made up of components, and the smallest components that make up a web page are also elements. Refer to the document. The createElement method. And happens to be in Element unexpectedly complete contains the full spell of Eleme, is really too clever, I love this name.

The shape of

Most UI component libraries like to think of themselves as boxes, toolboxes, building blocks… Represents an out-of-the-box, tool-rich, modular sense. In my opinion, Element’s Logo uses a similar design, but more subtly, Element uses the white part to create a capital E, which is both the first letter of its name and also highly recognizable.

color

Undoubtedly, it should be from the brand color system of Eleme.

In my team, I was mainly responsible for cross-end development of Flutter, ReactNative, small programs and so on. My work rarely involved Vuejs and Element-UI.

However, as a programmer who was once a designer (interior designer), I volunteered to undertake the design work when there was no more professional design manpower support.

Element3 Logo

The design language of Element3 Logo is also described from three aspects

The name of the

The name Element3 comes from Element+Vue3.0, which means the Element-UI component library that supports all the new features of Vue3.0.

The shape of

Break the structure of the original letter E while keeping the original Logo design language as much as possible, and highlight the message 3. Easy to understand, easy to recognize. And the new small triangle play button after the name more represents the ability of our team, video teaching.

color

If you want to get by, you have to wear some green. Ha ha, just kidding. Recently, it has been mentioned in many discussions that we are a team focusing on education, and it happens that the brand color of our company Logo is also blue + green. It is appropriate to change the part of “3” into green, and highlight the message that we are adapted to the new features of Vue3.0.

Community participation

I made a total of six versions of Element3 Logo designs based on these design languages. Our team’s internal vote was not the last one, but The great Saint said that we should respect the principles of open source community construction.

So we took a community vote and adopted the design that was voted on by the community.

After the design scheme is determined, a batch of stickers will be made first, and more stickers will be issued later to reward the partners who actively participate in community construction

At present, our Huaguoshan team is working hard to create element 3-admin. Do you have any good ideas on the design of Admin Logo? Let me know in the comments section, and if your idea is adopted, we’ll include you in element3-admin’s readme.

Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 2020, outbreak hit my third startup | Denver annual essay 81 praise
  • The Flutter development environment for Win10 is available at 🔥
  • 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 801 likes