Phần 2: Dùng màu trong thiết kế website
Tuesday, 4. November 2008, 08:08:03
Phần 1: Hiệu quả màu sắc trong Interner Marketing
Là một web designer. Mình muốn được giới thiệu của như chia sẻ kinh nghiệm của mình trong lĩnh vực thiết kế web với những bạn cùng đam mê cũng như muốn tìm hiểu về ngành này.
Phần 1 :Hiệu quả màu sắc trong Internet Marketing
Chắc bạn cũng biết rằng một website được thiết kế tốt đồng nghĩa với việc người dùng có thể duyệt website đó một cách tiện lợi. Một website chuyên nghiệp luôn được tối ưu hoá cho các engine tìm kiếm và có thể truyền tải cho người đọc được hết những nội dung chính. Bằng việc hiểu được thói quen và tâm lý của người đọc khi lướt xem một trang web, người thiết kế web (web designer) có thể tối ưu hoá website cho khách hàng ghé thăm. Khi áp dụng được những hiệu quả của màu sắc, bạn có thể dễ dàng phát triển được bản thiết kế web của bạn hay tạo dựng được một thương hiệu để đời .

Khi màu sắc được dùng hợp lý, website có thể truyền tải được những thông điệp nhất định tới cho người xem. Nó có thể nhấn mạnh những điểm chính của website. Tuy nhiên việc sự dụng màu sắc một cách bất hợp lý sẽ làm cho người xem rối mắt và dẫn họ đi lòng và lòng vòng trong website của bạn.
Màu sắc tạo ra hàng loạt các cảm xúc cũng như ký ức của bạn. Việc dùng màu sắc phải phù hợp với các yếu tố như tuổi tác, nghề nghiệp, phong tục và cả sở thích cá nhân.
Để biết được màu nào sẽ thu hút với người đọc, bạn phải là một người biết lắng nghe. Bởi vì vậy việc Nghiên cứu thị trường lúc này rất quan trọng. Nếu bạn thực sự muốn tăng tối đa lợi nhuận của bạn, hãy nghiên cứu kỹ xem khách hàng muốn gì. Nó sẽ giúp bạn thiết kế một website tốt làm khách hàng vừa lòng.
Thông thường, Màu Đỏ, Màu Da Cam, Màu Vàng là những màu nóng trong khi đó Màu Tím, Màu Xanh Nước Biển, Xanh Lá Cây lại là những màu lạnh . Hãy nhớ những điều này khi bạn đang thiết kế một website. Bạn thường tự hỏi mình làm thế nào để người xem có những phản ứng ngược trở lại tới bản thiết kể của bạn. Nên nhớ rằng, bản thiết kế website và những thông điệp mà website muốn truyền tải không phải là những thực thể độc lập với nhau. Cả 2 chúng luôn tồn tại đan xen lẫn nhau và ảnh hưởng trực tiếp đến người duyệt web.
Không phải tự nhiên mà Mc Donald dùng hai màu đỏ và vàng. Họ đã nghiên cứu kỹ lưỡng và nhận ra rằng 2 màu đó thu hút thị giác con người nhất . Những màu như vậy giúp kích thích vị giác của người ăn và giúp họ ăn ngon miệng hơn. Hãy làm một vòng ngoài phố, bạn sẽ không thể đếm hết nổi có bao nhiêu cửa hàng cửa hiệu dùng 2 màu đỏ và vàng.
Mỗi quốc gia đều có nhận thức về màu cũng như cảm xúc do màu sắc đem lại khác nhau. Đây là ý nghĩa một số màu tại Mỹ:
Đỏ: Phấn khích, mạnh mẽ, tốc độ, táo bạo, sự quyết tâm, sự thèm muốn, dũng khí.
Vàng: Ấm áp, sự hân hoan, hạnh phúc, tiện nghi, sinh lực.
Xanh (da trời): sự thật, sự tin cậy, sự mong chờ, lòng trung thành, năng lực (Đó là lý do vì sao màu này rất được các công ty ưa dùng)
Màu cam: Sự khôi hài, ấm áp, hứng thú, nhiệt tình, sáng tạo.
Xanh lá cây: Thiên nhiên, tươi mát, sự phát triển, giàu có trù phú, hoà hợp cân đối.
Hồng: Mềm mại, ngọt ngào, an toàn.
Tím: Quý phái, thần bí, nghiêm trang, xa xỉ, tao nhã.
Trắng: Tinh khiết, sạch sẽ, trẻ trung, trong sáng và đơn giản.
Đen: Sự phức tạp, nghiêm trang, quyến rũ, huyền bí.
Vàng ( kim loại): Uy tín, đắt đỏ, sang trọng.
Bạc: Uy tín, lạnh lẽo, tính công nghệ cao.
Các công ty đã tiêu tốn không biết bao nhiêu tiền bạc trong việc nghiên cứu màu sắc. Việc sử dụng hiệu quả của màu sắc chiếm tới 60% khả năng thành công hay thất bại của sản phẩm hoặc dịch vụ khi được tung ra thị trường.
Với vai trò là một người thiết kế web chắc chắn bạn sẽ muốn nghiên cứu và thử nghiệm hiệu quả của màu sắc trên website của bạn. Chúc bạn thành công.
Trần Hồ Nam - Theo Kim Roach
http://www.timevn.com/Web/NewsDetail.aspx?distid=1322
Phần 2: Dùng màu trong thiết kế website
Màu sắc là một công cụ tuyệt vời nhất cho người thiết kế. Có rất nhiều cách dùng màu sắc để truyền tải thông điệp của bạn đến với người xem. Màu sắc chứa đựng nhiều ý nghĩa, thể hiện cá tính, nét riêng biệt, bố cục cũng như giúp ta nhấn mạnh những điểm quan trọng.
Cách thức phối hợp màu sắc trong website
Một website có giao diện thu hút chắc chắn phải được phối màu một cách hợp lý. Nếu không có màu sắc, trang web sẽ mất đi cá tính riêng của nó. Với màu sắc được phối hợp lý và thống nhất ,trang web sẽ thể hiện được đúng tính chất của nó. Dùng quá nhiều màu hoặc màu sắc hỗn độn sẽ đem lại cảm giác khó chịu cho người xem.
Thường khi thiết kế một website thường có một tông màu chủ đạo.Tuy nhiên vẫn có những website sử dụng nhiều tông màu khác nhau.
Ví dụ trang Apple.com, mỗi trang con của nó đều có những tông màu khác nhau. Ở trường hợp này, sự thống nhất phụ thuộc vào cách xử lý khéo léo của người thiết kế.
Ví dụ về màu sắc chưa đủ độ trong một website.
Trang chủ của Starbuck thiếu màu một cách trầm trọng.

Màu nền xám của website là một màu nhờ nhờ và không có điểm nhấn trên trang.Tuy nhiên tại thời điểm này thì trang của Starbuck đã sinh động và có màu sắc hơn rất nhiều phiên bản trước.
Dùng màu đủ độ
Dùng ít màu mạnh làm cho website trở nên buồn tẻ và nhạt nhoà. Màu sắc là một cách thức tốt để nhận dạng, nhóm lại hay phân chia riêng rẽ các thành phần của website với nhau. Nó làm cho website nhẹ hơn nhiều khi tải về (đặc biệt nếu sử dụng tối đa CSS-Cascading Style Sheets trong website). Nếu bạn dùng quá ít màu bạn cũng nên nghĩ một cách nào đấy để thu hút mắt quan sát vào các thành phần chính của website.
Để những khoảng trắng
Màu trắng là một màu tuyệt vời để có thể làm nền cho text bên trên. Người ta thường đặt nội dung bằng chữ đậm lên trên một nền trắng (hoặc một nền sáng màu). Mảng màu trắng (hay sáng màu) thường được dùng để đặt nội dung website.
Dùng nền sáng nhất cho phần nội dung chính
Hãy dùng màu nền sáng nhất cho phần nội dung chính của bạn. Lý do đơn giản là não bộ của bạn có thể dễ dàng tìm thấy và thu hút vào phần nội dung trên nền sáng đó.
Ví dụ: Hãy ghé thăm trang pixelgraphix.de . Phần nội dung được hiển thị trên các ô vuông màu xám nhạt được đặt lên trên nền trắng. Bạn có thể thấy, đôi mắt của bạn không bao giờ muốn chú ý vào những khoảng xám mà cứ đi tìm kiếm những mảng màu trắng sáng hơn thế.
Cái nào làm bạn tập trung vào hơn
Đây hay là…

Đây

Trang chủ của đài tiếng nói Ireland dùng màu nền cho nội dung chính là một màu xanh nhợt với text đen. Nó làm phần nội dung chính rất khó nhìn.

Hãy dùng những màu mạnh để thu hút mắt nhìn
Những màu mạnh luôn luôn thu hút sự chú ý của mắt người xem.Mảng màu đó càng lớn càng gây được nhiều sự chú ý. Tuy nhiên nếu dùng quá nhiều màu mạnh sẽ làm cho mắt ta bị loạn lên và không biết sẽ phải nhìn vào đâu nữa, đừng để việc đó làm mất đi sự hiểu quả của việc dùng những màu mạnh.
collegeclub.com Dùng hai màu chủ đạo trắng và da cam tạo sự tương phản lớn.

Tuy nhiên mảng chính giữa trang màu da cam là khu vực thu hút mắt nhìn nhất , tuy nhiên nó lại không chứa nhiều nội dung giá trị. Đây là một bản thiết kế lỗi.

guardian.co.uk dùng quá nhiều khu vực có màu sắc gây sự chú ý. Có quá nhiều các bảng màu đỏ làm cho mắt ta bị rối.Chưa kể còn rất nhiều bảng dùng màu nặng nề làm ta không còn dành sự chú ý cho nội dung chính của trang web.

Trong khi đó màu website của RNIB lại không đủ để tạo được sự tương phản. Màu sắc trong website không được phối hợp lý. Có lẽ không nên phối màu xanh của logo với màu đỏ nhạt ,màu vàng và… hồng nhạt.

Nên đảm bảo sự tương phản tối đa giữa menu và màu nền. Hãy làm cho website của bạn rõ ràng và khiến cho người dùng có thể dễ dàng duyệt website. Đừng để mắt của bạn cứ hút vào những phần phụ của website mà bỏ qua đi Logo và nội dung chính cuả trang.
Tránh đặt các màu mạnh cạnh những bức ảnh.
Website Harrah’s Casino dùng màu tím đậm ngay cạnh một bức ảnh khu Casino. Màu tím và một số màu khác trên bức ảnh đặt cạnh nhau làm mọi thứ dường như rối rắm và nặng nề hơn.
Tránh sử dụng quá nhiều màu khác nhau.
Sử dụng quá nhiều màu sẽ làm cho trang web bị rối mắt hoặc trở nên loè loẹt thái quá.
Chưa kể có những màu khi để cạnh nhau sẽ tạo ra những hiệu ứng rất tệ.

Sự kết hợp của 2 màu nâu và xanh nhạt này làm cho chữ thật khó đọc, chưa kể đó còn do dùng font chữ quá nhỏ.
Phối màu lấy cảm hứng từ thiên nhiên
Luke Wrobleski- một designer cho rằng các tập đoàn lớn thường sử dụng những tông màu an toàn và hầu hết các website của các cty đều có tông màu hao hao nhau. Anh ta cho rằng cần có sự sáng tạo hơn trong việc sử dụng màu sắc.Nếu tự bằng lòng với những bản thiết kế quen thuộc chúng ta sẽ không thể tự vượt ra khỏi giới hạn của chính bản thân mình.
Những website của các tập đoàn lớn thường hao hao nhau (HP, IBM, Dell, Microsoft)

Luke Wrobleski đã nghĩ ra một cách phối màu cũng khá thú vị : Lấy màu từ thiên nhiên.


Trần Hồ Nam - Theo Principal
http://www.timevn.com/Web/NewsDetail.aspx?distid=1323
Interface Design Quotes
Cảm xúc là sự chọn lọc của các nhà thiết kế giao diện, kiến trúc sư, tác gia, nghệ sĩ nhạc Jazz vĩ đại, và hơn thế nữa. Điều đã gắn họ lại với nhau chính là sự giống nhau về bản chất đối với triết lý sáng tạo.
“[Users] make their credibility-based decisions about the people or organization behind the site based upon the site's overall visual appeal.”
Stanford Persuasive Technology Lab, 2002
“[Users] said they were more likely to believe Web sites that looked professionally designed.”
Stanford Web Credibility Study, 2002
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
Ben Shneiderman, 2003
“Design is so critical it should be on the agenda of every meeting in every single department.”
Tom Peters, 2003
“Design is not just what it looks like and feels like. Design is how it works.”
Steve Jobs, 2003
"I have dreamed in my life, dreams that have stayed with me ever after, and changed my ideas; they have gone through and through me, like wine through water, and altered the colour of my mind."
Emily Bronte
“Beauty and brains, pleasure and usability — they should go hand in hand.”
Donald Norman, 2003
“The perfection of art is to conceal art.”
Quintilian, 95
“We require from buildings two kinds of goodness: first, the doing their practical duty well: then that they be graceful and pleasing in doing it.”
John Ruskin, 1880
“Design is a plan for arranging elements in such a way as best to accomplish a particular purpose”
Charles Eames
“To design is to communicate clearly by whatever means you can control or master”
Milton Glaser
“Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.”
Ivan Chermayeff
“Design is the art of gradually applying constraints until only one solution remains.”
Chưa xác định được tác giả
“The greatest challenge to any thinker is stating the problem in a way that will allow a solution.”
Bertrand Russell
“Interactive design [is] a seamless blend of graphic arts, technology, and psychology.”
Brad Wieners, 2002
“[Leonardo Da Vinci] combined art and science and aesthetics and engineering, that kind of unity is needed once again.”
Ben Shneiderman, 2002
“We find that people quickly evaluate a site by visual design alone.”
Stanford Guidelines for Web Credibility, 2002
“True interactivity is not about clicking on icons or downloading files, it’s about encouraging communication.”
Ed Scholssberg, 2002
“To dismiss front-end design as mere ‘icing’ is to jeopardize the success of any site.”
Curt Cloninger, 2001
“Good designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”
Jeffery Veen, 2000
“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.”
Hans Hofmann
“The basis for success of [media] products, in addition to their usability and efficiency, is often the potential to arouse.”
Reeves & Naas, 1999
“The display is the computer.”
Jen-Hsun Huang, 2002
“Visual appearance is one of the most effective variables for quickly differentiating one application from another.”
Bob Baxley, 2003
“If a site is perfectly usable but it lacks an elegant and appropriate design style, it will fail.”
Curt Cloninger, 2001
“I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.”
Jeffery Veen, 2000
"The aim of art is to represent not the outward appearance of things, but their inward significance."
Aristotle
"An artist is a man of action, whether he creates a personality, invents an expedient, or finds the issue of a complicated situation."
Joseph Conrad
“Like all forms of design, visual design is about problem solving, not about personal preference or unsupported opinion.”
Bob Baxley, 2003
"Do not quench your inspiration and your imagination; do not become the slave of your model."
Vincent van Gogh
“Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that's creativity.”
Charles Mingus
“The architect should strive continually to simplify; the ensemble of the rooms should then be carefully considered that comfort and utility may go hand in hand with beauty.”
Frank Lloyd Wright, 1908
“The location of visual elements in the UI has a huge impact on how the user interprets information.”
Rick Oppedisan, 2002
“The design of good houses requires an understanding of both the construction materials and the behavior of real humans.”
Peter Morville, 2002
“The fusion of art and technology that we call interface design.”
Steven Johnson, 1997
“...that strange new zone between medium and message. That zone we call the interface.”
Steven Johnson, 1997
"Art, like morality, consists of drawing the line somewhere."
G. K. Chesterton
“Form follows function-that has been misunderstood. Form and function should be one, joined in a spiritual union.”
Frank Lloyd Wright
“The details are not the details. They make the design.”
Charles Eames
“Questions about whether design is necessary or affordable are quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all.”
Douglas Martin, 1989
“Science arose from poetry… when times change the two can meet again on a higher level as friends.”
Johann Goethe
“…effective communication is a key factor in the success of your product.”
Jesse James Garrett, 2002
“Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.”
Jesse James Garrett, 2002
“Good design is the most important way to differentiate ourselves from our competitors.”
Samsung CEO Yun Jong Yong, 2004
“Design is the easiest way to reenergize a product.”
Fast Company, 2005
"In nature, light creates the colour. In the picture, colour creates the light."
Hans Hofmann
"The whole difference between construction and creation is this; that a thing constructed can only be loved after it is constructed; but a thing created is loved before it exists."
G.K. Chesterton
"A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist."
Louis Nizer
"The secret of all effective originality in advertising is not the creation of new and tricky words and pictures, but one of putting familiar words and pictures into new relationships."
Leo Burnett
"Take care of the sense and the sounds will take care of themselves."
Lewis Carroll
"Design is the contrast of the core of limitations therefore there are no boundaries. It is simply an interpretation of creativity."
Jenaiha Woods
"Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep."
Scott Adams
"It is something to be able to paint a particular picture, or to carve a statue, and so to make a few objects beautiful; but it is far more glorious to carve and paint the very atmosphere and medium through which we look, which morally we can do. To affect the quality of the day, that is the highest of arts."
Henry David Thoreau
"Variety is not the spice of life; it is the very stuff of it."
Christopher Burney, Solitary Confinement, 1952.
"Water which is too pure has no fish."
Ts'ai Ken T'an
“Where you innovate, how you innovate, and what you innovate are design problems.”
Tim Brown, 2005
“Your products run for election every day and good design is critical to winning the campaign.”
Procter & Gamble CEO A.G. Lafley, 2005
“Design's fundamental role is problem solver”
Fast Company, 2005
http://www.timevn.com/Web/NewsDetail.aspx?distid=1054
















How to use Quote function: