Mạng lưới web toàn cầu World Wide Web đã kỉ niệm 30 năm thành lập vào ngày 12 tháng 3 năm 2019.

World Wide Web, gọi tắt là Web hoặc WWW, hay mạng lưới toàn cầu, là một không gian thông tin toàn cầu mà mọi người có thể truy cập (đọc và viết) thông tin qua các thiết bị kết nối với mạng Internet. Hệ thống thông tin trên Internet cho phép các tài liệu được kết nối với các tài liệu khác bằng các liên kết siêu văn bản, cho phép người dùng tìm kiếm thông tin bằng cách di chuyển từ tài liệu này sang tài liệu khác. 

Nhờ có sự bùng nổ của World Wide Web, số lượng người dùng Internet ngày một tăng, giúp nhân loại tiếp cận được kho tri thức vô tận chỉ bằng cách sử dụng máy tính hoặc một chiếc điện thoại thông minh. Trong suốt khoảng thời gian này, thiết kế website cũng có bước đột phá và thăng trầm nhất định. Nhân loại đã không còn phải tiếp xúc một trang web với những kí tự lượm thượm và hình ảnh chất lượng thấp nữa.

Các trang web chứa thông tin với các tính năng tiên tiến và dễ dàng định hướng đã trở nên phổ biến đến nỗi ta dường như quên mất diện mạo của chúng ở những năm 1990 trông như thế nào.

Bài viết này sẽ cùng bạn nhìn lại diện mạo trang web của 3 thương hiệu lớn từ những ngày đầu thành lập đến thời điểm năm 2014, từ đó thấy rõ sự thay đổi về thiết kế web qua thời gian. Hành trình mà họ đã trải qua có thể cho bạn nguồn cảm hứng trên con đường khám phá lĩnh vực thiết kế web của chính mình.

Apple

Đầu tiên, cùng nhìn lại các thiết kế web của Apple qua từng thập kỉ, nguồn lấy từ Wayback Machine.

1997

Thiết kế trang web của Apple năm 1997 có logo chứa thông tin khá cô đọng và thanh điều hướng đặt phía bên trái. Tuy nhiên, nó không cho thấy sự tinh tế của Apple ngày hôm nay. Phông chữ cũng khá đơn giản và thanh điều hướng chiếm nhiều không gian, khiến người dùng cảm thấy bị phân tâm khi sử dụng. Tổng thể thiết kế trông như một đống lộn xộn.

1999 – 2002

Sau đó, Apple đã tạo ra một thiết kế trang chủ chuyên nghiệp hơn và cũng chính là nền tảng cho các thiết kế sau này. Trang web chứa một bức hình cùng tiêu đề lớn khá bắt mắt và một số hình ảnh nhỏ kèm theo.

Mỗi hình ảnh đều ứng dụng hiệu ứng không gian âm, từ sản phẩm mới nhất cho đến những sản phẩm mà khách hàng hài lòng. Thanh điều hướng đặt phía trên giúp người dùng tìm thấy sản phẩm được ưa chuộng dễ dàng hơn.

2003 – 2006

Trong suốt giai đoạn này, phương thức thiết kế gọn gàng vẫn được ứng dụng, tuy nhiên Apple đã tạo nên một chút khác biệt khi sử dụng nền tối màu. Cả hai phương thức thiết kế đều trình bày sản phẩm rất hiệu quả.

Chi tiết đường cong trong dòng chữ “Introducing Mighty Mouse” cho thấy sự táo bạo vốn có của Apple.

2007 – 2010

Thiết kế trang chủ năm 2007 loại bỏ đi những chi tiết phía dưới, đây cũng là lý do mà điện thoại của họ có thể gây sức ảnh hưởng lớn như vậy. Xu hướng thiết kế này tiếp diễn cho đến năm 2008 và 2009, tuy nhiên khi iPad được ra mắt vào năm 2010 thì trang chủ của Apple được sử dụng để quảng bá sản phẩm mới nhất của nhãn hàng.

2011 – 2013

Những yếu tố thiết kế chủ đạo vẫn không thay đổi trong khoảng thời gian này. Thiết kế trang web dành cho sản phẩm iPad Air năm 2013 là một điểm nhấn đáng chú ý. Tuy nhiên khi nhãn hàng tập trung vào tính mỏng nhẹ của sản phẩm thì còn cách nào hay hơn hình ảnh góc cạnh dị thường để thể hiện điều này cho công chúng biết?

2014

Thiết kế trang web của nhãn hàng vẫn lấy sự đơn giản từ cuối những năm 90 làm nền tảng. Chi tiết hình ảnh chính mang lại sự thu hút, tuy nhiên sản phẩm không còn được trưng bày đơn độc nữa mà giờ đây đã nằm gọn trong bàn tay của con người.

Phông chữ mang nét hiện đại với những gam màu tương phản độc đáo, tạo nên sự chuyên nghiệp cao cấp.

Thanh điều hướng được đặt cố định ở phía trên của trang để người dùng dễ dàng sử dụng. Bên cạnh việc sử dụng những cụm từ kích thích người dùng xem nội dung (“What will your verse be?”), 4 phần ở vị trí dưới cùng của trang cung cấp cho người dùng những thông tin chính xác với một cú click.

Họ đã cải tiến như thế nào?

Thay vì tập trung vào doanh số, Apple đã lấy cảm xúc của khách hàng và kĩ thuật kể câu chuyện mang tính bao quát làm trọng tâm. Những nhà thiết kế trang web muốn gây được tác động với thiết kế mới cần phải cho thấy sản phẩm đi kèm với hình ảnh người dùng thật sự.

Người dùng càng hình dung rõ ràng về sản phẩm khi sử dụng và lợi ích mà nó mang lại thì họ sẽ càng có xu hướng muốn mua nó.

GAP

Tiếp theo chúng ta sẽ tìm hiểu thêm một nhãn hàng lớn trong lĩnh vực thời trang.

1997

Thật sự phải nể phục những nhà thiết khi đã truyền tải thông điệp rất rõ ràng thông qua giao diện trang web. Thanh điều hướng phía trên tạo nhiều không gian trống để trưng bày sản phẩm thay vì sử dụng thanh nằm ngang, tổng thể thiết lập rất gọn gàng và đơn giản.

Ở phần dưới, nhà thiết kế web của GAP đã thể hiện thông điệp rằng khách hàng có thể chọn mua những mặt hàng thời trang ưa thích thông qua phương thức online. Điều này thể hiện bằng chi tiết logo được lặp lại 2 lần và cụm từ ‘online store’ và ‘shop online’ xuất hiện ở một trang chủ nhỏ khác.

2000 – 2009

Vào năm 2000, thiết kế trang web đã có phần cải tiến. Nó mang đậm chất riêng của GAP với chi tiết logo, hình ảnh và thanh điều hướng đơn giản ở phía trên. Bạn hãy chú ý đến thanh điều hướng qua thời gian.

Năm 2004, hình ảnh và logo của GAP đều được cải thiện khi được đặt trong một khung nền màu xanh lam để tạo nên sự nổi bật. Tuy nhiên những chi tiết điều hướng khác đâu? Nó nằm ở phía dưới trong một đường dẫn.

Thanh điều hướng được đưa lên vị trí phía trên của trang chủ ở thiết kế năm 2006. Công ty đã có thể cung cấp thời trang trẻ em, thể hiện qua chi tiết hình ảnh các người mẫu nhí. Bên dưới hình ảnh chính là 4 mục khác nhau để quảng bá nhiều chương trình ưu đãi. Thật không may, thiết kế của chúng lại không có tính liên kết nào dẫn đến sự lộn xộn gây rối mắt không đáng có.

Năm 2009, các tính năng điều hướng chính được đặt ở một vị trí mới vỏn vẹn trong hình ảnh chủ đạo. Chúng ta có thể coi đây là một thiết kế tiên tiến, tuy nhiên phần lớn khách hàng đều muốn thực hiện các thao tác từ các góc của trang chủ – chủ yếu là từ các thanh ở phía trên và bên trái.

Khách hàng càng khó để tìm thứ mình muốn thì họ sẽ có xu hướng rời bỏ trang web càng nhanh.

2010 – 2012

Cuối cùng thì GAP cũng đã đạt được chuẩn mực vào năm 2010. Thanh điều hướng được đặt cố định ở phía trên kể từ thời điểm này về sau. Thiết kế trang chủ năm 2010 đã có sự cải tiến lớn vì ứng dụng hình ảnh các người mẫu thời trang lồng ghép vào nhau.

Có lẽ ứng dụng nhiều hình ảnh ở trang chủ là điều mới lạ với người dùng vì xu hướng này còn tiếp diễn đến năm 2011 và 2012. Tuy nhiên, cả hai đều không đạt mục đích của nhãn hàng. Không có một chiến lược rõ ràng nào trong tổng thể thiết kế, hình ảnh không liên kết với nhau và các màu sắc mang lại cảm giác ngột ngạt.

2014

Dường như GAP đã nỗ lực hết sức và tạo ra một trang web chứa nhiều yếu tố thiết kế độc đáo trong một trang chủ. Trang web này được thiết thiết kế để thu hút thế hệ trẻ với hơi hướm thành thị và hình ảnh chủ đạo. Cụm từ ‘LIVED IN’ được tách ra thành 3 phần thu hút sự chú ý của khách hàng.

Thanh điều hướng đặt phía trên cho phép di chuyển đến từng dòng sản phẩm và tính năng tìm kiếm cho người dùng. Chi tiết túi mua sắm nằm ở góc phải phía trên, người dùng sẽ dễ dàng lên lịch mua sắm khi lướt từng trang.

Họ đã cải tiến như thế nào?

GAP đã trải qua quá trình chỉnh sửa liên tiếp để có được thiết kế trang web năm 2014 khá gọn gàng, những nhà thiết kế trang web thương mại điện có thể theo chân hình mẫu này để tạo ra trải nghiệm mua sắm online thân thiện với người dùng. Quan trọng không chỉ là trưng bày tất cả sản phẩm lên trang web; việc ứng dụng khéo léo các bức ảnh về phong cách sống có thể giúp người dùng hình dung ra tác động của sản phẩm đối với cuộc sống của họ như thế nào.

Heineken

Cuối cùng là quá trình Heineken thay đổi trong việc thiết kế trang web của thương hiệu. Hình ảnh lấy từ Wayback Machine.

1997

Trang web tỏ ra rất hiệu quả trong việc quảng bá thương hiệu và tạo được sự thu hút, tuy nhiên bằng cách cho người dùng thấy những tính năng và nút thao tác, họ có thể bị rối và không biết làm gì tiếp theo.

Tính điều hướng không hề rõ ràng, quá nhiều phông chữ được sử dụng và thật sự mà nói, những chi tiết được đặt dưới nền giọt nước vô cùng khó đọc.

2010 – 2012

Năm 2010, thiết kế trang web Heineken đã đạt được độ hoàn hảo tựa như ngày nay. Thoạt đầu, trang chủ dường như rất đơn giản nhưng nền màu xanh lam tối đã ứng dụng hiệu quả các hình dạng và ngôi sao khá thú vị dọc theo thân chai.

Thiết kế web của năm 2011 và 2012 tuân theo một công thức về bố cục rõ ràng nhất định. Tuy nhiên bên cạnh đó họ cũng ứng dụng phương thức sáng tạo khi sử dụng video và các khung hình trong phim điện ảnh nổi tiếng để quảng bá cho sản phẩm bia của công ty.

2014

Trang web được thiết kế khéo léo với phông chữ độc đáo, trình bày rất rõ ràng theo bố cục tối giản. Chi tiết Heineken màu xanh được giảm tone một chút so với phiên bản 1997.

Họ đã cải tiến như thế nào?

Tổng thể thiết kế mang màu sắc hiện đại, sống động, mang tinh thần của Heineken những năm 20 và 60. Video được sử dụng rất hợp lý với bối cảnh chung của phương tiện xã hội ngày nay, giúp kích thích tương tác và chia sẻ nhằm tăng độ phổ biến của thương hiệu trên toàn thế giới.

Quan sát những ví dụ trong thập niên 90, bạn có thể thấy ngay cả trang web của các tập đoàn lớn cũng còn nhiều hạn chế với những chi tiết nghiệp dư, được hoàn thiện không khéo léo và có khoảng cách khá xa so với các thiết kế phức tạp ngày nay.

Điều này có thể do nhà thiết kế web thời ấy còn gặp phải những hạn chế về công nghệ như đường truyền mạng chậm, phông chữ ít ỏi và thiếu dữ liệu để tạo nên một thiết kế hoàn hảo cho trải nghiệm người dùng.

Những xu hướng thiết kế nào đã biến mất?

Theo thời gian, web designer ngày càng được hỗ trợ nhiều công cụ để tạo ra các trang web phức tạp và chuyên nghiệp hơn, thế nên một vài xu hướng thiết kế dần mất đi tính phổ biến và trở nên mờ nhạt. Những xu hướng này là:

Xu hướng Flash animation: Thiết kế trang chủ theo phong cách này từng được đánh giá cao nhưng dần dà người dùng không còn hứng thú với nó nữa vì còn nhiều hạn chế và không thu hút người xem.

Xu hướng thiết kế chèn nhạc nền: Một bản nhạc ballad với giai điệu hay là một ý tưởng tốt. Tuy nhiên, nếu bản nhạc này cứ lặp đi lặp lại nhiều lần sẽ không hay chút nào. Sự yên tĩnh là yếu tố quan trọng khi nói đến thiết kế web ngày nay.

Nội dung quá đà: Một vài công ty nghĩ rằng trang web của họ cần nhiều thông tin về công ty, tiêu chí hoạt động và sản phẩm. Sự thật là việc có quá nhiều thông tin có thể gây bối rối và cảm giác khó chịu, chúng ta chỉ muốn đọc cho qua mà thôi. Năm 2014, thiết kế tối giản cùng lối ứng dụng hình ảnh và biểu tượng đã thay thế việc sử dụng nội dung quá nhiều.

Xu hướng thiết kế ngày nay

Thanh điều hướng cố định: Người dùng có thể lướt xem nội dung mà không có cảm giác bị lạc lối trong mê cung.

Phông chữ độc đáo: Sử dụng phông chữ độc đáo và khác biệt có thể hỗ trợ quá trình truyền tải thông điệp của trang web.

Sliders: Xu hướng sử dụng hình ảnh trong sliding banner là ý tưởng hay. Khi hình ảnh tự động thay đổi, người dùng có cơ hội xem qua tất cả mà không phải làm gì.

Các yếu tố Call-To-Action: Tại sao chúng ta cứ phải tương tác với nút ‘Contact Us’ nhàm chán trong khi có rất nhiều những tính năng và nút lệnh khác? Các nút lệnh càng thu hút thì người dùng càng có xu hướng click vào nhiều hơn.

Thiết kế thanh cuộn: Pinterest là một ví dụ điển hình của xu hướng thiết kế web kiểu này, tuy nhiên ngày càng có nhiều công ty ứng dụng thanh cuộn bởi đây là phương thức khá hiệu quả để trình bày từng thông tin.

Thiết kế phẳng và skeuomorphism: Thiết kế phẳng với các biểu tượng tối giản hoặc sử dụng các hiệu ứng 3 chiều truyền thống.

Thiết kế web kiểu dải ruy-băng.

Kết luận

Những cột mốc quan trọng trong lĩnh vực thiết kế web 25 năm qua đều là nỗ lực giúp trải nghiệm người dùng ngày càng hoàn thiện. Khi những nhãn hàng đang cạnh tranh quyết liệt với nhau thì thiết kế web là một nhân tố quan trọng trong quá trình ấy.

30 năm phát triển của mạng lưới web toàn cầu World Wide Web đã làm thay đổi cục diện chung của thiết kế web so với thời điểm năm 1989. Và ai biết được, mọi thứ sẽ còn phát triển ra sao trong 25 năm tới!

Tác giả: Dmitri Logounov
Người dịch: Đáo
Nguồn: HONGKIAT