Đấy chính là chìa khóa giúp bạn định hình được bố cục của trang web, cơ sở để các bạn tạo dựng được website hoàn chỉnh.. Sử dụng lưới trong photoshop tạo độ chính xác cho bố cục website
Trang 1longchibi May 14,
2019
23 bước để bố cục trang web hoàn hảo(phần 1)
vietpro.net.vn/23-buoc-de-bo-cuc-trang-web-hoan-haophan-1.html
Bố cục trang web là một trong các yếu tố giúp bạn trình bày nội dung của trang web một cách đầy đủ và rõ ràng nhất Nhưng trong quá trình thiết kế bố cục website nhiều lập trình viên vẫn luôn mắc phải một số lỗi quan trọng, nhất là các bạn thực tập sinh và các nhà thiết kế web mới bước chân vào nghề Để xây dựng được một bố cục trang web
hoàn hảo thì các nhà thiết kế web cần phải thực hiện một số nguyên tắc sau để tránh được những sai sót đáng tiếc Dưới đây không chỉ là những những nguyên tắc đơn
thuần mà còn là những mẹo hay giúp bạn có được một bố cục trang web chuyên nghiệp.
Bài viết liên quan:
23 bước xây dựng bố cục trang web hoàn hảo(phần 2)
Thu thập thông tin giúp bạn định hình được bố cụ trang web
Trước khi bắt tay vào công việc nào đó thì bạn cần phải có một kế hoạch cụ thể, chi tiết
rõ ràng Bước quan trọng đâu tiên khi thiết kế một website là bạn cần phải mục đích của trang web để làm gì, khách hàng mong đợi những gì từ trang web Một trang web hoàn hảo là vừa đảm bảo được yếu tố mới mẻ, sự sáng tạo độc đáo trong thiết kế nhưng vẫn đảm bảo được những chức năng quan trọng của một trang web
Để làm được điều này các bạn nên có những buổi nói chuyện trực tiếp với khách hàng để lắng nghe và thu thập thông tin Đấy chính là chìa khóa giúp bạn định hình được bố cục của trang web, cơ sở để các bạn tạo dựng được website hoàn chỉnh
Lên ý tưởng trên giấy thể hiện phong cách thiết kế chuyên
nghiệp
Sau khi đã có được những thông tin cần thiết thì các bạn bắt đầu thực hiện nó bằng
những bản phác thảo đầu tiên Về lý thuyết thì điều này bất cứ nhà thiết kế nào cũng biết nhưng không phải tất cả đều thực hiện điều này Hầu hết các nhà thiết kế bắt tay vào
thiết kế các website trước khi đưa ra các trường hợp cụ thể để giải quyết những vấn đề Bạn nên suy nghĩ về nội dung, bố cục và các chức năng của trang web trước khi bắt tay vào thiết kế để đảm bảo rằng ý tưởng của bạn phù hợp với nhu cầu, mục tiêu khách
hàng Khi bạn làm điều này thì bạn sẽ rút ngắn được thời gian, công sức và tạo dựng
Trang 2được lòng tin với khách hàng vì bạn luôn thể hiện thái độ tôn trọng khách hàng cũng như thể hiện tác phong thiết kế chuyên nghiệp của bạn
Thực hiện thiết kế trang web mẫu tránh được những sai sót
dù là nhỏ nhất
Khi được giao một dự án nào đó thì bạn nên thực hiện một bản thiết kế mẫu để thử
nghiệm những ý tưởng của mình có hợp lý hay không Bạn sẽ thiết kế một trang web
mẫu hoàn chỉnh với giao diện chính là các thanh công cụ, nút chức năng được sắp xếp
bên trái, bên phải hay phía dưới trang web
Nếu bạn tiếp cận thiết kế của bạn từ quan điểm này thì bạn sẽ biết được cách bố trí nội dung như thế nào, bố trí giao diện hợp lý nhất và tránh được những sai sót dù là nhỏ
nhất để tiết kiệm thời gian cho bản thân và khách hàng
Sử dụng lưới trong photoshop tạo độ chính xác cho bố cục
website
Một trong những yêu cầu quan trọng của các nhà thiết kế web là bạn phải thành thạo
photoshop và đặc biệt là cách sử dụng lưới Khi sử dụng lưới trong thiết kế sẽ làm cho
các thiết kế của bạn có tính thẩn mỹ hơn rất nhiều
Khi sử dụng lưới nó sẽ chia bố cục trang web của bạn ra những phần khác nhau với các thông số kỹ thuật mà bạn mong muốn để tạo ra các mẫu template phù hợp với từng thiết
bị khác nhau, tạo độ chính xác trong thiết kế
Chọn kiểu chữ cho trang web tạo nên sự độc đáo, mới lạ
Kiểu chữ, màu sắc chữ chính là một trong các yếu tố quan trọng để bạn tạo nên sự sáng tạo và độc đáo trong thiết kế của bạn Khi thiết kế website bạn không nên sử dụng quá hai kiểu chữ khác nhau trong một trang web, nói chung bạn nên chọn một font chữ dễ đọc cho những văn bản dài, những font chữ mới lạ, vui nhộn cho tiêu đề lớn và font chữ khác cho các tiêu đề nhỏ Có nhiều nhà thiết kế cho rằng không nên sử dụng font chữ
lớn hay chỉ nên sử dụng một loại font thống nhất cho toàn bộ trang web Đây là một ý
tưởng không hay vì nó sẽ làm cho trang web của bạn trở nên mờ nhạt, không có gì nổi
bật hay đặc sắc Các bạn đừng ngần ngại thể hiện sự sáng tạo và phong cách của mình trong các thiết kế, chính điều này sẽ tạo nên điểm nhấn cho thiết kế
Chọn màu chữ thể hiện sự tinh tế trong thiết kế
Trang 3Trong quá trình chọn các kiểu chữ bạn nên chọn màu sắc của font chữ và màu nền văn bản sao cho phù hợp, tránh hiện tượng rối mắt, phản cảm Trước khi chọn kiểu chữ thì bạn nên thử nghiệm chúng với các màu sắc khác nhau để chọn ra được màu ưng ý nhất Điều quan trọng là bạn nên áp dụng màu sắc một cách nhất quán ở phần giao diện
người dùng, nhưng không phải là để một màu sắc duy nhất mà tùy thuộc vào chức năng của từng phần mà bạn chọn một màu sắc thích hợp để dễ dàng phân biệt các chức năng này
Có nhiều trang web kết hợp màu sắc rất tinh tế và độc đáo như Facebook, Twitter, Quora
và Vimeo Bên cạnh màu sắc trên giao diện người dùng các nhà thiết kế không giới hạn màu sắc cho các hình minh họa hay các chi tiết đồ họa khác, miễn sao chúng không làm ảnh hưởng gì tới chức năng của bố cụ trang web
Chia bố cục trang web làm nổi bật nội dung quan trọng
Khi thiết kế một website thì bạn cần đảm bảo được yếu tố là cấu trúc trang web đơn giản
và dễ điều hướng Nếu bố cục hợp lý thì mới làm nổi bật được nội dung mà bạn muốn
thể hiện
Bạn đừng nên cho quá nhiều chi tiết trong trang nó sẽ làm cho trang web phức tạp, khó hiểu và khiến cho người sử dụng cảm giác rối mắt khi xem và không biết nên bắt đầu từ đâu Trước hết bạn hãy cứ thiết kế một bố cục thật đơn giản sau đó thêm các phần và chi tiết khác nếu cần thiết Cuối cùng bạn sẽ rất ngạc nhiên về những gì mình làm được, vừa đơn giản nhưng lại đầy đủ chi tiết và có những điểm sáng tạo của riêng bạn
Sử dụng các các nút chức năng thể hiện sự sáng tạo của bạn
Bạn là một Designers và bạn sẽ là người quyết định cách sử dụng của một trang web,
quy định các bước hoạt động trong trang web Đã có nhiều câu hỏi đưa ra cho các nhà thiết kế rằng có nên thêm nút tìm kiếm hay không, nhưng hầu hết các câu trả lời đều là không
Trong thiết kế web sẽ có những quy ước nhất định và bạn tuân thủ theo các quy tắc đó là chính xác nhưng trong những trường hợp nhất định các bạn cần phải cải tiến và sáng tạo
nó để phù hợp với những trang web khác nhau
Thêm các nội dung động tạo trải nghiệm thú vị cho trang web
Trang 4Một trang web động là yếu tố cần thiết và quan trọng để giúp cho khách hàng có những trải nghiệm thú vị Các bạn có thể tạo những chi tiết động trên nội dung bằng cách sử
dụng cảnh quay video/ animation, hiệu ứng để tạo cảm giác chuyển động Để đạt được hiệu quả cao nhất thì bạn nên sao chép các mẫu có sẵn để tạo ra một đối tượng mới
được gọi là phương pháp prototyping
Sử dụng prototyping giúp tiết kiệm tối đa thời gian làm việc
Hiện nay có rất nhiều công cụ tạo mẫu để các bạn lựa chọn mà không cần phải sử dụng các kỹ thuật mã hóa như trước đây Điều này sẽ giúp bạn đáp ứng đúng nhu cầu của
khách hàng, tiết kiệm thời gian để thực hiện việc khác
Sáng tạo ra yếu tố mới tạo nên sự khác biệt cho trang web
Khi tiến hành một dự án mới bạn lại có thêm cơ hội để thử thách bản thân và phát huy
sự sáng tạo của mình Bên cạnh việc tuân thủ theo các quy tắc hay cải tiến các yếu tố cũ thì bạn nên sáng tạo nên những yếu tố mới để tạo nên sự khác biệt cho thiết kế của
mình Ví dụ như bạn có thể tạo ra các thành phần mới, sáng tạo trong màu sắc, hiệu ứng hình động…
Chú ý tới các chi tiết nhỏ tạo nên thành công cho thiết kế
Bố cục trang web hoàn hảo là bao gồm tất cả các yếu tố, chi tiết dù là nhỏ nhất Đôi khi chính những chi tiết nhỏ lại tạo nên thành công cho thiết kế của bạn, điều này ít được các nhà thiết kế web chú ý tới hoặc là không hay biết
Đơn giản là bạn chỉ cần sử dụng các nút hướng dẫn, chức năng bằng hình ảnh vector, tạo các màu sắc độc đáo trong hình nền của văn bản, màu chữ tạo cho người sử dụng những cảm giác mới mẻ và khác lạ Đây có thể sẽ trở thành điểm nhấn cho website
Nếu muốn thiết kế được một website với bố cục hoàn hảo thì bạn nên tham khảo các
bước thực hiện ở trên để giúp bạn có những hướng đi đúng nhất
Cảm ơn các bạn đã theo dõi bài viết!