QUY TRÌNH THIẾT kế WEB

Quy trình phát triển website chuẩn được mô phỏng theo mô hình thác nuớc, các giai đọan chủ chốt được chia thành các công đọan nhỏ hơn, cho phép thực hiện việc thiết kế web song song một lúc nhiều công đọan. Quy trình chuẩn có thể được chúng tôi thêm, bớt hoặc thay đổi để phù hợp với nhu cầu của dự án.

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 quytrì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ênmá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àngcho 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 đếncá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ếubạ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ìnhnhữ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 chokhá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 đangthắ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ốtnế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ểmmạ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ãydù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ầnliệ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ọnngô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ỏiwebsite 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ỳ trangnà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 rasao? 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ủabạ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ừnggiai đ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ủakhá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 ảnhphá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áchnhanh 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 :

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 quyluậ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ạchdướ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ốitiế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

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ủatrang web muốn thực hiện Đến lúc này có lẽ các bạn cũng đã hình dung ra đượctrang 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àmgì?

Đố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ămweb 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ệnmạ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 nhaumộ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 trangweb 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ậptrung 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ẽ layouttrê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ácthả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 ContentOverview 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ủamì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à nhucầ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ếtnà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ướidà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ìnhphả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ủalayout 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ó đượcnhữ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à columns và modular

multi-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 2website

http://960.gs/

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ỗibê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ếthợ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ể thamkhả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, thamkhảo tại website :

http://978.gs/

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ướccũng như khoảng cách của mỗi cột

http://978.gs/demo/

2 MODULAR GRID

Modular Grid là hệ thống lưới mà không chỉ chia ra nhiều cột mà còn chianhiề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ệcthiế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ànghơ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, saukhi đã có được layout web bằng photoshop thì các bạn tiến hành chuyển nó thànhfile HTML hoàn chỉnh Ở đây mình sử dụng chủ yếu là CSS để thực hiện, với 1 bàiviế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àihướ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

18 CONVERTING A PHOTOSHOP MOCKUP

19 KILLER SITE – FROM ILLUSTRATOR TO XHTM TO DRUBAL

20 FROM PSD TO HTML

21 CODING A CAR SALES LAYOUT

8 ĐIỀU WEB DESIGNER THƯỜNG QUÊN KHI CHẠY SITE MỚI

Mỗi người chúng ta, sau khi làm ra được 1 trang web cho mình hoặc kháchhàng, ai cũng háo hức khởi chạy nó Do sự nôn nóng, háo hức đó, chúng ta thườngdẫn đến việc chúng ta bỏ qua một vài bước mà lẽ ra nó rất hữu ích cho tranng webcủa chúng ta Nay mình tình cờ dạo web, thấy bài viết này trêntrang http://creativenerds.co.uk, đọc thấy có vẻ hay nên dịch lại và post lên đây chomọi người cùng đọc

1 THIẾT LẬP GOOGLE ANALYTICS :

Google Analytics theo mình được biết là một hệ thống phân tích đầy đủ và rất

dễ sử dụng Nó giúp ta theo dõi được tốc độ tăng trưởng của website, lượng kháchtruy cập theo từng ngày, từng tháng, từng năm, những keyword mà người đọc đã

sử dụng để tìm ra web mình, kể cả những nguồn mà họ đã thông qua để đi tới webcủa mình, v.v… Theo mình thì đó là phần mềm anylictical tốt nhất mà các bạn nên

sử dụng

2 KIỂM TRA BROWSER

Hiện nay có rất nhiều Browser được mọi người sử dụng như là GoogleChrome, Firefox, Opera, Internet Explorer, v.v… Tùy sở thích, mục đích sử dụng

mà mọi người sử dụng trình duyệt nào cho phù hợp Do vậy, bạn phải chắc chắnrằng website của bạn có thể hiển thị đầy đủ và chính xác trên mọi trình duyệt Hiệnnay mình thấy có rất nhiều trang chỉ hiển thị đẹp trên Firefox hay Google Chrome,khi duyệt bằng IE hay những trình duyệt khác thì nó hiển thị khác hẳn Điều này cóthể gây bất lợi, làm giảm lượng khách truy cập đến website bạn

3 KIỂM TRA TRÊN ĐIỆN THOẠI DI ĐỘNG (MOBILE)

Với công nghệ hiện nay, rất nhiều người sở hữu cho mình những chiếc điệnthoại cao cấp, những chiếc smart phone có thể duyệt web ở bất cứ nơi đâu mà họmuốn Hầu hết các nhà thiết kế web đều tạo ra một phiên bản di động của trangweb để người dùng có thể dễ dàng xem website của họ trên điện thoại di động mộtcách chính xác, nhanh chóng và ít chi phí nhất Đây là một cách hoàn hảo để đảmbảo trang web hiệu quả cho người dùng.

4 MỘT TRANG LỖI 404

Có thể bạn không biết rằng trang web của bạn có một liên kết bị hỏng, hoặc

có thể hiện tại không có, nhưng tương lai bạn không chắc chẳn được là sẽ hoàntoàn không có một liên kết nào bị phá vỡ trong hệ thống trang web của bạn Do đó,một trang báo lỗi 404 là điều thật sự cần thiết Nó có thể là một điều hướng nhỏ,giúp người dùng biết được rằng website của bạn hiện vẫn đang được duy trì nhưng

họ đang đi vào một liên kết không tồn tại hoặc đã bị phá vỡ, bạn có thể giúp ngườidùng định hướng lại và tìm được chính xác cái họ muốn thông qua trang 404

5 META DESCRIPTION

Đối với mỗi trang trong trang web của bạn, cần có meta description cho từngtrang và các từ khóa (keyword) Điều này sẽ giúp cho các công cụ tìm kiếm nhưgoogle, bing, yahoo, v.v dễ dàng định vị trang web của bạn và hiển thị nó đúngvới những gì mà người dùng đang sử dụng để tìm kiếm Nó sẽ giúp bạn có thêmđược một lượng truy cập đáng kể.

6 FAV ICON

Đa số người thiết kế web đều quên hoặc bỏ qua Fav Icon Tuy nhiên, nó thật

sự cần thiết, bởi vì fav icon có thể được coi là một logo, một thương hiệu cho trangweb của bạn Nó không hiển thị trên trang web, mà nằm ở phía trên thanh menucủa trình duyệt Đối với những người có thói quen mở rất nhiều trang web cùngmột lúc, khi đó trên trình duyệt của họ sẽ xuất hiện rất nhiều tab Đối với mộtlượng tab lớn như vậy, họ sẽ rất khó để đọc tên của từng trang web, và sẽ khôngbiết được tab nào là trang web của bạn Lúc này fav icon chính là cái giúp họ dễdàng nhận biết đâu là trang web của bạn giữa một rừng tab như vậy

7 SITEMAP