Những thành phần cơ bản của giao diện thiết kế web

Trong những năm qua, giao diện thiết kế web đã có những thay đổi lớn như dễ đọc, nhiều tính năng, tương thích với các thiết bị, kết nối với công cụ tìm kiếm v.v. Thiết kế các thành phần mới như giao diện phẳng, thiết kế tương thích đã được thêm vào.

Thành phần cơ bản của giao diện thiết kế web

layouts

Các cách bố trí (layout) khác nhau được áp dụng trên trang WEB. Có nhiều cách khác nhau trong cách bố trí trang web nhưng bố cục tối ưu được thông qua theo mục đích của trang web.

Các yếu tố tạo nên layout trang WEB như sau.

Tiêu đề ( header)

Tiêu đề được cung cấp để sắp xếp các hình ảnh, văn bản, điều hướng, hình ảnh phổ biến, vv ở đầu trang WEB.

  • Logo
  • Chức năng điều hướng (Menu)
  • Biểu ngữ
  • Văn bản giới thiệu

Logo

Logo là một yếu tố quan trọng để thể hiện bản sắc doanh nghiệp và xây dựng thương hiệu. Trên trang web, tạo dữ liệu biểu trưng ở định dạng GIF hoặc PNG. Chất lượng hình ảnh của logo rất quan trọng để tạo ra một trang web đẹp. Bạn nên sử dụng dữ liệu biểu trưng ban đầu chứ không phải dữ liệu logo được quét từ danh thiếp hoặc danh mục của bạn. Ngoài ra, nền của logo thường xuyên trong suốt, và trong trường hợp đặt một logo trên mặt trước của một màu trắng và đặt một logo ở mặt trước của một màu tối, quá trình thiết kế logo cũng khác.

2017-10-06-10-54-20.png

Ví dụ về thất bại gây ra bằng cách đặt một biểu tượng có độ phân giải thấp ở mặt trước của một nền tối

2017-10-06-10-57-03.png

Ví dụ khi logo được sắp xếp sử dụng hình ảnh độ phân giải cao

Menu điều hướng

Điều hướng (menu) là một yếu tố quan trọng quyết định tính hoạt động của trang web. Trước đây, các menu điều hướng có hình dạng nút đã được tạo ra, nhưng trong xu hướng thiết kế WEB gần đây thường được trình bày bằng văn bản đơn giản. Lý do cho điều này là việc truy cập từ điện thoại thông minh tăng lên và trình đơn văn bản đơn giản dễ vận hành hơn các nút bấm, cho phép hoạt động trên màn hình hẹp.

Biểu ngữ

Banner là một phần của quảng cáo trong trang WEB. Hình ảnh hoặc cụm từ thể hiện kinh doanh và sản phẩm của công ty được sử dụng cho biểu ngữ. Chắc chắn, biểu ngữ là một phần hiển thị cho người dùng truy cập trang web. Nhưng với tìm kiếm tự nhiên của Google, thiết kế biểu ngữ không liên quan đến SEO. Chúng tôi tin rằng thông tin đơn giản nên được sử dụng cho các biểu ngữ.

Văn bản giới thiệu

Văn bản giới thiệu là một câu diễn tả về công ty, dịch vụ và sản phẩm của trang web, “Bạn sẽ nói những gì trong một từ?” Văn bản giới thiệu dài hơn bản sao tóm tắt và ngắn hơn phần thân văn bản, và cần tạo một đoạn văn ngắn gọn. Ngoài ra đoạn văn giới thiệu khác với banner, SEO có tính hiệu quả cao hơn. Văn bản giới thiệu nên đề cập tới ” Lợi ích cho khách hàng”.

サイドバー

Side bar là phần đặt ra các chức năng và thông tin khác ngoài tiêu đề và nội dung của trang WEB. Thông tin được đặt trong thanh bên như sau:

  • Thanh tìm kiếm
  • Danh sách tiêu đề bài viết mới
  • Mục lục bài viết
  • Lịch
  • Quảng cáo banner
  • tag cloud
  • Thay đổi đăng nhập
  • Giỏ hàng
  • bình luận
  • RSS
  • video
  • lưu trữ

Side bar là chức năng nhưng thông tin quá nhiều làm cho sidebar khó sử dụng. Ngoài ra trên một màn hình nhỏ giống như điện thoại thông minh, sidebar sẽ bị cản trở. Sidebar nên được thiết lập xem xét các điểm mạnh và điểm yếu.

Phần thân

Trong phần thân, bản thân nội dung được sắp xếp như phần thân của trang WEB, hình ảnh, phim ảnh và vân vân. Điều quan trọng nhất trong việc thiết kế phần thân là khả năng đọc của văn bản. Bạn phải thiết lập phông chữ phù hợp, kích thước phông chữ, và tiêu đề.

Cài đặt cột

Để xem xét tính dễ đọc của trang web WEB, có thể thực hiện cài đặt cột. Ví dụ: nếu lĩnh vực kinh doanh của công ty bạn được chia thành bốn phần, nếu bạn thiết lập một cột như thiết kế bên dưới, thì dễ dàng hiểu rằng công ty này có bốn loại hình kinh doanh.

Ngoài ra, khi hiển thị các blog trong một danh sách, nó sẽ trở nên dễ dàng hơn cho những người hiển thị gạch để nhấp chuột hơn là hiển thị chúng trong danh sách.


Danh sách hiển thị


Hiển thị gạch

Footer

Footer là một phần hiển thị thông tin phổ biến cho tất cả các trang ở cuối trang WEB và có cùng vai trò như sidebar. Vấn đề là bố cục sao cho footer không trở nên quá dài sau 3 cột hoặc 4 cột.

Nền

Tùy thuộc vào thiết kế WEB, nền có thể được đặt trên toàn bộ màn hình. Tuy nhiên, vì việc sử dụng nền là một sự đánh đổi với khả năng đọc của văn bản, tốt hơn là không sử dụng nền trừ khi nó là cần thiết.

Tạo wireframe

Khi thiết kế WEB, chúng tôi khuyên bạn nên tạo ra phần khung thay vì bắt đầu thiết kế chi tiết đột ngột. Khung là sự sắp xếp sơ bộ các yếu tố thiết kế tạo thành trang web WEB và sẽ ngăn không cho sự thống nhất và cân bằng của toàn bộ trang web bị thu gọn bằng cách thêm các phần tử sau đó.

Ví dụ dưới đây là một trang tin tức phổ biến ở Việt Nam, nhưng nếu bạn chuyển đổi nó thành một khung, bạn có thể dễ dàng xem những loại yếu tố và cách toàn bộ trang web được sắp xếp.

Tổng kết

Điều đầu tiên cần lưu ý khi thiết kế một trang WEB là cung cấp một thiết kế dễ đọc và dễ hiểu. Người đọc sẽ không đọc kỹ các góc từ góc của trang. Điều quan trọng là độc giả muốn đọc thông tin họ cần tìm hiểu và vì mục đích đó,  không phải là một thiết kế lạ, mà là một thiết kế đơn giản và dễ hiểu.

Cũng cần phải hiểu các yếu tố và chức năng tạo nên thiết kế web, từ đó tạo ra cách bố trí đúng và đặt các nội dung.

Tags:

©2019 Bridge System Co., Ltd.

Bridge System Co., Ltd.

Log in with your credentials

Forgot your details?