Chương 1: Thiết kế mỹ thuật giao diện Web 17 - Kích thước banner dọc Nếu như với banner ngang được đặt tại phía trên hoặc dưới nội dung content của Web thì banner dọc lại có nhiều chỗ đứng hơn. Bởi banner dọc cũng có 2 kiểu là banner dọc hình chữ nhật hoặc là hình vuông. Vì thế nên sẽ có nhiều kích thước hơn. Dưới đây là kích thước banner dọc chuẩn nhất của google các ban có thể tham khảo.
Kích thước banner đứng chữ nhật hiển thị trên máy tính: 300x600px, 160x600px, 300x250px, 336x280px Kích thước banner dọc hình vuông hiển thị trên máy tính:250x250px, 200x200px Kích thước banner ngang hiển thị điện thoại: 300x50px, 300x100px Kích thước banner đứng hiển thị trên điện thoại: 250x250px, 200x200px… Hình 1. Kích thước banner dọc Web Chương 1: Thiết kế mỹ thuật giao diện Web 18 CÂU HỎI ÔN TẬP Câu 1: Anh chị hãy cho biết banner dọc Web gồm có những kích thước thông dụng nào? Anh chị hãy vận dụng kiến thức đã học thiết kế 1 banner dọc với kích thước chuẩn 300*600px? Câu 2: Anh chị hãy nêu rõ ưu điểm và hạn chế trong thiết kế banner Web theo kích thước chuẩn? Vì sao lại có hạn chế? Chương 2: Bố cục và thiết kế Web 19 Chương 2: BỐ CỤC VÀ THIẾT KẾ WEB Sau khi sinh viên học xong chương này có thể trình bày được khái niệm bố cục, bố cục cân đối – đối xứng – tự do, tổng quan về thiết kế Web, thiết kế Web tương thích giao diện người dùng, hoạt ảnh Web với Animate CC, sử dụng được các bố cục phù hợp trong thiết kế trang Web và các hoạt ảnh Web với Animate CC. KHÁI NIỆM BỐ CỤC Bố cục là cách tổ chức, sắp xếp hình ảnh, chữ viết trong diện tích thiết kế. Tất cả các yếu tố riêng biệt khi kết hợp với nhau trong thiết kế sẽ tạo thành một tổng thể có sự gắn kết chặt chẽ (xem Hình 2.
Bố cục trong thiết kế Lý do cần sắp xếp bố cục thiết kế Một bố cục tốt trong thiết kế không chỉ thể hiện sự tương xứng, hài hòa mà còn thể hiện được ý đồ riêng của người thiết kế, mang lại hiệu quả truyền thông cao. Tạo sự hài hòa cho thiết kế: Các yếu tố trong thiết kế luôn có sự tác động qua lại lẫn nhau. Khi đặt các yếu tố này đúng vị trí nó có thể gây ấn tượng cho người xem từ cái nhìn đầu tiên. Sắp xếp bố cục hợp lý không làm người xem bị nhiễu loạn bởi quá nhiều thông tin hình ảnh.
Chương 2: Bố cục và thiết kế Web 20 Thể hiện ý đồ truyền thông của thiết kế: Mỗi một bản thiết kế được tạo ra đều nhằm một mục đích nhất định. Muốn đạt được mục đích đó việc sắp xếp bố cục hợp lý là vô cùng quan trọng. Thiết kế cần phải có khả năng điều tiết người dùng chú ý đến cái gì trước, cái gì sau; cái gì là yếu tố chính của thiết kế, cái gì là phần phụ. Muốn thể hiện ý đồ truyền thông một cách rõ ràng bố cục thường phải có tính phân cấp.
Có thể tạo ra phân cấp cho thiết kế bằng kích thước, tương phản về màu sắc, hình dạng, độ đậm nhạt của chữ. Tăng giá trị cho sản phẩm thiết kế: một tác phẩm có bố cục đẹp và nhà thiết kế có thể giải thích về bố cục đó chắc chắn tác phẩm sẽ có giá trị cao hơn. BỐ CỤC CÂN ĐỐI - ĐỐI XỨNG - TỰ DO 1. Bố cục cân bằng Bố cục cân bằng là loại bố cục thường gặp trong thiết kế đồ họa.
Sự cân bằng trong bố cục thiết kế tương tự như sự cân bằng trực quan vật lý. Có hai loại trong bố cục cân bằng: Cân bằng đối xứng: Tất cả các yếu tố như chiều cao, chiều rộng được sắp xếp một cách đối xứng trong bản thiết kế. Bố cục cân bằng đối xứng tạo ra cảm giác ổn định (xem Hình 2. Bố cục cân bằng đối xứng Cân bằng không đối xứng: Hai bên phần tử không bằng nhau, tất cả các yếu tố sắp đặt không có sự đối xứng với nhau.
Cân bằng bất đối xứng được tạo ra từ việc sử dụng các yếu tố màu sắc, kích thước, số lượng, sắc độ… Chương 2: Bố cục và thiết kế Web 21 Hình 2. Bố cục cân bằng không đối xứng 2. Bố cục tương phản Là bố cục sử dụng màu sắc và hình ảnh đối lập nhau trong cùng một bố cục thiết kế. Loại bố cục tương phản tạo ra một ấn tượng mạnh, hấp dẫn người xem.
Sự tương phản được tạo ta từ màu sắc, kiểu chữ, kích thước chữ (xem Hình 2. Bố cục tương phản 3. Bố cục chuyển động Là bố cục tạo cho người xem cảm giác sự vật đang trong trang thái chuyển động hoặc có độ nông sâu nhất định. Có thể tạo ra bố cục chuyển động bằng cách sắp xếp to nhỏ, sử dụng đường chéo (xem Hình 2.
Chương 2: Bố cục và thiết kế Web 22 Hình 2. Bố cục chuyển động 4. Bố cục nhấn mạnh Giữa những đối tượng bình thường tạo ra một đối tượng khác về màu sắc, kích cỡ, nền hình ảnh… nhằm khiến người xem chú ý vào đối tượng được nhấn mạnh (xem Hình 2. Bố cục nhấn mạnh Chương 2: Bố cục và thiết kế Web 23 5.
Bố cục đồng nhất Sử dụng những đối tượng giống nhau về đường nét, màu sắc tương đồng; chung một thuộc tính để tạo ra một tín hiệu nhận diện. Bố cục đồng nhất tương đối khó để tạo ra (xem Hình 2. Bố cục đồng nhất III. TỔNG QUAN VỀ THIẾT KẾ WEB 1.
Khái niệm Web Web giống như “Show-room” trên mạng Internet, nó là nơi trưng bày và giới thiệu các thông tin/hình ảnh về doanh nghiệp, về các sản phẩm/dịch vụ mà doanh nghiệp cung cấp. Bất cứ ai trên toàn thế giới đều có thể truy cập được, Web hoạt động liên tục 24h mỗi ngày và 7 ngày mỗi tuần. Để Web có thể hoạt động được thì nhất thiết phải có tên miền, hosting và nội dung. Đặc điểm tiện lợi của Web Thông tin được cập nhật và thay đổi dễ dàng.
Khách hàng có thể xem được thông tin sản phẩm/dịch vụ ngay tức khắc, ở bất cứ nơi đâu. Tiết kiệm chi phí in ấn, gửi bưu điện, fax… Thông tin đăng tải không giới hạn, không hạn chế số trang, diện tích bảng in và không bị giới hạn về phạm vi địa lý. Các yêu cầu tối thiểu của một Weblist Tên Web (hay còn được gọi là Tên miền hoặc Domain name), tên miền web có dạng:. hoặc các TLD kết hợp với ký hiệu viết tắt của quốc gia:.
Tổng quan về thiết kế Web bao gồm cả Web Hosting là nơi lưu trữ dữ liệu, thông tin Web trên máy chủ Internet. Tại đây sẽ diễn ra tất cả các giao dịch, trao đổi thông tin giữa người sử dụng với Web. Chương 2: Bố cục và thiết kế Web 24 4. Những phần nội dung thiết yếu của một Web Tổng quan về thiết kế Web thông thường bao gồm các nội dung sau: + Trang chủ: Là trang đầu tiên hiện lên khi người dùng truy cập vào Web.
Nó là nới trưng bày các thông tin mới nhất mà doanh nghiệp muốn người dùng có thể nhìn thấy đầu tiên. Ngoài ra, trang chủ còn là nơi liệt kê các liên kết trong Web. + Trang liên hệ: Là nơi trưng bày những thông tin liên hệ của doanh nghiệp và nó thường được thể hiện theo một form để người xem gõ câu hỏi ngay trên chính trang Web này. + Trang giới thiệu về doanh nghiệp: Một khi người dùng đã click vào Web tức là họ muốn tìm hiểu về nhà cung cấp.
Do đó, doanh nghiệp cần có một trang giới thiệu về mình, nêu ra những thế mạnh nổi bật của mình so với những đơn vị khác trên thị trường. + Trang giới thiệu về sản phẩm/dịch vụ: Là nơi cung cấp cho khách hàng biết tới những thông tin/hình ảnh về các sản phẩm/dịch vụ mà mình cung cấp. + Trang hướng dẫn hoặc chính sách: Cung cấp thông tin, hướng dẫn người xem cách thức đặt mua hàng hóa/dịch vụ. Tại đây, người dùng sẽ được hướng dẫn cách họ phải làm gì để mua hàng, hay những chính sách của doanh nghiệp…Trang này sẽ giúp doanh nghiệp tiết kiệm được khá nhiều thời gian và công sức cho những câu hỏi thường gặp “làm thế nào” của khách hàng.
Đây là cách tạo ấn tượng cho người xem cũng như thể hiện tính chuyên nghiệp của doanh nghiệp. THIẾT KẾ WEB TƯƠNG THÍCH VỚI GIAO DIỆN NGƯỜI DÙNG Bố cục của Web được thiết kế để phù hợp với nhiều kích cỡ màn hình khác nhau chứ không chỉ thiết kế một giao diện cố định như người ta vẫn thường làm trước đó. Đây được xem là thiết kế Web tương thích tốt với di động (Responsive Web Design). Dựa trên sự phát triển của các chuẩn HTML5 và CSS3 nên việc thiết kế Web thân thiện với thiết bị di động trở nên dễ dàng hơn.
Ngày nay các mã nguồn còn cung cấp các phương thức cho người lập trình biết được Web được truy cập từ thiết bị nào (Iphone 6, Samsung S7, hay Ipad…) từ đó dễ dàng thiết kế Web phù hợp với thiết bị người truy cập. Chuẩn Responsive Thiết kế Web chuẩn Responsive là một nhu cầu thực tế trên thị trường để làm Web chuẩn SEO như hiện nay. Thậm chí, nhiều người còn ví von rằng, khi nắm được kỹ thuật Responsive, nghĩa là đã nắm được xu thế của một kỷ nguyên Web trong thời đại 4. Thời gian trước đây việc phát triển Web đáp ứng mọi nhu cầu sử dụng trên các thiết bị như máy tính bảng, smartphone… là áp lực đối với các đơn vị làm Web, cũng Chương 2: Bố cục và thiết kế Web 25 như người dùng.
Mà để đảm bảo hiển thị tốt trên cả PC lẫn mobile, bắt buộc công ty thiết kế Web phải đưa ra giải pháp tốt nhất thiết kế hai hay nhiều giao diện khác nhau. Nhưng hiện nay đã có giải pháp tiện lợi dành cho Web đó chính là thiết kế Web chuẩn Responsive nhằm tương thích mọi thiết bị. Responsive Web Design được viết tắt (RWD) mà một thuật ngữ dành cho phương pháp thiết kế Web có khả năng hiển thị tương thích với mọi kích thước của tất cả thiết bị. Hiểu một cách đơn giản nhất, thiết kế Web Responsive là phong cách thiết kế sao cho phù hợp với tất cả các thiết bị cũng như mọi độ phân giải màn hình.
Các hình ảnh, bài viết, bố cục được sắp xếp cân đối, theo trình tự khi xem trên máy tính hay trên tablet, điện thoại cũng đều tương tự nhau. Với thiết kế Web chuẩn Responsive, nội dung hiển thị sẽ dễ dàng đọc và điều hướng cụ thể hơn.