Khi nghĩ đến thiết kế một trang web, bạn phải cân nhắc tổng quan và mức độ mà internet thể hiện. Hãy thật táo bạo , designer cần đẩy giới hạn của sự tương tác và trí tưởng tượng của con người ở mức độ toàn cầu – điều này dễ dàng thấy được ở những công ty trong ngành công nghiệp ý tưởng, ví dụ các nhà cung cấp ý tưởng thiết kế trang web.

1. Làm lớn

Ngày nay, “Làm LỚN – make it BIG” dường như là nguyên tắc quan trọng mà đơn giản nhất của thiết kế web. Mặc dù đối với nhiều người, thật khó chấp nhận trang chủ – thường là nằm phía trên – chỉ gồm vài chữ nằm phía trên có hình ảnh và đoạn phim. Đôi khi, ngay cả phần điều hướng (menu) cũng bị dời di hoặc  bị che khuất với một biểu tượng nho nhỏ.

Hai mẫu thiết kế web bên dưới thể hiện xu hướng có thể được gọi là ‘phong cách điện ảnh”. Mẫu đầu tiên được hun đúc với những mẫu quảng cáo phim ảnh, còn mẫu thứ 2 đi theo chiều hướng cổ điển của sách in hay bìa tạp chí.

Lý do của xu hướng bao gồm cả về mặt hình ảnh và thương mại. Bạn chỉ có thể tối đa hóa mức ảnh hưởng ngay khi người dùng lưu lại trên trang web và nó dễ lập trình (coding), vì thế trang web sẽ dễ hoạt động trên cả màn hình để bàn và điện thoại (một cách trình bày không ảnh hưởng bởi kích cỡ của thiết bị hiển thị).

Hình ảnh tràn màn hình là mốt của năm trước (được bình chọn bởi xu hướng thiết kế website 2015), nhưng do tốc độ phát triển, khả năng tiếp cận các hình ảnh chất lượng cao và tốc độ của công nghệ, chúng ta thấy những trang web theo kiểu trình bày ‘bìa sách’ có trình độ hơn hẳn.

2. Trải nghiệm đa phương tiện 
   

   Jack Daniel cung cấp một ví dụ ấn tượng của hiện đại “kinh nghiệm đa phương tiện “

Xu hướng phong cách đoạn clip ’kiểu điện ảnh’ thể hiện tràn màn hình (hoặc gần như toàn trang) với chỉ một vài từ và/hoặc vài yếu tố nằm ở phía trên của trang. Đầu tiên chúng tôi tham khảo phong cách này trong bài “Xu hướng thiết kế web năm 2013” khi thấy trên một vài nhà cung cấp dịch vụ làm website.

Giờ thì xu hướng đã có nhiều thay đổi. Chỉ trong năm trước Paypal cập nhật trang chủ của mình bằng hình nền đoạn clip tràn màn hình – động thái thay đổi của thương hiệu đã giúp đưa ý tưởng này thành xu thế chủ đạo.

Ý tưởng đa phương tiện đã hơi lỗi thời. Chính cái tên của nó đã bị lạm dụng đến mức gần như mất luôn cả ý nghĩa. Mặc dù vậy, cả một đội quân thiết kế và lập trình viên không ngừng đấu tranh để liên tục tạo ra những trải nghiệm đa phương tiện.

Trước đó ít lâu, Flash chính là sân chơi cho những trải nghiệm này. Hiện nay thì là HTLM5 một công nghệ cho phép bạn tạo ra được hầu hết các hiệu ứng hình ảnh trên website.

Một ví dụ điển hình của tương tác được làm với HTLM Canvas là cộng động – điều hành bởi dự án DNA của Brooklyn – trên nền tảng nhà soạn nhạc Joanthan Dagan. Mở đầu bằng đoạn clip với hình nền đầy hình ảnh, jview kể với ta cách anh ấy lên kế hoạch thực hiện một tuyển tập âm nhạc mới dựa trên trải nghiệm cá nhân (mà người dùng có thể tải về) và cộng tác viên có thể đăng tải video, nhạc và phản hồi.

Một ví dụ tuyệt vời khác là trang web https://raisetheriver.org/. Một trang web dùng để kêu gọi mọi người đóng góp để nâng mực nước sông Colorado, một con sông có 6 triệu năm tuổi ở Mỹ để nó có đủ nước để kết nối với đại dương nhằm cứu lấy sự sống của vùng đồng bằng khô hạn xung quanh nó. Không chỉ bởi những hình ảnh ẩn dụ mà còn bởi cách trình bày, không gian của các hình ảnh minh họa hầu như buộc người xem phải dừng lại một chút, hít một hơi, xem từ từ để có thể theo dõi đầy đủ về tiến trình thời gian trong trang web để hiểu rõ hơn về quá trình cứu dòng sông từ lúc bắt đầu đến nay.

Trong khi thiết kế giao diện, chúng ta thường làm mọi thứ để thu hút độc giả. Trang web này cho thấy đôi khi ngăn người dùng ở một thời điểm nhất định đôi lúc giúp họ có trải nghiệm tốt hơn về trang web.

3. Parallax effect – hiệu ứng Thị sai 
   

   Website Mint Design Company: https://mintdesigncompany.com/

Hay còn gọi là Chuyển động cuộn đã phát triển thành nhiều biến đổi và có cùng 1 điểm chung: chuyên viên thiết kế sử dụng sự dịch chuyển của trang hoặc chuột máy tính để tạo chuyển động cho các yếu tố hoặc các thành phần của trang. Nếu bạn quan sát kỹ, hầu hết các trang web được đề cập trong bài đều sử dụng logic này. Đây là một vài ví dụ:

Tai nghe QUO+ dẫn dắt bạn vào một mê cung với những dịch chuyên ngang dọc trên trang web bên cạnh những phần rất cuốn hút là mỗi khi chuột bạn ‘chạm đến’ sản phẩm thì sẽ có màu của sản phẩm.

4. Sách hoạt hình
   

   Website Boldking: https://www.boldking.com/

Loại trang này, giống ví dụ đầu tiên, quy trình hoạt hình bắt đầu khi đọc giả chạm đến một đểm bất kỳ.

Thông thường, chỉ một vài yếu tố được sử dụng trên trang hoặc hiệu ứng “hiện ra từ từ” xuất hiện.

Trang sản phẩm Boldking (phía trên) sử dụng sức nặng của ánh sáng SVG và Java script để thể hiện hình ảnh ẩn dụ diễn tả cách thức hoạt động của sản phẩm.

Không chỉ ý tưởng và hình ảnh gây ngạc nhiên, mà còn dung lượng siêu ấn tượng đạt mức 1.5MB cho toàn trang. Có một vài trang thư viện JS có mức dung lượng này.

Trang web đám cưới Colin & Dewi là ví dụ điển hình cho sự đơn giản nhưng hiệu qua khi làm cho độc giả tập trung đọc mẫu chuyện. Chỉ một đoạn của câu chuyện được trình bày, để tiếp tục theo dõi, bạn phải lăn chuột xuống để đọc tiếp.

5. Thiết kế phẳng
   

   Website Colin and Dewi: https://colinanddewi.com/

Trong suốt 3 năm, thiết kế phẳng được mệnh danh là ‘vua’ rất nhiều lần. Kiểu thiết kế này vẫn sẽ đóng vai trò quan trọng và vẫn giữ được phong độ – đặc biệt trong những mẫu nhỏ như biểu tượng, thực đơn hay hình ảnh minh họa.

Không chỉ những ảnh nhỏ nhìn đẹp mắt (vẫn còn tốt hơn những trang web 2.0 biểu tượng làm lại từ mấy trang web cách đây vài năm) nhưng nó hoàn toàn dễ mở rộng và quản lý nhờ vào công nghệ kiểu chữ biểu tượng. icomoon.io là một ví dụ của trực tuyến cho phép mọi người tự tạo những biểu tượng kiểu chữ đơn giản mà không tốn phí

Rất đáng được ghi nhận, mặc dù, thiết kế phẳng không phải lúc nào cũng phẳng. Chuyên viên thiết kế luôn kết hợp những thay đổi nho nhỏ, cấu trúc và hình ảnh để đặt được hiệu ứng ‘wow’. Theo ý kiến của chúng tôi, phần tốt nhất của thiết kế phẳng không phải là sự phẳng của mực, nhưng là cách mà nó đã mở ra cho ta những hình ảnh ẩn dụ sáng tạo.

Thay vì sao chép sự vật bằng kỹ thuật skeuomorphic (kỹ thuật mà biểu tượng của notepad nhìn giống cuốn sổ ghi chú nhỏ làm bằng giấy có bọc da xung quanh), thiết kế phẳng cố gắng truyền tải thông điệp về ý tưởng của notepad bằng cách tổng hợp, bắt mắt, vui nhộn và có thể phù hợp với nhiều kích cỡ.

Chúng tôi tiên đoán rằng xu hướng này sẽ trở nên tương tự hoặc tổng hợp với những mẫu khác, gần giống với trang Habitweb đã từng đề cập trong bài này.

6. Không còn đóng khung

Chuyên viên thiết kế web thường mong muốn thể hiện những suy nghĩ nằm ngoài khuôn khổ thông thường – bằng nhiều cách mà không phải là một cách. Có thể gọi xu hướng này “Vẽ nên một giới hạn và chứng minh bạn có thể thoát khỏi giới hạn đó.” Một màn hình chữ nhật là cái khung cho tất cả thiết kế web (như chúng ta đều biết là chưa có màn hình tròn). Mỗi một thành phần HTLM của trang cũng là một hình chữ nhật Khi nhìn vào trang chủ của nhà hàng Rosa cảm giác của bạn như bị đánh lừa – bạn có thể cảm nhận được hương vị của bếp. Sử dụng một phiên bản hiện đại của Trompe-L’oeil technique và làm như đang có trước mặt một cái màn hình máy tính. Ví dụ – hãy lấy 1 cái nền là cái bàn gỗ và đặt tất cả các vật cần thiết lên trên bề mặt.

Cách tốt nhất để phân định hình chữ nhật là nơi để đọc giả sử dụng như một không gian không xác định nơi mà di chuyển chuột nghĩa là bay bổng, không phải là, đơn thuần…là rê chuột.

Hãng hàng không Swiss thách thức hiểu biết của ta về định vị website. Khi tìm kiếm trang này, bạn có thể cảm thấy sự hiểu biết ban đầu của ta về không gian là đây. Tại đây, thay vì bạn phải rê chuột lên xuống, ta phải tìm cách tránh những đám mây bao bọc xung quanh.

7. Title

 

Nói cách khác, nếu bạn thấy dễ chịu với những hình chữ nhật, một cách tuyệt vời khác để sắp xếp nội dung là sử dụng các khoảng hình vuông. Vì một lý do nào đó mà khoảng hình vuông hiệu quả hơn với giao diện Window 8 Metro. Khoảng vuông thể hiện tốt khi bố trí và, cùng một lúc, tạo được cách sắp xếp làm giao diện ấn tượng hơn.

Nếu việc tiếp tục với khoảng vuông trở nên nhàm chán, phần trình bày cần được đẩy lên hơn với những góc chéo qua lại, đẩy những vật thể hoặc làm chữ chéo với góc.

8. Navigation widgets

Nhiều năm qua, thao tác với phần định vị là một trong những sân chơi yêu thích của dân thiết kế web. “Loanh quanh” với những điểm định vị khi thiết kế web được làm hoàn toàn bẳng Flash. Khi Flash dần đi xuống cũng đã phần nào làm giảm số lượng đơn hàng, thiếu hình ảnh và giảm tương tác.

Nhưng  những phần định vị góc cạnh hơn đang có đà tăng trưởng lại nhờ vào một phần của tiềm năng thiết kế web mới và sự phát triển của những mốt định vị trên nhiều thiết bị di động. Điều này làm cho mọi việc dễ hơn nhờ vào việc sử dụng rộng rải Java Script với công nghệ mới của Java và sự thống nhất của CSS trên các trình duyệt quan trọng về trang web của River không chỉ bởi vì những ứng dụng màu sắc ẩn dụ mà còn bởi vì cách trình bày. Không gian của các hình ảnh minh họa và để rê chuột xem hầu như buộc độc giả phải lấy hơi để điều chỉnh mức độ phù hợp của trang web.

Nguồn: 99designs.com