Chương 1: Thiết kế mỹ thuật giao diện Web 16 Hình 1. Kích thước chuẩn thiết kế Web tốt cho SEO tối ưu UX- UI V. KÍCH THƯỚC BANNER, FOOTER, MENU Banner Web thông thường là những nhóm hình ảnh tĩnh hoặc ảnh động. Được đặt tại Web để quảng cáo sản phẩm hay dịch vụ của mỗi doanh nghiệp.
Hình ảnh này được đặt trên đầu trang chủ của Web. Hoặc cũng có thể là loại hình ảnh động được đặt tại thanh toolbar bên trái hoặc phải Web. Thường được gọi là baner ngang hoặc banner dọc. Một số banner treo để chạy quảng cáo liên kết giữa các Web còn có kích thước hình vuông.
Hoặc thiết kế dạng flash, html5 động. Tại mỗi hình ảnh banner Web sẽ được thiết kế sinh động, bắt mắt. Đặc biệt luôn chèn những thông điệp logo hoặc slogan của doanh nghiệp. Được đặt tại các vị trí bắt mắt của Web giúp thu hút khách hàng hoặc thu lượng truy cập vào Web.
Với mục đích chính là nâng cao doanh số bán hàng và để lại ấn tượng cho mỗi khách hàng. Phân loại các banner Tại các Web giới thiệu sản phẩm, Web doanh nghiệp bán hàng. Banner sẽ được phân loại theo vị trí đặt trên Web. Thông thường sẽ được phân làm 2 loại chính là banner ngang và banner dọc.
+ Banner ngang + Banner dọc 2. Kích thước các banner - Kích thước banner ngang 728×90 pixel là loại kích thước chuẩn banner được áp dụng nhiều vào Web. Kích thước này được sử dụng để làm hình ảnh cho những banner ngang tại Web chính và Web quảng cáo. Lưu ý Web chính kích thước có thể lớn hơn.
Và có thể thiết kế theo kích thước của Web với chiều cao 90px. 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.