Cleverin là một nhãn hàng sản phẩm khử trùng đến từ Nhật Bản với 5 dòng sản phẩm chính hỗ trợ khử khuẩn trong không gian hoặc trên bề mặt vật thể. Đợt gần đầy Cleverin đang dần tiếp cận thị trường Việt Nam và đang trong quá trình phân phối chính thức, cho nên một website chính thức tại Việt Nam là không thể thiếu rồi.

Cleverin is a Japanese brand that offers sanitation products. They have 5 main products giving you the ability of virus disinfection on both objects and space. Cleverin is recently approaching the Vietnam market, that’s why they need an official website in Vietnam.

Và tụi tui may mắn được làm web này, ngay giữa mùa dịch hêhê!

Then we’re lucky to be trusted on this project, in between of the covid pandemic heheeh!!!

 

 

1. Yêu cầu

1. Requirements

 

 

Tóm gọn lại là như này, phát triển website gốc tiếng Nhật thành một bản ngon nghẻ hơn bằng tiếng Việt 😤😤😤

To wrap it up, our job is to upgrade their Japanese to a better version in Vietnamese

 

 

2. Thiết kế

2. Design

 

Không cần bàn cãi nhiều, Cleverin có thiết kế sản phẩm rất đẹp, sang và tối giản. Website gốc tiếng nhật cũng ổn, tụi tui không tìm lấy lỗi nào nghiêm trọng về giao diện ngoại trừ việc thông tin bị trùng lắp khá nhiều trên trang.

As you can see, Cleverin has the good design on their products, give us the feeling of luxury and minimalism. Their website is good, too; we cannot find any serious mistake except one thing – some information are duplicated on many pages.

Vậy nên thiết kế lại cũng không khó lắm, giao diện desktop tụi tui làm mới tương đồng đến 60-70%, sự thay đổi phần nhiều nằm ở kích thước và khoảng cách do khác biệt giữa hệ chữ tượng hình và latin.

So the redesign didn’t take us too much time, the desktop layout stays similar to the original up to 70%. The major changes are mostly size and distance, they come from the difference between japanese and latin alphabet characters.

 

 

 

Web Nhật vs web Việt

Japanese version vs Vietnamese version

 

 

 

Trên mobile thì thay đổi rõ ràng hơn. Website gốc có một số phần được dùng hình ảnh tĩnh và không có phương án responsive cho mobile. Việc của tụi tui là không lặp lại điều đó trên web mới này.

On mobile devices, the difference is clearlier. They used static images on the original website and didn’t have a responsive solution on mobile. And our job is to make sure this will not happen again!

 

 

Bộ icon cũng được tụi tui vẽ lại cho đồng nhất. Website nhật dùng png size nhỏ nên không xài lại được, ở đây tụi tui dùng luôn svg cho nhẹ, về sau các bạn marketing tha hồ lấy về dùng mà không lo bể

The icons/illustrations are redrawn for consistency. Japanese website uses small png images and they aren’t reusable. We decided to use light weight svg images, this allows others to download and reuse for any later marketing purpose.

 

 

 

3. Làm web

3. Web develop

 

Với những web đơn giản không dính líu đến backend thì tụi tui cân luôn vai trò dev, như vậy sẽ không mất thời gian qua lại giữa design và code, và thời gian đó sẽ được dành để o bế những chi tiết nhỏ.

With a simple website like this, we can play the role of developer; that helps us save the communication time between design and coding and spend it on taking care of small details.

 

 

 

 

Lướt nhanh web trên desktop như này. Ngoài những animation cơ bản như fade, motion, tụi tui dùng cả lottie animation. Toàn bộ illustration và animation trên website tụi tui đều dùng line cho đồng bộ, và line animation chỉ ngốn đâu đó 200KB thay vì một video nén nặng đến cả chục MB.

Have a quick view on desktop layout. We applied not only the basic animation like fading or motion but also the lottie animation. We used simple lineart for both illustration and animation, the line animation just takes around 200kb of storage and it helps the site load faster than retrieving a megabytes video.

Phần sản phẩm là trung tâm của website, đầu tư một ít animation cho đúng với vị thế của nó nào:

Product section is the spotlight area, it deserves more animation than others:

 

 

 

 

Trên mobile cũng vậy, nhìn cũng na ná nhưng nó là một bước nâng cấp đầy hãnh diện của tụi tui so với bản tiếng Nhật

Same on mobile devices, they looks similar but that is actually our proudly upgrade compared to Japanese version

 

 

 

 

Về song ngữ, tụi tui tích hợp cả hai thứ tiếng trong html attribute và dùng js để thay đổi qua lại. Điều này nghe có vẻ tối kiến nhưng tụi tui cho đó là cách nhanh gọn đơn giản để giải quyết vấn đề, thay cho việc làm 2 trang ngôn ngữ riêng và phải load lại mỗi lần thay đổi. It is not stupid if it works 😂😂😂

To solve the dual-language issue, we put them two into html attribute and use js to switch around. This sound stupid but for us, this is the easiest and fastest way to do the job, instead of making 2 separated pages for each language and reloading when switching. It is not stupid if it works 😂😂😂

 

 

 

 

Nhìn lại một số mobile screen tiêu biểu nổi bật nhé:

Let’s walk through some highlight screens:

 

 

 

 

Và… hết rồi! Một dự án không lớn cũng không nhỏ nhưng vui đối với tụi tui vì được làm những gì mình thích: design, coding và animation. Cảm ơn bạn đã ghé xem, nếu muốn biết thêm về sản phẩm khử trùng của Cleverin, ghé website nhaaaaa

And that’s all! A project that is not so big and not so small, but it is fun for us; we can do what we love in a commercial project, not a side one. It is fun, isn’t it!? A big thanks to you for reading this showcase till the end, and if you’re interested in Cleverin’s products, visit their new website:

 

www.cleverin.vn

 

 

.   .   .

 

Client: Cleverin

Agency: Promotec Vietnam

12.2020