Brief history of web homepage layout

Layout là gì?Hệ thống và quy tắc trong layoutLịch sử thiết kế HomepageLayoutLayout là hệ thống sắp xếp các yếu tố đồ họa, và nội dung trên bất cứ thiết kế nào để tạo sự nhất quán cho toàn bộ ấn phẩm của mình. Các tỷ lệ căn lề, khoảng cách giữa các nội dung, sắp xếp bố cục là những phần quan trọng nằm trong layout.

Brief history of web home page layout

Brief history of web home page layout

Dưới đây là các cấu trúc thường thấy khi xây dựng hệ thống layout và bố cục cho thiết kế Cùng khám phá nhé:

 The grid – Hệ thống lưới

The Grid – Hệ thống lưới:

Grid làm cho các sản phẩm thiết kế trông gọn gàng hơn, hiệu quả

hơn và có tính ứng dụng cao hơn.

Grid giúp tạo tính nhất quán cho các sản phẩm và tiết kiệm được

nhiều thời gian trong việc chỉnh sửa sau này.

Là yếu tố nào tập trung người xem nhất Nếu tất cả các yếu

tố bằng nhau thì không có sự nhấn mạnh.

Nhấn mạnh và tỷ lệ:

Sự cân bằng

Liệu có phải mọi thứ trên đời này đều hướng tới sự cân bằng hoàn hảo ?

Sự cân bằng:

Khá giống trong nhiếp ảnh, quy tắc 1 phần 3 cũng

là một trong những hệ thống layout quan trọng

giúp bạn có một bố cục tuyệt vời trong thiết kế.

Nó là một tiêu chuẩn cơ bản giúp cho sản phẩm

của bạn có được sự hiệu quả.

Quy tắc 1 phần 3:

Một mẫu thiết kế logo sử dụng Quy tắc “số lẻ” đều điều hướng mắt người xem vào điểm tập trung.

Quy tắc “số lẻ”:

Thành phần của Homepage Layout:

Vào tháng 8 năm 1991, Tim Berners-Lee xuất bản trang web đầu tiên, một trang đơn giản 100% là chữ , dựa trên văn bản cố định và một vài liên kết

12

http://info.cern.ch/hypertext/WWW/TheProject.html

Trang web đầu tiên (1991):

Các phiên bản HTML đầu tiên chỉ cho phép cấu trúc nội dung rất cơ bản: tiêu đề (<h1>,

<h2>, v.v.), đoạn văn (<p>) và liên kết (<a>)

14Sau đó, các nội dung mới được thêm vào: Image, Search bar

Lúc này bố cục Layout cũng có sự thay đổi phù hợp

Trang web đầu tiên (1992)

16Nội dung trang web: Logo, Banner, Search Bar, Text, Icon, (Footer) Links

Thiết kế Layout ở thời điểm này:

Thiết kế dựa trên Table (1995):

Bố cục theo bảng cho phép nhà thiết kế Web có thêm nhiều lựa chọn để tạo ra trang web Nhiều nội dung mới được thêm vào: Button, Catalogues,…

Nhờ vào thiết kế mới này mà bố cục trang web cũng có sự đổi mới rõ rệt

Bản gốc của table trong HLML là để hiển thị dữ liệu dạng bảng, nhưng các nhà thiết kế nhận ra rằng có

 Để phá vỡ những hạn chế của thiết kế web hiện có, có một công nghệ web mới được ra đời hứa hẹn một sự tự do chưa từng thấy trước đây Các nhà thiết kế web có thể thiết kế bất kỳ hình dạng, layout, animation, sự tương tác, sử dụng bất kỳ font chữ… Chúng đều nằm trong một công cụ - Flash.

Thiết kế dựa trên Flash (1996):

Layout cũng có những đột phá theo thiết kế Flash này

Thật không may, flash khôngdễ dàng sử dụng hoặc tìm kiếm thân thiện và chắc chắn tiêu tốn rất

 Trong cùng khoảng thời gian với Flash, một cách tiếp cận tốt hơn để thiết kế cấu trúc từ quan điểm kỹ thuật đã được

sinh ra - Cascading Style Sheets (CSS).

 Với những nội dung quen thuộc như: Logo, Search bar, menu bar, News, Ads

Thiết kế dựa trên CSS (1998):

 Khái niệm cơ bản là tách nội dung khỏi presentation Vì vậy, những cái nhìn và định dạng sẽ được

Layout

Tuy không có sự thay đổi nhiều trong nội dung nhưng dưới sự ảnh hưởng của CSS đã làm layout các trang web có sự thay đổi rõ rệt

- Sự xuất hiện của một hộp tìm kiếm trên trang chính, cũng như các menu được suy nghĩ trên hầu hết các trang web, là một bước đột phá thực sự Kể từ cuối năm 2001, tốc độ Internet đã liên tục tăng trưởng Điều này đã cho phép các nhà phát triển và thiết kế web chuyển từ nội dung văn bản thuần túy

và khả năng đọc thành đặc điểm duy nhất của khả năng sử dụng trang web

2000-2002: Đột phá trực quan, phát triển thư mục và các yếu tố điều hướng

2003-2005: Xu hướng Flash, splash and 17 million colors

- Đầu năm 2003 đến 2004, một loạt các mạng xã hội phổ biến đã xuất hiện, bao gồm Facebook, LinkedIn và MySpace Các trang

có flash tích hợp đã ở đỉnh cao, những nhà thiết kế web tập trung vào khả năng đọc trang web và điều hướng thuận tiện trong khi các yếu tố trực quan, phong cách, màu sắc và phông chữ ít được chú ý

- Trong năm 2004-2005, nhiều người dùng đã mua màn hình với độ phân giải cao (1024х768) Lần đầu tiên, họ có quyền truy cập vào máy tính với 17 triệu màu Điều này đánh dấu sự khởi đầu của thiết kế hình ảnh hoặc hình ảnh

- Sự xuất hiện của Youtube vào năm 2005 thúc đẩy các nhà thiết kế sử dụng video làm phương tiện trình bày nội dung

2003-2005: Xu hướng Flash, splash and 17 million colors

Grids và frameworks (2007):

Những nội dung quen thuộc kết hợp với cách trình bày theo dạng grids cũng đã mang đến những trải nghiệm mới

Layout

 Đây cũng là lúc ra đời của Boostrap với hệ thống grids 960 và lướt 12 cột đã được các nhà thiết kế sử dụng ngày nay

Các bước tiếp theo đã được chuẩn hoá theo các yếu tố thường được sử dụng chẳng hạn như biểu mẫu, điều

hướng, button và đóng gói chúng trong một cách tiếp cận dễ dàng, có thể tái sử dụng Về cơ bản, là tạo ra

 Flat design – Thiết kế web phẳng có thể nói là mộ dạng thiết kế 2D, không sử dụng các hiệu ứng từng rất được giới thiết kế ưa chuộng trước đây như đổ bóng, tạo hình khối… mà chọn phong cách đơn giản, dễ nhìn mang lại những hình ảnh trực quan và dễ chịu nhất cho người dùng

Thiết kế web phẳng (2010):

Đây là layout cho thiết kế web phẳng này

2015-2018: Xu hướng thiết kế mới

Sự xuất hiện của bán phẳng (semi-flat), UX/UI, thời gian của animation và các yếu tố tương tác, kiểu chữ lớn và bóng đa chiều

Layout khi kết hợp với các Animation và ảnh GIF

Animation đang ngày càng được sử dụng nhiều hơn trên các website Đây cũng là một cách tốt để chỉ cho người dùng thấy cách sử dụng web/ứng dụng hay mở ra những nội dung thú vị được bạn che giấu sau mỗi lượt tương tác GIF cũng sử dụng với cùng mục đích, nhưng nay lại đang tinh tế hơn với việc sử dụng SVG và CSS để đạt được những thiết kế độc đáo hơn.

Mobile/Tablet :

Mobile: Giai đoạn 1996->2007

Web di động chỉ sử dụng các ngôn ngữ đánh dấu văn bản XHTML hoặc WML để cung cấp nội dung cho thiết bị di động

Mobile: Giai đoạn 1996->2007

- Nhiều trình duyệt di động mới đang vượt ra khỏi những giới hạn này bằng cách hỗ trợ một loạt các định dạng Web rộng hơn, bao gồm các

biến thể HTML thường thấy trên web máy tính để bàn

- Opera là trình duyệt tiên phong trong thời đại đó và nó xuất hiện lần đầu tiên trên điện thoại vào năm 2003 (Nokia 7650) và Microsoft có Pocket IE cho điện

thoại

- Opera hỗ trợ các tiêu chuẩn mới nhất bao gồm HTML 4.01, ECMA-262 phiên bản 2 và 3, JavaScript 1.5, XHTML 1.0 / 1.1, XHTML Basic, XHTML MP, CSS 1 và

2, CSS MP, WML 1.3, WCSS, cHTML, HTTP 1.0 và 1.1, SSL 3 / TLS 1.0 và Unicode (UTF-16)

Mobile: Giai đoạn 1996->2007

Mobile : 2007

- 9/1/2007, Apple lần đầu công bố mẫu điện thoại iPhone – Điện thoại cảm ứng đa điểm đầu tiên

- Năm 2009, API đặc biệt mà Mobile Safari (trình duyệt web trên đt iPhone) đã cho phép các nhà phát triển tạo ra trải nghiệm di động

phù hợp cho iPhone và thời đại web mobile bắt đầu bùng nổ

Mobile: 2010

- iPad ra đời - tái định nghĩa lại máy tính bảng Đồng thơi, năm 2010 được coi là bùng nổ của Smartphone với nhiều bản phát hành cùng

một lúc từ nhiều thương hiệu

- Để đáp ứng nhu cầu với nhiều loại độ phân giải màn hình khác nhau, Responsive ra đời

Mobile: 2010

Mobile: 2010

Bố cục trang Web thay đổi sau khi responsive

Thanh navbar thay đổi thành một toggle menu tiết kiệm không gian

Mobile/Tablet/Desktop

Bố cục trang Web thay đổi sau khi responsive

Một số trang web ứng dụng Responsive Web Design

https://hicksdesign.co.uk/

- Large size: 3 columns sidebar

- Smaller: 2 columns sidebar (the middle column drops to the left

column)

- Even smaller: 1 column sidebar (the right column shift up below the

logo)

http://colly.com/

- Bố cục chuyển đổi giữa 1 cột, 2 cột và 4 cột tùy thuộc kích thước màn hình

- PC: navigation ở trên cùng, 1 hàng hình ảnh

- Tablet: navigation ở phía bên trái, 3 cột hình ảnh

- Mobile: navigation ở trên cùng, không có hình nền trên logo, 3

cột hình ảnh

PC

Tablet

The end