Hiện tại có rất nhiều sai lầm phổ biến khi thiết kế website do vô tình gây nên những sai lầm này rất phổ biến sảy ra với những người mới bắt đầu học thiết kế web đặc biệt là các bạn sinh viên và đôi khi cũng xảy ra với những người thiết kế web chuyên nghiệp.

Bài viết này được tao ra với mục đích giúp các bạn hiểu rõ hơn cách sắp xếp bố cục website sao cho hợp lý, sao cho hoàn hảo nếu bạn thực sự nghiêm túc trong quá trình thiết kế web thì hãy tham khảo bài viết này để sớm thành công trên con đường thiết kế web.

1. ĐẦU TIÊN HÃY SUY NGHĨ BẠN THIẾT KẾ WEB RA SAO

 

Đây là điều bạn phải làm đầu tiên nhưng các nhà thiết kế web thường nhảy thẳng vào photoshop thiết kế đầu tiên. Việc thiết kế bằng photoshop là để giải quyết các suy nghĩ trong đầu bạn sau khi đã phác thảo xong chứ không phải vừa làm vừa nghĩ. Hãy suy nghĩ về nội dung, bố cục, các chức năng sau đó mới bắt đầu đi vào thiết kế layout website.

2. BẮT ĐẦU PHÁC THẢO CẤP CAO NHẤT

Một mô hình khi bắt tay vào phác thảo

Mục đích của việc tạo ra bản phác thảo là nhằm mang đến một cái nhìn và cảm nhận cho dự án có “hồn” hơn việc này chỉ cần tạo ra một bản phác thảo cấp cao nhất bạn sẽ giải quyết được ngay tất cả các vấn đề về thiết kế.

Đầu tiên khung là giao diện người dùng bao quanh nội dung và giúp thực hiện các hành động và điều hướng thông qua nó. Nó bao gồm các menu và các thành phần như sidebars, footer, content

Nếu bạn bắt đầu thiết kế website của bạn từ góc độ này, bạn sẽ có một sự hiểu biết rõ ràng về những gì các nhu cầu của bạn sẽ được bố trí khi thiết kế phần ngoài trang chủ.

03. THÊM MỘT MẠNG LƯỚI TRONG FILE PSD CỦA BẠN

Một ví dụ về thêm mạng lưới với 978 lưới và mỗi lưới cao 10px

Việc thêm mạng lưới vào trong thiết kế web khi sử dụng photoshop là việc rất rất cần thiết nó giúp bạn sắp xếp các chức năng website cân đối và phù hợp hơn. Đồng thời khoảng cách giữa các thiết kế được thống nhất không còn tình trạng bị lệch khi thiết kế .

04. CHỌN KIỂU CHỮ THỐNG NHẤT

sử dụng font chữ thống nhất

Mỗi dự án sẽ có một font chữ khác nhau nhưng khi thiết kế bạn nên chọn ngay từ ban đầu một font chữ nhất định để kiểm soát được giao diện tốt hơn tôi khuyên bạn nên sử dụng dưới 2 font chữ không nên sử dụng nhiều quá. Nhưng điều này còn phụ thuộc vào thiết kế của bạn có cần phải sử dụng nhiều font không nếu bắt buộc bạn có thể sử dụng sao cho phù hợp là được. Hãy lựa chọn font chữ sao cho dễ đọc, dễ hiểu đừng ngần ngại khi sử dụng màu sắc hay in đậm khi muốn nhấn mạnh điều gì đó.

05. CHỌN CHỦ ĐỀ MÀU SẮC CHO WEBSITE CỦA BẠN

Sử dụng một số hạn chế các màu sắc và tông để bảo vệ chống quá tải hình ảnh

Trong quá trình lựa chọn kiểu chữ để sử dụng bạn nên kết hợp cùng việc lựa chọn màu sắc bạn sẽ sử dụng cho website trong văn bản, hình nền và giao diện. Về màu sắc tôi khuyên bạn nên sử dụng một màu thống nhất nên hạn chế sử dụng nhiều màu gây cho người dùng “nhức nhối”. Hãy sử dụng nhất quán 1 vài màu sắc sao cho hợp lý, dễ nhìn bạn có thể tham khảo các trang web bố trí rất đẹp hiện nay như: twitter, facebook, Vimeo, youtube,…

06. CHIA BỐ TRÍ

Đừng nên làm “rối rắm” quá cho website của bạn hãy tối ưu hóa website sao cho người dùng dễ dàng sử dụng nhất. Nhất là khi thiết kế web tin tức, thiết kế website bán hàng hay thiết kế web thương mại điện tử bạn phải bố trí website sao cho hợp lý người dùng dễ điều hướng điều này giúp tăng lượng thời gian xem trên website của bạn.

07. SUY NGHĨ LẠI CÁC THIẾT LẬP

Bạn hãy tham khảo các trang web khác xem chức năng của họ như thế nào và đánh giá lại giao diện bạn đang thiết kế đây là điều rất cần thiết, hãy tổng hợp lại và rút ra những việc bạn cần làm điều này giúp website bạn chuyên nghiệp hơn trong mắt người dùng.

8. THÁCH THỨC CHÍNH MÌNH

Đây là điều tôi luôn khuyến khích các thiết kế viên thực hiện việc đổi mới các thiết kế giúp website được tạo ra có một bố cục duy nhất với các chức năng khác biệt cùng với màu sắc được phối khác giúp website được tạo ra mang phong cách riêng.

09. CHÚ Ý ĐẾN CÁC CHI TIẾT

Các bạn nên chú ý lại các chi tiết bạn đã thiết kế xem có bị vấn đề gì không đây là cách kiểm tra giúp hoàn thiện một layout với giao diện và bố cục chặt chẽ. Sửa lại các lỗi sai, thừa, lệch để hoàn thiện một trang web chuyên nghiệp.

10. HÃY CHÚ Ý ĐẾN TOÀN BỘ CÁC THÀNH PHẦN CỦA WEBSITE

 

Mỗi thành phần cần phải thiết kế chi tiết cụ thể. Nếu các thành phần không hợp lý bạn nên thiết kế chi tiết nó lại đừng bao giờ vì lười mà để vậy luôn. Đây là cách bạn khẳng định thiết kế bạn là hoàn hảo nhất. Mình sẽ viết tiếp ở phần 2: 20 bước để bố trí một website đẹp và thân thiện phần 2

Bạn có thể tham khảo thêm clip thiết kế web theo yêu cầu này để hiểu rõ hơn về một bố cục website chuyên nghiệp.