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 Group 16: Lê Dương Khang Nguyễn Đức Kế 15520338 15520328 Huỳnh Thanh Nhàn 15520564 Trần Tấn Phát 15520607 Tổng quan ⇒Layout gì? ⇒Hệ thống quy tắc layout ⇒Lịch sử thiết kế HomepageLayout Layout ? Layout hệ thống xếp yếu tố đồ họa, nội dung thiết kế để tạo qn cho tồn ấn phẩm Các tỷ lệ lề, khoảng cách nội dung, xếp bố cục phần quan trọng nằm layout Các hệ thống layout quy tắc: Dưới cấu trúc thường thấy xây dựng hệ thống layout bố cục cho thiết kế Cùng khám phá nhé: The grid – Hệ thống lưới Nhấn mạnh tỷ lệ Sự cân Quy Tắc Phần Quy tắc số lẻ The Grid – Hệ thống lưới: Grid làm cho sản phẩm thiết kế trông gọn gàng hơn, hiệu có tính ứng dụng cao Grid giúp tạo tính quán cho sản phẩm tiết kiệm nhiều thời gian việc chỉnh sửa sau Nhấn mạnh tỷ lệ: Là yếu tố tập trung người xem Nếu tất yếu tố khơng có nhấn mạnh Sự cân bằng: Liệu có phải thứ đời hướng tới cân hoàn hảo ? Sự cân Quy tắc phần 3: Khá giống nhiếp ảnh, quy tắc phần hệ thống layout quan trọng giúp bạn có bố cục tuyệt vời thiết kế Nó tiêu chuẩn giúp cho sản phẩm bạn có hiệu Quy tắc “số lẻ”: Một mẫu thiết kế logo sử dụng Quy tắc “số lẻ” điều hướng mắt người xem vào điểm tập trung Thành phần Homepage Layout: 10 Mobile: Giai đoạn 1996->2007 Web di động sử dụng ngôn ngữ đánh dấu văn XHTML WML để cung cấp nội dung cho thiết bị di động 35 Trang Wikipedia hiển thị trình duyệt di động XHTML trên Nokia 3220 https://revocoffee.vn Mobile: Giai đoạn 1996->2007 - Nhiều trình duyệt di động vượt khỏi giới hạn cách hỗ trợ loạt định dạng Web rộng hơn, bao gồm biến thể HTML thường thấy web máy tính để bàn - Opera là trình duyệt tiên phong thời đại xuất lầ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ợ tiêu chuẩn bao gồm HTML 4.01, ECMA-262 phiên 3, JavaScript 1.5, XHTML 1.0 / 1.1, XHTML Basic, XHTML MP, CSS 2, CSS MP, WML 1.3, WCSS, cHTML, HTTP 1.0 1.1, SSL / TLS 1.0 Unicode (UTF-16) 36 https://revocoffee.vn Mobile: Giai đoạn 1996->2007 37 https://revocoffee.vn 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 38 https://revocoffee.vn - Năm 2009, API đặc biệt mà Mobile Safari (trình duyệt web đt iPhone) cho phép nhà phát triển tạo trải nghiệm di động phù hợp cho iPhone thời đại web mobile bắt đầu bùng nổ - Duyệt web điện thoại di động thử thách hoàn toàn Bên cạnh tất bố cục khác cho thiết bị, đưa vấn đề tương đương nội dung - thiết kế nên giống hình nhỏ hay nên bị loại bỏ? 39 https://revocoffee.vn Mobile: 2010 - iPad đời - tái định nghĩa lại máy tính bảng Đồng thơi, năm 2010 coi bùng nổ Smartphone với nhiều phát hành lúc từ nhiều thương hiệu - Để đáp ứng nhu cầu với nhiều loại độ phân giải hình khác nhau, Responsive đời 40 https://revocoffee.vn Mobile: 2010 41 Trước sau có Responsive https://revocoffee.vn Mobile: 2010 Bố cục trang Web thay đổi sau responsive Thanh navbar thay đổi thành toggle menu tiết kiệm không gian 42 https://revocoffee.vn 43 https://revocoffee.vn Mobile/Tablet/Desktop Bố cục trang Web thay đổi sau responsive 44 https://revocoffee.vn Một số trang web ứng dụng Responsive Web Design https://hicksdesign.co.uk/ - Large size: columns sidebar - Smaller: columns sidebar (the middle column drops to the left column) - Even smaller: column sidebar (the right column shift up below the logo) - Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below) 45 https://revocoffee.vn http://colly.com/ PC Tablet Mobile - Bố cục chuyển đổi cột, cột cột tùy thuộc kích thước hình 46 https://revocoffee.vn https://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html PC - PC: navigation cùng, hàng hình ảnh - Tablet: navigation phía bên trái, cột hình ảnh - Mobile: navigation cùng, khơng có hình logo, cột hình ảnh Tablet Mobile 47 https://revocoffee.vn Tài liệu tham khảo https://en.wikipedia.org/wiki/ https://en.wikipedia.org/wiki/IPhone https://en.wikipedia.org/wiki/Adobe_Flash http://www.outofbounds.gr/blog/posts/a-brief-history-of-web-design-part-2-5-mobile https://www.webdesignmuseum.org/web-design-history?fbclid=IwAR3pSG32tlCwECVXK4Bg5Ega29VJUWv59DgKxKpcHsFxXqk0VhAcuASFBs8 48 https://revocoffee.vn The end 49 ...Tổng quan Layout gì? ⇒Hệ thống quy tắc layout ⇒Lịch sử thiết kế HomepageLayout Layout ? Layout hệ thống xếp yếu tố đồ họa, nội dung thiết kế để tạo... bar 14 Lúc bố cục Layout có thay đổi phù hợp Layout 15 Trang web (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... thiết kế web có, có cơng nghệ web đời hứa hẹn tự chưa thấy trước Các nhà thiết kế web thiết kế hình dạng, layout, animation, tương tác, sử dụng font chữ… Chúng nằm công cụ - Flash 20 Layout có