QUY TRÌNH THIẾT KẾ WEB – PART 1 : CLIENT SURVEY
Như mình đã nói ở bài viết trước, khi thiết kế web phải tuân thủ theo một quy
trình. Nếu bạn nóng lòng bắt tay vào thiết kế trên máy tính hoặc vẽ ra giấy liền thì
sẽ không mang lại hiệu quả cao được. Do đó, bạn hãy tạm thời gác mọi việc trên
máy tính lại, đi gặp trực tiếp khách hàng để trao đổi và xác định hướng đi rõ ràng
cho website mà bạn đang muốn thực hiện. Với bài viết này, mình sẽ giới thiệu đến
các bạn bước đầu tiên của quy trình thiết kế web, đó là khảo sát khách hàng, nếu
bạn làm website cá nhân cho bản thân mình, bạn cũng nên tự đặt ra cho mình
những câu hỏi khảo sát, đây là việc quan trọng cần làm để xác định mục đích và
hướng phát triển cho website.
Đầu tiên, bạn phải hiểu rõ vì sao khách hàng muốn thực hiện website này?
Bạn cần phải đặt những câu hỏi cụ thể để khách hàng trả lời. Việc đặt câu hỏi cho
khách hàng là một bước rất quan trọng để tìm hiểu một cách tổng quát về mục tiêu
và hướng phát triển mà họ muốn cho website của mình. Đến đây thì có lẽ bạn đang
thắc mắc, không biết mình sẽ phải đặt những câu hỏi như thế nào, cần xác định rõ
những nội dung cụ thể gì? Bạn cứ yên tâm rằng công việc của bạn sẽ trở nên rất tốt
nếu bạn đặt những câu hỏi tập trung về các ý sau đây :
MESSAGE – THÔNG ĐIỆP MÀ KHÁCH HÀNG MUỐN ĐƯA LÊN
WEBSITE
1.

Bạn muốn thông tin ưu tiên được truyền tới người xem là gì?

2.

Khách hàng bạn muốn hướng tới thuộc giới nào? độ tuổi bao nhiêu?

3.

Làm thế nào để công ty của bạn trở nên khác biệt với đối thủ cạnh tranh?

4.

Bạn hãy cho biết lý do chính nào mà khách hàng chọn công ty này? điểm
mạnh của công ty là gì?
PERCEPTION – NGƯỜI SỬ DỤNG NHẬN THỨC NHƯ THẾ NÀO VỀ
WEB NÀY

1.

Bạn muốn người sử dụng nhận xét như thế nào khi vào website này? Hãy
dùng 3 tính từ để mô tả. Vd : có uy tín, thân thiện, dí dỏm, trẻ trung, năng động,
trang trọng, v.v…)

2.

Những gì bạn cho là thách thức lớn nhất trong việc đưa hình ảnh công ty bạn
đến với khách hàng?

3.

Bạn hãy liệt kê ít nhất 3 website mà bạn thích, và hãy cho biết bạn thích điều
gì qua những website đó (nút liên kết, màu sắc, bố cục, hình ảnh, v.v…). Bạn cần
liệt kê sẵn để đưa khách hàng chọn

4.

Ngược lại, bạn cũng liệt kê ít nhất 3 website mà bạn không thích, nói rõ vì
sao không thích.


5.

Liệt kê các website của các công ty cùng ngành nghề, các đối thủ cạnh tranh,
cho biết điều bạn thích và không thích ở những website đó.
ACTION – NGƯỜI SỬ DỤNG SẼ THAO TÁC NHỮNG GÌ TRÊN
WEBSITE CỦA BẠN?

1.

Thao tác đầu tiên người sử dụng phải làm khi vào home page? (Vd : chọn
ngôn ngữ, đăng nhập, download, v.v..)

2.

Bạn muốn người sử dụng phải thực hiện thao tác nào trước khi rời khỏi
website của bạn?


3.

Thao tác nào mà bạn muốn người sử dụng có thể thực hiện tại bất kỳ trang
nào? (Vd : search, add to cart, buy, v.v…)
CONTENT – NỘI DUNG CỦA WEBSITE NHƯ THẾ NÀO?

1.

Hãy cho biết cấu trúc thông tin nội dung như thế nào và nó được sắp xếp ra
sao? Hãy mô tả chi tiết các đề mục, tiêu đề, các nội dung chính, phụ…

2.


Nội dung, thông tin nào bạn muốn xuất hiện xuyên suốt các trang?

3.

Những thông tin, nội dung trên website được cung cấp từ ai? Nếu sử dụng từ
những nguồn khác bên ngoài, ai là người có trách nhiệm phê duyệt? nội dung có
được kiếm chứng rõ ràng hay không?
TECHNOLOGY – SỬ DỤNG NHỮNG KỸ THUẬT NÀO CHO
WEBSITE CỦA BẠN?

1.

Trình duyệt nào mà bạn muốn sử dụng?

2.

Bạn có muốn sử dụng kỹ thuật nào như là Flash, Javascript, DHTML …
không? Nếu có, nó sẽ giúp ích gì cho bạn?

3.

Bạn có sử dụng database không? Nếu có hãy mô tả chi tiết

4.

Bạn có cần tính bảo mật? Hãy cho biết cấp độ bảo mật.
MARKETING – CÁC CHIẾN LƯỢC QUẢNG CÁO VÀ CẬP NHẬT
THÔNG TIN CHO WEB


1.

Kế hoạch marketing cho sự khởi đầu của bạn là gì?

2.

Làm thế nào trang web này sẽ giúp đáp ứng mục tiêu của bạn?


3.

Bạn đã có kế hoạch hay chiến lược quảng cáo cho website này chưa?

4.

Bạn có muốn thường xuyên cập nhật thông tin cho website không? Ai sẽ là
người chịu trách nhiệm cập nhật thông tin đó?

5.

Điều gì bạn cảm thấy là vấn đề quan trọng nhất cho việc kinh doanh của
bạn? (Vd: thay đổi hình ảnh, tìm kiếm khách hàng, thúc đẩy hoạt động của công ty,
v.v…)
ADMINISTRATIVE – QUẢN TRỊ VÀ BẢO TRÌ WEBSITE

1.

Bạn đã nghĩ ra tên miền (Domain Name) chưa? Nếu có, nó đã được đăng ký
chưa? Hãy chuẩn bị sẵn 3 tên miền liên quan đến công ty mình.


2.

Ai là người chịu trách nhiệm chính và có quyền cao nhất về trang web này?
Hãy cho biết họ tên, email, số điện thoại

3.

Ngày trang web chính thức hoạt động là ngày nào? Có những kế hoạch nào
để chuẩn bị cho ngày đó? (Vd : chiến lược PR, hội chợ thương mại, v.v…)

4.

Ngân sách dành cho việc thực hiện website này? Bạn muốn thanh toán từng
giai đoạn hay không?
Ngoài những điều trên, bạn cũng có thể tham khảo cảm nhận về màu sắc của
khách hàng, để từ đó có thể chọn màu sắc phù hợp cho website.
QUY TRÌNH THIẾT KẾ WEB – PART 2 : SITEMAP
Hôm nay mình sẽ giới thiệu đến các bạn phần tiếp theo của quy trình thiết kế
web đó là cách lập Sitemap. Với bài viết này, chúng ta sẽ được hiểu thêm về
sitemap cũng như quy luật đặt tên cho các trang trong trang web của mình.


I. SITEMAP LÀ GÌ?
– Sitemap là sơ đồ cấu trúc của một website, được thể hiện bằng hình ảnh
phác thảo theo sơ đồ nhánh cây (Hierarchical sitemap)
– Sitemap còn cho ta một cái nhìn tổng quát giữa các thông tin như :
+ Sự liên kết giữa các trang : động (dynamic, có code, database) – tĩnh (static)
+ Tên của tửng trang web, hệ thống số tham chiếu, v.v…
– Sitemap nên được thực hiện một cách rõ ràng để tìm thông tin một cách
nhanh chóng.


II. PHÁC THẢO SITEMAP
Khi phác thảo sitemap, các trang cần phải có những thông tin sau :
•

Tên trang

•

Tên tập tin : *.html

•

Số tham chiếu
Và chúng được thể hiện dưới dạng sơ đồ như sau :


III. Ý NGHĨA CÁC TRANG
1. Splash page : có thể có hoặc không, thường là để biểu diễn khi mới vào
trang web (intro)
2. Homepage : bắt buộc phải có, trang chủ là trang của một website, tại đây sẽ
chứa các thông tin ưu tiên nhất, và các liên kết để đến trang khác.
3. Các trang khác : là các trang chứa thông tin, hình ảnh của từng đề mục.


IV. QUY LUẬT ĐẶT TÊN
1. Tên trang :
– Đặt tự do sao cho vừa ý với nội dung của trang
– Tên này chỉ thể hiện trên sitemap
– Tên trang nên là nút liên kết

2. Tên tập tin :
Vì tên file sẽ được lưu trên máy vi tính nên bắt buộc phải tuân theo các quy
luật sau :
– Tập tin đầu tiên phải có tên index.html
– Tên file không được có khoảng trắng, nếu muốn tách ra phải có ký tự gạch
dưới “_”
– Không nên viết chữ hoa
– Các tập tin phải đặt tên sao cho gợi ý để dễ tìm, nên đặt theo quy luật nối
tiếp (portfolio.html -> port_web.html, port_logo.html)
3. Số tham chiếu
Thông thường, trang Home được quy định là 1.0
– Nếu có trang Splash thì sẽ là 0.0


– Các trang cấp 1 sẽ là : 1.0 ; 2.0 ; 3.0 ; 4.0 ; …
– Các trang cấp 2 sẽ là : 1.1 ; 2.1 ; 3.1 ; 4.1 ; ….
– Các trang cấp 3 sẽ là : 1.1.1 ; 1.1.2 ; 1.1.3 ; …

V. TIPS
– Tùy theo lượng thông tin mà nên thực hiện website rộng (wide site) hay sâu
(deep site)
– Trước khi thực hiện sitemap, những thông tin nào nằm ở chỗ nào, khi đặt
tên cho nút liên kết thật gợi ý dễ hiểu, gắn với nội dung của chủ đề đó, thông
thường nên là tên trang.
QUY TRÌNH THIẾT KẾ WEB – PART 3 : CONTENT OVERVIEW
Ở những bài viết trước, các bạn đã có tất cả nội dung survey và sitemap của
trang web muốn thực hiện. Đến lúc này có lẽ các bạn cũng đã hình dung ra được
trang web của mình sẽ như thế nào. Nếu là bạn, ở bước tiếp theo này bạn sẽ làm
gì?
Đối với một website có giao diện đẹp, màu sắc bắt mắt, nội dung thú vị, cách

sử dụng dễ dàng sẽ gây ấn tượng với người truy cập, từ đó họ sẽ còn trở lại thăm
web của bạn nhiều lần nữa. Vì vậy, bước này là bước giúp bạn hình thành nên diện
mạo trang web của bạn, kết hợp các yếu tố hình thành nên trang web lại với nhau
một cách chặt chẽ và hiệu quả nhất.


Nếu bạn nghĩ đây là lúc bạn bắt đầu với Photoshop, Illustrator hay Fireworks?
Có lẽ là không, hay ít ra là không nếu bạn muốn có nhiều hơn 1 ý tưởng cho trang
web. Ngay lúc này đây, một tờ giấy trắng và cây bút chì là thứ cần thiết để bạn tập
trung vào thiết kế mà không bận tâm đến những công nghệ đằng sau nó. Thực tế,
nếu bạn phác thảo ra nhiều ý tưởng trên giấy trong 10 phút thì bạn cũng sẽ layout
trên máy được như thế.
Dựa trên thông tin của bản survey, thông tin về sitemap, bây giờ bạn cần phác
thảo ra các khu vực cần thiết cho web của bạn. Vì thế, mục đích của phần Content
Overview này là một bản phác thảo mô tả chi tiết của một trang web. Khi này chưa
sử dụng hình ảnh và text thật mà chỉ thực hiện những đường nét phác thảo
(wireframe) để tượng trưng cho vị trí các yếu tố. Nơi bạn sẽ đặt logo, navigation,
main content, sidebar và footer? Làm thế nào để chúng có mối quan hệ chặt chẽ
với nhau?


QUY TRÌNH THIẾT KẾ WEB – PART 4 : LAYOUT VỚI GRID
SYSTEM
Với những bài viết trước, chúng ta đã có tổng quan về cấu trúc website của
mình. Bài viết này, mình sẽ giới thiệu đến các bạn một số hệ thống lưới thường
được sử dụng cho web design. Lưới thì có nhiều kiểu, tùy mục đích sử dụng và nhu
cầu của mỗi người mà dùng những kiểu lưới khác nhau. Tuy nhiên, với bài viết
này, mình chỉ giới thiệu các kiểu lưới được nhiều người sử dụng cho web, còn lưới
dành cho layout in ấn thì mình sẽ giới thiệu ở bài viết khác.
Các bạn có thường xuyên sử dụng lưới không? Các bạn có biết tại sao mình

phải sử dụng lưới khi thiết kế không? Hãy thử nhìn 2 cái layout dưới đây :


Chúng ta dễ dàng nhận thấy, với bấy nhiêu yếu tố, nhưng cách sắp xếp của
layout bên phải trông gọn gàng, chặt chẽ và đẹp mắt hơn nhiều. Còn layout bên trái
thì lộn xộn, trông như được sắp đặt một cách ngẫu nhiên.
Vậy, hệ thống lưới rất quan trọng trong mỗi thiết kế, nếu bạn muốn có được
những bố cục chặt chẽ, gọn gàng thì bạn không thể nào bỏ qua được hệ thống lưới.
Đối với web design, hệ thống lưới được nhiều người dùng nhất đó là multicolumns và modular.
1. MULTI-COLUMNS :
Đối với hệ thống lưới multi-columns, các bạn có thể tham khảo thêm tại 2
website
/>

960 Grid System đơn giản là hệ thống lưới cho nội dung website có độ rộng là
960 pixel.
Với hệ thống lưới này có 2 phần : 12 column và 16 column.
Trong hệ thống 12 column, mỗi cột sẽ có độ rộng là 60px, lề trái và phải mỗi
bên là 10 px, khoảng cách giữa các cột là 20px. Ngoài ra, ta có thể linh hoạt kết
hợp các cột lại như sau :


Từ đó, ta thấy độ rộng các cột có thể là 60, 140, 220, 300, 380, 460, 540, 620,
700, 780, 860 và 940 pixel.
Tương tự, trong hệ thống 16 column, mỗi cột sẽ có độ rộng là 40 px. Ta cũng
có thể kết hợp chúng lại như sau :

Độ rộng mỗi cột có thể là 40, 100, 160, 220, 280, 340, 400, 460, 520, 580,
640, 700, 760, 820, 880 và 940 pixel.
Đây là một ví dụ cho việc sử dụng hệ thống 12 column, các bạn có thể tham

khảo thêm nhiều ví dụ khác tại website của 960 Grid System


Các bạn có thể download file PSD có tạo sẵn Grid ở đây, down về chỉ việc sử
dụng, không cần phải tính toán lại nữa, rất tiện lợi cho việc thiết kế của mình
Click Here To Download
Ngoài 960 Grid System, các bạn còn có thể sử dụng 978 Grid System, tham
khảo tại website :
/>

Với hệ thống Grid này, các bạn xem demo tại đây để biết thêm về kích thước
cũng như khoảng cách của mỗi cột
/>
2. MODULAR GRID
Modular Grid là hệ thống lưới mà không chỉ chia ra nhiều cột mà còn chia
nhiều hàng, tạo thành các hình vuông hay hình chữ nhật đều nhau, giúp cho việc
thiết kế linh hoạt hơn


Với hệ thống lưới này, khi chia các phần trong website của bạn sẽ dễ dàng
hơn, mình cũng rất hay sử dụng Grid này

Dưới đây là một ví dụ website sử dụng modular grid


Thật đơn giản để thực hiện phải không các bạn?
QUY TRÌNH THIẾT KẾ WEB – END : PSD TO HTML
Đây là bước cuối cùng trong loạt bài hướng dẫn quy trình thiết kế web, sau
khi đã có được layout web bằng photoshop thì các bạn tiến hành chuyển nó thành
file HTML hoàn chỉnh. Ở đây mình sử dụng chủ yếu là CSS để thực hiện, với 1 bài

viết thì không thể nào nói hết được, do đó, mình giới thiệu đến các bạn những bài
hướng dẫn chuyển từ PSD sang HTML của các designer trên thế giới. Hy vọng sẽ
hữu ích cho các bạn!
1. THE DESIGN LAB: PSD CONVERSION


2. FROM PSD TO HTML, BUILDING A SET OF WEBSITE DESIGNS
STEP BY STEP

3. CODING: DESIGN LAB TV STYLED LAYOUT


4. PSD TO CSS/HTML IN EASY STEPS – PART 1

5. SLICE AND DICE THAT PSD


6. CONVERTING A PHOTOSHOP MOCKUP: PART TWO, EPISODE
ONE

7. BUILD A SLEEK PORTFOLIO SITE FROM SCRATCH


8. PORTFOLIO LAYOUT – LEARN TO CODE IT

9. CONVERTING A DESIGN FROM PSD TO HTML


10. HOW TO CONVERT A PSD TO XHTML


11. HOW TO CONVERT PSD TO HTML


12. CREATING A CSS LAYOUT FROM SCRATCH

13. PSD > HTML/CSS


14. ENCODING A PHOTOSHOP MOCKUP INTO XHTML & CSS

15. CSS TEMPLATE TUTORIAL


16. PORTFOLIO LAYOUT 4: THE CODE

17. TUTORIAL CODING A LAYOUT