3K Shop - Nhân Lưu - A creative thinker

Các version logo

Về 3K Shop

3K SHOP là một thương hiệu chuyên về phân phối các loại tai nghe, headphone, loa và các loại trang thiết bị âm thanh…. từ những nhãn hàng có tên tuổi trên thế giới như Apple, Sony, Bose…

Đặc tính của thương hiệu là sự hiện đại và có tính tối giản mang hơi thở Tây Âu điển hình của các sản phẩm mà cửa hàng cung cấp.

Với những phân tích đó, TELOS đã tổng hợp và thiết kế ra những phương án phù hợp nhất để thể hiện hết các điểm đặc trưng kể trên của thương hiệu.

Phân tích logo và tỉ lệ

Trong thiết kế, mỗi logo tuân theo một tỉ lệ nhất định. Tỉ lệ trong mỗi logo tạo nên tính cân bằng, hài hoà và mang đến sự hài lòng thị giác. Việc xây dựng logo dựa trên các con số và tỉ lệ hoàn hảo bên cạnh đó sẽ càng làm giá trị ẩn của thương được đề cao thêm.
Logo 3K vì lẽ đó cũng được thiết kế rất chỉn chu trên một hệ thống lưới tỉ lệ sao cho mỗi chiều cao, chiều rộng, đường cong đều có chủ đích và lý do rõ ràng cho thiết kế.

Hệ thống typography

Hệ thống màu sắc

Key visual

9 chấm tròn làm liên tưởng đến hệ thống bàn phím bấm, đó cũng là lý do nó trở thành đại diện cho yếu tố kĩ thuật số. Ngoài ra một lưới 9 đối tượng cũng tạo cảm giác danh sách lựa cho có nhiều sản phẩm. Thể hiện sự phong phú và đa dạng của số lượng sản phẩm.

Biểu tượng X

Dấu X thể hiện sự đánh dấu, giao nhau, cấu tạo hình có bố cục đối xứng và vuông vắn làm trung hòa các họa tiết tròn xung quanh.
Dấu X cũng có ý nghĩa là “tắt tiếng” có thể được minh họa cho khoảnh khắc người nghe tận hưởng hoàn toàn không gian âm nhạc từ các thiết bị hiện đại và “mute the world”.

Những vòng tròn đồng tâm

Âm thanh lan tỏa theo dạng sóng và đều nhau. Hình dạng cơ bản của loa cũng có hình tượng như thế này. Các hoa văn lan tỏa như thế này sẽ rất dễ ứng dụng vào thiết kế vì tính đa nghĩa cũng như bố cục đầy đặn của nó.

Ứng dụng

Hạng mục Website 3K Shop

Bên cạnh hạng mục Branding, TELOS còn thực hiện hạng mục Website cho 3K Shop. Qui trình thực hiện website theo chuẩn được các agency lớn hiện nay sử dụng. Bước đầu TELOS sẽ gặp khách hàng để nhận brief, phân tích brief. Tiếp theo, chúng tôi sẽ đề xuất sitemap, lên ý tưởng bằng wireframe. Sau khi đã có sự xác nhận của khách hàng, TELOS sẽ thực hiện chi tiết design, lập trình website. Cuối cùng là testing và chuyển giao tới khách hàng kèm hướng dẫn sử dụng.

Wireframe

Với dự án 3K Shop, sau khi có sitemap, team TELOS tiến hành lên wireframe cho website. Một số ít khách hàng thường không đánh giá cao bước này và muốn thấy mockup chi tiết cành nhanh càng tốt, tuy nhiên lên wireframe là một bước quan trọng. Trong bước này, khách hàng có thể nhanh chóng hình dung sơ lược website sẽ như thế nào, các thành phần có trên website được sắp xếp ra sao.
Nếu bỏ qua bước này, ta có thể sẽ phải mất rất nhiều thời gian để chỉnh sửa trong bước thiết kế chi tiết sau này.

Instance Search

Các truy vấn sẽ được thực hiện ngay lập tức khi người dùng gõ keyword vào thanh tìm kiếm trên trang web. Thay vì hiện kết quả ở một trang riêng sau khi gõ enter, người dùng giờ đây có thể ngay lập tức lướt qua các sản phẩm, tin tức ngay dưới thanh tìm kiếm.
Việc này được thực hiện nhanh chóng và không khiến người dùng phải chờ đợi do thông tin đã được load trong quá trình tải trang. Thậm chí nếu kết nối internet đứt đột ngột, instance search vẫn hoạt động.

Mega Menu

Do trang web có lượng lớn sản phẩm được phân ra làm nhiều category khác nhau, thay vì sử dụng thanh điều hướng bình thường, TELOS sử dụng mega menu. Ở bất kỳ đâu trong website 3K Shop, người dùng cũng có thể nhanh chóng đi đến các category con (cấp 2 và cấp 3).
Điều này mang lại hai tác dụng: một mặt giúp người dùng dễ dàng di chuyển trong trang, mặt khác giúp người dùng có cái nhìn toàn cảnh về trang web, biết trong trang có bao nhiêu ngành hàng, mỗi ngành hàng có bao nhiêu ngành hàng nhỏ bên trong.

Filter và sub-category

3K Shop có các ngành sản phẩm rất đa dạng trong lĩnh vực âm thanh, từ headphone đến AMP, từ DAP đến các loại speaker, phụ kiện… Mỗi ngành sản phẩm lại chia thành các sub-category chi tiết. Ngoài các tiêu chí lọc phổ biến như thương hiệu, giá cả, mỗi category lại có những tiêu chí lọc chi tiết riêng biệt.
TELOS đã thiết kế để khách hàng có thể tùy chỉnh bộ lọc trong mỗi ngành hàng khác nhau một cách linh hoạt nhất.

Các cụm thông tin nổi bật trên trang chủ

3K Shop không chỉ bán các thiết bị âm thanh. 3K còn sản xuất nhiều nội dung chất lượng: review, đánh giá, xếp hạng nhiều loại thiết bị âm thanh khác nhau. Do đó, trên trang chủ của website, đội ngũ thiết kế đã sắp xếp các nội dung này lên đầu trang dưới dạng list video. Bên cạnh đó, cụm thông tin này còn có block tự động lấy tin từ trang facebook của 3K và danh mục Sản phẩm được xem nhiều nhất tháng.

Hiển thị trên mobile

Bên cạnh quá trình hoàn thiện layout trên desktop, team TELOS cũng tiến hành thực hiện responsive giao diện website 3K Shop trên mobile. Với một số trang có chức năng phức tạp, team quyết định làm giao diện riêng cho bản mobile để đảm bảo hiệu suất.

Các cụm menu và filter cũng phải thay đổi cho phù hợp

Mega menu và filter là 2 phần có chức năng quan trọng trên trang web. Tuy nhiên các thành phần này cũng rất khó khi chuyển từ desktop sang mobile. TELOS đã thay đổi một số cách bố trí giữa hai bản web để giữ nguyên được nội dung cũng như chức năng của trang. Kết quả của thay đổi này là tạo nên sự đồng nhất trong thiết kế. Khách hàng sẽ không phải bối rối khi chuyển từ bản web desktop sang mobile và ngược lại.