Thiết kế mĩ thuật giao diện website

BÀI 2 THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

Yêu cầu cần đạt – Nhận biết được các yếu tố thẩm mỹ, hệ thống cấu trúc và phân cấp nội dung trên website. – Lựa chọn được chủ đề, phác thảo và thiết kế mĩ thuật một giao diện website. – Phân tích, đánh giá được thiết kế mĩ thuật website phù hợp với đối tượng sử dụng. – Yêu thích và hiểu biết cơ bản về thiết kế mĩ thuật website.

KHÁM PHÁ

Trên môi trường internet, website là một tập hợp các dữ liệu hiển thị dưới dạng văn bản, hình ảnh,... được người dùng tương tác trên các thiết bị máy tính, điện thoại thông minh qua một trình duyệt, bao gồm nhật ký trực tuyến cá nhân, trang thông tin nội bộ, công thông tin điện tử và các hình thức tương tự khác. Website có cấu trúc càng rõ ràng thì càng thuận tiện trong việc theo dõi và tải thông tin (nếu cần), trong đó sử dụng câu từ ngắn gọn, dễ hiểu và có thể đồng bộ, tương thích đối với đa số trình duyệt.

Một bố cục thiết kế mĩ thuật website sử dụng hệ thống biểu tượng(1)

1. Kể tên một số loại thiết bị có thể sử dụng để truy cập website.

2. Nội dung và mục đích của các website có ảnh hưởng đến việc chọn lựa bố cục thiết kế không? Tìm một số ví dụ để làm rõ.

NHẬN BIẾT

Một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website

Quy tắc 1/3

Chia màn hình ra làm 3 phần theo chiều ngang và 3 phần theo chiều doc. Bố cục các cụm thông tin và nội dung theo các vị trí đã chia. Hình ảnh và thông tin nổi bật ưu tiên hiển thị ở giao điểm của lưới 1/3. Quy tắc 1/3 hay được sử dụng cho bố cục giao diện trang chủ.

Hãy phác thảo thể hiện bố cục thiết kế mĩ thuật giao diện website theo quy tắc 1/3.

Tỉ lệ vàng

Tỉ lệ vàng được xác định bằng cách chia đoạn thẳng thành 2 phần A và B, trong đó đoạn A dài hơn đoạn B. Sau đó lấy tổng A + B chia cho A nếu bằng giá trị 1.618 và bằng A/B thì đó là tỉ lệ vàng.

Công thức tổng quát xác định tỉ lệ vàng: A/B = (A+B)/A = 1.618 = Φ.

Trong thiết kế website, những trang có bố cục tỉ lệ vàng thường được dùng cho trang chủ, hoặc những trang tạo ấn tượng có nhiều hình ảnh và lượng thông tin ít.

Hãy phác thảo thể hiện bố cục thiết kế mĩ thuật giao diện website theo tỉ lệ vàng.

Quy tắc cột

Số cột thông thường trong thiết kế website là 12 cột, nên quy tắc thiết kế dựa trên việc nhóm các cột nhỏ thành 3 hoặc 4 cột lớn cho toàn trang là quy tắc rất phổ biến. Sử dụng quy tắc này sẽ làm cho nội dung và diện tích của các phần thông tin được rõ ràng và đồng bộ. Việc thay đổi thông tin hoặc đảo vị trí của các cột một cách linh hoạt cũng trở nên dễ dàng hơn.

Hãy phác thảo thể hiện bố cục thiết kế mĩ thuật giao diện website theo quy tắc cột.

Quy tắc khối tiêu chuẩn

Quy tắc khối tiêu chuẩn là phân cấp các phần thông tin tương tự nhau thành các khối bằng nhau về kích thước và giống nhau cách sắp xếp các chi tiết. Các khối này thường được đặt thẳng hàng theo cả chiều dọc lẫn chiều ngang.

Các trang thường dùng khối tiêu chuẩn là các trang có nhiều tin tức hoặc nội dung liệt kê, ví dụ như: trang sản phẩm, trang album ảnh.

Hãy phác thảo thể hiện bố cục thiết kế mĩ thuật giao diện website theo quy tắc khối tiêu chuẩn.

Quy tắc lưới phân cấp

Quy tắc lưới phân cấp là cách tạo diện tích mới bằng cách nhóm các số lượng cột khác nhau. Số lượng cột được nhóm càng nhiều thì diện tích càng lớn. Diện tích lớn ưu tiên trình bày các nội dung quan trọng, nổi bật, các diện tích nhỏ hoặc bé hơn thể hiện các nội dung khác ít quan trọng hơn theo kịch bản phân cấp thông tin của trang.

Hãy phác thảo thể hiện bố cục thiết kế mĩ thuật giao diện website theo quy tắc lưới phân cấp.

Quy tắc khối lớn

Quy tắc khối lớn thường được dùng để trình bày những trang chi tiết có nội dung thông tin đơn giản như một đoạn văn bản hoặc một bức ảnh đơn lẻ. Khi đó nội dung chính thường ở chính giữa và chiếm diện tích khoảng một phần ba diện tích toàn màn hình.

Hãy phác thảo thể hiện bố cục thiết kế mĩ thuật giao diện website theo quy tắc khối lớn.

EM CÓ BIẾT: Một số lưu ý khi thiết kế mĩ thuật giao diện website

1. Kích thước màn hình Hiện nay, người ta sử dụng nhiều loại thiết bị điện tử có kích thước màn hình khác nhau để truy cập các website. Tuy nhiên, khi xác định được mục tiêu, đối tượng và nhu cầu cụ thể thì người thiết kế cần xác định kích thước màn hình để sắp xếp bố cục phù hợp nhất. Kích thước màn hình to hay nhỏ có thể làm thay đổi linh hoạt bố cục nhưng độ lớn của chữ thì gần như sẽ vẫn được giữ nguyên để đảm bảo khả năng đọc tốt của người xem.

2. Nội dung và sắp xếp trên từng phân trang của màn hình Trang mà người dùng xem đầu tiên khi nhấp con trỏ vào một tên miền website sẽ là trang chủ. Vì vậy, trang chủ được cho là trang quan trọng bậc nhất của website. Trong đó, phần nằm trên màn hình đầu tiên mang tính quyết định người dùng có tiếp tục ở lại trên trang và di chuyển đến các nội dung tiếp theo hay không. Chính vì thế, giao diện của phần này cũng như của toàn bộ trang chủ phải được cân nhắc để sắp xếp những thông tin hấp dẫn và có ích nhất cho người đọc.

3. Thói quen và quy luật của sự chú ý của người dùng đến các phần nội dung trên website Ví dụ: – Người đọc thường chú ý trước tiên đến những phần hình ảnh có gương mặt con người. – Quy luật đọc, xem từ trái sang phải, từ trên xuống dưới. – Đọc thông tin theo hình chữ F. – Quét thông tin trước khi chọn đọc nội dung chi tiết.

Lưu ý của bố cục trong thiết kế mĩ thuật website

• Bố cục gọn gàng, khoa học sẽ giúp người dùng có cái nhìn tổng quan và dễ dàng tìm kiếm thông tin.
• Bố cục đẹp sẽ là yếu tố thu hút sự chú ý và quan tâm của người dùng.
• Áp dụng hệ thống phân cấp trực quan trong việc trình bày nội dung cho phép người dùng hiểu tầm quan trọng của tất cả các yếu tố nội dung trên một trang.

Để bắt đầu phác thảo giao diện khung xương cho một website, cần nghiên cứu và trả lời các câu hỏi sau:

Những thành phần cơ bản của trang web như: đầu trang, chân trang, nội dung chính, thanh bên sẽ được bố trí và sắp xếp ở đâu cho hợp lí?

Phần nội dung chính sẽ hiển thị trên từng trang web là gì?

Đã phân cấp thông tin, phân cấp được nội dung chính, phụ trên trang web chưa?

Giao diện website hoạt động như thế nào?

Người dùng tương tác với trang web, với các khu vực trên trang web như thế nào?

Quy trình thiết kế mĩ thuật giao diện website

Thiết kế mĩ thuật trong website dựa trên nội dung thông tin, cấu trúc nhằm đáp ứng được tính thẩm mỹ. Để thiết kế mĩ thuật cho giao diện website, có thể chỉ cần một người hoặc cũng có thể cần đến một nhóm người cùng tìm hiểu nghiên cứu, đưa ra các giải pháp về tổ chức và cấu trúc nội dung.

Thông thường quá trình đó trải qua các bước thực hiện như sau:

Bước 1: Lên phương án thiết kế mĩ thuật giao diện website

Về cơ bản, chủ đề chính trong thiết kế giao diện website do đơn vị, công ty đặt hàng với họa sĩ thiết kế. Trên cơ sở yêu cầu về nội dung, thể loại và kinh phí chi trả, họa sĩ thiết kế sẽ lên những phương án trình bày về tiêu đề, danh mục chính, nội dung chính, chân trang với những thông tin, hình ảnh, công nghệ tương ứng. Phương án này phải được chủ đầu tư xác nhận trước khi tiến hành các bước tiếp theo.

Bước 2: Xây dựng kiến trúc thông tin của website

Trên cơ sở phương án đã được phê duyệt, hoạ sĩ thiết kế cần tổ chức cấu trúc của website, tập hợp các trang web như sơ đồ website và sơ đồ cách người dùng di chuyển, tương tác trên trang web. Nhiệm vụ của sơ đồ kiến trúc thông tin là việc thực hành sắp xếp các phần, thứ tự của các trang web để người dùng có thể dễ dàng hiểu và tìm kiếm được thứ họ cần. Để bắt đầu xây dựng kiến trúc thông tin cho một website, cần nghiên cứu và xem xét các kiến thức cơ sở sau:

– Nhu cầu của người dùng – Tài nguyên thông tin của trang web – Mục tiêu của đơn vị, tổ chức sở hữu website

Bảng mục lục ví dụ
Tết Việt: Tết Nguyên đán, Tết Hàn thực, Tết Thanh minh, Tết Đoan Ngọ, Tết Trung thu
Trò chơi dân gian: Chơi ngoài trời, Chơi trong nhà
Lễ hội: Lễ hội mùa xuân, Lễ hội mùa hạ, Lễ hội mùa thu, Lễ hội mùa đông
Phong tục các miền: Miền Bắc, Miền Trung, Miền Nam

Kiến trúc thông tin của danh mục trong website(1)

Bước 3: Xác định cấu trúc cơ bản của website

Cấu trúc của website là cách sắp xếp, tổ chức, liên kết các nội dung. Một cấu trúc chuẩn sẽ tạo cho người dùng sự dễ chịu khi ghé thăm website và nhanh chóng tìm thấy thông tin mình cần tìm.

Phác thảo cấu trúc cơ bản của website trên cơ sở kiến trúc thông tin của trang đã hình thành.

Bước 4: Lựa chọn màu sắc, hoà sắc phù hợp và áp dụng lên bản thiết kế

1. Xác định rõ đối tượng, mục đích để chọn màu có tính cách phù hợp.

Một số mẫu phối màu(1)

2. Chọn một màu chủ đạo cho toàn thiết kế.

60% 30% 10%

Thang tỉ lệ màu(2)

3. Từ màu chủ đạo được chọn, phát triển hệ màu đi kèm để bổ trợ bằng cách tăng, giảm sắc độ, màu tương đồng, hoặc màu tương phản với màu chủ đạo đã chọn.

4. Tinh chỉnh các màu sắc đã chọn để phù hợp với màu nền và màu đen trắng của website.

Lựa chọn dạng bố cục và phong cách thiết kế mĩ thuật phù hợp với cấu trúc cơ bản của website đã phác thảo.

Bước 5: Vẽ minh họa và thiết kế các biểu tượng (icon) cho website

Vẽ minh họa, thiết kế các biểu tượng trong website không chỉ đem lại tính thẩm mĩ cho giao diện mà còn mang lại nhiều lợi ích cho cả thương hiệu và người dùng. Hình minh họa, các biểu tượng thực hiện nhiều chức năng khác nhau trong đó có chức năng làm đẹp, chức năng truyền tải thông tin và là điểm nhấn giúp thu hút sự chú ý của người dùng, đồng thời hướng họ thực hiện hành động đúng vào mục tiêu.

Một số mẫu thiết kế biểu tượng và hình minh họa sử dụng trong website(4)

Tết Trung thu NGUỒN GỐC VÀ Ý NGHĨA

Trung thu là vào thời điểm giữa mùa thu. Tết Trung thu tại Việt Nam không ...

Chơi tết Trung thu

Vào ngày Rằm tháng 8, trăng đẹp nhất, tông lầy nhất, nên dân gian làm lễ mở hội ăn Tết mừng trăng. Còn theo sách "Thái Bình hoan vũ lệ" thì...

Trăng như quả thị chín vàng

Thiết kế mĩ thuật một trang web sử dụng màu sắc và tỉ lệ phù hợp(1)

Hoàn thiện phương án thiết kế mĩ thuật giao diện website trên cơ sở dữ liệu đã thiết lập ở các hoạt động trước.

THẢO LUẬN

Trao đổi, thảo luận với thành viên trong nhóm về sản phẩm thiết kế đã thực hiện theo các câu hỏi gợi ý sau: – Đặc trưng trong thiết kế mĩ thuật của website này là gì? – Thiết kế mĩ thuật website này đã phù hợp với đối tượng hướng đến chưa? Vì sao? – Sự ấn tượng, hấp dẫn với người truy cập website này thể hiện ở những yếu tố nào?

VẬN DỤNG

Lên ý tưởng thiết kế mĩ thuật một trang web của một đơn vị, tổ chức mà em biết. Gợi ý : – Tổng hợp các yêu cầu của dự án; – Phân tích các vấn đề và mục tiêu cần thực hiện; – Quan sát, so sánh và đưa ra những nhận định về các website tương tự; – Đề xuất các phương án về kiến trúc thông tin, bố cục, màu sắc, sắp đặt chữ và hình ảnh trong thiết kế.

EM CÓ BIẾT:

Tỉ lệ màn hình máy tính là tỉ lệ tương thích với kích thước (dài x rộng) của hình ảnh đang hiển thị.

Tỉ lệ của các dòng màn hình phổ biến hiện nay: – Tỉ lệ 4:3 chuẩn với: 960×720 hoặc 1440×1080 pixels. – Tỉ lệ 16:9 chuẩn với: 1280×720, 1920×1080 hoặc 1600×900 pixels (chuẩn HD). – Tỉ lệ 3:2 chuẩn với: 1152×768 hoặc 1440×960 pixels. – Tỉ lệ 5:4 chuẩn với: 1280×1024 hoặc 1800×1440 pixels. – Tỉ lệ 14:9 chuẩn với: 1152×720, 1280×800 hoặc 1440×900 pixels. – Tỉ lệ 21:9 chuẩn với: 1280×544 hoặc 1920×816 pixels.

Tỉ lệ màn hình sẽ được tính bằng cách lấy chiều rộng chia cho chiều cao.