Thiết kế và thiết kế lại

Tuần vừa rồi tranh thủ mấy ngày còn lại chưa phải lo chuyện nộp bài đã tranh thủ làm được một số chuyện. Ngoài việc tiếp tục xây dựng tính năng cho dự án Nhạc Điệu (tiết lộ nhỏ là hiện tại đã đưa tính năng này lên trang web chính thức nhưng vẫn còn "giấu" - nếu bạn phát hiện ra cách nào để kích hoạt nó thì cứ việc dùng thử :) ) còn hoàn tất được hai dự án nhỏ khác.

Một trong số đó là thiết kế lại trang chủ của tớ tại leduytien.com - một việc tớ đã định từ rất lâu mà mãi đến bây giờ mới thực hiện được. Dự án thứ hai có ý nghĩa hơn một chút vì đây là lần đầu tiên tớ thiết kế theo "đơn đặt hàng" từ "khách hàng" thật sự. Chẳng là nhà hàng nơi tớ đang làm việc hiện cần phải thay thực đơn và đang kiếm người thiết kế. Tất nhiên, như các bạn đã đoán ra, tớ đã nhanh chóng đảm nhận lấy công việc này. Tuy đã từng thiết kế khá nhiều các ấn phẩm dạng in, đây là lần đầu tiên thiết kế của tớ sẽ được đưa vào sử dụng trong thực tế (những lần trước chủ yếu là thiết kế các tài liệu, chuyên đề hồi cấp 3) nên cũng khá hồi hộp. Tuy nhiên, sản phẩm cuối cùng nói chung đã làm hài lòng cả tớ và ông chủ và đã bắt đầu được sử dụng. Trong bài viết này, tớ sẽ giải thích những chi tiết mà tớ gặp phái trong quá trình thiết kế.

leduytien.com

Có thể các bạn không biết nhưng tớ vẫn xem trang leduytien.com như là trang chủ chính thức của mình (nguoitapviet.info chỉ là một trang để viết bài). Ðó là trang web mà tớ sẽ giới thiệu khi có ai đó hỏi về địa chỉ trang web của tớ. Mục đích chính của trang web giống như là một điểm duy nhất mà người ta cần đến nếu muốn biết thêm về tớ - giống như một ID trên mạng vậy. Đó cũng là trang web đầu tiên tớ đưa lên Internet (chỉ 2 tháng sau khi sang bên này) và cũng là trang ít được cập nhật nhất. Chính vì ý nghia quan trọng của nó nên thiết kế của trang web đóng vai trò rất quan trọng. Nó giống như một cái gì đó thể hiện phong cách thiết kế đặc trưng của tớ. Dù rất muốn thiết kế lại (bởi thông tin trên mạng đã cũ và không còn hoàn toàn đúng nữa), nhưng nghĩ ra một thiết kế để hài lòng bản thân mình quả là rất khó - và đó là lí do tại sao đến bây giờ tớ mới thực hiện thiết kế lại.

So với những gì tớ biết khi thiết kế phiên bản đầu tiên của leduytien.com, giờ đây tớ đã học được rất nhiều thứ về thiết kế web. Nếu như tphiên bản đầu tiên được tạo dáng bằng ImageReady, sử dụng bảng để bố cục thì giờ đây tớ đã có thể thiết kế CSS. Nếu như tại thời điểm đó tớ chỉ biết cách đưa thông tin lên thì giờ đây tớ cũng biết cách trình bày thông tin một cách hiệu quả. Và bắt mắt. Chỉ có một điều không đổi là tớ vẫn thích tông màu trắng-đen-xám bởi nó tạo cảm giác khá "sang" và "chuyên nghiệp".

Tất cả những yếu tố trên được tổng hợp để thiết kế lại trang web của tớ. Vẫn sử dụng tông màu đen-xám-trắng nhưng giờ đây màu trắng được sử dụng nhiều hơn, xuất phát từ ý kiến của một số bạn cho rằng trang web cũ trong quá tối. Tớ cũng quyết định lọc bớt những thông tin không cần thiết và chỉ để lại rất vắn tắt những chi tiết quan trọng (hehe, và tất nhiên là có cả "the wife in my dream" - một phần được nhiều "phản hồi" nhất). Một điểm khá thú vị trong phiên bản này là tớ sử dụng một vài hiệu ứng Javascript tự tạo và cả từ một số thư viện khác để làm tăng hiệu ứng trực quan. Hi vọng trang web sẽ thực hiện được điều mà tớ trông đợi - đó là tạo ấn tượng với người xem về phong cách và khả năng của tớ.

Ấn phẩm đầu tiên

Như đã giới thiệu ở đầu bài, dự án thứ hai tớ hoàn thành trong tuần vừa rồi là sản phẩm đầu tiên mà tớ thực hiện theo yêu cầu của một "khách hàng" thực sự và được áp dụng trong thực tế. Và cái gì cũng vậy - là cái đầu tiên bao giìơ cũng quan trọng và có ý nghĩa nhất.

Khách hàng: Nhà hàng nơi tớ làm thêm hiện tại có tên là "Cố Đô", nằm trên con đường đông đúc và đẹp nhất của thành phố. Tuy nhiên, quán ăn lại khá nhỏ và bình dân. Đó có lẽ cũng là một điểm khiến người ta thích nó (món phở ở đây tuyệt vời. Giống y ở Việt Nam, thậm chí có thể hơn nhiều quán)

Ðăc điểm thực đơn cũ:

Thực đơn cũ có tổng cộng 6 trang với 63 món ăn trong 6 phân mục. Món ăn được trình bày với tên tiếng Việt và một dòng chữ giải thích bằng tiếng Anh (và cả giá). Một điểm dễ nhận ra là vì lí do có quá ít không gian, toàn bộ thực đơn không sử dụng hình ảnh và có chữ khá "chi chít". Bạn có thể xem một trang điển hình trong thực đơn cũ tại đây: File đính kèm: original-menu.jpg (392 KB).

Yêu cầu của khách hàng

• Không được bỏ bất kỳ món ăn nào, cũng như không được cắt bỏ phần mô tả món ăn.
• Toàn bộ thực đơn chỉ được giới hạn trong 6 trang (lí do một phần là vì nhà hàng đã lỡ mua bìa thực đơn vốn chỉ chứa được 6 trang)
• Phải sử dụng hình ảnh biểu trưng của nhà hàng (tranh nước vẽ cô gái đội nón lá)

Yêu cầu cá nhân do tớ đặt ra

Vì tớ trực tiếp là người phục vụ tại nhà hàng nên bản thân tớ cũng nhận thấy những điểm bất cập trong thực đơn cũ. Mặt khác, tớ cũng muốn xác định trước một số "mục tiêu" cho thiết kế của mình. Và đây là những gì tớ muốn thực hiện:

• Menu nhìn phải sang trọng
• Bố cục "thoáng" (chi tiết này khá khó vì như bạn thấy trong thực đơn cũ, có rất nhiều chữ trong khi không gian không được thay đổi)
• Các món ăn trên thực đơn phải rõ ràng và tách biệt (điều tớ hay thấy là đôi khi khách có thể yêu cầu sai món ăn do không đọc kỹ)

Sản phẩm

Trước hết xin giới thiệu với các bạn bìa của thực đơn 6 trang này. Đây là hình ảnh so sánh bìa cũ và bìa mới. Trong bìa mới, tớ đã tìm cách đưa được nhiều thông tin hơn trong khi vẫn giữ được bố cục chính của thực đơn (xem ảnh bìa mới).

Việc bị giới hạn ngay từ đầu (không được tăng trang, không được cắt xén trong khi vẫn phải làm cho thực đơn trông "sang" và "thoáng") đã đặt ra cho tớ nhiều vấn đề cần giải quyết trong quá trình tìm cách trình bày thông tin bên trong thực đơn. Sau nhiều suy nghĩ, tớ đã đi đến bố cục sau cho các trang bên trong thực đơn: (xem ảnh to):

Trên đây là so sánh của một trang bên trong thực đơn. Trong thực đơn mới, tớ đã chọn những giải pháp sau để đạt được mục tiêu ban đầu của mình:

• Số các món ăn được in to, rõ và phân biệt bằng màu sắc. Điều này giúp khách tránh bị yêu cầu sai món ăn (đáp ứng yêu cầu 1 - thực đơn phải rõ ràng)
• Thay vì bố cục thành một cột như trong thực đơn cũ, tớ chọn bố cục hai cột với một chút thay đổi(kiểu so-le) để tạo dáng, đồng thời tạo thêm khoảng trống trên thực đơn (đáp ứng yêu cầu hai - nhìn phải thoáng)
• Sử dụng ảnh chìm của biểu trưng truyền thống của quán làm ảnh nền, đồng thời chọn tông màu chính của tất cả các thành phân trong thực đơn cũng là tông màu chính của bức ảnh. Cách chọn này giúp thực đơn nhìn "sang" hơn hẳn so với bản gốc.

Phải nói thật lòng là tớ rất hài lòng với thiết kế này của mình vì nó đã đáp ứng tất cả những yêu cầu tớ đặt ra từ đầu.

Tất cả những trang khác trong thực đơn đều mang phong cách như trên để giữ sự thống nhất về bố cục. Tuy nhiên, khi bước sang thiết kế phần thức uống của thực đơn thì một vấn đề mới đặt ra: tuy thiết kế vừa rồi nhìn khá sang nhưng nó không tạo cảm giác thoải mái. Đặc điểm quan trọng nhất của phần này theo tớ là phải tạo được cảm giác "tươi mát", kích thích người xem muốn … uống nước :). Xác định như vậy, tớ đã đi đến một thiết kế hoàn toàn khác cho phần này (Xem ảnh to):

Sử dụng tông màu xanh lá cây với hiệu ứng trong suốt, cùng với ảnh nền nhiều màu sắc chắc chắn đã tạo được hiệu quả như tớ mong muốn. Vẫn với đầy đủ các loại nước uống trong thực đơn cũ, thực đơn mới vẫn tạo được cảm giác thoải mái và sáng sủa hơn. Có thể bạn sẽ hỏi là như vậy phải chăng đã làm cho thiết kế của thực đơn không được nhất quán? Tớ đã nghĩ về điều này và trong trường hợp này, tớ cho là có thể chấp nhận được bởi đây là trang cuối của thực đơn. Nó nằm ở bìa ngoài, hoàn toàn tách biệt với phần món ăn bên trong.

Là lần đầu tiên tớ thực sự thiết kế một ấn phẩm phục vụ cho mục đích sử dụng thực tế (thực đơn này có lẽ sẽ được sử dụng ít nhất trong một - hai năm), trách nhiệm của việc thiết kế khá cao khiến tớ có phần lo lắng về mỗi quyết định của mình. Liệu thay đổi đó có thực sự hiệu quả hay không? Liệu hiệu ứng này nên được thêm vào hay bỏ đi thì sẽ tốt hơn? Đó là những câu hỏi mà tớ đặt ra trong suốt quá trình. Hiện tại thực đơn đã được in xong và sẽ được sử dụng trong tuần này, và thời gian đầu sử dụng sẽ là khoảng thời gian quan trọng nhất để đánh giá mức độ hiệu quả của thiết kế mới này.

Tái bút: Toàn bộ thời gian tớ thực hiện thiết kế này là khoảng 18 tiếng (bao gồm cả phần chỉnh sửa lại những chi tiết nhỏ sau thiết kê). Công cụ mà tớ chọn để thiết kế là Photoshop. Tớ biết - đó không phải là công cụ để thiết kế ấn phẩm kiểu này. Tớ ban đầu cũng định dùng InDesign hoặc Illustrator để thiết kế. Tuy nhiên, thực tế là tớ không thật sự rành hai công cụ này trong khi thời gian lại khá gấp để có thể ngồi "mò". Hơn nữa, thực đơn này cũng chỉ có 6 trang nên tớ quyết định sẽ sử dụng công cụ mà tớ quen dùng hơn. Thực tế cho thấy nếu bạn biết cách quản lý các lớp ("layer") một cách hiệu quả thì việt thiết kế không đến nổi phức tạp (tớ mất chưa đến 2 tiếng đồng hồ để thực hiện xong phần khung cho 3 trang trên)