Trong một bài viết cách đây không lâu, tớ đã giới thiệu với các bạn hai bước đầu tiên từ những kinh nghiệm của bản thân tớ để giúp những bạn mới bắt đầu và có ý định thiết kế một trang web riêng cho mình – bao gồm quá trình đi tìm cảm hứng từ những thiết kế sẵn có và từ đó bước đầu hình thành ý tưởng cho trang web của riêng mình. Có thể nói ở hai bước đầu tiên, bạn dường như chỉ là đi ngắm những gì của người khác (tìm cảm hứng) và mặc dù đã bắt đầu suy nghĩ về trang web của mình (hình thành ý tưởng), nói chung bạn vẫn chưa thật sự “thiết kế” bất kỳ thứ gì cho trang web của mình. Trong bước thứ 3 mà tớ sẽ mô tả trong bài viết này, các bạn sẽ thật sự bắt đầu phải sắn tay áo và động não đưa ra những ý tưởng của riêng mình và bắt đầu quá trình trình thiết kế một trang web thực sự.

Trước khi bắt đầu, sẽ không là thừa để nhắc lại những gì chúng ta đã có được từ những bước trước đó.

Cảm hứngỞ bước 1 – sau khi xem những thiết kế của người khác, bạn đã bắt đầu có được cái “hứng” để xây dựng một trang web cho riêng mình. Một lần nữa không thể không nhắc lại tầm quan trọng của “cảm hứng”. “Cảm hứng” không thể tự nhiên xuất hiện chỉ vì bạn xác định rằng mình cần có một trang web riêng, mặc dù đó chính là lý do khiến bạn đi tìm cảm hứng. Không giống như trong các lĩnh vực nghệ thuật khác bạn vốn không biết được khi nào thì cảm hứng sẽ đến với mình, trong thiết kế bạn hoàn toàn có thể thực hiện quá trình gọi là “đi tìm cảm hứng” mà tớ đã mô tả ở bài viết trước.

“Cảm hứng” là gì? Đó là một sự thôi thúc mà một khi cảm nhận được nó, bạn chỉ muốn bắt tay vào làm ngay và ước như đừng có gì làm gián đoạn quá trình đó. Một khi bạn đã có được cái gọi là “cảm hứng” đó thì mọi thứ dường như đều tự nhiên xuất hiện – như nó đã có sẵn từ trước đó vậy. Từ kinh nghiệm của tớ, bạn hoàn toàn có thể đánh mất cái cảm hứng của mình một cách nhanh chóng – và điều này rất thường hay xảy ra nếu như bạn bị gián đoạn giữa bước 1 và bước 2 và thậm chí đôi khi là giữa quá trình thiết kế chi tiết. Tớ sẽ nói thêm về điều này ở sau, nhưng điều quan trọng bạn nên nhớ là bạn hoàn toàn có thể tìm lại được nó với một chút thời gian tạm xa nó rồi quay lại bước 1.

Ý tưởngTừ những trang web mà bạn đã xem, bước đầu bạn đã ghi nhận những điểm mà mình muốn thiết kế của mình thể hiện. Mặc dù bạn có thể không nhận ra, chính trong quá trình xem và chọn lọc những điểm nhấn mà bạn thích từ những thiết kế của người khác, bạn đã tự mình khám phá chính mình. Tại sao bạn thích và ghi lại cái cách phối màu mà trang AllWomenTalks sử dụng? Tớ có thể tự tin để khẳng định rằng bạn là một cô gái với một tâm hồn lãng mạn, nữ tính và thậm chí… thích sử uỷ mị.

Bước 3: Xây dựng khung nội dungThế nào gọi là xây dựng khung nội dung? Đó là quá trình đi tìm câu trả lời cho câu hỏi – nếu nhìn từ xa, bố cục trang web của bạn sẽ trông như thế nào. Thuật ngữ trong thiết kế thường gọi quá trình này là “prototyping” – tức xây dựng mô hình mẫu. Một bức hình có thể thay vạn lời giải thích – đây là cái gọi là “khung nội dung” (tớ thực hiện khi thiết kế Người Tập Viết phiên bản 4 hiện tại):

Mục đích của việc thiết kế khung giao diện không phải là để tạo ra giao diện – bạn đơn giản là tạo một mô hình “thô” của giao diện. Bạn không cần quan tâm về màu sắc. Bạn cũng không cần quan tâm về những biểu tượng cụ thể được sử dụng là gì. Nói tóm lại, bạn không phải quan tâm về những chi tiết nhỏ của thiết kế mà chỉ cần tập trung vào bức tranh tổng thể của trang web (tưởng tượng nếu bạn đứng cách xa màn hình 5 mét và nhìn trang web của mình sẽ như thế nào – chắc chắn bạn sẽ không thấy cụ thể nội dung mà chỉ thấy bố cục của nó).

Nếu theo đúng bài bản, việc thiết kế khung nội dung đòi hỏi bạn phải trải qua một quá trình phân tích và tìm hiểu rất chi tiết về nội dung và tương tác thực tế với người dùng – như cái cách mà 37 Signals giới thiệu về quá trình họ thiết kế một mẫu hiển thị thông tin đơn giản của hệ thống. Tuy nhiên, việc áp dụng một quá trình “khoa học” như vậy có lẽ là không phù hợp với phần lớn những trang web nhỏ và đôi khi khiến người thiết kế mới bắt đầu rất nản và có xu hướng bỏ qua khi không thấy được hiệu quả trực tiếp của nó. Vậy nên tớ sẽ tóm tắt nó thành 2 bước chính:

• Xác định và phân loại nội dung sẽ xuất hiện. Ví dụ như nếu đó là một trang blog thì thường sẽ có những đối tượng chính sau: Tiêu đề, danh sách các phân mục, cột nội dung bài viết, các liên kết bạn bè. Tuỳ theo mục đích cụ thể, bạn có thể có thêm những đối tượng nội dung khác – ví dụ như những phản hồi gần đây nhất, cột ghi chép nhanh,…
• Sắp xếp những đối tượng nội dung này theo từng khối.

Một trong những quyết định quan trọng nhất mà bạn sẽ phải lựa chọn trong bước này chính là về bố cục trình bày thông tin – trang web sẽ được chia làm 1 cột, 2 cột hay 3 cột (phổ biến với các trang nội dung). Kinh nghiệm của tớ cho thấy rằng dường như tất cả các thiết kế trang web nội dung đều bắt đầu từ quyết định lựa chọn số cột để trình bày nội dung và nó sẽ ảnh hưởng rất nhiều đến những quyết định cụ thể sau đó. Thông thường thì thông tin này sẽ được hình thành từ 2 bước trước đó – nhưng nếu bạn đã có sẵn ý tưởng từ trước về bố cục giao diện thì bạn vẫn có thể hoàn toàn thực hiện nó trước. Để giúp các bạn có thêm thông tin trước khi lựa chọn – đặc biệt là nếu bạn thiết kế cho blog của mình – bạn có thể thử trả lời câu hỏi Bạn đã có sẵn nhiều nội dung chưa?

Nếu bạn chỉ mới bắt đầu viết mà chọn cho mình một giao diện 3 cột sẽ khiến trang web của bạn trở nên trống trải. Trong tình huống đó, có lẽ bạn nên thử tìm một thiết kế đơn giản 2 cột trong thời gian tích luỹ nội dung – và đến khi đã có tương đối nhiều những bài viết thì bạn có thể chuyển sang giao diện 3 cột. Thực tế là nếu bạn thiết kế blog thì nên cực kỳ hạn chế việc sử dụng giao diện 3 cột ngay cả khi đã có nhiều nội dung. Với độ phân giải của màn hình ở Việt Nam phần lớn chỉ giới hạn ở 1024 x 768, bạn thường sẽ chỉ có tối đa là 950px bề rộng cho 3 cột. Trong blog, cột nội dung chính thường sẽ chiếm ít nhất một nữa bề rộng – tức bạn sẽ chỉ còn khoảng 400px cho 2 cột nội dung còn lại sau khi đã trừ đi các khoảng cách canh lề dừa các cột và với 2 cạnh của cửa sổ trình duyệt. Bạn có thể sẽ nhét được tiêu đề các danh mục và vài liên kết ngắn ở một trong 2 cột đó, nhưng chắc chắn phần còn lại sẽ không đủ để đưa các nội dung lớn.

Ở đây tớ sẽ đi xa hơn một chút so với bước này để nói về những chi tiết kỹ thuật cụ thể – vì tớ đã có kinh nghiệm về những hệ quả tương ứng khi chuyển sang thiết kế – để các bạn có được cái nhìn tổng quan hơn trước khi quyết định lựa chọn, còn lý thuyết về quá trình xây dựng khung nội dung không đòi hỏi bạn phải lo lắng về những chi tiết như vậy.

Các trang chủ báo chí (như VietnamNet) có thể sử dụng giao diện 3 cột bởi họ chỉ cần đưa tiêu đề ngắn của các bản tin trong mỗi cột – nhưng điều đó không áp dụng được với những trang blog. Tất nhiên nói vậy không có nghĩa là giao diện 3 cột hoàn toàn không thể áp dụng thành công trong blog – một ví dụ chính là thiết kế giao diện phiên bản Người Tập Viết 3.0 (nói mà không biết xấu hổ – và cách mà tớ đạt được điều đó là bằng cách giảm cỡ chữ của các cột nội dung phụ (90% cột nội dung gốc); nhưng ngay cả vậy thì những nội dung này vẫn bị giới hạn rất nhiều về độ dài.

Là người thiết kế nên tớ rất coi trọng cách mà nội dung sẽ xuất hiện. Đôi khi sẵn sàng ngồi… viết lại một đoạn chỉ để nó hiển thị “đẹp” hơn. Tớ cũng tạo ra một hệ thống xử lý tự động riêng trong Photoshop (”action”) cho mỗi bức hình tớ đưa lên Người Tập Viết – và thậm chí còn ngồi chọn những bức hình nào có màu sắc phù hợp với giao diện. Bạn cần suy xét xem mình có đủ sự tỉ mỉ như vậy không?

Để kết thúc bài viết, sau đây là một vài kinh nghiệm có thể giúp bạn trong quá trình này:

• Không dùng phần mềm để vẽ. Ở giai đoạn này, bạn cần có khả năng vẽ và xoá thật nhanh để chuyển hoá và thử nghiệm những ý tưởng nảy sinh trong quá trình này. Sử dụng phần mềm dù đơn giản và dễ sử dụng đến mấy cũng sẽ đòi hỏi bạn phải thực hiện nhiều thao tác kỹ thuật.
• Bạn có thể sử dụng bút chì, một cục tẩy và vài tờ giấy – nhưng tốt nhất theo tớ vẫn là có một tấm bảng và vài cây bút lông màu khác nhau (như tớ trong hình ở đầu bài viết). Không chỉ việc xoá và vẽ lại trên bảng dễ hơn rất nhiều so với trên giấy, tớ có cảm giác rằng khi bạn đang đứng và vẽ trên bảng, khả năng “sáng tạo” của bạn sẽ được tăng cường.
• Những thành phần duy nhất mà bạn cần vẽ có lẽ sẽ chỉ là những hình chữ nhật. Bạn biểu diễn danh sách phân mục bằng một cái hộp, cột nội dung bằng một cái hộp khác cao và to hơn,…
• Hãy để những bảng vẽ của bạn xuất hiện trước mắt bạn vài ngày. Điều này dễ thực hiện nếu bạn có một tấm bảng vẽ như tớ – chỉ cần bạn không xoá thì mỗi ngày dù đang làm việc khác bạn cũng sẽ thấy nó – và đôi khi trong những lúc không tập trung như vậy bạn sẽ có được những ý tưởng chỉnh sửa đáng giá.
• Mặc dù chỉ là bản vẻ khung thô, nhìn từ xa bạn phải cảm thấy được cái giao diện và hài lòng với nó. Nếu nhìn vào bố cục mà bạn cảm thấy còn hơi “khó chịu” thì chứng tỏ nó chưa đạt tiêu chuẩn về bố cục. Nên nhớ, mặc dù ở giao diện thực tế, người dùng sẽ không chỉ thấy nội dung như những cái hộp – nhưng trong tiềm thức của bộ não – nội dung sẽ được thể hiện như những cái hộp và nó đóng một phần rất quan trọng trong nhận thức của người dùng về giao diện để họ quyết định có thích nó hay không.