mẹo nhỏ giúp website của bạn đẹp hơn

NHỮNG MẸO NHỎ GIÚP WEBSITE CỦA BẠN ĐẸP HƠN (P.1)

Last updated on Tháng Mười Hai 23rd, 2019 at 02:36 chiều

Quá trình thiết kế và hoàn thiện một website chưa bao giờ là dễ cả. Đôi khi, chính chúng ta cũng cảm thấy ” Sao website của mình cứ xấu xấu thế nào ấy nhỉ ? “. Trong bài viết này, mình sẽ hướng dẫn thiết kế web của bạn đẹp hơn, cùng nhau học hỏi được từ những Front-end Developers đi trước mà mình may mắn được làm việc cùng nhé !

mẹo nhỏ giúp website của bạn đẹp hơn
Thiết kế Front-end chưa bao giờ là đơn giản

*** Lưu ý nhỏ : Bài viết là những kinh nghiệm mình học hỏi được khi làm việc với các sản phẩm nhỏ, hầu hết là dự án của khách hàng Việt Nam nên các mẹo này vẫn chưa chính xác 100%, nhưng ít nhiều hy vọng nó sẽ giúp đỡ bạn trong quá trình làm việc nhé !

1 . PHÂN CHIA RÕ RÀNG CÁC THÀNH PHẦN TRANG

Đối với một website, bạn sẽ có rất nhiều các section, các elements,.. khác nhau. Chính vì thế, khi design hãy phân chia rạch ròi các phần với nhau ra. Ví dụ nhé : Giữa các khung tin tức trên blog, hãy làm chúng thật nổi bật và tách biệt với nhau ra.

1 trang thiết kế Front-end phẳng
1 trang thiết kế Front-end phẳng

Hãy nhìn vào hình trên, bạn có thể thấy giữa các block tin tức là những khoảng trắng cân bằng và mỗi một block như vậy được tạo điểm nhấn bằng một box-shadow xám mờ rất nhẹ nhàng.

Front-end của Facebook
Front-end của Facebook

Một ví dụ khác gần gũi hơn là Facebook. Như bạn thấy đấy, Facebook chia các bố cục ra rất rõ ràng, phần Tạo bài viết được đóng khung border, phần Tin được đóng trong một khung border, và khoảng cách nhỏ kết hợp lại tạo cảm giác phân biệt rất rõ ràng.

Với vài ví dụ trên, bạn có thể thấy được rằng việc tạo sự phân chia rõ ràng ( thông qua border, box-shadow, background-color, … ) đem lại cảm giác cụ thể, giúp khách hàng có thể biết được và phân biệt được các phần các nhau trên website. Thế nên khi làm việc, hãy nhớ rằng luôn tạo sự phân chia giữa các thành phần trên trang với nhau nhé !

2 . LỰA CHỌN FONT CHỮ PHÙ HỢP

Thiết kế Front-end là một quá trình phối hợp giữa nhiều yếu tố từ màu sắc, hình ảnh, bố cục. Nhưng, đôi khi chúng ta quên đi mất một yếu tố đóng góp rất quan trọng vào tính thẩm mỹ của website, chính là Font chữ.

mẹo nhỏ giúp website của bạn đẹp hơn
mẹo nhỏ giúp website của bạn đẹp hơn

Khi làm việc với các khách hàng tại Việt Nam trong quá trình lên layout, mình thường xuyên gặp phải những trường hợp như sau :

  • Không nhắc gì tới việc lựa chọn font chữ và để cho dev tự quyết định hoàn toàn ( tuy nhiên khi bàn giao thì dev rất dễ bị chửi vì ” sao em chọn cái font kì thế ? ” ).
  • Có đề cập tới chọn Font chữ, tuy nhiên Font chữ này … không liên quan gì đến tổng thể bản layout mà bạn đã thảo luận, lên ý tưởng với khách hàng. Phần lớn việc này đến từ nhu cầu ” muốn giống website này ” của khách hàng.

Lời khuyên của mình dành cho bạn khi gặp vấn đề trong việc thiết kế Front-end này đó là hãy làm việc rõ ràng với khách hàng từ lúc đầu. Đối với việc khách không nói gì đến Font chữ, hãy nói với khách về ý định của bạn trong việc chọn Font. Nếu bạn gặp trường hợp khách chọn một font chữ không ăn nhập gì tới design, hãy thuyết phục khách hàng đi theo bản thiết kế đã đề ra, tạo sự hài hoà của bố cục.

Ngoài ra, hãy tận dụng font miễn phí của Google Font, đây là một kho tài nguyên rất hữu ích với các font hỗ trợ tiếng Việt rất nhiều và đa dạng.

Link đây cho bạn nào cần : GOOGLE FONT

Mình cũng có vài mẹo nho nhỏ khi chọn font chữ cho website mà rơi vào bế tắc :

– Đối với các landing page ( đặc biệt các landing page về công nghệ ), hãy thử font Montserrat, các landing page ở nước ngoài rất ưa chuộng font này.

– Đối với các website giới thiệu, hãy tận dụng font Roboto Condensed, đây là một font mình cực kỳ thích và cảm thấy rất phù hợp với các web giới thiệu, web doanh nghiệp.

– Đối với các website bán hàng, mình thường xuyên dùng em Muli, cảm thấy font khá dễ thương và dễ nhìn.

– Cuối cùng, cái font mà mình dùng nhiều nhất và luôn áp dụng khi không biết chọn font nào, đó là em Roboto.

3. MÀU SẮC TƯƠNG ĐỐI, HẠN CHẾ DÙNG CHUYỂN SẮC HOẶC MÀU MẶC ĐỊNH

Màu sắc là yếu tố cực kỳ quan trọng trong quá trình thiết kế Front-end. Mình gặp rất nhiều website ở Việt Nam có vấn đề trong việc lựa chọn màu sắc, và nó khiến toàn bộ thiết kế của website trở nên cực kỳ xấu.

mẹo nhỏ giúp website của bạn đẹp hơn
mẹo nhỏ giúp website của bạn đẹp hơn

Đối với màu sắc, mình thường xuyên tự nhắc nhở bản thân như sau :

  • Hạn chế dùng màu chuyển sắc :
    Màu chuyển sắc trên thực tế là rất đẹp và cực kỳ hoàn hảo nếu bạn biết cách phối hợp các màu sao cho hợp lý. Thế nên nếu chúng ta không có nhiều kinh nghiệm trong phối màu, hạn chế dùng nó kẻo bị tác dụng phụ đấy !
  • Hạn chế dùng màu cơ bản ( trừ đen và trắng ) :
    Mình không biết gọi các màu mặc định như thế nào ( ví dụ : đen, trắng, đỏ, hồng, vàng, xanh biển, xanh lá, … ) nên gọi là màu cơ bản. Ở trường hợp này, trừ đen và trắng ra hãy hạn chế dùng các màu cơ bản vì đối với mình, chúng khá là chói. Thay vào đó, hãy sử dụng những màu khác nhẹ hơn hoặc trong hơn, ví dụ nhé : thay vì dùng background-color là red, hãy sử dụng mã màu #dc1c1ceb, màu đỏ của bạn sẽ không quá chói mà rất dễ nhìn.

4. BỐ CỤC ĐỒNG NHẤT, RÕ RÀNG, KHÔNG NHẢY LUNG TUNG

Mình biết điều này nghe hơi không rõ ràng, bạn cũng có thể cảm thấy hơi thừa, tuy nhiên nghe mình nói đã nào 😀

Trong suốt thời gian 2 năm đi làm, mình gặp rất nhiều trường hợp khách hàng không có kiến thức về front-end hoặc website, họ hình dung website như 1 bản vẽ mà bạn thích vẽ gì đó cũng được. Và chính vì thế, họ có những yêu cầu rất không nhất quán về mặt layout.

Ví dụ nhé :

– Có 1 khách yêu cầu mình rằng website của họ nên có 3 hàng sản phẩm, tuy nhiên hàng đầu tiên thì tiêu đề sản phẩm viết hoa hết và chữ màu đỏ, 2 hàng còn lại thì không.

– Có 1 khách yêu cầu mình thêm 1 carousel bài viết mới nhất gồm 4 cột, tuy nhiên cột 2 và cột 4 thấp hơn cột 1 và 3 khoảng … 10px ???

Bố cục website phải đồng nhất
Bố cục website phải đồng nhất

Đó là 2 ví dụ, mà với mình là khá oái ăm mà mình được gặp. Trên thực tế, điều này không khó khăn gì cả. Tuy nhiên nó thực sự rất kì cục và không tuân theo bất cứ quy tắc nào, và nó chỉ đẹp bên trong trí tưởng tượng của khách hàng mà thôi !

Vì thế, khi thiết kế, hãy nhớ rằng bố cục website phải đồng đều, nhất quán với nhau. Chẳng hạn:

  • Các cột trong một hàng phải bằng nhau.
  • Ảnh đại diện của bài viết và sản phẩm phải bằng nhau, chiều cao cân đối ( không cao quá không thấp quá ).
  • Không để các thành phần trang nhảy lung tung, nằm bừa bãi.

Và bên trên là 4 mẹo nhỏ giúp website của bạn đẹp hơn của mình dành cho bạn, và như mình nói ở đầu bài thì đây không phải là những lời khuyên hợp lý 100% trong mọi hoàn cảnh, tuy nhiên đối với các dự án nhỏ của khách hàng Việt hoặc đối với những bạn chưa có kinh nghiệm thì chúng có thể sẽ giúp bạn rất nhiều đấy.

Trong bài sau, mình sẽ liệt kê thêm nữa những kinh nghiệm về kiến thức CSS mà mình đã đúc kết được nhé !

(Visited 23 times, 1 visits today)

1
Leave a Reply

avatar
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of