PDA

View Full Version : Thiết kế trang web quyến rũ !


tuoi nho tai cao
25-06-2004, 14:09
Thiết kế những trang Web quyến rũ
Một trang Web được thiết kế tốt sẽ là một tác phẩm nghệ thuật. Người xem những trang Web này có thể không biết gì về phông chữ, về căn lề văn bản..., nhưng họ có thể cảm nhận bằng tiềm thức về sự xấu, đẹp của trang. Một trang Web được thiết kế tốt về thẩm mỹ sẽ dễ đọc hơn và bắt mắt người xem hơn ở đúng những điểm cần nhấn của trang. Mặc dù có rất nhiều quy định được áp dụng cho các trang in không được áp dụng trên Web nhưng những nguyên tắc cơ bản về thiết kế và cách trình bày một bản in vẫn còn nguyên giá trị đối với những người thiết kế các trang Web. Liệu các Web Site có luôn cần tuân thủ những nguyên tắc thiết kế tiêu chuẩn hay không? Hoàn toàn không. Tuy nhiên, bạn luôn phải hiểu rất rõ những quy định đó khi bắt tay vào thiết kế các trang Web.

Một trang được thiết kế tốt, bất luận là để in hay trên Web, đều là một tác phẩm nghệ thuật. Một nhà thiết kế giỏi có thể sử dụng nhiều yếu tố khác nhau một cách rộng rãi như nội dung văn bản, đầu đề, ảnh, các liên kết và bất cứ gì khác, rồi sắp đặt chúng vào một tổng thể hài hoà. Hầu hết người xem không biết gì về phông chữ, căn lề..., nhưng có thể cảm nhận bằng tiềm thức khi một trang được thiết kế tốt, giống như con người có thể cảm nhận được sự khác biệt giữa một bức ảnh hay một cuốn băng ghi hình tốt với một bức ảnh hay một cuốn băng ghi hình xấu.

Trong bài này, chúng ta sẽ xẽm xét cặn kẽ tới khía cạnh bắt mắt của một thiết kế trang Web. Khía cạnh thực tế của các trang được tổ chức ra sao trong một Site và các công cụ dịch chuyển cần thiết kế như thế nào, được nêu trong bài trước. Chúng ta sẽ không đi sâu vào khía cạnh kỹ thuật để đạt được các hiệu ứng thiết kế khác nhau - điều thuộc trách nhiệm của các cuốn sách hướng dẫn về ngôn ngữ đánh dấu siêu văn bản HTML (Hypertext Markup Language).

Trước tiên, khái niệm "thiết kế tốt" và "thiết kế tồi" chỉ tồn tại trong mắt của những người xem. Trình bày trang là một nghệ thuật và không thể chỉ được đánh giá bằng những tiêu chí khách quan. Liệu các Web Site có luôn phải tuân thủ theo những nguyên tắc thiết kế chuẩn nào hay không? Tất nhiên là không. Hãy xem các tạp chí nổi tiếng như những ví dụ để thấy các nguyên tắc thiết kế đã bị phá vỡ như thế nào. Ngay cả khổ giấy để in tạp chí cũng không tiêu chuẩn. Câu hỏi được đặt ra là, hiệu ứng nào ta đang cố gắng tạo ra cho người xem? Thuần nhất và phụ thuộc, hoang dại hay điên loạn?

Điều cơ bản thứ hai cần ghi nhớ là Web không phải là một bản in. Trong khi rất nhiều các qui định được áp dụng để in các trang cũng được áp dụng cho các trang Web thì vẫn có vài khác biệt rất quan trọng. Một trong số đó là một người thiết kế Web có thể không bao giờ biết chắc là trang Web anh ta thiết kế sẽ hiện diện trước mắt người xem như thế nào. Ta chỉ có thể chắc chắn một điều là nó sẽ được thể hiện khác nhau trên những hệ thống máy tính khác nhau. Mong muốn có được mọi chi tiết được thể hiện một các tuyệt hảo nhất như một bản in mà người nghệ nhân thường làm ra là một việc không thể đạt được.

Một số người đồng bóng thiết kế toàn bộ các trang ở dạng ảnh đồ hoạ, không hiểu rằng ngay cả điều đó cũng không đảm bảo được tính thống nhất - một vài trình duyệt không thể cho hiển thị được màu sắc một cách chân thực và nhiều người truy nhập trang Web thích tắt lựa chọn hiển thị ảnh đồ hoạ nhằm tăng tốc độ hiển thị các thông tin cần thiết bằng chữ.

Trang hay, trang dở

Một thiết kế hay nói chung có đề cập tới 3 vấn đề sau:

- Nó có tính đồng nhất và đa dạng

- Nó hỗ trợ các thông điệp cần truyền đạt, nhưng không phải là tất cả

- Nó phù hợp đối với các thông điệp đặc thù mà tác giả muốn được truyền đạt

Một nguyên lý cơ bản của vẻ đẹp cổ điển là một tác phẩm nghệ thuật cân đối về tính đồng nhất và tính đa dạng. Điều này có nghĩa là mọi thứ hợp với nhau trong một tổng thể có thể nhận biết được, và cùng lúc đó nó lại có đủ tính đa dạng để làm cho tác phẩm hấp dẫn mọi người. Hầu hết các nhà thiết kế Web mắc sai lầm khi nghiêng thái quá về chất đa dạng. Tính đồng nhất và sự ổn định là những nguyên lý thiết kế rất quan trọng, nhưng chúng sẽ tăng cường tính thống nhất duy nhất đối với Web site của bạn (và của công ty bạn). Cách thiết kế này của một Site đòi hỏi sự ổn định từ trang này sang trang khác. Bất luận là ai tới xem trang của bạn, họ phải nhận ra rằng đó chính là site của bạn chứ không phải của ai khác.

Một trong những yếu tố trung tâm mang nhãn của bạn chính là logo. Hãy chọn một logo một cách kỹ càng và bất kể là nó đang tồn tại ở dạng tệp nào, hãy chắc chắn là nó có được chất lượng cao nhất có thể được. Một khi bạn đã chọn được một logo, hãy gắn nó vào trang và sử dụng nó trên toàn bộ site của bạn. Trong thực tế, tốt nhất là có vài lựa chọn đối với logo của bạn - có thể một logo lớn cho trang chủ, một logo nhỏ cho các trang khác và một logo kích thước cỡ 468x60 làm biểu ngữ quảng cáo. Sự thông thái là rất cần thiết - nếu bạn nhờ ai đó tạo một logo (hoặc bất cứ thứ gì) cho bạn, hãy chắc chắn rằng bạn có các tệp gốc (như tệp *.psd trong Photoshop hay các tệp trong Illustrator), chứ không phải chỉ các tệp cuối cùng ở dạng nén GIF hay JPG. Nếu bạn lúc nào đó cần tạo vài hình ảnh mới có sử dụng tới logo của bạn, bạn có thể không thể sửa các tệp nén nêu trên mà không bị suy giảm chất lượng. Còn nữa, các tệp GIF và JPG không đủ chất lượng cho việc in ấn, vì vậy nếu bạn lúc nào đó cần phải in logo của mình, bạn sẽ thấy hài lòng khi bạn có bản gốc cho logo của mình.

Tính thống nhất của thiết kế đòi hỏi nhiều hơn là một logo ở góc trang. Màu sắc, phông chữ, dàn trang theo cột và các chi tiết thiết kế khác phải ổn định đối với tất cả các phần site của bạn. Đây chính là lý do vì sao các style sheets (một bộ các chi tiết đã được thiết kế sẵn) là rất có ý nghĩa. Các style sheets không chỉ cho phép bạn thay đổi một chi tiết cụ thể nào đó đối với toàn bộ một site bằng việc chỉ đơn giản thay đổi style sheet đó, mà còn bảo vệ cho bạn khi chẳng may bị lầm lẫn, như một đoạn nào đó xuất hiện với phông chữ không đúng chẳng hạn.

Sự trung dung chính là thông điệp cần truyền đạt. Đây là một câu nổi tiếng của triết gia Marshall McLuhan. Khi câu này vận dụng cho Web, nó có nghĩa là sự trung dung không bao giờ được phép làm mờ đi thông điệp cần truyền đạt. Nếu mọi người nói về thiết kế Web site thay vì nói về thông điệp cần truyền đạt của Web site của bạn, thì bạn phải sắm chiếc xe cho con ngựa của bạn. Các phông chữ không bình thường, các dấu chấm câu kỳ quái hoặc quá nhiều màu sắc có thể gây sự chú ý cho chính chúng, và kéo người xem ra khỏi các thông điệp mà bạn muốn truyền đạt (mặt khác, chúng có thể là chính những thứ cần lôi cuốn sự chú ý của người xem). Thiết kế tốt khi mà hầu hết thời gian bạn không để ý đến rằng nó đang là như vậy. Một thiết kế có ấn tượng sẽ thể hiện một cách đơn giản thông điệp bạn muốn truyền đạt bằng một phương thức rất lôi cuốn. Hãy luôn để ý tới mục đích Web site của bạn và tránh xa sự cám dỗ nhằm tới các thiết kế đồng bóng (hoặc thị hiếu nhất thời về scripts, Java, audio, video, các phòng trò chuyện dưới nước hoặc bất kể những gì đại loại như vậy).

Tất nhiên là nếu Web site của bạn được thiết kế để ve vãn các khách hàng đến với một cửa hàng ảo về thiết kế trên site của bạn thì bạn lại cần phải có tất cả những thứ lảm nhảm ở trên, và chúng sẽ đưa chúng ta tới nguyên lý cơ bản thứ 3 trong thiết kế là: Hãy chọn một sơ đồ thiết kế phù hợp với thông điệp mà bạn muốn truyền đạt. Một thiết kế tốt đối với một Web site làm việc nhóm có thể là một sự sai lầm đối với một Web site dành cho giải trí. Các tập hợp về màu sắc, phông chữ và các kỹ thuật trình bày trang bạn chọn sẽ được xác định bằng cách nhìn và cảm nhận của bạn phù hợp với đối tượng phục vụ bạn chọn. Nó rất giống việc chọn kiểu quần áo để mặc cho hợp. Nếu bạn là một chính trị gia, bạn mặc bộ cánh màu xám hoặc xanh nước biển, với chiếc sơ mi trắng được là phẳng và một chiếc cavát sọc ít màu. Một khái niệm tương tự cũng được áp dụng để thiết kế Web. Các Web site làm việc nhóm sẽ gắn với những yếu tố rất cơ bản (1 phông chữ 1 hoặc 2 màu rất cổ điển), trong khi những công ty khác trên Internet lại chọn một bảng màu rộng lớn hơn.

Làm việc với các màu sắc

Làm việc với các màu sắc trên màn hình máy tính khác hoàn toàn với làm việc với các màu sắc để in ấn. Trong khi các ứng dụng in ấn thường sử dụng các mẫu màu hệ CMYK (Cyan, Magenta, Yellow, Black) thì Web sử dụng các mẫu màu hệ RGB (Red, Green, Blue), sử dụng 3 chữ số từ 0 đến 255 để biểu thị cho từng màu. Vì các trình duyệt chỉ có khả năng hiển thị một tập hợp con của 16 triệu màu RGB, hầu hết những nhà thiết kế Web gắn tới việc mà chúng ta gọi là dải màu an toàn cho Web (Web-safe palette). Nếu ta sử dụng một màu mà nó không có trong dải màu an toàn cho Web, một người dùng trình duyệt có thể nhận được một vài màu khác màu ta thiết kế.

Một màu nào đó thường được thể hiện trong ngôn ngữ siêu văn bản HTML như một tập hợp của 3 chữ số của hệ số 16 (hexadecimal). Những màu trên dải màu an toàn cho Web là tất cả các màu có thể được thể hiện bởi tổ hợp các cặp số như 00, 33, 99, CC và FF. Tập số 000000 là màu đen, và FFFFFF là màu trắng. 00FF33, 990033 và 66CC66 là tất cả các tổ hợp tốt. Các tổ hợp trên sẽ cho bạn một số lượng khá lớn các màu có thể làm việc được với chúng.

Khi bạn chọn các màu cho một bức ảnh, cho nền, hoặc cho các đoạn văn bản màu, bạn phải suy nghĩ dạng màu sắc nào là phù hợp đối với Web site của bạn, và thông điệp bạn muốn truyền đạt. Cả một loạt các khoá học sẽ dạy sử dụng màu thế nào cho hợp, và cách thổi hồn khác nhau vào các màu tương ứng và vì vậy ta sẽ chỉ đề cập ở đây tới những điều cơ bản.

Những màu sẫm cho làm bóng chứa một tỷ lệ lớn màu đen lôi cuốn nhưng trang nghiêm. Màu xanh thẫm (#000066) hoặc đỏ gạch (#330000) có thể đưa vào một chút sống động cho một trang đen trắng. Hãy thử sử dụng các màu như vậy cho các đầu đề chữ hoặc cho các đường kẻ ngang (horizontal rules) nếu bạn phải sử dụng các đường kể ngang.

Bóng chứa một tỷ lệ lớn màu trắng (đôi khi được gọi là các màu nhạt nhẹ) thường nằm sau. Một bóng màu nhạt nhẹ thường là một lựa chọn tốt cho nền. Các sắc thái của trái đất (nâu, be, nâu nhạt ...) khiêm nhường và có hệ thống, và thường được sử dụng với tập hợp màu đất nêu trên. Chúng có thể được sử dụng cả với bóng tối và bóng sáng, và chúng có xu hướng tạo nên sự tương phản rất tốt với các màu chủ đạo.

Hãy tuân thủ quy luật với các màu tương tự như đối với các phông chữ, không nên dùng quá nhiều phông chữ khác nhau, trừ phi bạn đang thiết kế một site cho trẻ em.

Nền: thà nhàm chán còn hơn là tồi

Cho tới nay, mọi người đều biết rằng những bức nền rối rằm sẽ làm cho chữ trở nên khó đọc. Vì vậy, hãy sử dụng nhiều lần cùng một chủ đề như hoàng hôn và các bức tranh của trái đất trong vũ trụ. Như thế nào thì bị coi là rối rắm? Những người theo chủ nghĩa thuần tuý cho rằng bất cứ thứ gì khác với trắng và đen đều quá nhiều. Các nhà thiết kế theo xu hướng tự do lại cho rằng nền của một màu thuần khiết được lựa chọn tốt có thể tạo nên tâm trạng vui vẻ, trong khi tạo cho site một bản sắc riêng biệt. Hãy chọn một màu sáng đặc biệt trung tính và hãy suy nghĩ thật cẩn thận về cách kết hợp nó với một màu khác. Dù bạn chọn màu nào đi nữa, đừng nên biến nó thành xám sáng. Một ngày nào đó các site với màu nền ngầm định sẽ được xem xét như một phản tác dụng và trở nên nhạt nhẽo, mà nó lại không phải chỉ trong chốc lát. Nếu thấy nghi ngờ, tốt nhất hãy chọn màu trắng.

Đã bao giờ bạn nghĩ vì sao tất cả các site của các nhà cung cấp dịch vụ Internet đều có màu nền là màu trắng hay chưa, trong khi các site của tất cả các hãng thiết kế Web lại có màu nền là màu đen? Một nền màu trắng sẽ có ngụ ý như một quan điểm thương mại có ý nghĩa, trong khi một nền màu đen lại đưa vào một không gian của sự sáng tạo và bí ẩn.

Bạn nghĩ gì về việc sử dụng một bức ảnh làm một nền? Bạn có thể sử dụng một bức ảnh kích thước lớn bao phủ toàn bộ màn hình, hoặc một bức ảnh nhỏ được lặp lại nhiều lần (hoặc "lát") liên tục và liên tục tới khi điền đầy tất cả khoảng không của màn hình. Việc sử dụng một bức ảnh lớn như một nền có thể dẫn tới sự cố, vì không phải tất cả người xem site đó sử dụng cùng một độ phân dải màn hình như bạn. Nếu bức ảnh nền của bạn chiếm 640 pixels bề rộng và độ phân dải của màn hình máy tính của người xem lại là 1024 pixels bề rộng thì bức ảnh đó sẽ tự động được lát lại một lần nữa. Điều này có nghĩa là người xem sẽ nhìn thấy ranh giới của một bản sao bức ảnh đó ở bên phải màn hình, điều mà, nhiều người sẽ cho rằng rất ngớ ngẩn. Những kết quả như vậy có thể đoán trước được khi sử dụng một bức ảnh nhỏ được lát đi lát lại nhiều lần. Hơn nữa, trang Web như vậy sẽ được hiển thị nhanh hơn.

Một kỹ thuật phổ biến nữa là chia một trang thành 2 hay nhiều cột, mỗi cột với một màu nền khác nhau bằng cách tạo một bức ảnh cao 1 pixel được lát đi lát lại nhiều lần. Vấn đề ở chỗ là để đạt được điều này, bạn buộc phải sử dụng một bảng để định dạng các đoạn văn bản của mình theo các cột. Khi bảng này và nền là độc lập với nhau, sẽ rất khó lòng đảm bảo được rằng chúng luôn trùng khớp nhau. Một lần nữa, với các độ phân dải màn hình khác nhau sẽ tạo nên sự hỗn loạn. Để đạt được hiệu ứng này, đơn giản nên chỉ định các màu nền khác nhau đối với các ô khác nhau trong bảng.

Theo http://wdvl.internet.com/


--------------------------------------------------------------------------------