Brief history of web homepage layout

Brief history of
web home page layout

Group 16:

Lê Dương Khang
Nguyễn Đức Kế

15520338
15520328

Huỳnh Thanh Nhàn

15520564

Trần Tấn Phát 1

15520607


Tổng quan

⇒Layout là gì?
⇒Hệ thống và quy tắc trong layout
⇒Lịch sử thiết kế HomepageLayout
2


Layout là gì ?
Layout 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.

3


Các hệ thống layout và quy tắc:
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



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



Sự cân bằng



Quy Tắc 1 Phần 3



Quy tắc số lẻ

4


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.

5


Nhấn mạnh và tỷ lệ:
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.

6


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

7


Quy tắc 1 phần 3:

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ả.

8


Quy tắc “số lẻ”:
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.

9


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

10


Thành phần của Homepage Layout:
Một số ví dụ:

/>
/>
/>pi0.pk60764258856_200113794906_c_12026464216&gclid
=CjwKCAiAlb_fBRBHEiwAzMeEdhuPdRrssIc8JWjhu8__A8wqRRDpx3ANGUFQc9aoEIDfJ
6lSY4MiZBoCkpMQAvD_BwE

11


Trang web đầu tiên (1991):
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

/>

Layout

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 đề (

,

, v.v.), đoạn văn (

) và liên kết (<a>)

13


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

14


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

Layout
15

Trang web đầu tiên (1992)
Nội dung trang web: Logo, Banner, Search Bar, Text, Icon, (Footer) Links

16


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

Layout
17


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,…

18


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

Layout
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ó
thể dùng nó để tạo ra các cấu trúc nhiều cột hơn so với khả năng ban đầu của HTML.

19


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

Để 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.

20


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

Layout
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
nhiều sức mạnh để xử lý. Khi Apple quyết định từ bỏ flash trên iPhone đầu tiên (2007), nó bắt đầu
suy thoái dần, ít nhất là trên thiết kế web.
21


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

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

22

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

Layout



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
định nghĩa trong CSS, còn nội dung sẽ trong HTML.

23


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

Đây là thời kỳ thiết kế web thông minh ra đời, nhưng vẫn còn một chặng đường dài để UX/UI. Khoảng 56% người dùng thời đó duyệt trên màn hình lớn
với độ phân giải màn hình 800 × 600.

-

Các nhà phát triển đã sử dụng PHP3, HTML4 và CSS2. Ngoài ra, các trang web bắt đầu trở nên năng động hơn và chứa ít văn bản hơn. Xu hướng đặc
biệt của thời đó: văn bản nhỏ, không cuộn, độ dốc, nền tối, phông chữ axit và các liên kết được tô sáng / gạch chân trong menu. Các thiết kế bao gồm
hình ảnh tối thiểu.

-

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.

24


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

Layout

25