Thiết kế Web 1

Quy trình thiết kế giao diện Website

Vũ Chí Hi uếhieuvc@gmail.com

Thiết kế Web 1

2

Gi i thi uớ ệ Yêu c u thi t k giao di nầ ế ế ệ Quy trình thi t k giao di nế ế ệ

Nội dung

Thiết kế Web 1

3

Thi t k giao di n: Designer, Marketerế ế ệ Là m t công vi c trong quy trình phát tri n Websiteộ ệ ể Thi t k giao di n t t làm tăng hi u qu c a ế ế ệ ố ệ ả ủ

Website

Giới thiệu

Thiết kế Web 1

4

Tính th m mỹẩ◦ B c c (layout)ố ụ◦Màu s cắ◦Hình nh,…ả

Tính phù h pợ◦ Ch đ websiteủ ề◦Đ i t ng ng i dùngố ượ ườ

Tính hi u quệ ả◦ T i nhanh: không l m d ng hình nh kích th c l nả ạ ụ ả ướ ớ◦Đúng chu n (ẩ www.w3c.org)

Tính thân thi n: d b o trì, d phát tri nệ ễ ả ễ ể

Yêu cầu thiết kế giao diện

Thiết kế Web 1

5

Xác đ nh yêu c u khách hàngị ầ Phác th o ý t ng trên gi yả ưở ấ Đánh giá m u phác th oẫ ả Thi t k đ h a b n đ n s cế ế ồ ọ ả ơ ắ Ph i màu cho giao di n webố ệ Xây d ng tài li u v chu n CSS, client script, nh, ự ệ ề ẩ ả

folder cho trang web S d ng ngôn ng đánh d u thi t k giao di nử ụ ữ ấ ế ế ệ Test giao di n trên các trình duy tệ ệ Chuy n mã ngu n t i b ph n phát tri n webể ồ ớ ộ ậ ể

Quy trình thiết kế giao diện

Thiết kế Web 1

6

M c tiêuụ◦ Xác đ nh yêu c uị ầ◦ T v n cho khách hàngư ấ

Tiêu chí◦ Yêu c u ph i bao quát giao di n, ch c năng, c u trúc n i ầ ả ệ ứ ấ ộ

dung, đ i t ng xem websiteố ượ◦ Ch đ ng tìm hi u yêu c u tr c khi ti p c n khách hàngủ ộ ể ầ ướ ế ậ◦ Xây d ng b ng câu h i cho khách hàngự ả ỏ

Sau 3 năm n a website sẽ ph c v m c đích gì?ữ ụ ụ ụ Li t kê các tính năng c a website?ệ ủ Cho bi t 3 website a thích? Đi m a thích?ế ư ể ư

B1. Xác định yêu cầu khách hàng

Thiết kế Web 1

7

M c tiêu: đ nh hình b c c trang webụ ị ố ụ Tiêu chí◦Màn hình ng i dùng? (15”, 17”,…)ườ◦ Banner không quá 1/3 màn hình th cự◦ Sitebar không quá 25% chi u r ng trang webề ộ

Chia trang web thành 2 vùng◦ Vùng template

Không/ít hi u ch nh trong các trang web c a websiteệ ỉ ủ◦ Vùng hi u ch nhệ ỉ

Có thay đ i n i dung trong h u h t các trang ổ ộ ầ ế

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

Thiết kế Web 1

8

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

Thiết kế Web 1

9

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

Thiết kế Web 1

10

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

Thiết kế Web 1

11

M c đíchụ◦ Phù h p yêu c uợ ầ◦Đúng mong mu n khách hàngố

Tiêu chí◦ Xây d ng 3 m u phác th oự ẫ ả◦ Tr l iả ờ

M u thi t k đáp ng yêu c u khách hàng?ẫ ế ế ứ ầ H thích m u nào?ọ ẫ Tìm thông tin, ch c năng có d không?ứ ễ B c c r i r c không? Th m mỹ không?ố ụ ờ ạ ẩ

B3. Đánh giá mẫu phác thảo

Thiết kế Web 1

12

M c tiêuụ◦ Chuy n m u phác th o trên gi y sang đ h a vi tínhể ẫ ả ấ ồ ọ◦ Ki m tra b c c có phù h p yêu c u không?ể ố ụ ợ ầ

Tiêu chí◦ Ch a ph i màu, ch s d ng màu sámư ố ỉ ử ụ◦ Sau khi thi t k xong, ti p t c đánh giá nh b c 3ế ế ế ụ ư ướ

B4. Thiết kế đồ họa bản đơn sắc

Thiết kế Web 1

13

B4. Thiết kế đồ họa bản đơn sắc

Thiết kế Web 1

14

M c tiêuụ◦ Ph i màu cho b c c đ n s c đã đáp ng yêu c u giao ố ố ụ ơ ắ ứ ầ

di nệ Tiêu chí◦D a vào màu s c yêu c u t b ng câu h i: màu ch đ o, ự ắ ầ ừ ả ỏ ủ ạ

màu th c p, màu chóiứ ấ◦Màu n n: tùy vào m c đích websiteề ụ◦Màu ch : t i đa 3 màu, 3 font, 3 c ch , 3 ki u ch ,…ữ ố ỡ ữ ể ữ

B5. Phối màu cho giao diện Web

Thiết kế Web 1

15

B5. Phối màu cho giao diện Web

Thiết kế Web 1

16

B5. Phối màu cho giao diện Web

Thiết kế Web 1

17

M c tiêuụ◦ Giúp website d b o trì, n i dung hi n th t t h n v i t l ễ ả ộ ể ị ố ơ ớ ỷ ệ

mã th pấ◦ Giúp quy trình s n xu t, tri n khai, b o trì ít r i roả ấ ể ả ủ

Tiêu chí◦Đ nh nghĩa vùng site, các vùng trong m t th DIVị ộ ẻ◦ Chu n đ t tên cho CSS, nhẩ ặ ả◦ Chu n đ t tên cho các thành ph n, th m c c a websiteẩ ặ ầ ư ụ ủ◦ Chu n đ t tên cho các file CSS, HTML, JS, XMLẩ ặ

B6. Xây dựng chuẩn CSS, client script, ảnh, folder cho trang Web

Thiết kế Web 1

18

B6. Xây dựng chuẩn CSS, client script, ảnh, folder cho trang Web Ví d : Chu n đ t tên trong m t th DIVụ ẩ ặ ộ ẻ

Thiết kế Web 1

19

M c đíchụ◦ Thi t k web b ng HTML, CSSế ế ằ◦ S d ng Flash, JavaScript, AJAX,… n u cóử ụ ế

Tiêu chí◦ S d ng Photoshop đ c t thành các nh nhử ụ ể ắ ả ỏ◦ S d ng HTML, CSS thi t k b c cử ụ ế ế ố ụ

Yêu c uầ◦ C n hi u rõ v HTML, CSS, JavaScript. N u không giao di n ầ ể ề ế ệ

sẽ hi n th không nh b n vẽ đ h a vi tính trên các trình ể ị ư ả ồ ọduy t khác nhauệ

B7. Sử dụng ngôn ngữ đánh dấu thiết kế giao diện

Thiết kế Web 1

20

M c tiêuụ◦Hi n th chính xác giao di n web nh thi t k trên các ể ị ệ ư ế ế

trình duy t ph bi nệ ổ ế Tiêu chí◦ Ki m tra trên các trình duy t ph bi n nh tể ệ ổ ế ấ◦ T p trung các trình duy t khách hàng s d ngậ ệ ử ụ◦ Theo dõi lo i trình duy t khách hàng dùng đ truy c p ạ ệ ể ậ

website (công c Google Analytics) đ c p nh t theo xu ụ ể ậ ậh ng ng i dùngướ ườ

◦Nghiên c u kỹ CSS ng d ng cho nhi u trình duy t (CSS ứ ứ ụ ề ệhack)

B8. Test trên các trình duyệt

Thiết kế Web 1

21

Bi u đ th ph n trình duy t web (báo cáo ngày ể ồ ị ầ ệ30/04/2008 c a LinkHits)ủ

B8. Test trên các trình duyệt

Thiết kế Web 1

22

M c tiêuụ◦ Chuy n toàn b mã thi t k giao di n (HTML, CSS, JS,…), ể ộ ế ế ệ

hình nh, tài li u mô t t i b ph n l p trìnhả ệ ả ớ ộ ậ ậ Tiêu chí◦ Ph i có tài li u mô t đ b ph n l p trình hi u ý đ thi t ả ệ ả ể ộ ậ ậ ể ồ ế

kế

B9. Chuyển mã tới bộ phận lập trình

Thiết kế Web 1

23