bgware

20 nguyên tắc quan trọng để có bố cục website hoàn hảo (P1)

Chuyền gia Claudio Guglieri sẽ hướng dẫn bạn những nguyên tắc tối quan trọng để tạo ra bố cục hoàn hảo trong thiết kế website.

Bài viết này nhằm mục đích đưa ra những kinh nghiệm thiết kế mà mọi người thiet ke website nào cũng cần ghi nhớ trước khi bắt đầu một dự án mới. Những nguyên tắc này không chỉ bảo gồm các khía cạnh như việc thiết kế trang đích đến, mà còn đề cập đến những vấn đề chung khác để giúp bạn thiết kế website ấn tượng nhất. Hãy nắm bắt 20 nguyên tắc sau và tự mình tạo ra một sản phẩm hoàn hảo. 

01. Viết ý tưởng lên giấy

 initial sketch

Những ý tưởng thiết kế sơ khai nhất về các thành phố trên thế giới

Bước đầu tiên này trong thiet ke web tưởng chừng như ai cũng phải làm, nhưng thực tế nhiều người bỏ qua nó mà làm trực tiếp trên photoshop trước khi hình dung rõ những vấn đề cần giải quyết. Thiết kế là việc phải giải quyết những vấn đề đặt ra và những vấn đề không thể nào được giải quyết thông qua sự hình dung mơ hồ mà phải thông qua một bố cục tốt và sự phân chia rõ ràng. Hãy suy nghĩ về phần nội dung, bố cục và chức năng của website trước khi bắt tay vào thiết kế trên phần mềm. 

02. Phác thảo chi tiết lên framework

 UX sketch

Phác thảo là một bước cơ bản giúp bạn giải quyết vấn đề và cơ cấu phần bố cục

Khi nhìn vào một dự án, điều đầu tiên bạn cần làm là thực hiện một bảng framework chi tiết để giải quyết các vấn đề trong thiết kế. Một framework là khung công việc bao quát toàn bộ nội dung, cho phép bạn hình dung những việc phải làm. Nó bao gồm các thành phần như menu, thanh bên (sidebar) và thanh đáy (bottom bar).

Thiết kế web theo bước này, bạn sẽ có một hình dung rõ ràng hơn về những yêu cầu cần có khi thiết kế phần trang chủ.

03. Tạo ô lưới trên Photoshop


Một ví dụ của 978 Grid với đường cơ sở 10px 

Bước tiếp theo trong thiet ke web này khá đơn giản. Trước khi thiết kế bất kỳ thứ gì trên Photoshop, bạn cần một mạng ô lưới phù hợp. Bạn không thể bỏ qua bước này, nếu không muốn thiết kế của bạn sẽ không bắt mắt một chút nào. 

Ô lưới này sẽ giúp bạn cơ cấu phần bố cục theo các phần rõ ràng. Nó có thể giúp bạn nhìn kích thước, khoảng cách, bố cục và nhiều vấn đề khác một cách chính xác nhất trên màn hình. 

04. Chọn mẫu chữ 

 typography

Nguyên tắc chung là không sử dụng quá 2 font chữ trên bố cục một trang web

Tìm kiếm những kiểu chữ và màu sắc phù hợp là một phần trong việc thiet ke web. Lời khuyên được đưa ra là bạn không nên sử dụng quá 2 font chữ trên một mặt website nhưng dĩ nhiên cũng tùy thuộc vào yêu cầu thiết kế mà bạn sẽ quyết định dùng ít hay nhiều hơn 2. Trên hết vẫn là tìm một font chữ nào thích hợp để đọc những đoạn văn bản dài và hợp với phần tiêu đề nhất để tạo ra hiệu ứng tốt. Đừng ngần ngại dùng những font lớn, cũng đừng quá cứng nhắc và phải phù hợp với tổng thể. 

05. Chọn màu chủ đạo

 colours

Sử dụng số lượng tông màu một cách vừa phải để tránh gây rối mắt.

Trong quá trình tìm font chữ, bạn cũng nên bắt đầu để ý chọn màu sẽ dùng cho giai diện, hình nền và văn bản. Về màu sắc, lời khuyên cho bạn là nên dùng hạn chế các tông màu trên giao diện chung. 

Điều quan trọng là phải có sự hài hòa màu sắc trên giao diện chung. Hãy tham khảo thêm bố cục của Facebook, Twitter, Quora hoặc Vimeo. Ngoài ra, không có sự hạn chế nào về màu sắc của hình minh họa hoặc chi tiết đồ họa, miễn là chúng không làm ảnh hưởng đến chức năng của các thành phần trên web. 

06. Phân chia bố cục

 B-reel homepage

Cấu trúc của website càng đơn giản thì càng thuận tiện cho người dùng

Mỗi phần của website cần phải có một chức năng nhất định. ​ Phần bố cụccần phải làm nổi bật từng phần trong nội dung câu chuyện mà chúng ta muốn truyền tải. Nhưng chúng ta cũng không nên tham lam khi cố gắng truyền đạt quá nhiều nội dung cùng một lúc. 

Hãy nghĩ đến một bố cục thật đơn giản với mục đích cũng đơn giản nhất có thể và bắt đầu gắn thêm những thành phần cần thiết khác. Để làm được điều này sẽ không đơn giản như bạn nghĩ. 

07. Hình dung ra sản phẩm một lần nữa 

 search button

Trong nhiều trường hợp, sau khi cân nhắc lại, bạn sẽ thấy chẳng cần đến ô tìm kiếm làm gì.

Là một người thiết kế website, chúng ta phải hình dung ra cách khách hàng sử dụng web của mình. Bạn phải đặt ra các bước để thực hiện một hành động đơn giản và hiệu ứng mà khách nhận được từ website. Các mầu thiết kế và các quy tắc luôn sẵn có để tiết kiệm thời gian thiết kế, nhưng quan trọng là bạn phải hình dung lại lần nữa về sản phẩm của mình xem cần có những thành phần gì, và cân nhắc xem có thể cải thiện những thành phần đó như thế nào.  

08. Thử thách bản thân

Sự động viên là vô cùng cần thiết với người thiết kế để họ sáng tạo hơn nữa trong mỗi dự án. Sự sáng tạo không phải lúc nào cũng đến khi ta bắt tay vào việc, do đó chúng ta phải thử nghiệm nhiều thứ liên quan đến thiết kế để tìm ý tưởng mới. Chẳng hạn như thử dùng hệ thống ô lưới mới, tạo ra một thành phần mới hoặc đơn giản như không pha màu hoặc chỉ sử dụng một màu sắc cụ thể nào đó. 

09. Lưu ý đến từng chi tiết

 game work in progress

Những chi tiết được chăm chút trong một game

Quan tâm đến từng chi tiết nhỏ khá tốn thời gian và công sức nhưng không phải lúc nào cũng được chú ý trên sản phẩm cuối cùng. Nó phụ thuộc nội dung của từng sản phẩm và sự tận tâm mà bạn dành cho sản phẩm mình thiết kế. 

Những chi tiết nhỏ có thể là một hình động bất ngờ hoặc một nút có màu sắc nổi bật, hay những chi tiết tinh tế khác...Để chăm chút cho những chi tiết nhỏ này, bạn cần có cảm hứng và sự thích thú nhất định. 

10.  Coi trọng từng thành phần web như thể bạn đang thi thiết kế thành phần đó

 video component

Lưu ý đến mọi thành phần và đảm bảo sự thống nhất tổng thể

Lời khuyên chính xác này là của Fantasy Interactive. Mọi thành phần đều cần thiết kế một cách cẩn thận và phải là thiết kế tốt nhất nếu đánh giá riêng phần đó. Đôi khi những người thiết kế đã bỏ đi một vài phần của web mà trước đây họ đã  từng cho vào danh sách phải làm nhưng cuối cùng lại không xem trọng nó nữa.

 
Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số
Có: 5/1 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

Đăng ký ngay công cụ SEO web hiệu quả, dễ dùng XOVI NOW

Đăng ký ngay công cụ SEO web hiệu quả, dễ dùng XOVI NOW

XOVI NOW SEO là một công cụ SEO toàn diện, cung cấp đầy đủ các tính năng cần thiết cho doanh nghiệp trong việc tối ưu hóa website và tăng thứ hạng trên công cụ tìm kiếm.

Chăm sóc trang web, điều nên làm ngay khi có web

Chăm sóc trang web, điều nên làm ngay khi có web

Website là một phần quan trọng trong chiến lược kinh doanh trực tuyến của bất kỳ doanh nghiệp nào. Chăm sóc website là một trong những công việc quan trọng để đảm bảo website hoạt động ổn định, an toàn và hiệu quả.

Tạo email giá rẻ và hiệu quả: Khám phá giải pháp tiết kiệm chi phí.

Tạo email giá rẻ và hiệu quả: Khám phá giải pháp tiết kiệm chi phí.

Trong thời đại công nghệ phát triển nhanh chóng, việc có một địa chỉ email chuyên nghiệp trở nên quan trọng hơn bao giờ hết. Tuy nhiên, không phải ai cũng muốn đầu tư một số tiền lớn để có một dịch vụ email chất lượng.

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây