10 XU HƯỚNG THIẾT KẾ WEBSITE 2022

28/02/2022 188
xu huong website 2022 feature
WEB DEVELOPMENT

Có một xu hướng chung về thiết kế website 2022, đó là đem đến cho người xem nhiều yếu tố trải nghiệm và tương tác hơn.

 

Xu Hướng Thiết Kế Website 2022

Với thiết kế website 2022, các nhà thiết kế đang bắt đầu coi trang web như một tác phẩm nghệ thuật, như một không gian trải nghiệm tương tác. Thậm chí là xây dựng những trang web chỉ nhằm mục đích thư giãn và vui chơi. Điều này phần nào phản chiếu lại xu hướng thiết kế website ở thời buổi sơ khai, khi mà các nhà thiết kế website luôn muốn khoe thật nhiều những kỹ thuật phức tạp, hay là xây dựng website mang nặng yếu tố cá nhân.

Về mặt thị giác, ta có thể dễ dàng nhận ra các xu hướng web phần lớn đang lấy ý tưởng từ các giai đoạn trước. Các nhà thiết kế website đang tìm kiếm những sáng tạo khác với kiểu thiết kế tập trung vào hình ảnh đã phổ biến trong nhiều năm. Thay vào đó, họ tích cực sử dụng các yếu tố như kiểu chữ, lưới, đường kẻ hay điều hướng đơn giản để sáng tạo. Những yếu tố này kết hợp với phong cách thiết kế hiện đại giúp các trang web không trở nên cũ kỹ.

Thiết kế website cũng đang tiến tới thời kỳ tương lai với các kỹ thuật đương đại thú vị như: khả năng tương tác nâng cao, hình ảnh động, các hiệu ứng hình ảnh 3D như phong cách glassmorphism,…Các nhà thiết kế cũng tích cực sử dụng các công cụ thiết kế được phát triển sẵn, cho phép họ làm mọi thứ nhanh và dễ dàng hơn bao giờ hết.

Hãy cùng đi qua 10 phong cách thiết kế website 2022 mà chúng tôi đã tổng hợp dưới đây.

Đọc thêm: TOP 10 MẪU WEBSITE BÁN HÀNG WORDPRESS ĐƯỢC ƯA CHUỘNG 2022

 

01. Inclusive Design Mania (Thiết Kế Bao Trùm)

Website tham khảo: Ranboo Fashion

01 thiet ke bao trum ranboo

 

Thuật ngữ “bao trùm” thường được sử dụng nhiều trong chính trị-kinh tế trong những năm gần đây. Nhưng xét về cốt lõi, nó cũng là một hệ tư tưởng mà mọi nhà thiết kế mong ước: thông điệp thiết kế được bao trùm ở mọi ngóc ngách của website, kể cả những vị trí mà trước đây người ta thường không mấy quan tâm. Trong thị trường toàn cầu ngày càng tập trung vào cá nhân hóa này, đó là một suy nghĩ không hề viển vông chút nào.

Thiết kế bao trùm là một phong cách thiết kế website 2022 ảnh hưởng đến mọi bước của thiết kế trang web. Từ việc đưa ra quyết định chiến lược liên quan đến đối tượng mục tiêu, phong cách thể hiện của website, sự cá nhân hóa,… Cũng như xác định ngôn ngữ đồ họa của thương hiệu để phù hợp với tất cả giới tính, quan điểm, trải nghiệm,…

Ví dụ, các hình ảnh và đồ họa có chủ đích bắt đầu xuất hiện thường xuyên hơn trong những phong cách phi giới tính, mang đến sự đa dạng vui tươi.

Hơn nữa, dưới ảnh hưởng của trò chơi điện tử, năm nay được dự đoán sẽ chứng kiến ​​Internet tràn ngập ngày càng nhiều hình đại diện, hình minh họa và sự xuất hiện của các nhân vật ảo mới, khi mà công nghệ thực tế ảo và metaverse đang ngày một phát triển, xóa mờ ranh giới giữa thực và ảo.

Người mẫu mà Ranboo Fashion hiển thị trong video của họ có phần phi giới tính, che giấu khuôn mặt để người xem không chắc chắn về giới tính của người mẫu.

 

02. Scrollytelling (Kể Chuyện)

Website tham khảo: Infrared Mind Body

02 ke chuyen infrared

 

Scrollytelling (tạm dịch: Phong cách Kể chuyện) là một cách ngày càng phổ biến để tận dụng giao diện kỹ thuật số và truyền tải những câu chuyện với nội dung phức tạp.

Những hiệu ứng hình ảnh được tối ưu để thu hút người xem ở lại, đóng vai trò như một bàn tiệc bắt mắt để đem đến những nội dung hấp dẫn. Phong cách kể chuyện còn được gọi theo cách khác là “kể chuyện bằng hình ảnh” – một chuỗi các yếu tố hình ảnh được sắp xếp lại với nhau, được sắp xếp theo thứ tự thời gian để truyền tải một thông điệp cụ thể tới người xem.

Cũng giống như mỗi người có một tốc độ đọc sách khác nhau, các trang web hiện nay cho phép bạn điều hướng và kiểm soát luồng thông tin trên đó một cách chủ động. Họ hiểu rằng mỗi người dùng là một cá thể khác nhau, và luôn tìm cách trình bày thông điệp theo những cách hấp dẫn.

Infrared Mind Body là một dịch vụ tắm hơi được đặt tại Texas, Hoa Kỳ. Trang web của doanh nghiệp này sử dụng các hình ảnh và văn bản kích thước lớn, kết hợp với những hiệu ứng chuyển động khác nhau. Các yếu tố này kết hợp một cách hài hòa để làm nổi bật thông điệp mà chúng đem đến.

Các bức ảnh cận cảnh lớn, hình ảnh thiếu sáng, kiểu chữ cỡ lớn, cũng như hiệu ứng chuyển tiếp mềm mại và mượt mà, khéo léo tạo cho người xem cảm giác nhưng đang thực sự ở phòng tắm hơi.

 

03. Horizontal Scrolling (Cuộn Ngang)

Website tham khảo: SIRUP

03 cuon ngang sirup

 

Đây là một phong cách thiết kế website 2022 trái ngược với kiểu điều hướng dọc quen thuộc và tưởng như hiển nhiên. Bố cục cuộn ngang có thể đem đến những tương tác đáng ngạc nhiên giữa văn bản và hình ảnh.

Phong cách thiết kế này đặc biệt có hiệu quả đối với các trang web portfolio, catalog, bản đồ và những chủ đề tương tự. Khám phá các dự án, thành phố và thăm các phòng trưng bày trực tuyến sẽ trở nên hấp dẫn hơn rất nhiều với tính năng điều hướng sang hai bên. Nếu được ứng dụng đúng cách, thao tác cuộn ngang có thể làm cho trang web trở nên hấp dẫn, vui nhộn và đáng nhớ hơn. Có thể ví dụ như trang web SIRUP này.

SIRUP là một trang web được tạo ra với mục đích duy nhất là nghe một danh sách các bài hát. Nắm được điều này, nhà thiết kế đã tạo ra trải nghiệm cuộn ngang kết hợp danh sách phát và hình ảnh như một phần của chuyển động cuộn. Các chuyển động mượt mà giữa các yếu tố thiết kế khác nhau tạo ra cảm giác chuyển động ngay cả khi không thao tác gì, khiến người dùng càng muốn cuộn trang để theo dõi.

 

04. Brutalist Typography (Chữ “Cục Súc”)

Website tham khảo: Zona de Propulsão

04 chu cuc suc zona de propulsao

 

Nếu bạn là mẫu người thích phong cách táo bạo, thì có lẽ bạn sẽ muốn xem xét phong cách này khi thiết kếwebsite 2022. Chữ “Cục Súc” là phong cách thiết kế website mang vẻ gai góc, có phần choáng ngợp. Nó giúp website nổi bật ngay cả khi không sử dụng quá nhiều chi tiết.

Brutalist Typography có thể được coi là sự đối lập với vẻ nhẹ nhàng, lạc quan và tối giản của thiết kế web ngày nay. Một phong cách trần trụi, thô ráp, trái ngược với các quan niệm bóng bẩy hơn của thiết kế hiện đại.

Phong cách thiết kế chữ “cục súc” này sẽ mang đến cho trang web một không khí của đô thị đông đúc và nhộn nhịp. Một số hiệu ứng thường sử dụng ở phong cách này: tối ưu font chữ để tạo hệ thống lưới sinh động, sử dụng các chữ cái làm vật liệu để phân đoạn, chia nội dung, đặt tiêu đề, đoạn văn. Hoặc, chỉ đơn giản là bạn muốn một nét phóng khoáng trên trang web của mìnhmình.  

Zona de Propulsão là một website đơn trang cho một trung tâm nghiên cứu đổi mới công nghệ. Các dòng chữ khổng lồ chắc chắn là ấn tượng đầu tiên khi vào đây. Nó tạo ra một bầu không khí đô thị nhộn nhịp với màu sắc lễ hội. Đội thiết kế muốn những luồng thông tin dễ cho mọi người nắm bắt, và khoe bày trình độ công nghệ theo một cách tự nhiên và sáng tạo.

 

05. Typography Animation / Kinetic Typography (Chữ Động)

Website tham khảo: Dillinger

05 thiet ke chu dong dillinger

 

Đây có thể coi như là một phiên bản khác của phong cách Chữ Cục Súc nói trên. Phong cách này cũng đang phát triển nhanh chóng cùng sự phát triển của những kỹ thuật mới. Ngày nay, phong cách thiết kế này được các nhà thiết kế web sử dụng rộng rãi dưới nhiều hình thức. 

Trước đây, khi muốn kể một câu chuyện, người ta thường sẽ chọn sử dụng một nhân vật hoạt hình để gây chú ý. Nhưng giờ đây, typography đã đưa đến một sân chơi hoàn toàn khác..

Những dòng chữ chuyển động có thể thu hút sự chú ý, tạo giọng điệu, làm nổi bật các phân đoạn quan trọng và điều hướng mắt người dùng. Đây là một xu hướng trên thực tế đã xuất hiện từ những năm 1960, khi các bộ phim truyện bắt đầu sử dụng tiêu đề có chuyển động thay vì các dòng chữ bất động.

Trên trang web của Dillinger, một công ty Sản xuất phim có trụ sở tại Paris, toàn bộ trang web được thiết kế giống như 1 menu lớn. Những dòng chữ sẽ thay đổi linh hoạt khi người dùng di chuột đến các phần tương ứng trên màn hình. Sự thay đổi vị trí của chữ sẽ giúp điều hướng trang web, và tạo ra những bố cục trang khác nhau sau mỗi thao tác.

Trong những năm tới, chúng ta sẽ thấy nhiều phong cách Chữ Động này hơn, và các dòng chữ sẽ đóng vai trò như một chức năng nhiều hơn là chỉ trang trí.

 

06. Nostalgia (Hoài Niệm)

Website tham khảo: Bravenewlit

06 website hoai niem bravenewlit

 

Nhiều xu hướng thiết kế trong những năm gần đây đang khai thác các chất liệu xưa cũ, khi mà có nhiều người muốn nhớ và hồi tưởng về quá khứ. Đã tròn hai năm từ sự xuất hiện lần đầu của đại dịch COVID-19, và suốt từ đó là một giai đoạn dài của sự bất ổn ngày một leo thang. Chính vì thế, mọi người mong muốn những trải nghiệm đem đến sự thư giãn, như là một cách để giải thoát tinh thần, tạm rời xa thực tại.

Phong cách thiết kế Hoài Niệm yêu cầu mọi thứ phải chậm lại, mang lại cảm giác cơ học hơn thông qua kiểu chữ và hình ảnh. Các yếu tố thường được lựa chọn sử dụng là các bộ lọc hình ảnh cổ điển, phông chữ cổ điển, độ mờ, hạt nhiễu, kết cấu, ánh sáng dịu hay bảng màu pastel,… Đó chỉ là một vài trong số vô vàn phương pháp mà các nhà thiết kế đang sử dụng để tạo ra cảm giác quen thuộc, hoài cổ cho người dùng.

Trang web Bravenewlitis là một sân chơi về Văn học. Kiểu chữ lãng mạn với nhiều nét cong, cũng như tông màu pastel trơn, hình ảnh có hạt nhiễu nhẹ,… đã tạo cảm giác thân thuộc và hoài niệm. Để làm cho tạp chí tương tác 4.0 này trở nên gần gũi, nhà thiết kế đã tạo cho nó một giao diện kích thích tương tác, chẳng hạn như bố cục các đoạn văn bản thành các tờ giấy nhớ, hay ghi chú viết tay,… Nó khiến website trông giống như thể người dùng là một phần của nội dung hiển thị trên đó.

 

07. Contrast Colors (Màu Tương Phản)

Website tham khảo: Superglow

07 mau tuong phan superglow

 

Phong cách thiết kế Màu Tương Phản dành cho những nhà thiết kế thuộc thế hệ 8x và 9x. Thật khó để thờ ơ với một trang web sử dụng những gam màu neon sống động. Màu sắc là một công cụ cơ bản giúp bạn thu hút sự chú ý của người dùng, cũng như khơi gợi những cảm xúc.

Màu Tương Phản thường được sử dụng để nhắm mục tiêu đến một đối tượng cụ thể. Phong cách này đã phát triển để biến website thành một tác phẩm thiết kế sôi động, nổi bật, chứa đầy các yếu tố underground trẻ trung như hình khối axit, neon trên nền đen, độ tương phản sáng và các bộ màu gradient,…

Superglow là một studio thiết kế phong cách sống và âm nhạc. Phần thứ hai trên trang web của họ kết hợp các tiêu đề lớn màu đen trên nền vàng trơn. Các dòng chữ menu sẽ biến thành màu hồng khi di chuột vào. Giao diện tổng thể bao gồm các bức ảnh sắc màu, với hoạt ảnh chuột mờ dần xuất hiện khi di chuột, đem đến một vài thông tin về dự án được nói đến trong từng dòng menu tương ứng.

 

08. Off the Grid (Vượt Khuôn Khổ)

Website tham khảo: Arrowww Space

08 thiet ke vuọt khuon kho arrowww space

 

Lưới là một trong những công cụ quan trọng nhất mà một nhà thiết kế hay sử dụng. Nó giúp tạo hình và tổ chức các sản phẩm thiết kế. Tuy nhiên, nếu xử lý một cách hợp lý, việc thiết kế vượt khỏi giới hạn của lưới có thể làm cho trang web của bạn nổi bật và đáng nhớ giữa vô số các đối thủ khó gờm khác.

Phong cách thiết kế Vượt Khuôn Khổ chắc chắn không phải là một ý tưởng mới lạ, nhưng nó vẫn chưa thực sự được khai thác hết tiềm năng. Ngày nay, các nhà thiết kế web không còn cần bên trung gian, hoặc nhà phát triển để hiện thực hóa tầm nhìn của mình. Mọi bố cục website dù không tưởng đến đâu, đều có thể nhanh chóng được hiện thực hóa bằng các chương trình xây dựng website có sẵn. Hơn hết, mọi dòng code cũng đã được thực hiện tự động, khiến việc xây dựng website dễ dàng hơn bao giờ hết.

Trong ví dụ về Arrowww Space, website portfolio của nhà thiết kế Maxim Aginsky, anh ấy đã sử dụng một câu trích dẫn nổi tiếng của mình để mở đầu. Nó thể hiện tầm nhìn của anh ấy về việc sử dụng sáng tạo việc chữ chồng chéo lên nhau, cùng với các đường hình học ở nền.

 

09. Imagery Multilayers (Đa Lớp)

Website tham khảo: General Condition

09 da lop general condition

 

Trong những năm gần đây, trong quá trình thiết kế, người ta tập trung nhiều vào các thiết kế gọn gàng, pixel perfect và tối giản. Nhiều đến mức nhiều nhà thiết kế không muốn tiếp cận những thiết kế phức tạp hơn về mặt thị giác.

Nội dung đa lớp là một cách để thách thức, làm mới những yếu tố tưởng chừng như quá đơn giản, như thư viện ảnh và các yếu tố kiểu chữ. Phong cách Đa Lớp tạo ra trải nghiệm sống động để kể câu chuyện trên trang web. Điều này cũng giúp người dùng dành nhiều thời gian hơn để khám phá một trang web.

Với ví dụ về trang web General Condition, chủ đề chung của toàn bộ ảnh trên web, những chuyển động trang nhã và nền đen giúp gắn kết mọi thứ với nhau, mang lại trải nghiệm thống nhất chặt chẽ về mặt hình ảnh.

Một lợi ích khác của kỹ thuật Đa Lớp này là nó giúp dễ dàng đưa nhiều nội dung vào một phần hoặc vào không gian hạn chế như trên màn hình di động.

 

10. Delight (Phấn Khích)

Website tham khảo: Airbnb

10 thiet ke website phan khich airbnb

 

Kiểu thiết kế phấn khích đã trở thành một yếu tố quan trọng của trải nghiệm người dùng. Khi người dùng ngày nay thường kỳ vọng cả phấn khích bề mặt và phấn khích ẩn bên dưới. Nó không chỉ khơi dậy niềm vui nhất thời mà còn giúp cải thiện khả năng sử dụng, độ tin cậy và chức năng của trang web.

“Phấn khích bề mặt” bao gồm: hình ảnh động, các thao tác và chuyển động có tính tương tác, tiểu tiết về nội dung (microcopy), các hình ảnh và âm thanh. Trong khi đó, “phấn khích ẩn” là có thể đảm bảo đáp ứng mọi nhu cầu của người dùng như: đầy đủ tính năng, có độ tin cậy, dễ sử dụng và đem đến sự thỏa mãn. Người dùng sẽ có khả năng cao giới thiệu sản phẩm hoặc dịch vụ cho người khác sẽ tăng, nếu họ đạt được những “phấn khích ẩn” khi trải nghiệm dịch vụ.

Airbnb là một ví dụ tuyệt vời về một trang web cung cấp những trải nghiệm thú vị trong toàn bộ hành trình của người dùng. Các tính năng như đánh dấu các địa điểm người dùng đã xem trên bản đồ không chỉ dễ chịu mà còn giúp người dùng lựa chọn và quyết định tốt hơn, khi đặc điểm của website này là đưa ra vô vàn kết quả cùng lúc xuất hiện trên màn hình..

Nhưng đó chỉ là một ví dụ nhỏ. Các nguyên tắc nghiêm ngặt về địa điểm lưu trú mà Airbnb yêu cầu các chủ nhà tuân theo (chẳng hạn như hình ảnh thực, tiêu chuẩn vệ sinh, các khoản thanh toán và phí,…) đưa đến ấn tượng về tiêu chuẩn cao và cảm giác an toàn, tin tưởng, sự thỏa mãn trên mọi bước đường.

 

Tương Lai Của Thiết Kế Website 2022

Chúng ta đã cùng đi qua một loại xu hướng phát triển website năm 2022 – từ kiểu chữ “cục súc” đến bảng màu pastel dịu nhẹ, sự hoài cổ và các chủ đề màu tương phản cao,… Với xu hướng Metaverse được kỳ vọng thống trị các mặt báo vào năm 2022, thiết kế website cũng đang bước vào một kỷ nguyên phát triển mới.

Việc triển khai các công nghệ Thực tế ảo, Thực tế tăng cường và Trí tuệ nhân tạo sẽ sớm trở thành những cân nhắc cơ bản của các nhà thiết kế web. Hiện tại, những công nghệ này đang dần xuất hiện trong các ứng dụng di động, và việc chúng trở nên phố biến trong các website chỉ còn là vấn đề thời gian.

Mặc dù việc cập nhật xu hướng mới là cần thiết, nhưng điều quan trọng không kém là luôn tỉnh táo để lựa chọn đúng đắn. Đôi khi một thiết kế thời thượng lại không phải là nhu mà bạn cần có. Nếu muốn thiết kế phù hợp với mục đích của website, chúng ta cần phải nghiêm túc đánh giá dựa trên các lựa chọn phù hợp với tính cách người dùng, cũng như mục đích trang web chúng ta đang thiết kế.

 

CO-WELL Asia

Tổng hợp và dịch


Tham khảo các bài viết khác của CO-WELL Asia tại đây