Tạo ra một trải nghiệm di động tuyệt vời là một phần thiết yếu của việc thiết kế trang web. Với việc lưu lượng sử dụng internet trên di động đang không ngừng gia tăng và các thiết bị di động của chúng ta chiếm 52% lưu lượng truy cập internet toàn cầu, việc cung cấp trải nghiệm web tốt nhất cho người dùng điện thoại thông minh là điều tuyệt đối bắt buộc.

Một phiên bản di động tốt có thể làm được nhiều hơn là chỉ cải thiện trải nghiệm người dùng trên trang web của bạn. Nó cũng có thể có tác động tích cực đến hiệu suất trang web của bạn trên kết quả tìm kiếm, như một phần của Google’s mobile-first indexing (thông tin về điều đó sẽ thêm ở bên dưới).

Để giúp bạn tạo phiên bản di động tốt nhất cho trang web của mình, chúng tôi sẽ giới thiệu 15 ví dụ thiết kế trang web dành cho thiết bị di động và giải thích một số tính năng và phương pháp di động tốt nhất cần ghi nhớ.

Các mẫu thiết kế giao diện web cho Mobile truyền cảm hứng

1. S&W Beauty

Là một phần của dự án mở rộng của các nhà thiết kế nổi tiếng Stefan Sagmeister và Jessica Walsh, trang web này tôn vinh mọi thứ đẹp đẽ và sự quyến rũ của cái đẹp. Trang web thu hút khách truy cập vào một thế giới thẩm mỹ đầy mê hoặc, với đầy đủ thông tin về triển lãm Beauty và sách.

Trang web Beauty sử dụng ngôn ngữ hình ảnh gắn kết xuyên suốt. Thiết kế trang chủ được trang trí công phu rực rỡ, chứa đầy các hoa văn và chi tiết phức tạp, được cân bằng bằng trang web phối màu tối giản chỉ gồm đen và trắng. Thiết kế riêng biệt của dự án có thể được thấy rõ ràng trong từng chi tiết, đến cả menu di động nút hamburger tùy chỉnh còn được đánh bóng bằng trang sức.

Nhờ thiết kế web có tính đáp ứng, website trông tuyệt vời trên cả máy tính để bàn cũng như thiết bị di động.

2. Charcoal

Charcoal là một ấn phẩm nghệ thuật dành riêng cho người da màu. Với bảng màu lấy cảm hứng từ mùa thu, thiết kế trang web dành cho thiết bị di động này được tạo thành từ bố cục dải có chiều rộng đầy đủ, mỗi dải chứa ảnh hoặc văn bản trên nền màu.

Để dễ dàng điều hướng, có một số cách để duyệt trang web. Bạn có thể sử dụng menu nút hamburger ở trên cùng, nhấp vào một trong các nút kêu gọi hành động trên toàn trang web, hoặc nhấn nút ‘Quay lại đầu trang’ bật lên một cách thuận tiện khi khách truy cập bắt đầu cuộn xuống trang.

3. Piboco

Trang web đa ngôn ngữ này chào đón khách bằng một thước phim hoạt hình trong khi tải trang ở chế độ nền. Là trang web dành cho một ứng dụng đọc sách dành cho trẻ em, phần giới thiệu hoạt hình này không chỉ phù hợp, mà hoàn toàn hoàn hảo với các hình ảnh động trong chính ứng dụng.

Bạn có thể nhìn thấy các hoạt ảnh tương tự trên trang web về các hình dạng hình học có đôi mắt giống như con mắt trên trang “Collection”, nhắc lại về các giá trị của quảng thời gian kể chuyện đầy thú vị và tương tác ở đằng sau bản sắc thương hiệu của Piboco.

Mỗi cuốn sách trong bộ sưu tập của Piboco được trình bày bằng trình chiếu ảnh, cho phép bạn xem nhanh các trang được minh họa bên trong. Bên cạnh hình ảnh là phần mô tả bằng văn bản ngắn gọn của cuốn sách để giải thích chủ đề chính và cốt truyện của nó.

4. AutoFleet

Thiết kế web dành cho thiết bị di động của AutoFleet có nhiều nội dung, từ nghệ thuật vector hoạt hình giải thích giải pháp kinh doanh của họ, đến trình chiếu về các khả năng của sản phẩm. Xuyên suốt những nội dung rất đa dạng này, trang web vẫn sử dụng các màu thương hiệu một cách nhất quán, với màu xanh nhạt và xanh lá cây đặc trưng là màu chính và hai màu hồng là màu phụ.

Nút kêu gọi hành động ở màn hình đầu tiên của trang web nổi bật trong thiết kế gradient đầy quyến rũ. Sau khi nhấp vào, nó sẽ dẫn đến một lightbox popup, nơi khách truy cập có thể bày tỏ sự quan tâm của họ đến sản phẩm bằng cách nhanh chóng điền vào một biểu mẫu trực tuyến.

5. SomiSomi

Nhà hàng Hàn Quốc này có đầy đủ nội dung thương hiệu với thiết kế logo nổi bật ở màn hình đầu tiên, mà cũng dẫn trở lại trang chủ khi nhấp vào. Liên kết logo của bạn với trang chủ là một thực hành điều hướng trang web quan trọng. Tính năng này thậm chí còn trở nên quan trọng hơn trên thiết bị di động, vì nó có thể cải thiện đáng kể trải nghiệm người dùng.

Tự hào với món kem được phục vụ trong một hình nón hình con cá vàng cực kỳ ăn ảnh của họ, Somi Somi đã đảm bảo nhúng nguồn cấp dữ liệu Instagram của họ trên trang web của họ. Ngay phía trên feed của họ là hashtag thương hiệu của họ, do đó, việc chia sẻ ảnh về sản phẩm của họ thậm chí còn trở nên dễ dàng hơn.

6. Balloon Movie

Được trang trí với nhiều giải thưởng, trang web thiết kế dành cho thiết bị di động này giúp người hâm mộ cập nhật bộ phim ngắn này. Khách truy cập trang web còn được cập nhật về các buổi chiếu khác nhau của nó và đọc tin tức mới nhất trên blog của trang web. Ngoài ra còn có các liên kết đến các nền tảng mạng xã hội có liên quan, bao gồm cả trang IMDB của phim.

Ngoài ra, trang web còn giới thiệu đoạn giới thiệu của phim, được nhúng vào trang bằng Video Box. Khi người dùng kéo xuống trang, một đoạn ngắn của đoạn giới thiệu sẽ tự động phát, mời họ nhấn nút ‘Phát’.

7. Sophie Brittain

Nhà thiết kế đồ họa Sophie Brittain chào đón các khách truy cập vào trang web của cô ấy với màn hình đầu tiên vừa vui nhộn vừa tối giản. Với nền trắng và rất ít hình ảnh, cô ấy cho phép một câu giới thiệu ngắn gọn chiếm phần lớn không gian.

Khả năng sử dụng kính hiển vi độc đáo của Sophie cũng được thể hiện rõ trong phần chân trang của trang web, khi cô lựa chọn các từ ngữ thông minh thay cho các biểu tượng cho các liên kết truyền thông xã hội của mình. Cô ấy gắn nhãn tài khoản LinkedIn của mình là “Tôi, là một người chuyên nghiệp” (“Me, being a pro ,”) và số điện thoại của cô ấy hiển thị bên dưới “Bạn, có thể gọi cho tôi” (“You, calling me maybe.”).

8. Ed5M

Trang web thiết kế dành cho thiết bị di động này bắt đầu với một hình ảnh nổi bật ám chỉ đến chủ đề giáo dục toán học. Khi khách truy cập kéo xuống trang, vẫn cùng một hình ảnh vẫn giữ nguyên vị trí trong khi nền dần dần tối đi, làm cho văn bản rõ ràng và dễ đọc so với hình ảnh. Khi chúng ta tiếp tục cuộn, nhiều điều bất ngờ đang chờ đợi, chẳng hạn như bóng đèn bật sáng kỳ diệu khi chúng ta đến một điểm nhất định trên trang.

Thật thú vị khi lưu ý một số cách mà phiên bản dành cho thiết bị di động của trang đích này khác với phiên bản dành cho máy tính để bàn. Ví dụ: số lượng hình ảnh trên thiết bị di động bị giảm đi, điều chỉnh trang làm sao để chỉ thông tin quan trọng nhất được chia sẻ. Một sự khác biệt như vậy là với hoa văn của một số đồng xu, trên phiên bản thiết bị di động đã xóa đi để sao cho chỉ còn cho một đồng xu duy nhất.

9. Atelier / Blanc

Web thiết kế dành cho thiết bị di động của nhà lập kế hoạch đám cưới và nhà tạo mẫu Romain Deligny có đầy đủ các tông màu đất, các cặp phông chữ tinh tế và nhiếp ảnh hoàn hảo. Mặc dù menu điều hướng của phiên bản dành cho máy tính để bàn của trang web này là một danh sách ngang cổ điển ở đầu trang, tính năng này được tóm gọn vào một menu nút hamburger nhỏ hơn đáng kể ở trên thiết bị di động. Khi được nhấp vào, nó sẽ mở ra menu toàn màn hình, dễ dàng hơn để đọc và nhấp trên các thiết bị nhỏ.

Ngay cả Instagram Feed ở chân trang của trang web cũng đã được thu nhỏ lại, từ một thư viện nằm ngang gồm một số hình ảnh, thành một trình chiếu hình ảnh duy nhất có thể được điều hướng bằng các mũi tên.

10. Hollie Fuller

Hollie Fuller, nhà sản xuất và vẽ tranh minh họa người Anh giới thiệu các dự án khác nhau của cô ấy trong một bố cục gọn gàng và được tối ưu hóa cho thiết bị di động. Mỗi hình minh họa trên trang chủ đều dẫn đến một trang bên trong của dự án, nơi bạn có thể tìm thấy các phần bổ sung và mô tả ngắn gọn bằng văn bản về công việc của cô ấy.

Trên trang Giới thiệu của mình, Hollie thêm hình ảnh của mình cùng với danh sách các tính năng truyền thông và khách hàng trước đây mà cô ấy đã làm việc cùng. Giới thiệu con người thực đằng sau các tác phẩm là một phương pháp hay để xây dựng thương hiệu cá nhân và nâng cao uy tín và sự liên hệ của bạn.

11. Noni Ceramica

Hoạt động từ Brazil, trang web Thương mại điện tử do gia đình sở hữu này trưng bày các đĩa gốm của họ bằng cách sử dụng hiệu ứng cuộn tiêu đề tinh tế, tạo thêm cảm giác về chiều sâu cho trang chủ. Một nút CTA nổi bật dẫn khách truy cập đến cửa hàng trực tuyến của họ, nơi người mua có thể kéo qua các bức ảnh chụp sản phẩm gốm trong môi trường studio trung tính và sử dụng các sản phẩm đó với các món ăn nhìn đẹp mắt.

Thiết kế logo của thương hiệu là kiểu hình khối và chữ in, phù hợp với xu hướng logo hiện tại. Logo của thương hiệu được hiển thị một cách tự hào trên màn hình đầu tiên của trang chủ của trang web dành cho thiết bị di động này. Trong các trang bên trong, logo xuất hiện ở cuối trang và liên kết trở lại trang chủ để dễ điều hướng.

12. Ocean Data Alliance

Trang web phi lợi nhuận này giới thiệu công trình cứu đại dương của mình theo từng phần nhỏ, với các nút hiển thị thông tin chuyên sâu hơn sau khi nhấp vào. Việc sử dụng các phần tử có thể thu gọn như vậy là một kỹ thuật quan trọng cho thiết kế web cho thiết bị di động, đặc biệt là trong các trang có nhiều văn bản. Kỹ thuật này cho phép trang chỉ cung cấp thông tin phù hợp nhất trước tiên, sau đó mở ra các nội dung bổ sung khi sự tò mò của người đọc đã được khơi dậy.

Một mẹo thiết kế di động hữu ích khác là giảm thiểu số lượng phần tử trên trang. Ẩn các yếu tố trong thiết bị di động giúp trang web giữ được giao diện gọn gàng. Trang web Ocean Data Alliance đã đảm bảo chỉ hiển thị nội dung quan trọng nhất trên thiết bị di động, bỏ qua các chi tiết như tên của các thành phố được hiển thị trong mỗi bản đồ của họ. Quyết định này giúp người đọc hướng đến những thông tin cần thiết nhất.

13. Michelle Carlos

Trang web của nghệ sĩ Nam Phi Michelle Carlos có một giao diện mobile thu hút: Tác phẩm vẽ tay của cô lấp đầy màn hình, với logo và kiến thức chuyên môn của cô được đặt lên trên. Trang đầu này giúp thiết lập giai điệu cho phần còn lại của trang web, gợi ý cho khách truy cập về loại nội dung mà họ có thể tìm thấy ở bên trong.

Ngoài việc trưng bày các hình minh họa, thiết kế và tranh vẽ của mình, Michelle cũng có phần blog rất hữu ích. Tại đây, cô ấy chia sẻ mọi thứ từ thủ thuật Photoshop đến công thức nấu ăn kèm theo tác phẩm nghệ thuật của mình. Logo blog của cô ấy giống với logo trang web của cô ấy, giúp trang web duy trì được tính nhất quán.

14. Sunny

Những bông hoa hướng dương trên trang web thiết kế cho thiết bị di động của thương hiệu chuyển động chậm này đang bùng nổ với màu sắc và ánh sáng. Thiết kế trang chủ của Sunny hoàn toàn phù hợp với xu hướng thiết kế web hiện tại, cho thấy một bức ảnh lớn được ghép nối với logo thương hiệu của họ.

15. Brown Owl Collective

Giao diện web cho mobile của trang này có rất ít văn bản trên trang. Chỉ với một tuyên bố sứ mệnh ngắn gọn và một nút CTA kêu gọi khách truy cập khám phá các tác phẩm của họ, trang này gần như chứa chỉ toàn các hình ảnh.

Sử dụng hiệu ứng di chuột qua thư viện, tên của mỗi dự án sẽ chỉ được hiển thị khi hình ảnh được nhấp vào. Điều này giảm thiểu số lượng các phần tử trên màn hình, trong khi vẫn truyền tải tất cả thông tin có liên quan từ khi bắt đầu.

Các mẹo để thiết kế web di động tốt nhất

Thiết kế giao diện web cho Mobile có nhiều chi tiết phức tạp hơn, nó không đơn thuần chỉ là phiên bản thu nhỏ của trang web.

Một trang web thiết kế cho thiết bị di động tốt phải thực hiện một số điều chỉnh, dẫn đến một thiết kế rõ ràng, và phù hợp với từng vấn đề. Điều này sẽ cải thiện trải nghiệm người dùng của bạn.

Ngoài ra, trang web của bạn sẽ tự động được chuyển đổi thành chế độ xem thân thiện với thiết bị di động với kích thước phông chữ, hình ảnh được tối ưu hóa và hơn thế nữa.

Các phương pháp giúp cho trang web phù hợp với các thiết bị di động:

• Ưu tiên lập chỉ mục trên thiết bị di động: Kể từ khi Google triển khai mobile-first index vào năm 2015, xếp hạng kết quả tìm kiếm của trang web chủ yếu được xác định dựa trên phiên bản dành cho thiết bị di động của nó.
  • Do đó, việc cải thiện phiên bản dành cho thiết bị di động của trang web – về hiệu suất, thiết kế và thời gian tải trang – đã trở thành một điều tối quan trọng của SEO.

Phương pháp #1: Ưu tiên lập chỉ mục trên thiết bị di động:

Kể từ khi Google triển khai mobile-first index vào năm 2015, xếp hạng kết quả tìm kiếm của trang web chủ yếu được xác định dựa trên phiên bản dành cho thiết bị di động của nó.

Do đó, việc cải thiện phiên bản dành cho thiết bị di động của trang web – về hiệu suất, thiết kế và thời gian tải trang – đã trở thành một điều tối quan trọng của SEO.

• Giảm thiểu các yếu tố trang: Do số lượng chỗ trên màn hình di động có hạn, không phải tất cả văn bản và hình ảnh trên thiết kế trên máy tính để bàn của bạn đều có thể được đưa vào phiên bản dành cho thiết bị di động.
  • Ẩn các phần tử của trang để loại bỏ bất kỳ thứ gì không thực sự cần thiết và góp phần trực tiếp vào thông điệp của bạn.

• Sử dụng CTA: Không cần chuột và bàn phím sang trọng, điều hướng trên thiết bị di động được thực hiện bằng đầu ngón tay của chúng ta. Điều này yêu cầu điều hướng phải cực kỳ nổi bật và luôn trong tầm với. Lời kêu gọi hành động và các nút khác của bạn phải nổi bật, dễ nhấp và được đặt một cách chiến lược.

• Sử dụng nút “Quay lại đầu trang”: Cho phép khách truy cập trang web ngay lập tức kéo trở lại đầu trang của bạn bằng nút “Quay lại đầu trang”. Nút này cũng hoàn toàn có thể được tùy chỉnh.

• Liên kết biểu trưng trở lại trang chủ: Thực hành điều hướng quan trọng này cho phép khách truy cập trang web quay lại trang chủ của bạn bằng một cú nhấp chuột vào bất kỳ thời điểm nào trong khi duyệt trang web của bạn.

• Thu nhỏ menu: Ngay cả khi trang web trên máy tính để bàn của bạn có menu điều hướng cổ điển, dài hơn, hãy đảm bảo các nút sử dụng menu dành cho thiết bị di động trên các thiết bị được nhỏ đi.
  • Một cách tốt để thực hiện là nút menu. Đây là một biểu tượng được tạo thành từ ba đường ngang mở ra menu khi nhấp vào. Một ý tưởng khác cần xem xét là Thanh tác vụ nhanh, giúp cho các hành động quan trọng nhất được thực hiện dễ nhất.

• Tận dụng các tính năng dành cho thiết bị di động: Việc sử dụng các tính năng thiết bị di động độc đáo có thể giúp thúc đẩy trang web trên thiết bị di động của bạn và mang đến cho khách truy cập trải nghiệm mượt mà hơn.
  • Một số ý tưởng bao gồm: màn hình chào mừng có thương hiệu để chào đón du khách đến chào đón một cách chuyên nghiệp; hình ảnh động trang web di động để làm sống động trang web của bạn; và một menu di động tùy chỉnh để có một thiết kế hoàn toàn gắn kết.

Kết luận

Một trang web thiết kế dành riêng cho định dạng thiết bị di động là điều cần phải có cho mỗi một doanh nghiệp hiện đại. Có như vậy bạn mới dễ dàng thu hút được những tập hợp khách hàng ở các nhóm hàng đa dạng.

Nếu đã có ý tưởng và muốn nhận hỗ trợ THIẾT KẾ TRANG WEB theo định dạng thiết bị di động từ các nhà thiết kế hàng đầu thì hãy liên hệ ngay với Sao Kim qua Hotline 0964.699.499 bạn nhé.

Xem thêm những bài viết khác

> Cách ứng dụng Digital Branding cho thương hiệu

> Gia tăng trải nghiệm của khách hàng trên website

Follow các bài viết chất lượng của Sao Kim tại: 

Blog Sao Kim, Cẩm Nang Sao Kim 

Facebook:Sao Kim Branding

Case study Behance: Sao Kim Branding

SaoKim #SaoKimBranding #WebsiteMobile #ThietKeWeb