Giải pháp miễn phí cho người Việt (FSViet)

Nếu bạn không dùng templates website chia sẻ trên mạng hoặc chi trả tài chính để mua lại templates web qua các trang web mua bán templates trên mạng như: templatemonster, flashmint, templatebox,… để áp dụng cho khách hàng của mình. Thì việc bắt tay vào thiết kế layout cho web bạn phải lên một bố cục cụ thể  rỏ ràng phù hợp với nhu cầu của khách hàng hoặc lĩnh vực kinh doanh của khách hàng đó. Hay nói đúng hơn bạn phải vạch ra hệ thống “lưới” trước khi bắt tay vào việc làm “màu mè” cho website. Điều này tiết kiệm rất nhiều và rất nhiều thời gian ngồi suy nghĩ ý tưởng hoặc tìm ý tưởng thiết kế trên mạng.

Bài viết sau hy vọng như một chia sẽ kinh nghiệm nho nhỏ cho các designer website.

Từ trước đến nay, trong quá trình thiết kế một giao diện website, tôi chưa bao giờ sử dụng hệ thống lưới. Mọi việc đều đơn giản khi tôi vẽ nháp bố cục các mảng trước sau đó thực hiện chi tiết các mảng đấy trên Photoshop. Tôi không biết nhiều về hệ thống lưới này và tôi nghĩ mình hoàn toàn có thể tạo ra các sản phẩm đẹp mà không cần đến nó. Vâng, đó là sự thật! Bạn có thể không cần hệ thống lưới trong quá trình thiết kế web, nhưng, liệu có nên như vậy hay không? Tại sao hệ thống lưới quan trọng và trong tât cả các phần mềm dành cho thiết kế đều có hệ thống lưới? Mọi câu trả lời sẽ được đề cập trong bài viết.

Trước khi quyết định làm thế nào để phát triển hệ thống lưới trong thiết kế của mình, bạn cần quyết định xem thiết kế của mình sẽ hiển thị trên màn hình có độ phân giải thế nào. Chẳng hạn, nếu bạn thiết kế cho màn hình có độ phân giải 800 x 600px (có lẽ trong thời kì này sẽ là rất hiếm vì độ phân giải này thương xuất hiện ở màn hình 15″ cách đây khoảng hơn 5 năm) bạn sẽ có chiều ngang của web tối đa là 760px (chúng ta mất 40px cho thanh cuộn của trình duyệt). Nếu bạn thiết kế website cho độ phân giải màn hình là 1024 x 768px (hiện nay là phổ biến) thì chiều ngang tối đa của chúng ta sẽ là 960px (vì 960 chia hết cho 3, 4, 5, 6, 8, 10, 12, 15, 16) – Việc chia hết cho các số này, xin đọc phần bên dưới sẽ được rõ hơn tại sao lại cần chia hết).

Vậy, điều gì là quan trọng và chúng ta cần biết những gì trong quá trình dựng hệ thống lưới? Trước hết, bạn cần xác định số cột mà mình sẽ sử dụng. Thông thường là 2 hoặc 3 cốt, trường hợp trên 3 cột rất ít gặp và thường được đánh giá là xấu. Các trường hợp có giao diện nhiều hơn 3 cột thường được gặp trong những thiết kế cho báo. Bạn có thể tham khảo báo The Times để biết thêm.

Đi vào một ví dụ cụ thể.

Chúng ta cần thiết kế một giao diện có 3 cột, trong đó cột bên phải sẽ có một banner kích thước là 320 x 200px.

Chúng ta bắt đầu xây dựng hệ thống lưới có 5 cột với độ rộng là 160px, khoảng cách giữa các cột và lề trái, phải là 20px.

Bạn có thể hỏi tại sao lại là 5? Bởi vì theo cách này chúng ta có thể kết hợp các cột trong quá trình sử dụng. Chúng ta sẽ sử dụng 1 cột cho phía bên trái, thông thường được dùng để làm thanh navigator hoặc các đề mục có trong trang. 2 cột cho nội dung và 2 cột cho bên phải. Vị trí đặt banner có thể linh hoạt thay đổi từ cột bên phải sang cột giữa.

Với 5 cột lưới này, chúng ta có thể bố trí trong thiết kế thành:

3 cột ( tỉ lệ 1/2/2 hoặc 1/3/1 hoặc 1/1/3),

hay 2 cột ( tỉ lệ 2/3 hoặc 3/2)

hay thậm chí 4 cột (tỉ lệ 1/2×1/1) – với cách kết hợp 3 cột với 4 cột.

Trong thực tế, điều này giúp chúng ta có một thiết kế linh hoạt.

Vậy quay trở lại câu hỏi, tại sao lại cần hệ thống lưới?

1. Vâng, như bạn đã thấy, việc sử dụng hệ thống lưới trong thiết kế website cho chúng ta khả năng linh hoạt trong việc bố trí các thành phần.

2. Dễ dàng định hướng bố cục của bản thiết kế.

3. Các cột tạo ra có độ rộng bằng nhau, giúp việc bổ giao diện ra HTML, CSS đơn giản, chính xác hơn.

4. Và tổng hợp của 3 lợi ích trên, đó là công việc của chúng ta sẽ nhanh chóng hơn, tích kiệm được thời gian và công sức rất nhiều trong quá trình thiết kế.

• 10/02/2011 17:25 - Sức mạng viral marketing trên internet
• 10/02/2011 17:20 - Lợi và bất lợi khi quảng cáo trên Facebook?
• 27/01/2011 01:11 - Làm quen với Marketing qua mạng xã hội
• 19/01/2011 17:26 - Bán lẻ “offline” làm gì để tránh “chết chìm” trước…
• 14/01/2011 01:23 - Facebook là một công cụ kinh doanh

• 09/01/2011 20:12 - Thế nào là thiết kế website chuyên nghiệp?
• 09/01/2011 11:52 - Kiểu bài viết trên web - tối ưu nội dung
• 07/01/2011 16:03 - Những điểm nên và không nên khi soạn nội dung Webs…
• 05/01/2011 01:53 - Có nên sử dụng blog làm công cụ PR cho doanh nghiệ…
• 04/01/2011 15:59 - 8 quy tắc bán hàng trực tuyến