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.

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

 

 

1. Yêu cầu

 

Với tên miền cleverin.vn, đây sẽ là website chính thức của nhãn hàng tại việt nam; cho nên yêu cầu về nội dung cũng tương đối cơ bản:

– Giới thiệu đầy đủ 5 dòng sản phẩm của Cleverin

– Thông tin cơ bản về sản phẩm, cách sử dụng, các lưu ý khi sử dụng…

– Giải thích sơ lược về cách thức khử khuẩn của sản phẩm

– Thông tin về nhà sản xuất, thông tin liên hệ…

 

Về web, Cleverin đã có sẵn website chính thức bằng tiếng nhật. Nhưng việc tiếp cận thị trường Việt Nam với sản phẩm nhập khẩu cùng bao bì toàn bộ bằng tiếng Nhật sẽ gây khó khăn cho người dùng khi tiếp cận thông tin sản phẩm. Vậy nên website Việt Nam cần đáp ứng một vài tiêu chí

– Song ngữ Anh/Việt, với ngôn ngữ mặc định là tiếng Việt

– Xây dựng website phù hợp với thị hiếu & thị trường Việt Nam

– Đẹp sang xịn mịn, hiển thị tốt trên các thiết bị thông dụng

– Tương đồng với website Nhật

 

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 ???

 

 

2. Thiết kế

 

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ớ 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.

Vậy nên thiết kế lại cũng không khó lắm, giao diện desktop tớ 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.

 

 

 

Web Nhật vs web Việt

 

 

 

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ớ là không lặp lại điều đó trên web mới này.

 

Web nhật đây nhé

Và tớ làm lại như này

 

Bộ icon cũng được tớ 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ớ 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ể

 

 

 

3. Làm web

 

Với những web đơn giản không dính líu đến backend thì tớ 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ỏ.

 

 

 

 

Lướt nhanh web trên desktop như này. Ngoài những animation cơ bản như fade, motion, tớ dùng cả lottie animation. Toàn bộ illustration và animation trên website tớ đề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.

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:

 

 

 

 

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ớ so với bản tiếng Nhật

 

 

Web Nhật

Web tự hào Việt Nam

 

 

Về song ngữ, tớ 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ớ 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 ???

 

 

 

 

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

 

 

 

 

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ớ 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

 

www.cleverin.vn

 

 

.   .   .

 

Client: Cleverin

Agency: Promotec Vietnam

12.2020

Post Views: 985