Bởi Creative Blog Staff
Trong buổi ‘talk show’ về thiết kế web tại London, Claudio Guglieri đã hướng dẫn quy trình thiết kế bố cục một trang web hoàn hảo.
Khi tiếp cận chủ đề về thiết kế bố cục trang web, tôi đã nghĩ đến những lỗi thường mắc phải trong nhiều năm thiết kế của mình, đặc biệt trong thời gian học và thực tập thiết kế website.
Tôi tin rằng, những người thiết kế website đang làm việc tại các công ty kỹ thuật số, phải hiểu rõ các bước và quy trình để xây dựng một bố cục một trang web, trước khi bắt đầu thiết kế một website hoàn toàn mới, và những vấn đề cần chú ý trong suốt quá trình đó.
Những nguyên tắc này không chỉ đơn giản là giao diện trang web mà còn các vấn đề tổng quát giúp hoàn thiện việc thiết kế trang web. Thực hiện đúng quy trình này, bạn sẽ nhanh chóng xây dựng được bố cục trang web một cách chuyên nghiệp.
1. Trước tiên, ghi lại ý tưởng trên giấy
Phác thảo minh họa về các thành phố trên toàn thế giới.
Điều này có vẻ rất hiển nhiên, tuy nhiên tôi vẫn thường xuyên thấy các nhà thiết kế lao vào sử dụng photosoft ngay, trước khi đưa ra bất kỳ ý tưởng nào để thực hiện việc thiết kế. Thiết kế là giải pháp cho các vấn đề không thể được giải quyết thông qua các vector (gradient) hoặc bóng (shadow), tuy nhiên có thể giải quyết thông qua một bố cục trình bày đẹp, hợp lí và phân cấp rõ ràng. Hãy suy nghĩ về nội dung, cách bố trí và chức năng trước khi bắt đầu thực hiện.
2. Vẽ khung giao diện (framework)
Phác thảo khung giao diện sẽ giúp bạn giải quyết vấn đề UX và cấu trúc bố trí
Nếu hỏi tôi về ý tưởng cho dự án, đầu tiên tôi sẽ vẽ ra khung giao diện để giải quyết tất cả các vấn đề về thiết kế. Khung là giao diện bao quanh nội dung, giúp trình bày và thể hiện bố cục một cách hợp lí. Giao diện khung bao gồm các thanh công cụ và chức năng bên trái, phải (sidebars) hoặc phía dưới (bottem bars)
Với quan điểm thiết kế khung giao diện trước tiên, bạn sẽ biết rõ những nội dung gì cần được trình bày và bố trí giao diện trang chủ như thế nào.
3. Sử dụng lưới trong photoshop
Một ví dụ về lưới 978 với đường 10px
Nói một cách đơn giản. Trước khi bắt đầu thiết kế bất cứ điều gì bằng Photoshop, bạn cần sử dụng lưới trước tiên . Không có lý do gì để không sử dụng lưới, và nếu bạn không sử dụng lưới, tôi đảm bảo thiết kế của bạn sẽ không đẹp.
Một tấm lưới sẽ giúp bạn phân bổ bố cục của các phần khác nhau; bạn sẽ được hướng dẫn bạn thông qua các yêu cầu cụ thể về kích thước màn hình, và giúp bạn tạo ra các mẫu template phù hợp mọi giao diện của thiết bị, khoảng cách phù hợp cũng như nhiều vấn đề về khác.
4. Chọn kiểu chữ
Quy luật chung không sử dụng quá hai kiểu chữ trong một bố cục trang web
Thử nghiệm những kiểu chữ và màu sắc khác nhau là một phần quan trọng của dự án thiết kế. Tôi khuyên bạn không nên sử dụng nhiều hơn hai kiểu chữ trong một trang web, tuy nhiên tùy thuộc vào giao diện, bạn có thể sử dụng nhiều hơn hoặc ít hơn 2 kiểu chữ. Nói chung chọn một font chữ dễ đọc cho những văn bản dài, và font vui nhộn với các tiêu đề và những từ ngữ có tính chất kêu gọi thực hiện. Đừng ngại sử dụng font chữ lớn, vui nhộn và hài hước chỉ cần phù hợp là được.
5. Chọn màu chữ
Không sử dụng quá nhiều màu và tông màu trên 1 giao diện
Trong quá trình lựa chọn các kiểu chữ để sử dụng, bạn nên thử nghiệm font chữ với các màu sắc khác nhau trong giao diện, hình nền, và văn bản. Về màu sắc tôi khuyên bạn không nên sử dụng quá nhiều màu sắc và nhiều tông màu trong một giao diện.
Điều quan trọng là áp dụng đồng nhất trên các giao diện, và tùy thuộc vào chức năng của các bố cục trong giao diện. Hãy xem cách bố trí của các trang web như Facebook, Twitter, Quora, và Vimeo. Không sử dụng nhiều màu cho giao diện, ngược lại hình ảnh minh họa hoặc các chi tiết đồ họa có thể sử dụng nhiều màu và tông màu, miễn là nó không ảnh hưởng các chức năng của bố cục.
6. Chia bố cục (dàn trang)
Cấu trúc trang web giản để người xem dễ dàng
Mỗi bố cục trong trang web phải thể hiện ý nghĩa một câu chuyện, có nguyên nhân và kết quả. Cách bố trí phải làm nổi bật các phần quan trong của câu chuyện. Trong thực tế không nên có quá nhiều từ ngữ trên một trang để thu hút người xem tiếp tục đọc các phần nội dung còn lại.
Chọn cách trình bày bố cục đơn giản nhất mà vẫn thể hiện được ý nghĩa câu chuyện, sau đó thêm vào các yếu tố cần thiết. Cuối cùng bạn sẽ vô cùng ngạc nhiên tại sao mình có thể đơn giản hóa được như vậy.
7. Suy nghĩ cách trình bày
Nút tìm kiếm nữa có thực sự cần thiết không? Câu trả lời là không
Designers phải hình dung được cách người dùng sử dụng trình duyệt Internet, quyết định có bao nhiêu bước người xem phải thực hiện, để tối ưu hóa hiệu quả của website. Cấu trúc cần thiết vì đôi khi designers không có đủ thời gian để đánh giá hoặc suy nghĩ. Điều quan trọng là phải xem xét lại mô hình tương tác được thiết lập và chúng ta có thể cải thiện nó như thế nào.
8. Thử thách chính mình.
Tôi khuyến khích mỗi designer phải thử thách chính mình với tất cả các dự án. Sự đổi mới không phải lúc nào cũng là một yêu cầu cần thiết, chỉ cẩn các thiết kế có liên quan và tương tác với nhau. Ví dụ về các thách thức khác nhau: như sử dụng một hệ thống lưới mới, tạo ra một thành phần mới, hoặc thậm chí thách thức nhỏ như tránh các chế độ pha trộn hoặc sử dụng một màu sắc cụ thể.
9. Chú ý đến các chi tiết
Câu nói này được dân thiết kế nhắc đến nhiều lần, tuy nhiên đến giai đoạn cuối thì mọi người lại quên mất. Tùy thuộc vào quan điểm của từng dự án, “ý tưởng” có thể được phát triển theo nhiều cách khác nhau.
Nó có thể là một sự tương tác nhỏ, một hình ảnh động bất ngờ hoặc nút hướng dẫn với hình ảnh vector, hoặc sử dụng stroke trong photoshop. Nhưng nhìn chung “ý tưởng” này rất hữu ích và cần thiết nếu bạn thực sự thích và phát triển nó.
10. Xử lí bố cục như để tham gia cuộc thi thiết kế.
Tôi thừa nhận chính xác đây không phải là lời khuyên của tôi. Trước đây tôi từng nghe về sự tương tác kỳ ảo và tôi rất ngạc nhiên vì nó thật sự đúng và rõ ràng. Mỗi bố cục cần được thiết kế độc lập và đặt ở vị trí phù hợp nhất.
Thỉnh thoảng. các designers để lại một vài thông tin cá nhân của họ ở cuối trang web thể hiện bản quyền thiết kế.
Nguồn: www.creativebloq.com
