Cách chọn dải màu phù hợp để thiết kế web đẹp hơn

Thế giới màu sắc là vô cùng phong phú. Và việc chọn một dải màu  phù hợp để thiết kế web đẹp hơn là điều vô cùng khó khăn. Khi mà những ý tưởng sáng tạo là vô cùng, vô cùng nhiều. Làm sao để nổi bật trong số muôn vàn trang web hiện có? Đó là câu hỏi của bất kỳ người thiết kế web nào.

Mình không nhận là người có khả năng thiết kế ra những trang web tuyệt đẹp, hoặc rất chuyên nghiệp,  nhưng mình nghĩ cách chọn màu của mình là phù hợp. Ví dụ khi vào theson.net hầu hết mọi người thấy “ờ cũng đẹp” hay “chuyên nghiệp phết” hoặc “anh thích đấy”.

Dải màu của trang theson.net
Dải màu của trang theson.net

Định nghĩa về sự phù hợp trong thiết kế web

Khi nhận một vài dự án về thiết kế, hoặc khi tư vấn cho bạn bè về màu sắc phù hợp. Nếu các ý kiến là giống nhau, mọi chuyện tiếp sau sẽ khá thuận lợi. Nhưng khi các ý kiến là hoàn toàn khác nhau, thì vấn đề bắt đầu phát sinh. Bạn tư vấn 1 màu, và người cần được tư vấn khăng khăng chọn 1 màu khác. Câu chốt thường được nghe là “tao thích thế đấy, mày cứ làm đi, kệ tao”. 

Các cụ mình có câu, ăn cho mình mặc cho người và tất nhiên màu sắc cũng vậy, bạn chọn là để cho người khác thấy đẹp, chứ không phải để cho bản thân bạn thấy đẹp. Nhưng bạn không cần phải chung chung na ná giống nhau, đấy là điều tệ hại nhất trong thiết kế. Thiết kế ra sản phẩm là phải sáng tạo.

Đầu tiên cần phù hợp với bản thân bạn

Bạn cần lấy 1 thứ là bản sắc của mình ra để quy đổi thành màu. Có một số người lấy logo, có một số người lấy sản phẩm, có một số người lấy từ câu khẩu hiệu. Và ở Việt Nam có một số sếp lớn lấy từ phong thủy. Tất cả, đều là tuyệt vời, lấy từ đâu cũng được miễn sao màu chủ đạo đó, nêu bật lên được bản sắc của bạn.

Ví dụ: như mình thuộc mạng mộc hợp với màu xanh, màu đen, màu tím là tốt. Mình chọn màu xanh đen làm chủ đạo. Các màu khác mình chọn theo kiểu đối lập, vì tính mình hay thay đổi và liên tục muốn sáng tạo.

Bạn nên đưa ra 1 hoặc tối đa 2 màu chủ đạo thôi, những màu còn lại, nên để nhà thiết kế của bạn tùy biến và sáng tạo thêm. Khi đưa đến 3 màu, thì có khi không còn gì để gọi là sáng tạo nữa. Và nếu có sáng tạo thêm, có lẽ sẽ giống như 1 con tắc kè vậy.

Phù hợp với đa số khách hàng

Bạn thường ít khi là người đầu tiên trong một lĩnh vực gì đó. Và thường có những người đi trước họ có khách hàng, và khách hàng quen với màu sắc của họ. Bạn nên xem đối thủ của bạn, những người hoạt động cùng ngành nghề với bạn, chọn màu gì.

Ngoài việc đối thủ, hãy tìm hiểu kỹ về ngành nghề của chính bạn, và yếu tố nào là đặt trưng, màu sắc nào là tiêu biểu trong ngành nghề của bạn. Điều đó sẽ hữu ích cho việc nghiên cứu vào chọn màu.

Bạn nên chọn gam màu giống hoặc có màu phổ biến trong ngành nghề của bạn khách hàng sẽ không bị bất ngờ, hoặc thấy xa lạ với website của bạn. Phù hợp với mọi người không có nghĩa là bạn bị trìm đi trong thế giới màu sắc.

Kết luận phần này, bạn sẽ tìm thấy 1 hoặc 2 màu phù hợp với bản thân hoặc ngành nghề của bạn. Sau đó bạn tiếp tục bước tiếp sau đây.

Định nghĩa về sự đẹp trong thiết kế web

Khó lắm, khó lắm để biết thế nào là đẹp. Mỗi người có 2 con mắt và chính bản thân chúng ta cũng không thể hình dung được thế nào là đẹp trong mắt chúng ta.

Điều duy nhất đúng về cái đẹp là trừ những phụ nữ rất đẹp còn đâu tất cả chúng ta đều cần thừa nhận, phụ nữ nào cũng đẹp.

Theo ý kiến cá nhân mình nghĩ, thì việc mọi người khen đẹp, là các màu sắc đó khi đứng cùng nhau chúng hài hòa, có thể là đồng màu, có thể là đối lập, pha trộn… Nhưng mà miễn sao chúng đứng cạnh nhau tạo nên một thứ gọi là vừa con mắt

Công cụ chọn dải màu sắc cho website

Cái thứ gọi là vừa con mắt tưởng như dễ mà lại là hóa khó nhất, vì cơ bản là vừa con mắt bạn nhưng lại không vừa con mắt người khác. Bạn có 1 màu chủ đạo, bạn thêm 1 màu nữa, thêm 1 màu nữa thì cần tạo làm sao cho chúng hài hòa.

Thiết kế web với Adobe Kuler
Thiết kế web với Adobe Kuler

Bạn nên sử dụng và mình đang sử dụng KULER của ADOBE để chọn màu bạn truy cập vào trang này http://kuler.adobe.com có các tùy chọn cho riêng bạn, với nhà thiết kế thì bạn có thể tạo cho mình một màu riêng.

Còn để tham khảo bạn có thể vào đây https://kuler.adobe.com/explore/most-popular/?time=month là phần chọn các màu sắc được sử dụng nhiều trong tháng.

Thứ phức tạp nhất, đã trở nên đơn giản hơn rất nhiều. Bạn đã có dải màu của riêng bạn, bây giờ bạn hoàn toàn có thể tùy biến dải màu theo ý thích và mục đích khác nhau.

Kết luận lại:

Có hàng trăm công cụ khác nhau giúp bạn tạo nên sự phù hợp, điểm mấu chốt là bạn tạo nên sản phẩm của riêng mình. Đừng bao giờ nghĩ rằng mình sẽ tạo ra cái gì đó mới lạ, và hoàn toàn khác biệt. Chỉ cần xem người khác làm thế nào. Mình làm tốt hơn họ, vậy là bạn đã thành công rồi. Chúc các bạn có những sản phẩm đẹp, và luôn nổi bật trong mắt của mọi người.

5 CSS FrameWork miễn phí tốt nhất khi thiết kế web mobile

Ở Việt Nam chúng ta thiết kế web ngày càng chuyên nghiệp hơn, mặc dù số lượng các công ty thiết kế web giá rẻ còn khá nhiều và thiếu tính chuyên nghiệp cao. Tức là chưa có 1 quy trình làm việc thống nhất giữa các bộ phận với nhau, và cách thức thống nhất với khách hàng nói riêng. Bạn có công nhận với mình thế không nào?

Thường thì các công ty thiết kế web tại Việt Nam có 3 bộ  phận như thế này, đội ngũ ý tưởng và thiết kế đồ họa, đội ngũ cắt css và thiết kế html, đội ngũ code và xây dựng mã nguồn. Bài này không tập trung sâu vào các mối liên hệ hay chức năng của các đội ngũ đó.

Mà theo kinh nghiệm của mình. Muốn thống nhất được các bộ phận, và làm việc chuyên nghiệp hơn, hoặc hướng ra khách hàng nước ngoài. Chúng ta nên xây dựng theo khung chuẩn sử dụng các FrameWork  phổ biến. Có lẽ đó mới là con đường lâu dài và phát triển.

FrameWork là gì?

Cái này giống như 1 mã nguồn mở, được người ta viết sẵn và mình cứ thế bê về xơi vậy. Các bạn đừng ngại làm việc đó, vì họ cho phép, và mình cũng chẳng vi phạm gì cả.

Đừng mất công ngồi xây dựng 1 cái mới từ đầu, mà chẳng theo cái chuẩn nào cả. Nếu hứng thú với việc phát triển hay thường xuyên cập nhật cùng người xây dựng nên Framework đó hoặc hỗ trợ cộng đồng sử dụng Framework.

CSS FrameWork tức là các đoạn mã css được viết sẵn theo các id và class cố định giúp khi thiết kế bạn làm việc nhanh hơn, không phải căn chỉnh lại nhiều và không sợ bị lỗi. Chắc chắn bạn hay gặp lỗi css khi thiết kế web phải không?

CSS FrameWork cho web mobile

CSS FrameWork cho web mobile là css này sử dụng cho HTML5 với lại CSS 3 hiển thị tốt trên cac Smartphone và mobile hiện tại, gần như không có lỗi trên các trình duyệt phổ biến hiện nay.

01: Bootstrap

FrameWork cho smartphone phổ biến nhất. Bootstrap được sinh ra tại Twitter hồi đầu có tên là Twitter Bootstrap hiện nay là FrameWork số 01, dễ dùng phổ biến và đầy đủ. Đây là FrameWork bạn nên chọn vì được khá nhiều đơn đặt hàng từ các trang FreeLancer trên thế giới.

Bootstrap

Chỉ số sức mạnh:

  • Alexa: 843
  • Pagerank: 8/10
  • Social Media: 17 398
  • Download: http://getbootstrap.com/

2: Html5 Boilerplate

HTML5 Boilerplate giúp bạn xây dựng App hoặc web nhanh, mạnh mẽ và đáp ứng hết các trình duyệt đây là theo giới thiệu tại trang chủ.

HTML5 Boilerplate

Chỉ số sức mạnh:

  • Alexa: 26,297
  • Pagerank: 7/10
  • Social Media: 41 634
  • Download: http://html5boilerplate.com/

3: Foundation

Foundation không chỉ xử lý về kích thước hình ảnh, mà còn giúp bạn chọn lọc được các thành phần nào cần tải và không cần tải giúp cho website nhanh hơn và đẹp hơn.

Foundation

 

Chỉ số sức mạnh:

  • Alexa: 3,338
  • Pagerank: 7/10
  • Social Media: 3 300
  • Download: http://foundation.zurb.com/index.html

4: Skeleton

Skeleton đẹp nhẹ, dễ sử dụng đó là điều mà Framework này có thể đánh bại các đối thủ khác, với đầy đủ các tính năng tượng tự như nhau.

Skeleton

Chỉ số sức mạnh:

  • Alexa: 45,638
  • Pagerank: 6/10
  • Social Media: 12 437
  • Download: http://www.getskeleton.com/

5: Blueprint

Blueprint được viết theo chuẩn HTML 4 cũng là 1 Framework bạn nên lưu tậm khi xây dựng website cho smartphone.

Blueprint

Chỉ số sức mạnh:

  • Alexa: 122,330
  • Pagerank: 6/10
  • Social Media: 9 551
  • Download: http://www.blueprintcss.org/

Bài viết theo kinh nghiệm có phần chưa được sâu lắm của mình, vì thường mình không có hứng thú tìm hiểu chàn lan. Mình thích cái nào thì sử dụng và tìm hiểu về cái đó thôi, còn đâu chịu những cái khác không biết.

Ví dụ mình chỉ biết về WordPress, còn đâu Joomla hay Drupal mình chịu chẳng biết mù tịt gì, kể cả cài đặt cũng chưa thử bao giờ.

Nếu viết bài mà cứ theo ý mình, hoặc là không có lựa chọn khác cho các bạn, thì kiểu thể hiện giống như là gia chủ vậy. Vậy nên mình liệt kê ra, bạn nào đang sử dụng frameworkthấy hay thì giới thiệu cho mọi người nữa nhé.

Thời gian sắp tới chắc mình sẽ sử dụng Bootstrap  cho việc thiết kế. Thêm nữa Bootstrap khá là dễ sử dụng khi kết hợp với WordPress.