Bài 8. Thiết kế trang Web · 2. Các tiêu chí thiết kế trang Web •1. Hãy đơn giản trong thiết kế •2. Nên tạo các đường link rõ ràng •3. Định

1

Bài 8. Thiết kế trang Web

Hoàng Anh Việt

Viện CNTT&TT - ĐHBKHN

2

Nội dung

• 1. Cơ sở của thiết kế Web

• 2. Các tiêu chí thiết kế trang Web

• 3. Các bước thiết kế trang Web

• 4. Những sai lầm thường gặp khi thiết kế trang

Web

3

1. Cơ sở của thiết kế Web

• 1.1. Thiết kế trang Web là gì?

• 1.2. Công nghệ thiết kế Web

• 1.2. Mô hình phát triển Web

1.1. Thiết kế trang Web là gì?

• Thiết kế Web là kỹ xảo của việc thiết kế các

nội dung hiển thị được truyền tải đến người sử

dụng thông qua World Wide Web, bởi trình

duyệt Web hoặc các phần mềm Web khác như

RSS… (en.wikipedia.org/wiki/Web_design)

• Thiết kế Web là sự lựa chọn và kết hợp các

thành phần có mặt để tạo ra hình thức và cấu

trúc của một trang Web

(keywordmktg.com/Glossary.aspx)

4

http://www.google.com.vn/url?q=http://en.wikipedia.org/wiki/Web_design&ei=pqzZSvCpJoqWkAXv6eHIDg&sa=X&oi=define&ct=&cd=1&ved=0CBUQpAMoAA&usg=AFQjCNEI_7mJvb2LCW9lA5Lj8X2VY1Uauwhttp://www.google.com.vn/url?q=http://keywordmktg.com/Glossary.aspx&ei=pqzZSvCpJoqWkAXv6eHIDg&sa=X&oi=define&ct=&cd=1&ved=0CBkQpAMoBA&usg=AFQjCNHczRDBo6FqqFEoU06uJjSfWJwdYQ

1.1. Thiết kế trang Web là gì?

• Thiết kế Web vs Thiết kế các căn

phòng trong ngôi nhà?

• Thiết kế tốt là gì?

Thiết kế tốt là tạo ra mối quan hệ

giữa các thành phần được hiển thị và

tạo ra sự cân bằng (balance) giữa

chúng

(Principles of beautiful web design)

5

1.2. Công nghệ thiết kế web

• Các khái niệm liên quan đến Web:

– Webpage, Website, Web tĩnh, Web động…

– Ngôn ngữ lập trình web

• Mô hình thiết kế Web hiện đại

– Model – View – Controller (MVC)

• Tối ưu hóa bộ tìm kiếm

– Search Engine Optimization (SEO)

6

1.3. Mô hình phát triển trang Web

• Mô hình phát triển giống như mô hình phát

triển phần mềm thông thường

• Các bước

– Requirement

– Analyse

– Design

– Implement

– Test

– Document7

1.3. Mô hình phát triển trang Web

• Document

– Statement Of Work (SOW)

– Proposal Document (PD)

– Software Requirements Specification (SRS)

– Software Design Document (SDD)

– Software Test Description (STD)

– Software Test Report (STR)

– Software User Manual (SUM)

8

2. Các tiêu chí thiết kế trang Web

Tiêu chí chính:

• 1. Thiết kế hướng người dùng

• 2. Tính tiện dụng và khả dụng

9

2. Các tiêu chí thiết kế trang Web

• 1. Hãy đơn giản trong thiết kế

• 2. Nên tạo các đường link rõ ràng

• 3. Định hướng minh bạch

• 4. Đưa ra hướng dẫn cho người sử dụng (NSD)

• 5. Cung cấp cho NSD những thứ họ cần

• 6. Hạn chế tối đa thời gian download

• 7. Tránh những đăng ký không cần thiết

• 8. Sử dụng màu sắc hài hòa

• 9. Font chữ sử dụng

10

1. Hãy đơn giản trong thiết kế

Bạn sử dụng dễ dàng

website của tôi?

11

2. Tạo các đường link rõ ràng

Đây là cái gì?

12

3. Định hướng minh bạch

Tôi đang ở đâu?

13

4. Đưa ra hướng dẫn cho NSD

Tôi không hiểu tôi phải

làm như thế nào?

14

5. Cung cấp cho NSD những thứ họ

cần

Người sử dụng muốn điều

gì?

15

6. Hạn chế tối đa thời gian download

Bạn có thể chờ tôi bao lâu?

16

7. Tránh những mẫu đăng ký không

cần thiết

Bạn có thích đăng kí

không?

17

8. Sử dụng màu sắc hài hòa

Bạn có phải là một

họa sĩ?

18

9. Font chữ sử dụng

Đó có phải là một font

chữ đặc biệt?

19

10. Others

• Thêm khoảng trống

• Thêm người dùng

20

11. Principles of Beautiful web

design

• 1. Bố trí và kết hợp (Layout & Composition)

• 2. Màu (Color)

• 3. Kết cấu (Texture)

• 4. Tạo chữ (Typography)

• 5. Hình ảnh (Imagery)

21

1. Trình diễn và kết hợp

22

Tỉ lệ vàng

• Lý thuyết lưới (Grid Theory)

• Tỉ lệ vàng (golden ratio)

– phi = 1.618… (~1.62)

• Quy tắc một phần ba

23

Quy tắc một phần ba

24


25


26

Cân bằng đối xứng

27

gr0w.com

Cân bằng không đối xứng

28

Cân bằng không đối xứng

29

Độ phân giải màn hình

30

3. Các bước thiết kế trang Web

• Bước 1. Xác định chiến lược phát triển

• Bước 2. Đăng ký tên miền

• Bước 3. Biên tập nội dung

• Bước 4. Thiết kế, lập trình website

• Bước 5. Lưu trữ và xuất bản

• Bước 6. Quảng bá và phát triển nội dung

• Bước 7. Chuẩn bị cho những thay đổi tương lai

31

Bước 4. Thiết kế, lập trình website

• Bước 1. Xác định yêu cầu khách hàng

• Bước 2. Phác thảo ý tưởng trên giấy

• Bước 3. Đánh giá mẫu phác thảo

• Bước 4. Thiết kế đồ họa bản đơn sắc

• Bước 5. Phối màu cho giao diện web

• Bước 6. Xây dựng tài liệu về CSS, Script, Ảnh, Folder cho trang web

• Bước 7. Sử dụng các ngôn ngữ để thiết kế giao diện

• Bước 8. Kiểm tra trên các trình duyệt

• Bước 9. Chuyển mã nguồn tới bộ phận phát triển web

32iGURU

Bước 1. Xác định yêu cầu khách hàng

• Mục tiêu

Xác định chính xác yêu cầu của khách hàng về

mục đích sử dụng và thiết kế của trang web.

• Thực hiện

– Các kiến thức về khảo sát trong môn PTTK

– Chuẩn bị các biểu mẫu để lấy yêu cầu khách hàng

– Tư vấn và thương lượng với khách hàng về yêu

cầu

33


• Các nội dung

– Khái quát chức năng, cấu trúc nội dung, về giao

diện, đối tượng sử dụng.

– Xác định các quy trình nghiệp vụ trong hệ thống

– Sắp xếp độ ưu tiên của các yêu cầu

– Đánh giá khách quan các chức năng và hiệu năng

34


• Câu hỏi

– Sau 3 năm nữa website sẽ phục vụ mục đích gì?

– Liệt kê các tính năng mà bạn (khách hàng) nghĩ ra

theo nhóm: bắt buộc, mong muốn, tùy chọn

– Cho biết 3 website mà bạn ưa thích và cảm nhận

của bạn về những website đó.

35

Bước 2. Phác thảo ý tưởng trên giấy

• Mục đích

Định hình bố cục trang web

• Thực hiện

– Sử dụng bút chì, tẩy, thước kẻ để vẽ phác thảo ý

tưởng của mình

– Dựa vào kinh nghiệm của bản thân đưa ra các tiêu

chuẩn nên có.

– Chia trang web làm 2 phần: vùng template theo

chuẩn và vùng hiệu chỉnh

36

Bước 2. Phác thảo ý tưởng trên giấy

– Vùng template: là vùng thay đổi rất ít trong các

trang web

– Vùng hiệu chỉnh: là vùng thay đổi nội dung giữa

các trang web.

– Quy chuẩn các đối tượng để dễ trao đổi và lập

trình

• Ảnh là hình chữ nhật: đánh dấu X

• Dòng văn bản: đường kẻ ngang

37

Bước 3. Đánh giá mẫu phác thảo

• Mục đích

Đánh giá mẫu phác thảo nào phù hợp với

yêu cầu, mong muốn của khác hàng

• Thực hiện

– Đưa ra tối thiểu 3 mẫu thiết kế

– Dán lên tường, mời mọi người cùng xem và góp ý

– Đáp ứng yêu cầu khách hàng?

– Thông tin, chức năng dễ tìm?

– Bố cục gắn kết, thẩm mỹ?40

Bước 4. Thiết kế đồ họa bản đơn sắc

• Mục đích

Đánh giá bản phác thảo trên giấy khi chuyển

sang đồ họa vi tính có phù hợp với yêu cầu của

khách hàng hay không

• Thực hiện

– Sử dụng các công cụ thiết kế đồ họa như:

PhotoShop, VS 2010…để thiết kế mẫu giao diện

web

41


• Thực hiện (tiếp)

– Chưa thực hiện phối màu cho các thành phần, để ở

màu xám

– Tuyệt đối không sử dụng hai màu đen, trắng ở

vùng muốn phối màu

42



– In và dán lên tường. Sau đó mời mọi người đến

nhận xét.

– Thông tin quan trọng có dễ tìm với màn hình thực

không?

– Giao diện có dễ đọc, dễ thực hiện với người dùng

không?

– Giao diện có thể hiện ra tính cách riêng không?

46

Bước 5. Phối màu cho giao diện web

• Mục đích

Phối màu cho các thành phần đơn sắc

• Thực hiện

– Tuân thủ các phương pháp như sau

– Từ yêu cầu khách hàng đưa ra 1 màu chủ đạo, 1

màu thứ cấp và một mảng các màu hỗ trợ để tăng

tính sinh động

– Với text nên có tối đa 3 màu, 3 font.

….

47

Bước 5. Phối màu cho giao diện web


– Giai đoạn phối màu rất dễ bị ảnh hưởng bởi màu

của ảnh như banner…

– Chọn ảnh truyền đạt chính xác thông điệp của

trang Web.

48

Bước 6. Xây dựng chuẩn CSS, Script, Ảnh,

Folder cho trang Web

• Mục đích

Giúp quy trình xây dựng, triển khai, bảo trì ít rủi

ro hơn.

• Các chuẩn

– Định nghĩa các vùng của site, các vùng trong một thẻ

DIV

– Chuẩn đặt tên lớp, id trong CSS

– Chuẩn đặt tên thư mục chứa các thành phần của Web

– Chuẩn đặt tên cho các file HTML, CSS, Script…

52

Bước 6. Xây dựng chuẩn CSS, Script, Ảnh,

Folder cho trang Web

• Ví dụ

53

Bước 7. Sử dụng các ngôn ngữ để thiết kế

giao diện

54

• Mục đích

Thiết kế Web bằng HTML, CSS (JavaScipt,

Ajax, Flash…nếu có)

• Thực hiện

– Chỉ hiển thị dữ liệu: HTML

– Định dạng bố cục trang web: CSS

– Người thiết kế giờ thực hiện công việc lập trình.

Cần hiểu rõ về ngôn ngữ sử dụng.

Bước 8. Kiểm thử trên các trình duyệt

• Mục đích

Kiểm soát việc hiển thị chính xác trang web

trên các trình duyệt khác nhau như thiết kế ở

bước 5.

• Thống kê (4/2008 của LinkHits)

55

Bước 9. Chuyển mã nguồn tới bộ phận

phát triển Web

• Mục đích

Chuyển thiết kế trang Web hiển thị tốt trên các

trình duyệt chính sang bộ phận lập trình

• Thực hiện

– Chuyển các yêu cầu bắt buộc và chuẩn thiết kế tới

các bộ phận liên quan

56

4. Những sai lầm thường gặp khi thiết

kế trang Web

• 1. Link đơn thuần là để nhấn chuột

• 2. Nhấn chuột vào các biểu tượng màu mè

• 3. Chiêm ngưỡng những bức ảnh

• 4. Gắn chặt với tập lệnh script

• 5. Trình diễn quá nhiều thứ

• 6. Quên đặt chữ ở những nơi cần thiết

• 7. Thừa chữ, sai ngữ pháp

• 8. Bảng màu lóa mắt

• 9. Kết cấu các mục thiếu định hướng

• 10. Để nhiều định dạng file khác nhau

57

58

Câu hỏi

58

Documents

Bài 8. Thiết kế trang Web · 2. Các tiêu chí thiết kế trang Web •1. Hãy đơn giản trong thiết kế •2. Nên tạo các đường link rõ ràng •3. Định