Trình Tự Thiết Kế Một Trang Web

Hầu hết các nhà thiết kế web đều có thể chứng thực được rằng đa phần công việc của họ đều có tính tuần hoàn. Theo sát chi tiết quá trình thiết kế và phát triển một trang web có thể giúp bạn đẩy nhanh tiến độ công việc và giúp cho khách hàng hiểu được vai trò của bạn trong dự án. Bài viết này cố gắng chỉ ra cách phát triển một trình tự thiết kế để các nhà làm web có thể sắp xếp ý tưởng của khách hàng, đẩy nhanh tiến độ dự án và chuẩn bị cho sự phát triển sự nghiệp freelance. Điều đầu tiên là, “quy trình” chính xác nghĩa là gì? Một quy trình phát triển web là một bản phát thảo các bước cần thiết từ bắt đầu đến kết thúc để hoàn thành một dự án thiết kế web đặc trưng. Nó được chia ra và phân loại theo công việc và sau đó phân chia theo cấp độ từng loại tác vụ và nguồn dữ liệu có thể được sử dụng như là một bản đồ chỉ đường cho từng dự án.

Một quy trình đặc trưng

Dưới đây là một quá trình chuẩn được lập ra dựa vào các ví dụ xung quanh cũng như kinh nghiệm bản thân.

1. 1. Lên kế hoạch

Bước lập kế hoạch không thể nào chối cãi là bước quan trọng nhất, bởi vì đây là điểm quyết định và chỉ dẫn để lập nên các bước tiếp theo cho toàn bộ dự án. Đây cũng là giai đoạn đòi hỏi sự hợp tác của khách hàng về các yêu cầu chi tiết và ý muốn.

• Phân tích yêu cầu
  Bao gồm mục đích của khách hàng, người truy cập chính của trang web,, những yêu cầu về chi tiết và càng nhiều thông tin liên quan mà bạn có thể tổng hợp càng tốt. Ngay cả nếu như khách hàng của bạn đã cẩn thận lên kế hoạch cho trang web của họ, thì cũng đừng ngại ngần đưa ra những đề nghị hữu ích từ kinh nghiệm của riêng bạn.
• Tôn chỉ dự án
  Tôn chỉ dự án (hay tài liệu tương đương) tổng hợp các thông tin đã được thu thập và đồng ý ở những điều khoản trước. Những loại giấy tờ này phải ngắn gọn, súc tích và không dùng quá nhiều từ chuyên môn, và nó được dùng làm tham khảo trong suốt dự án.
• Site map
  Một sơ đồ web hướng dẫn người dùng cuối cùng khi họ bị mất phương hướng hoặc cần tìm kiếm một thông tin nào đó nhanh chóng. Đó sẽ là một trang liệt kê đơn giản, bao gồm đường dẫn và cấu trúc phân tầng của trang web.
• Hợp đồng phân định vai trò, quyền sở hữu và các vấn đề tài chính
  Đây là một yếu tố cốt yếu của các loại giấy tờ và thường kèm theo các giấy thanh toán, các điều khoản của dự án, điều khoản kết thúc, sở hữu bản quyền và thời gian hoàn tất. Hãy cẩn trọng khi soạn thảo các loại giấy tờ này, nhưng cũng phải ngắn gọn và hiệu quả.
• Quyền truy cập vào server và xây dựng cấu trúc danh mục
  Những thông tin đặc trưng để đạt được và thông qua bao gồm FTP host, username và password; thông tin đăng nhập control panel; cấu hình cơ sở dữ liệu; và bất cứ ngôn ngữ và ứng dụng đang được cài đặt.
• Quyết định các phần mềm và nguồn dữ liệu cần thiết ( hình ảnh, font chữ…)
  Bên cạnh việc quyết định phương tiện truyền thông bên ngoài cần thiết, bạn phải xác định nơi cần thuê nhà thầu phụ và bất cứ phần mềm hỗ trợ nào mà bạn cần riêng cho mình . Tất cả những thứ đó phải nằm trong ngân sách của dự án, yêu cầu khách hàng thanh toán nếu cần thiết.

2. Thiết kế

Công đoạn thiết kế hẳn nhiên là việc biến thông tin từ bản thảo ở bước trên thành thực tế. Những thứ chính cần phải làm là cấu trúc trang web và quan trọng hơn là hiệu ứng thị giác. Sự hoàn chỉnh của thiết kế là khi website có hình dạng cụ thể để chỉnh sửa, nhưng chưa có thông tin và các điểm đặc trưng.

• Wireframe và các yếu tố thiết kế
  Đây là nơi mà sự ảnh hưởng thị giác của website bắt đầu hình thành. Sử dụng các thông tin được thổng hợp từ khách hàng trong bản kế hoạch, bắt đầu thiết kế bản mẫu sử dụng wireframe. Bút chì và giấy lại bất ngờ có ích trong giai đoạn này mặc dù rất nhiều công cụ online cũng có thể hỗ trợ nhiều.
• Lập ma-ket dựa trên các yêu cầu
  Thiết kế ma-ket trên Photoshop cho phép bạn sửa đổi dễ dàng, nó giữ cho các thiết kế được sắp xếp theo từng lớp, và ưu điểm giúp bóc lớp và mã hóa cho lần làm việc sau.
• Xem xét và phê chuẩn
  Quy trình xem xét, chỉnh sửa và phê duyệt ma-ket thường phải được cả khách hàng và đối tác tham gia. Đây là thời điểm để sửa đổi, không phải là sau khi đã viết mã.
• Tách lớp và viết mã cho XHTML/CSS
  Đã đến lúc viết code. Tách lớp bản ma-ket bằng Photoshop cuối cùng và viết mã HTML và CSS cho thiết kế cơ bản. Các yếu tố tương tác và jQuery để dành lại sau: bây giờ, chỉ tập hợp các yếu tố trực quan vào màn hình, và chắc chắn tất cả các code đều có hiệu lực trước khi thực hiện bước kế tiếp.

3. Phát triển

Phát triển liên quan phần lớn đến việc lập trình, như là việc tải nội dung (của nhóm của bạn hay của khách hàng). Hãy giữ các code được sắp xếp và chú thích, và liên hệ trực tiếp với các chi tiết trong kế hoạch như là hình dáng toàn bộ website. Hãy đi đúng chiếc lược đã đặt ra và tránh các rắc rối trong tương lai bằng cách kiểm tra thường xuyên khi tiến hành.

• Xây dựng khung sườn để phát triển.
  Đây là một điều đặc biệt cần thiết giúp bạn tránh khỏi việc đi chệch hướng trong quá trình. Nếu bạn đang sử dụng Ruby on Rails, một framework ASP/PHP hoặc một hệ thống quản lý nội dung, bây giờ là lúc để thực hiện chúng và sử dụng các phương tiện cơ bản. Làm việc này càng sớm càng chắc chắn server có thể được cài đặt và vận hành một cách trơn tru.
• Mã hóa mô hình cho mỗi trang.
  Một trang web thường có nhiều trang (ví dụ như trang chủ, nội dung chung, bài viết…) có thể dựa vào các khuôn mẫu khác nhau. Tạo ra khuôn mẫu riêng cho mục đích này là một việc tốt.
• Phát triển và thử nghiệm các đặc tính và tương tác.
  Đây là nơi mà các yếu tố lạ lùng có dịp phát triển. Tôi thích quan tâm đến chúng trước khi thêm vào nội dung tĩnh bởi vì trang web ngày nay cung cấp một môi trường làm việc tương đối thông thoáng và gọn gàng. Vài nhà phát triển web thích có những mẫu và sự phê duyệt cũng như sự vận hành ở bước này.
• Bổ sung nội dung.
  Đã đến phần nhàm chán rồi đây: tải tất cả nội dung được cung cấp bởi khách hàng hay tác giả. Mặc dù là việc tầm thường, nhưng cũng đừng bỏ qua, bởi vì ngay cả trang web đơn giản nhất đều yêu cầu bố cục sắp xếp chặt chẽ và chú ý đến từng chi tiết nhỏ.
• Thử nghiệm và kiểm tra đường dẫn và các chức năng.
  Đây là thời điểm tốt để xem lại toàn bộ trang web một cách hoàn chỉnh. Sử dụng phầm mềm quản lý file như là bản đồ hướng dẫn, đi chậm qua từng trang mà bạn tạo ra – tất cả từ trang chủ cho đến trang cuối cùng – và đảm bảo mọi thứ đều hoạt động theo đúng thứ tự và bạn không bỏ sót bất cứ thứ gì.

4. Làm cho trang web hoạt động

Mục đích của việc đưa trang web vào hoạt động là để chuẩn bị cho trang web ra mắt công chúng. Điều này đòi hỏi phải đánh bóng tất cả các yếu tố thiết kế cuối cùng, kiểm tra kỹ càng các hoạt động tương tác và chức năng, và hơn hết là quan tâm đến trải nghiệm của người truy cập. Một bước quan trọng trong giai đoạn này là di chuyển trang web, nếu cần thiết, đến web server không đổi. Kiểm tra môi trường làm việc rất quan trọng vì các server khác nhau có thể có các chức năng khác nhau và cách vậy hành khác nhau ( nghĩa là khác địa chỉ cơ sở dữ liệu chính).

• Chỉnh sửa
  Đặc biệt khi bạn không phải vắt giò lên cổ làm cho kịp hạn nộp, thì việc hoàn chỉnh lại thiết kế có thể tạo ra một khác biệt lớn. Ở đây, bạn có xác định phần nào của trang web có thể được cải tiến bằng cách đơn giản. Sau đó, bạn sẽ tự hào về sản phẩm của mình cũng như khách hàng đã hài lòng.
• Chuyển đến server động
  Điều này có thể có nghĩa là chuyển đến
  Một web server động (hy vọng bạn đã kiểm tra môi trường làm việc), làm website “hiện ra” hoặc xóa bỏ trang “đang trong giai đoạn xây dựng”. Việc xem xét vào phút cuối của một trang web chính thức được thực hiện vào lúc này. Hãy chắc chắn là khách hàng của bạn biết bề công đoạn này, và hãy hồi hộp chờ đợi trang web trở nên thịnh hành.
• Kiểm tra
  Vận hành trang web thông qua chuẩn đoán cuối cùng bằng cách sử dụng các công cụ sẵn có, kiểm tra link có hỏng hay không, khả năng tương tác của trang web, lỗi chính tả và những thứ tương tự. Bạn muốn tự mình tìm thấy lỗi hơn là nghe những lời phàn nàn của khách hàng và người truy cập.
• Kiểm tra thông qua các trình duyệt web (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
  Đừng quên kiểm tra trang web thông qua nhiều trình duyệt web khác nhau vào phút cuối. Chỉ vì code hoạt động không có nghĩa là chúng sẽ long lanh trên trình duyệt IE 6.

Ghi nhận quá trình

Tạo và lưu giữ hai phiên bản của quá trình thiết kế web::
Một bản cho bạn và nhóm của bạn để làm tài liệu tham khảo sau này, và một để đưa cho khách hàng. Sự khác biệt giữa hai phiên bản có thể thấy rõ ràng: của bạn thì rất chi tiết và chứa nhiều nguồn kỹ thuật giúp phát triển; của khách hàng thì rõ ràng, không có bản đồ từ bước bắt đầu đến kết thúc.

Công cụ thường xuyên để ghi lại quy trình kinh doanh này đơn giản là Microsoft Word document, Microsoft Visio và phần mềm như Freemind. Nếu bạn tham vọng,có thể tự thiết kế một công cụ cho riêng mình.

Sử dụng quy trình

Bây giờ, bạn đã hiểu một quy trình là như thế nào, bao gồm cả chi tiết của từng công đoạn, và có một vài ý tưởng để tự xây dựng một quy trình thiết kế Web đặc trưng. Rất tuyệt đây là bước đầu tiên, nhưng nó cũng chỉ là bước đầu tiên! Đừng bỏ lỡ mảnh ghép tiếp theo: biết cách làm cho quy trình này cải thiện hoạt động kinh doanh của bạn và cách sử dụng chúng khi tiếp cận với khách hàng.

Cải tiến quy trình

Quy trình sẽ khác biệt theo từng nhà thiết kế, và từng dự án. Phát triển một quá trình cho riêng bạn, và nhận định cái gì thích hợp cho mình và nhóm của mình, chỉ những gì thực sự hữu dụng. Sau cùng, một freelancer có thể làm việc nghiêm túc trong các thị trường mục tiêu khác nhau.

Danh sách các điều cần làm thì tốt nhưng một quy trình thì lại có thể giúp ích và tỉ mỉ hơn. Rất nhiều nguồn, công cụ và đường dẫn được đăng tải trên các blog về thiết kế web và Twitter feed hướng dẫn nhiều phần của một quá trình. Một cách vô cùng hiệu quả để cải thiện quá trình là thêm vào các đường dẫn nguồn vào mỗi giai đoạn, và phát triển nguồn riêng cho bản thân, như là các tài liệu mẫu được phân loại.

File và kho lưu trữ

Bộ hồ sơ và kho dữ liệu cũng quan trọng như quyền lực vậy. Việc lưu trữ càng thiết thực bao nhiêu, chúng càng chắc chắn hữu ích khi mùa đóng thuế đến hoặc khi một công ty freelance muốn phát triển thêm. Bạn không bao giờ có thể tự hành hạ mình khi sử dụng thời gian làm công việc hiệu quả. Bạn có thể thiết kế một bản mẫu tài liệu chuẩn và cấu trúc tập tin cho tất cả các khách hàng, hoặc duy trì một danh sách và kho lưu trữ cả các khách hàng và dự án đã làm. Bạn có thể tự làm bất cứ thứ gì đơn giản như kế toán cho một doanh nghiệp nhỏ.

Một quy trình giúp khách hàng trở nên thoải mái hơn

Rất nhiều khách hàng coi các nhà phát triển web là một “hộp đen” dù bạn có cố gắng diễn giải cho họ bằng nhiều cách. Với họ, họ đưa ra yêu cầu, đề nghị và nội dung, và xuất hiện một vài lần sau khi website ra đời hay bắt đầu định hình. Họ thường xuyên hoàn toàn không nhận thức được những khía cạnh chính của quy trình, như và việc phân chia giữa thiết kế và phát triển. Cùng với một quy trình rõ ràng và rành mạch trên tay sẽ giúp sắp xếp suy nghĩ của khách hàng và làm họ trở nên thoải mái, không đề cập đến việc giúp họ hiểu tiền của họ sẽ đi về đâu.

Làm một bản phác thảo cơ bản về quá trình khi tôi là một freelancer là một bước thường xuyên mà tôi làm với các khách hàng mới hoặc tiềm năng. Một buổi thảo luận cấp cao về việc “làm cách nào mà nó hoạt động được” cung cấp một khung sườn cho toàn bộ dự án. Một khi bạn có sự thảo luận này, khách hàng sẽ hiểu rõ hơn điều gì đặc biệt cần từ họ, bạn sẽ cung cấp những gì vào lịch trình cố định, loại công việc nào mà bạn đang làm và tương tự. Hầu hết các buổi thảo luận sẽ đánh tan những bất đồng và hiểu lầm vừa mới chớm.

Các nhà thiết kế thường xuyên lấn sâu vào việc thiết kế đến độ không nhận ra mọi người không biết việc họ đang làm hoặc hiểu được các thuật ngữ hay biết các bước liên quan để tạo ra sản phẩm cuối cùng.

Đây là một công việc làm ăn

Đây là một việc kinh doanh, và các bước được vạch ra ở đây là con đường cơ bản cho việc tự quản lý một việc kinh doanh nhỏ. Khi bạn làm việc với khách hàng, đối tác, bạn sẽ nhận ra mình đang ngập trong đống những thứ phải làm và đau đầu vì phải để mắt đến hàng tá việc. Hãy để bản thân nghỉ ngơi một chút, và đầu tư ít thời gian vào việc tìm kiếm các công cụ giúp bạn hoàn tất việc một cách hiệu quả. Một tài liệu phát triển quá trình là một bước đầu tuyệt vời cho hướng đi này.

Lời khuyên

• Hỏi một người bạn không có chuyên môn xem xét lại quy trình của bạn. Nếu họ thấy hợp lý, thì khách hàng của bạn cũng vậy.
• Sử dụng quá trình của những nhà thiết kế khác như một sự khởi đầu để xây dựng và mở rộng quá trình của mình. Tham khảo các nguồn liên quan.
• Tạo ra các tài liệu mẫu và ứng dụng web vào quá trình. Điều này sẽ giúp tiết kiệm thời gian và làm bạn trở nên chuyên nghiệp hơn.

Rủi ro

Một quy trình không thể được áp dụng cho tất cả các dự án. Mặc dù quy trình của bạn hữu dụng khi bạn tiếp cận làn đầu với khách hàng trong buổi thảo luận lên kế hoạch, hãy xem xét chúng kỹ lưỡng trước khi thảo luận để chắc chắn chúng thích hợp với dự án.