Nếu là nhà thiết kế, bắt buộc phải biết 20 bước bố cục thiết kế trang web sau - Phần 1

Khi tiếp cận chủ đề thiết kế và bố trí trang web thường dành cho các design, tôi thường nghĩ về những sai lầm phổ biến mà tôi đã gặp trong quá trình làm thiết kế với những kinh nghiệm ít ỏi của mình và đặc biệt là tập làm quen với các thiết kế tươi mới từ những mẫu thiết kế web hàng đầu tại Việt Nam cũng như trên thế giới.

Trong danh sách các bước bố trí trang web ngắn gọn và nhằm mục đích để chia sẻ những gì tôi tin rằng mỗi người xây dựng trang web mới cần phải biết và thực hiện nó trước khi bắt đầu một dự án thiết kế website mới, nào chúng ta bắt đầu nhé.

01. Phác thảo ý tưởng lên trên giấy

Đa phần tôi thấy các nhà thiết kế web thường mở thẳng phần mềm Photoshop và đưa luôn ý tưởng mình lên thẳng phần mềm mà quên bỏ qua bước phác thảo này. Thiết kế là  việc giải quyết vấn đề và những vấn đề không thể được giải quyết thông qua phần mềm lại dễ dàng được giải quyết trên giấy, vì khi bạn sử dụng công cụ sẽ không bao giờ nhanh hơn bàn tay bạn, thế nên việc phác thảo trên giấy là vô cùng cần thiết. Hãy suy nghĩ về nội dung, bố trí và chức năng trước khi bắt đầu làm trên phần mềm.

02. Phác thảo hình dáng tổng thể của trang web.

Khi bạn là thiết kế và gặp khách hàng của mình, một cuốn sổ tay và thực hiện ngay "hoa tay" của bạn bằng cách phác thảo ngay trên giấy cho họ hình dung là điều tuyệt vời và đôi khi khiến khách hàng của bạn trong mắt họ thật chuyên nghiệp. Khi bạn tạo ra một cái nhìn và cảm nhận cho một dự án với khách hàng, bạn đã là người thành công bước đầu. Thế nên, điều đầu tiên tôi làm là vẽ ngay phác thảo bố cục tổng thể của trang web và nó sẽ giúp bạn giải quyết tất cả các vấn đề thiết kế. Khung giao diện người dùng chính sẽ bao quanh nội dung, các thanh điều hướng, menu, các bố cục khối dữ liệu. Và quan trọng hơn cả là khi bạn có bố cục tổng thể, các thành phần quan trọng đề được thể hiện rõ ràng và hiện dần lên trong não bạn.

03. Sử dụng lưới trong Photoshops để hiệu chỉnh khối dữ liệu

Trước khi bắt đầu thiết kế bất cứ điều gì trong Photoshop, bạn nên tạo một layer có bố cục lưới thích hợp để bắt đầu. Tất cả các thiết kế không sử dụng lưới đều chắc chắn sẽ không tốt bằng các thiết kế có lưới, việc thể hiện bố cục và chính sác từng khuôn mẫu và các khối dữ liệu sẽ đơn giản dễ dàng hơn.

Một tấm lưới sẽ giúp bạn cấu trúc bố trí của các phần khác nhau; và sẽ dễ dàng biểu đạt cho người lập trình website dễ dàng hiểu được bố cục của bạn cho các kích thước màn hình khác nhau và giúp bạn tạo ra các mẫu website đáp ứng (Webdesign responsive), thống nhất về khoảng cách cũng như các vấn đề phát sinh trong thiết kế khác.

04. Chọn kiểu chữ phù hợp

Khám phá những kiểu chữ và màu sắc khác nhau là một phần của giai đoạn khám phá của một dự án thiết kế website mới. Tôi khuyên bạn không sử dụng nhiều hơn hai kiểu chữ khác nhau trong một trang web, nhưng đôi khi còn phụ thuộc vào thực tế và bản chất của vấn đề đang làm cũng như khách hàng của bạn mà bạn có thể sử dụng nhiều hơn hoặc ít hơn. Mặt khác tùy từng trang web cụ thể mà bạn lựa chọn font chữ phù hợp, ví dụ các website về giáo dục, du học cần có sự nghiêm túc thì tránh các font thư pháp ... khó đọc. Còn các trang web nghệ thuật thì nên dùng các font này để thể hiện cá tính của chủ trang web.

Nói chung chọn một font chữ dễ đọc cho số lượng văn bản dài và một kiểu chữ vui tươi hơn với danh mục và nút bấm. Đừng ngại sử dụng phông chữ lớn sẽ làm bố cục tổng thể trông tốt hơn, bạn có thể lựa chọn các font chữ miễn phí có sẵn của Google Font.

05. Chọn màu sắc để bố cục tổng thể

Trong suốt quá trình lựa chọn tập hợp các kiểu chữ để sử dụng, bạn nên bắt đầu khám phá những màu sắc sẽ sử dụng trong giao diện web, hình nền và văn bản nội dung trang web. Về màu sắc tôi khuyên bạn sử dụng một tập hạn chế về màu sắc và tông màu cho giao diện người dùng chung để tránh tình trạng trang web bị quá lòe loẹt về màu sắc.

Điều quan trọng là áp dụng những cách nhất quán trên các giao diện người dùng đôi khi tùy thuộc vào chức năng của trang web. Hãy suy nghĩ về cách bố trí của các trang web như Facebook, Twitter, Quora, và Vimeo. Bên cạnh giao diện người dùng không nên có bất kỳ hạn chế màu cho hình ảnh minh họa hoặc các chi tiết đồ họa miễn là không can thiệp với các chức năng của thành phần.

06. Bố trí khối nội dung

Mỗi phần trong trang web của bạn giống như đang kể một câu chuyện và cần một lý do và kết quả cuối cùng cho người sử dụng khi truy cập vào trang web. Cách bố trí cần thiết để giúp nêu bật các nội dung quan trọng. Trong thực tế, để bố trí nội dung còn phụ thuộc vào kinh nghiệm của bạn rất nhiều, và đôi khi cái tôi cá tính của bạn thể hiện rất nhiều trên trang web. Tôi khuyên bạn hãy bỏ dần cái tôi ra và hãy học cách hiểu khách hàng của bạn để thể hiện, đôi khi cái bạn thích nhưng khách hàng không hề thích, thế nên đọc được họ mới là vấn đề thành công của nhà thiết kế.

Hãy suy nghĩ về cách bố trí đơn giản nhất mà bạn có thể tưởng tượng cho một mục đích đơn giản và bắt đầu thêm các thành phần chi tiết cần thiết sau đó, đừng cố gắng chi tiết một chỗ và cả bố cục tổng thể đang bị bỏ trống. Cuối cùng bạn có thể ngạc nhiên về những gì bạn làm được nhanh chóng hơn bạn tưởng.

07. Nhìn nhận lại các nút bấm hành động

Khi thiết kế, ta thường bị đi theo lối mòn là làm các nút kêu gọi hành động như mua hàng, liên hệ hay tìm kiếm nhưng đôi khi nó trở thành thừa thãi trong một diện tích màn hình chật hẹp, cái cần thiết nhất không phải là kêu gọi hành động nữa mà đôi khi là cách bố trí nội dung tập trung vào những gì người dùng cần và hãy đặt mình vào vị trí người đang xem nội dung đó, thời nay một nút tìm kiếm là cực kỳ thừa thãi vì cái thói quen search Google đã ăn sâu vào máu của từng người và họ được nhiều kết quả hơn khi tìm trên trang web của bạn.

08. Thách thức chính mình

Tôi khuyến khích mọi thiết kế thoát ra khỏi những gì thuộc về truyền thống  để nó trở nên khác biệt hơn, đó là để thử thách chính mình trên 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 đối với 1 dự án nào đó. Nhưng sự thách thức vượt qua tạo ra điều mới mẻ không chỉ giúp bạn không bị nhàm chán mà còn tăng khả năng thiết kế và kinh nghiệm của bạn thay vì đi theo một kiểu quá truyền thống. Ví dụ về việc thách thức bản thân tạo ra các thiết kế khác nhau bằng cách sử dụng một hệ thống lưới mới, hay một nút bấm khác biệt, pha trộn màu sắc cụ thể ...

09. Chú ý dần đến tiểu tiết

Sau khi đã có đủ các khối dữ liệu cần thiết, bây giờ là lúc bạn vẽ vời cho thiết kế của mình tốt hơn. Và khi đã có bố cục chính, 90% công việc đã hoàn thành và thời gian còn lại tha hồi mà vẽ vời cho các tiểu tiết. Giống thời sinh viên tôi đi dạy tin A, hay nói với đám học sinh khi đi thi Microsoft Word là cố gắng nhập toàn bộ văn bản vào, còn định dạng cho đẹp làm sau, đừng cố gắng mới gõ có khúc mà đã định dạng cho đẹp là thất bại ngay. Và trong thiết kế cũng vậy, khi bạn đã có được bộ khung, các vấn đề còn lại chỉ là 10% công việc.

10. Cẩn trọng trong bố cục

Đôi khi không phải lúc nào cũng sáng tạo được, tư duy sáng tạo của bạn sẽ bị bó hẹp lại nếu gặp một khách hàng thiết kế website bất động sản mà lại đặt phong thủy vào trang web, thế nên cuối cùng trang web lại đi theo phong cách thiết kế phong thủy. Và đôi lúc bạn lại phải cần hiểu về phong thủy để có thể thiết kế giao diện trang web bất động sản. Một bố cục dễ sáng tạo thường thấy ở các mẫu thiết kế website nhà hàng hay rất dễ tạo ra sức hút ở các mẫu thiết kế trang web du lịch vì chính hình ảnh cho nhà hàng hay du lịch sẽ dễ tạo cảm xúc thích thú cho người dùng nhưng đôi khi có vài thiết kế bạn nhìn khá bắt mắt nhưng thử bỏ hình background tuyệt vời đi xem trang web đó sẽ "gớm" như thế nào.

Tạm hết phần 1, chờ phần 2 nhé :).