Vi
En
VI only
Anvui
Vai trò
Anvui là một công ty công nghệ, chuyên cung cấp giải pháp phần mềm hỗ trợ cho các nhà xe, nghĩa là theo một cách nào đó, họ vừa làm phần mềm và vận tải. Tên công ty và tagline của họ cũng rất hay và ý nghĩa, hợp rơ ăn ý với ngành vận tải hành khách : An Vui – đi an về vui.
Lúc ngồi với anh sếp và nhìn vào tấm card visit, và website, nhìn lại logo; tớ thấy dường như có sự bất đồng bộ trong mọi thứ. Anh sếp cũng cười khoe logo đó lúc trước là ảnh tự làm, vậy là rõ rồi, họ chưa từng có một ai đứng ra chăm chút về hình ảnh thương hiệu. Anh sếp nói ngắn gọn tới tớ:
“em cứ đề xuất lên ý tưởng”
Okêee, nghe có vẻ rất phóng khoáng, tớ yêu sự phóng khoáng. Vào việc thôi!
Anvui is a technology company which provides IT solutions and softwares for transportation companies. That means they work in both the technology and transportation industry. Their name ‘Anvui’ can be interpreted through 2 single words: ‘an’ which means ‘safety’ and ‘vui’ which means ‘happy’. Their slogan is ‘đi an về vui’ – ‘travels safety, arrives happy’. That is meaningful, right?
In my first talk with the CEO, i looked at his business card, then the logo and the website. There was an inconsistency between them. He smiled and told me the logo was created by himself. Oh, that’s clear; they have never had a person who takes care of the look of their brand. He told me:
“Let’s start with some ideas, any ideas”
Great! Let’s get it started!
Concept thiết kế ✨✨✨
Design concept ✨✨✨
Bạn vừa dạo qua một vòng thiết kế concept của tớ đó. Tớ chăm chút nhiều vào animation với mục tiêu xây dựng một concept mới mẻ hoàn toàn, trẻ trung và năng động để phù hợp với xu hướng phát triển công nghệ.
Bạn thấy như này oke hông 😉😉😉
Well, you just have surfed through my concept designs. Animation was highly invested for the purpose of building the whole new young and dynamic concept. That innovation is needed to catch up the new era of development.
How do you think? 😉😉😉
Case study
Nhưng mà mọi thứ tớ làm không chỉ là motion không thôi đâu, tớ cũng không bỏ qua ý nghĩa của thương hiệu. Đằng sau những cái motion động đậy là cả một bầu trời suy tư đó, Tớ có ghi lại những suy nghĩ của mình trong quá trình xây dựng concept này, có cả một câu chuyện trời ơi đất hỡi phía sau nữa 😂😂😂
Case study hơi dài, nếu bạn hứng thú bấm xem thì ráng đọc hết nhaaa
Case study
I not only focus on motion but also do research the meaning of the brand to make it a comprehensive design concept. They are not just animated graphics, behind them was my hundred hours of thinking. I noted them all, through my working process, including the sad story at the end 😂😂😂
This is a long case study. Let’s read it when you really want to read!
👇👇👇
Accordion Panel
1. Anvui?
Như đã nói sơ bên trên, Anvui chuyên cung cấp phần mềm cho các nhà xe: phần mềm đặt vé, quản lý lịch trình xe, web nhà xe và ứng dụng di động. Một cách tổng quát, họ làm việc trên hầu hết các nền tảng lập trình, cả phần cứng lẫn phần mềm.
Về góc nhìn vận tải, họ làm việc với các nhà xe vận chuyển hành khách, nghĩa là sâu xa hơn một chút, sản phầm phần mềm của anvui sẽ cung cấp cho cả nhà xe lẫn khách đi xe. Họ phải làm việc với các dữ liệu về thông tin hành khách, cung đường, quản lý thời gian và tuyến chạy, vân vân..
1. Anvui?
As described above, Anvui provides many kinds of software: booking system, trip management, business websites and applications. In general, they have to deal with most of all platforms, softwares and hardwares.
In the transportation perspective, they work with transportation businesses. That means their products serve both companies and customers.They handle tons of data: customer information, route and time management, etc.
Tớ đã phân vân cực kì khi chọn mình sẽ nghiêng về lĩnh vực nào để bắt đầu mọi thứ. Theo hướng vận tải như các hãng lớn như grab, goviet hay đi ngược lại cho ngầu, một logo hơi hướng công nghệ? Việc tìm ra yếu tố vừa công nghệ vừa vận tải có vẻ khó, vì trong tầm hiểu biết của tớ thì 2 mảng này không dính dáng gì cho lắm.
I was too confused when i had to choose which subject to be the main concept. May i follow the transportation like many big brands (Goviet, Grab) do, or stand on the opposite side – technology?
Finding the relevant point between them seems to be hard. In my opinion, they have nothing in common.
Ngoài ra, bản thân cái tên và tagline của anvui đã rất rõ ràng và dứt khoát nghiêng về vận tải rồi. Lại còn hay nữa là đằng khác, câu tagline lặp lại từ tên doanh nghiệp, 4 từ đăng đối về thanh âm với 2 vế rõ ràng; mỗi từ trong đó lại là một từ đơn có nghĩa.
Hay à nha!
Chắc có lẽ tớ sẽ hùa theo cái tên anvui, về phe vận tải.
On the other hand, the brand name and the tagline itself clearly explain what field they’re in. Furthermore, the name is meaningful, and the tagline too. The brand name is included in the tagline, the tagline has 4 singular and meaningful words.
That’s really amazing, definitely!
Then, i thought i should follow the transportation.
2. Chung? Riêng? Giao thoa?
Ôi nhưng mà hãy coi như là chưa đọc câu cuối cùng ở trên đi nhé, ngả theo mọi người sẽ là phương án cuối cùng, khi mình đã thử và thử nhiều lần không được.
Tớ đã có nhiều phương án thử kết hợp các chi tết của 2 lĩnh vực. Ví dụ như icon vé xe kết hợp với điện thoại, bánh xe với điện thoại, blabla.. Các trang instagram về logo và icon hay share những thiết kế icon như vậy, cứ thử tìm nhiều khi lại ngẫu nhiên làm nên chuyện!
2. The common points? The particular?
Oh, nevermind. Let’s pretend i didn’t say anything. I won’t follow the trend. Standing in the crowd will be my last option.
I tried many options of combining the characteristics of 2 mentioned fields. For example, mixing the ticket icon with the smartphone, the wheel with the smartphone, blabla… I was inspired by many designs on instagram, they share too much design like that. I wanted to give it a try!
Nhưng mà không, những cái này không nên là một logo mark. đây chỉ là minh hoạ của sự kết hợp hai yếu tố thôi, nhìn thì trực quan đấy nhưng không có mấy chiều sâu. Phải cân nhắc phải cân nhắc, giữa logo mark và typo nên có mối liên hệ tương đồng và bổ trợ. Tên công ty và tagline đang hay, không được làm bừa, hmm..
Vậy là kết hợp hình ảnh để tạo ra cái chung không ổn, tớ chuyển sang tìm các điểm giao thoa về tính chất, đặc thù ngành nghề. Để coi :-/
Đoán xem tớ tìm được gì nào?
Unfortunately, this shouldn’t be a logo mark. This is just a visualisation of combining 2 factors. They might look cool, but meaningless. I should consider, think deeply. The logo mark and logo type should have a special relationship. The brand name is great, it deserves a good visual.
So, visual mixing doesn’t make it work. I started to dive deeper, finding the relevant in the peculiarities of those fields.
Guess what i found?
Vâng chính là kết nối ạ, kết nối hay liên kết, hay connection. Ngành vận tải là mối liên kết giữa các điểm đến, quá rõ ràng rồi. Còn trong lập trình, kết nối có ở mọi chỗ: dữ liệu – giao diện, giao diện – xử lý, xử lý – cơ sở dữ liệu, vân vân vân vân, một hệ thống muốn vận hành trơn tru thì mọi kết nối đều phải được đảm bảo, yay.
Kết nối có vẻ là một hướng đi khả quan! Nó là một tính chất căn bản đến mức cơ bản. Trong toán học, hình học và đồ hoạ mình có thể hiện thực hoá bằng 2 món là điểm và đường :>
Yeap, that’s the connection! Transportation is basically a connection between locations. And in the programming aspect, connections exist everywhere, represent the relation between data and interfaces, interfaces and processing, balbla…
Well, connection seem to be a good direction! In geometry mathematics, it can be presented by points and path
Triết lý vl gió to vl, nhưng thật mọi người ạ! Bản thân anvui cũng là một cầu nối để các nhà xe tiếp cận với các tiện ích công nghệ mà.
Looks like i’m bragging, right? But it’s true, we can imagine Anvui is bridge that connects the traditional companies with high-tech utilities. That make sense!
3. Points & Paths, và logo
Với concept này, tớ sẽ vẽ logo dạng nét, logomark cũng có thể là icon dạng nét, chữ cách điệu dạng nét, vân vân. Tớ đã có nhiều bản phác thảo, bao nhiêu thì không nhớ nhưng có vẻ nhiều, và một trong nhiều bản đó là logo mark với 2 nét đối xứng. Thật tình cờ vì an vui có 2 chữ cái đầu là A và V đối xứng nhau một cách vi diệu, nó sẽ hình ảnh hoá rất tốt tên và tagline của anvui!
3. Points & Paths, và logo
With this concept, the logo will be drawn with some lines, maybe the logo mark, and maybe the logotype… I drafted many sketches, uncountable, and one of them is a logo mark with 2 symmetrical curves. What a coincident, Anvui also have 2 first letter A and V that are visually symmetrical
Có vẻ như cái này ổn nhất và rộng đường cho triển khai nhất, lên máy tính và tiếp tục thôi.
Đây là lúc cho concept lên tiếng, Points & Paths :> Không phải tự dưng mà tớ chọn hướng đi này đâu nhé, mọi thứ đều có lý do của nó. Đồ hoạ vector và tin học đều có nền tảng là toán học, giống như một đường đồ thị có thể được biểu diễn bằng hàm số, logo anvui này hoàn toàn có thể biểu diễn bằng một vài hàm số y=f(x), trên web tớ cũng có thể vẽ lại nó chỉ với html và css, trên giấy tớ cũng có thể vẽ với 10 nét bút. Thiệt!
Sau khi cân đo đong đếm, áp lưới căn tỉ lệ, thứ này ra đời:
Well, this seems to be the most suitable direction, the most feasibility for execution. Let’s keep things up!
This line concept has many advantages. In computer science, the line is basically a math function, then the entire logo can be presented by a [y = f(x)] function (LOL). On the web browser, i can draw this logo by just html and css, and on the paper with some pen lines.
After doing some math, applying grids, the logo turns out:
Tớ đưa các đường cong cơ bản về shape hình tròn, không dùng lại hai chữ A và V in hoa trong typo như ma-két, vì nó trùng lắp; và mặt khác ‘an vui’ có bố cục đẹp hơn khi không có chữ cái in hoa.
Lúc này tự dưng tớ hiện lên trong đầu chữ “ánh xạ”, nó là một thuật ngữ toán học – toán cao cấp đó ạ – là ác mộng của những ngày sinh viên. Khái niệm từ wiki đây nhé, khỏi phải google chi mất công: “Về ý nghĩa, ánh xạ biểu diễn một tương quan (quan hệ) giữa các phần tử của hai tập hợp X và Y thoả mãn điều kiện: mỗi phần tử x của tập X đều có một và chỉ một phần tử y thuộc tập Y tương ứng với nó.”
Khè cho dữ vậy thôi, ‘ánh xạ’ ở đây tớ cho là logo mark đã có thể minh hoạ đầy đủ ý nghĩa và giá trị của thương hiệu. Ra sao thì mời bạn xem tiếp hé :>
I forced all the curves into circle curves, didn’t reuse the letter A and V from the logo mark. The reason is i dont want it to be repeated, and the logo looks better without uppercase letters.
At that moment, there was a word popping out of my brain – “mapping”. Well, the logo mark is mapping with the brand name and its spirit.
4. Không chỉ là logo
Chuẩn luôn, không nên chỉ là logo! Xuôi dòng thời đại và theo cả dòng công nghệ; logo thôi thì chưa đủ, phải có cả nhận diện thương hiệu nữa. Anvui làm công nghệ nên có nhiều đất diễn trên màn hình, cái gì trên màn hình có mà trên ấn phẩm không có?
Yeap, là motion/animation!
Đây cũng là một trong những yếu tố quan trọng khi tớ chọn concept lúc đầu. Thời bây giờ motion không còn là xa xỉ nữa, nhưng làm chuyển động một cách hợp lý và ý nghĩa thì thiệt không dễ, nhất là với một thứ mang tính biểu trưng cho thương hiệu. Với concept này, việc diễn hoạt sẽ hợp lý, sẽ như-đúng-rồi vì một điểm có thể kéo dài ra thành đường, và một đường có thể kéo dài ra vô tận, hoặc nối về điểm đầu thành một vòng tròn khép kín, toàn vẹn :>
4. Not just a logo
Yeap, It shouldn’t be just a logo. We’re in the century of innovation and development, then the logo is not enough. There must be some identity factors. This company works digitally, then their brand visual appears mostly on the screen. What does the screen have but the other doesn’t?
Exactly, that’s motion/animation!
This is one of the important reasons I picked this line concept. Line animation is cool, light weight and most importantly, the moving line is similar to a road, a trip, or transportation. A single point can extend to a path, a path can lengthen to infinity or just match to the starting point, becoming a full circle.
Vòng tròn, đường, điểm, đi, về, an, vui, mọi người đã thấy điều gì đó liên quan chưa?
Circles, points, paths, going, arriving, have you seen the relevance?
Các motion design này sẽ có rất nhiều đất dùng trên web và app; nó có thể là intro splash screen của app, loading screen của web, booking result screen, navigator, vân vân..; cũng có thể là những chi tiết nhỏ nhặt như một button icon chuyển động khi hover, khi click chuột, và nhiều nhiều thứ khác nữa. Mấy ông developer bây giờ chế ra một thứ gọi là svg animation rất tuyệt, mình có thể làm chuyển động trực tiếp với các thành phần vector, trên nhiều nền tảng lập trình. Vậy thì một logo đơn giản chỉ với chục cái path line kèm thuộc tính stroke sẽ nhảy múa ra sao?
Đoán xem :>
Websites and applications are the bright stage for motion designs. There could be intro intro splash screen on apps, loading screen on webs, animated element on navigators, booking result screens, ect. Or some micro interactions like buttons, indicators…
Nowadays, we have svg animation which is code-based vector animation; no gif images, no videos, fully controlable. With this technique, the logo can even dance on the screen!
Nếu đám nhảy nhót bên trên chưa đủ digital thì tớ chọn sẵn bộ màu branding rất vi tính rồi đây hahahaaaa
In case of these animation cannot give enough digital feeling, i have the bright blue color to support. This shade of blue cannot be printed, that means you can only see it on digital screen, hahaa
Và miếng ngon để ăn sau cùng, logo anvui vẽ với html/css thuần nhé :))
Saving the best for last, let me introduce the logo drawn with pure html/css 😤😤😤
Dìa dia, cũng ra gì phải không mọi người, tớ tự thấy bộ này mình làm không tệ nhưng mà lại một lần nữa đời không như là mơ, concept này tớ không bán được D:
Có thể vì nhiều lý do, vì nó chưa đủ hay để thuyết phục anh sếp, có thể do tớ không giỏi thương thuyết, hoặc cũng có thể do tớ quá tự tin, chẳng thể nào mà biết được.. Thú thật, khi job này xịt tớ chỉ mới làm đến cái gif thứ 2 thôi, những cái icon động đậy tớ làm vào những lúc rảnh rỗi sau này, vì thấy hay và cũng một phần vì tiếc. Nhưng không sao hết, vẫn tinh thần cũ, tớ đổi tên folder project thành concept, lại đem khoe :>
À, mà có hai cái mà sau này tớ mới biết, nhiều khi nó cũng là lý do mà concept này không bán được. Nhưng tớ thề, trong lúc làm tớ chưa hề biết đến 2 cái logo dưới đây, thề 😩😩😩
Hooyaaah. It’s something, right? Now comes the sad story.
I couldn’t sell this design concept 😩😩😔😔
Actually, i got no answer for this, and it made me upset for a while. Maybe i cannot convince the CEO, maybe i was too confident, or something else. Honestly i think the pain point is pricing.
When this project failed, i was making the second animation. But, throwing all of there to the trash bin is totally a waste of my brain cells. Then i continued, and now you are reading this rebranding concept story.
Finally, i saw something. Something could be the main reason for my incomplete project. But i swear, i didn’t know those logos 😩😩😩
Nhưng mà thôi, có gì đâu bạn nhỉ, cảm ơn bạn đã ghé xem!
Project làm 01.2019, case study 04.2020
What happened, happened. I did it well, right?
Thank you for reading this!
Project finished in Jan 2019, case study in April 2020 😂😂😂
