18 thiết kế web bán hàng hỗ trợ mọi thiết bị

Thứ hai - 25/11/2013 09:15

Với những lợi thế của thiết kế đáp ứng, nó là ví dụ tuyệt vời của các trang web bán hàng. Chúng tôi đã lùng sục các trang web với hi vọng mang đến cho các bạn những ví dụ tốt nhất. Chúng tôi hy vọng rằng những ví dụ này sẽ truyền cảm hứng để các bạn thiết kế website bán hàng theo phương pháp "đáp ứng".

Thiết kế web đáp ứng cung cấp cơ hội rất lớn để thúc đẩy bán hàng trên các trang web thương mại điện tử . Dưới đây là 18 trang web đã nắm bắt cơ hội đó.

Sử dụng điện thoại di động để truy cập Internet đang bùng nổ và nó dự kiến ​​sẽ vượt qua truy cập bằng máy tính để bàn vào năm 2014. Các thiết bị di động với các kích thước khác nhau là một thách thức mà các nhà thiết kế website phải giải quyết.

Một cách đơn giản, các khách hàng có thể mua các sản phẩm thiết kế web dành cho điện thoại di động hoặc máy tính bảng. Tuy nhiên, với sự tăng trưởng nhanh chóng của các thiết bị di động ở các nước đang phát triển như Trung Quốc, những người nhanh nhẹn có thể khai thác các thị trường mới và rất hấp dẫn. Thiết kế một lần và bán ở khắp mọi nơi

Nhiều nhà bán lẻ lớn đã giới thiệu ứng dụng bản địa để bổ sung cho trang web của họ.Tuy nhiên, lựa chọn này thường không khả thi đối với các nhà bán lẻ nhỏ hơn. Vì vậy, sự xuất hiện của thiết kế web đáp ứng - trong đó các trang web phù hợp với các yêu cầu của các thiết bị di động- cung cấp một giải pháp hoàn hảo .

Với những lợi thế của thiết kế đáp ứng, nó là ví dụ tuyệt vời của các trang web bán hàng. Chúng tôi đã lùng sục các trang web với hi vọng mang đến cho các bạn những ví dụ tốt nhất. Chúng tôi hy vọng rằng những ví dụ này sẽ truyền cảm hứng để các bạn thiết kế website bán hàng theo phương pháp "đáp ứng".

01. 8 Faces

 8 Faces
 
Kiểu chữ trang web hoàn toàn đáp ứng
Nhà trực tuyến của tạp chí "8 face" gần đây đã tái xuất với một thiết kế lịch sự mới của nhóm nghiên cứu tại Paravel Inc và Jay Elliot thuộc Viewport Industries.

Với hình ảnh và kiểu chữ lớn, trang web thương mại điện tử này là hoàn toàn đáp ứng và cho phép độc giả mua các tạp chí, bản in và file PDF. Chúng tôi yêu thích việc sử dụng thông minh của các plugin Kinetic jQuery để cho khách truy cập lướt qua những hình ảnh lớn.

02. Currys

Nói về Currys, James Young - giám đốc sáng tạo tại Offroadcode đã dùng những từ mô tả cho nhà bán lẻ Currys Vương quốc Anh như sau "Nó có thể không có những gì chúng tôi cho là mức độ thiết kế mà rất nhiều cơ quan và các trang web cá nhân có, nhưng nó thực sự là website bán hàng có quy ​​mô lớn đầu tiên nắm lấy thiết kế đáp ứng mà tôi từng thấy".

 Currys

"Nó cung cấp một kinh nghiệm tốt trên một loạt các thiết bị trong khi đối phó với một số lượng lớn các nội dung và các sản phẩm của tất cả các hình dạng và kích cỡ, và dễ sử dụng khi mua sắm"

03. Kershaw knives

 

ecommerce sites
 
Một trang web thương mại điện tử thẩm mỹ và sạch sẽ để giới thiệu các sản phẩm
 
Kershaw là nhà thiết kế và sản xuất dao chất lượng cao và giá cả phải chăng từ năm 1974. Với đội ngũ chuyên nghiệp, Kershaw cùng các nhà thiết kế web đã tạo ra một trang web bán hàng online với thẩm mỹ, sạch sẽ để giới thiệu các sản phẩm. "Chúng tôi học làm thế nào để trình bày và tổ chức số lượng lớn các thông tin liên quan đến một trang web thương mại điện tử, cách làm thiết kế trở nên linh hoạt giúp cho chúng tôi nhận ra thiết kế đáp ứng là phương pháp rất tốt," Sowers nói.

Lợi ích tìm dòng sản phẩm từ hệ thống lọc cũng như thực hiện trên các trang danh mục. Danh sách các bộ lọc được hiển thị trên nhiều cột trên khung nhìn lớn làm cho việc sử dụng không gian được hiệu quả hơn. Các bộ lọc dịch cho màn hình nhỏ hơn, gấp thành một ngang, danh sách cuộn với danh sách các mục có thể được cuộn vào xem.

04. SALT

 


 
Trang chủ 1.3MB là quá nặng nhưng hình ảnh đẹp

SALT là một sự hợp tác giữa 2 tay lướt ván Tyler Wolff và Nabil Samadani, những người đã quyết định mang ván lướt sóng đến với thị trường tiềm năng mà họ tìm thấy ở thành phố New York. Trang web có hình ảnh đẹp, ảnh sản phẩm quyến rũ.

Việc sử dụng những bức ảnh đẹp, chuyên nghiệp có cái giá của nó: trang chủ 1.3MB là quá nặng. Và kỹ thuật hình ảnh đáp ứng có thể là khó sử dụng để làm việc. Tuy nhiên, tính thẩm mỹ lại có thể bù đắp phần nào.

05. A Book Apart

 

 

Trong khi nhiều trang web thương mại điện tử dựa vào chụp ảnh đẹp lớn để bán sản phẩm của họ, thì A Book Apart lại sử dụng các khối màu sinh động để hiển thị thông điệp của họ "cuốn sách ngắn gọn cho những người làm cho trang web". Điều này đặc biệt tốt khi hiển thị toàn bộ bộ sưu tập của họ có sẵn như là một gói.

06. Hiut Denim

 

ecommerce sites
 
Trang web tuyệt đẹp, độ phân giải cao
 
Một trang web phong phú, là sự tổng hợp của nghệ thuật nhiếp ảnh, sự cổ điển và cảm xúc phong phú. Các slogan quá khổ với những tuyên bố ngang ngược. Bố trí, độ phân giải cao của hình ảnh và cách những hình ảnh được đặt ra trên điện thoại di động, tất cả đều đẹp và hợp lý.

"Hầu hết các dự án của chúng tôi gần đây đã được đáp ứng" do đó thiết kế đáp ứng trở thành một phần tiêu chuẩn cho quy trình làm việc của chúng tôi", Alex Morris của Mark Boulton Design, người xây dựng và thiết kế các trang web cho biết.

07. Starbucks

 

ecommerce sites
 
Thanh lịch, nhẹ nhàng, tươi sáng - trang web thương mại điện tử này đại diện cho các thương hiệu nổi tiếng

 
Có thể dễ dàng thấy rằng Starbucks có một trang web đáp ứng. Về tính năng, nó có hầu hết mọi thứ bạn mong chờ ở một website quán cà phê hiện đại: video đẹp lớn trên trang chủ, cùng với các mục tin tức được liệt kê theo chiều dọc.

Một loạt các icon cho phép khách hàng lọc các loại quán cà phê, sự phong phú của các mục trình đơn và các mô tả của chúng được duy trì trên diện rộng và rất " đáp ứng"

08. Kiwibank

 

ecommerce sites
 
Điều hướng trên màn hình nhỏ hơn được truy cập thông qua menu 

 
Các ngân hàng không phải là tổ chức dễ thương nhất, nhưng chúng tôi đang phát triển một điểm yếu cho Kiwibank, một ngân hàng trụ sở tại New
Zealand, cạnh tranh với các đối thủ lớn hơn của Úc.

Điều hướng trên màn hình nhỏ hơn được truy cập thông qua menu một 'off-canvas' có thể trượt từ cánh phải, tương tự như các ứng dụng như Facebook và đường dẫn.

09. Indochino

 


 
Các trang sản phẩm trên trang web đáp ứng Indochino thích nghi tốt với các thiết bị khác nhau

Indochino là công ty sản xuất quần áo cho nam giới cao tùy chỉnh chất lượng. Bộ lưu trữ của nó đáp ứng được hình ảnh chất lượng cao với một thẩm mỹ thiết kế tối giản. Toàn bộ trang web đáp ứng rất tốt với các kích cỡ màn hình khác nhau. Cách thức mà các trang sản phẩm được xử lý đặc biệt đáng chú ý.

10. Skinny Ties

 


 
Chuyển hướng hoạt động liên kết một loạt các kích cỡ màn hình trên trang web Skinny Ties

Skinny Ties là một trang bán lẻ trực tuyến bán gì với website theo phong cách retro và đã được thiết kế từ năm 1997. Bố cục trang web được cấu trúc một cách cẩn thận và bổ sung bằng việc sử dụng các sản phẩm tuyệt vời với nghệ thuật nhiếp ảnh cao và các thông tin chính xác, hữu ích trên trang sản phẩm riêng. Điều hướng trang web cũng hoạt động liên kết một loạt các kích cỡ màn hình và cho phép người dùng nhanh chóng tìm kiếm các sản phẩm thông qua một loạt các tùy chọn, chẳng hạn như chất liệu và màu sắc.

11. Stury

 


 
Chuyển hướng theo chiều dọc của Stury trên màn hình nhỏ tỏ ra khá hiệu quả và dễ chịu

Stury là một trang web cho phép mọi người trao đổi sách trực tuyến. Cách thức chuyển hướng theo chiều dọc và lưới với cách bố trí tập trung khi xem trên màn hình nhỏ tỏ ra đặc biệt hiệu quả để "reponsive (đáp ứng)".

12. Fit For A Frame

 


 
Cửa hàng in trực tuyến Fit For A Frame co dãn để phù hợp với màn hình di động

Phù hợp cho một khung bán bản in tuyệt đẹp được tạo ra bởi nhà thiết kế tài năng và vẽ tranh minh họa. Cửa hàng trực tuyến của họ có tính năng điều hướng đơn giản và bố trí đơn giản không kém, cả hai đều cô đọng đẹp cho màn hình nhỏ hơn. Có một số thủ thuật thú vị trong ở đây, chẳng hạn như chữ in trên nền gạch tường, về việc chuyển đổi trang chủ để bố trí theo chiều dọc khi xem trên một màn hình nhỏ hơn.

13. United Pixel Workers

 


 
United Pixel Workers với các nút trình đơn được đặt hợp lý giúp nó hoạt động tốt trên nhiều loại thiết bị

United Pixel Workers bán áo phông và phụ kiện được tạo ra bởi cộng đồng thiết kế web và do tính chất nghệ cao cũng như sự hiểu biết khách hàng. Không ngạc nhiên khi thấy rằng trang web của họ được "đáp ứng". Các trang web sử dụng lưới bố trí đơn giản và kiểu chữ lớn, có nghĩa là nó điều chỉnh đặc biệt tốt khi xem trên màn hình nhỏ hơn. Cách thức mà các giỏ và nút menu được bố trí trên các thiết bị màn hình nhỏ cũng rất đặc biệt.

14. Tattly

 


 
Bố trí hình xăm cửa hàng Tattly với thay đổi kích thước đẹp trên màn ảnh nhỏ

Tattly bán 'hình xăm tạm Designy "được tạo ra bởi nhà thiết kế hàng đầu về vẽ tranh minh họa. Cửa hàng trực tuyến của họ có một cấu trúc lưới đơn giản trong suốt, được bổ sung bởi một bảng màu đơn sắc. Sự linh hoạt của lưới điện cơ bản có nghĩa là bố trí thay đổi kích thước đẹp khi trang web được xem trên màn hình nhỏ hơn.

15. Nixon

 


 
Nixon là một trong số ít các thương hiệu đi đầu trong cửa hàng đáp ứng

Nixon là một trong số ít các thương hiệu thành lập để có một cửa hàng thương mại điện tử đáp ứng, và nó đặc biệt thực hiện tốt. Nó hoạt động rất tốt do sự bố trí đơn giản và tối giản. Giống như nhiều trang web khác trong giới thiệu này, một cấu trúc lưới được sử dụng trong suốt. Sản phẩm tuyệt vời và hình ảnh đẹp đóng vai trò lớn trong việc làm cho thiết kế trở nên hoàn hảo. Khi xem trên một màn hình nhỏ hơn, các menu đẹp một cách đặc biệt.

16. Folksy

 


 
Mặc dù bố trí phức tạp, Folksy của thích nghi tốt với các thiết bị di động

Folksy là một nền tảng trực tuyến cho các nhà thiết kế và các nhà sản xuất để bán hàng thủ công của họ trực tuyến tại Anh. Trong khi cách bố trí phức tạp hơn nhiều so với các website được giới thiệu ở đây, cách thức mà nó đáp ứng nhu cầu của các môi trường khác nhau được xử lý rất tốt.

17. Five Simple Steps

 


 
Tối thiểu và đơn giản hóa trang web

Five Simple Steps là một nhà xuất bản độc lập những cuốn sách thiết thực dành cho các chuyên gia thiết kế web. Cửa hàng trực tuyến của nó sử dụng một bố cục đơn giản và tối thiểu với giao diện đẹp mắt.

18. SuitSupply

 


 
Thiết kế trang web đáp ứng phù hợp với hình ảnh chất lượng cao

SuitSupply là một cửa trực tuyến thời trang trực tuyến dành cho nam giới với thiết kế cửa hàng đáp ứng sử dụng một bố trí tối thiểu đơn giản kết hợp với hình ảnh chất lượng cao. Trang web có điều hướng và sản phẩm bộ lọc tiêu chuẩn, nhưng điều thú vị mà họ đã chọn là loại bỏ hoặc đơn giản hóa một số yếu tố khi trang web được xem trên màn hình nhỏ hơn.

Tác giả bài viết: TheWall