Trang chủ»Blog»Thiết kế website

5 yếu tố giúp mẫu thiết kế website của bạn nổi bật giữa đám đông

Ngày đăng:07/03/2018

Thiết kế website hay chính xác hơn - thiết kế giao diện website - là một công việc đòi hỏi tính sáng tạo và tỉ mỉ cao độ.

Để giao diện website trông đẹp hoàn mỹ và cân đối, cần những con mắt “super soi” - từ màu sắc, font chữ, độ mảnh nét chữ, khoảng trống giữa các phần tử,… cân đo đong đếm đến từng pixel để đảm bảo là giao diện trông hài hòa từ trên xuống dưới.

Việc đánh giá website đẹp hay chưa đẹp phụ thuộc rất nhiều vào yếu tố chủ quan, hay nói một cách khác, vào mắt thẩm mỹ của từng người…

Tuy nhiên, nếu bạn đã từng dùng Wordpress làm landing page, hay thử sức tự làm website với công cụ kéo - thả, khả năng cao là sau khi hoàn thành, bạn đã tự hỏi sao website “người ta” làm đẹp thế còn tác phẩm của mình thì trông cứ sao sao…

Ấy là vì bạn chưa nắm được những nguyên tắc thiết kế. Yên tâm, đọc xong bài này, bạn sẽ khám phá những bí kíp và tuyệt chiêu để tạo ra giao diện website đẹp hiện đại, lung linh bằng những cách cực kỳ đơn giản.

1. Dùng hình ảnh đẹp

Có câu, “một bức ảnh hơn ngàn lời nói”.

Hình ảnh có khả năng thu hút ánh nhìn của chúng ta một cách mạnh mẽ, bởi bộ não con người xử lý hình ảnh nhanh hơn nhiều so với văn bản. Một bức ảnh đẹp, truyền tải được đúng nội dung sẽ có tác dụng gây ấn tượng dài lâu cho người xem.

Nếu website của bạn ít nội dung, hãy dành thời gian đầu tư chọn lựa hình ảnh một cách nghiêm túc. Bí kíp là sử dụng những bức ảnh cùng chủ đề, cùng màu sắc để tạo cảm giác gắn kết, liền mạch cho thiết kế. Bằng cách này, website của bạn sẽ nổi bật hơn những trang đối thủ vốn không để ý đến chiến lược sử dụng hình ảnh.

Chúng tôi khuyến khích bạn “chia tay“ với Google hình ảnh, và sử dụng hình ảnh miễn phí bản quyền để tránh rắc rối về sau.

Thật may là, hiện Internet đang có rất nhiều trang web cung cấp hình ảnh chất lượng cao miễn phí, cho phép bạn sử dụng thoải mái ngay cả cho mục đích thương mại. Bạn có thể tham khảo những trang sau:

2. Sử dụng Video cho phần Intro

Above the fold là thuật ngữ trong thiết kế chỉ view đầu tiên khi bạn xem một website.

Vai trò của above the fold cực kỳ quan trọng – khách ghé website bạn sẽ quyết định xem tiếp hay thoát trang sau khi quét qua nội dung của phần này. Vì thế, khi tự thiết kế website, bạn nên để ý chăm chút Above the fold một cách kỹ lưỡng nhé.

Một trong những cách đơn giản nhất để tạo sự khác biệt và thu hút sự chú ý của người xem là dùng video intro cho above the fold.

Nếu bạn đang nghĩ, “kiếm video ở đâu ra trời”, thì đây là câu trả lời cho bạn. Không lo không kiếm được video ưng ý nhé:

3. Thêm nhiều khoảng trống - White space

Whitespace là thuật ngữ chỉ khoảng trống hay khoảng trắng trong thiết kế – tức những khu vực không chứa hình ảnh, text, hay bất cứ phần tử nào.

Khoảng trống - không như nhiều người nghĩ - không hề là sự lãng phí, mà thực chất là yếu tố cực kỳ cần thiết trong thiết kế website. Khoảng trống giúp làm nổi bật yếu tố nó bao quanh, giúp thiết kế thoáng đãng, hài hòa.

Nếu bạn để ý kỹ, đa phần các thiết kế “keo kiệt” khoảng trống sẽ có giao diện “chật chội”, khó scan nội dung và trông amateur.

Chỉ cần thêm khoảng trống, thiết kế của bạn trông hài hòa, hiện đại và pro hơn rất nhiều, tội gì mà không thêm nhỉ.

Tip: Khi sử dụng section editor, bạn có thể dễ dàng thiết lập khoảng trắng giữa các phần tử bằng cách dùng class padding hay margin.

4. Không sử dụng quá 2 font chữ

Trong thiết kế website, chữ không đơn thuần để đọc, mà còn là yếu tố thiết kế quan trọng. Bên cạnh bố cục, màu sắc, typography quyết định phần lớn phong cách của website. Việc chọn và sử dụng font chữ - vì thế cũng không nên tùy tiện.

Nếu bạn không phải pro-designer, hoặc chưa có kinh nghiệm thiết kế, lời khuyên chân thành là chọn tối đa 2 font chữ - 1 cho tiêu đề, 1 cho body copy.

Tránh tuyệt đối việc thích font nào xài font đấy. Vì sử dụng font không thống nhất giữa các section sẽ khiến website mất đi tính liên tục, thống nhất, và trông cực kỳ amateur.

Thêm một điều nhắn nhủ nho nhỏ rằng, Connected khuyến khích bạn nên tránh dùng các font chữ hệ thống như Arial, Times News Roman, hay Comic Sans trong thiết kế

Xem thêm: 3 font chữ tuyệt đối không được dùng trong thiết kế website.

5. Thiết lập visual hierachy - phân cấp thị giác

Visual hierachy (tạm dịch: phân cấp thị giác) là khái niệm dùng trong thiết kế chỉ việc chọn lựa, sắp xếp font chữ, kiểu chữ, size chữ để giúp tăng tính dễ đọc, dễ scan cho nội dung website.

Trong thời đại bùng nổ thông tin, website của bạn phải cạnh tranh sự chú ý với rất nhiều đối thủ khác, thì việc format nội dung với visual hierachy càng trở nên quan trọng.

Bởi không ai thích đọc một trang web toàn chữ là chữ từ trên xuống dưới cả.

Một nội dung được format tốt sẽ giúp người xem dễ dàng scan và hiểu nội dung chính của trang web.

6. Bonus - Thiết lập màu sắc

Màu sắc đóng vai trò rất quan trọng trong thiết kế và phải được sử dụng có mục đích cụ thể. Ví dụ, nút bấm kêu gọi hành động phải dùng màu nổi nhất trang web chẳng hạn.

Nhưng chỉ một chút lơ là, chúng ta rất dễ rơi vào bẫy chọn màu sắc tùy hứng cảm tính, chọn theo ý thích mà quên đi trật tự của chúng. Ví dụ: nút bấm lúc màu vàng, lúc màu đỏ mà không tuân theo trật tự nào cả.

Giải pháp là lên giao diện toàn website theo thang grayscale - tức đen, trắng, và các sắc độ xám, và chọn màu nổi bật (đỏ, vàng, cam,… ) cho các thông điệp kêu gọi hành động.

Nguồn tham khảo:

Đọc tiếp nè

  • 24/03/2019

    Website tải chậm đang làm bạn mất tiền như thế nào?

    Connected team
    24/03/2019
    Bạn có biết? Theo thống kê gần đây nhất, 73% người dùng phàn nàn về website tải chậm, 47% muốn website tải trong vòng 2 giây hoặc ít hơn, và 40% người dùng sẽ bỏ đi nếu trang web tải chậm hơn 3 giây.
    Xem thêm →
  • 24/03/2019

    5 nguyên tắc thiết kế hình ảnh quảng cáo Facebook hiệu quả

    Hang Truong
    24/03/2019
    Tuân theo 5 nguyên tắc sau sẽ giúp hình ảnh quảng cáo Facebook của bạn trở nên chuyên nghiệp, hấp dẫn, góp phần nâng cao hiệu quả quảng cáo Facebook.
    Xem thêm →
  • 24/03/2019

    Đừng chạy quảng cáo Google Adwords khi website chạy chậm – bạn chỉ đang lãng phí tiền bạc vô ích!

    Buu Truong
    24/03/2019
    Chiến dịch PPC Adwords cần rất nhiều yếu tố phối hợp nhịp nhàng với nhau, chỉ cần 1 trong các yếu tố trên không đạt, thì mỗi một cú click là một nhát dao đâm thẳng vào túi tiền của bạn.
    Xem thêm →

Có thể bạn quan tâm

© 2019 connected.com.vn. All rights reserved.