8 Tháng Mười, 2020
Chưa có bình luận

Tips thiết kế layout web đẹp và một số giao diện cực chất không thể bỏ lỡ

Danh mục:

Có thể nói một giao diện Web đẹp luôn là đích đến mong muốn của mọi Website. Việc có một giao diện đẹp không chỉ giúp trải nghiệm trên trang được mượt mà hơn, mà còn giúp tối ưu hóa chuyển đổi.

Thấu hiểu tầm quan trọng của UI / UX, Nam Digital xin giới thiệu đến bạn một số Tips thiết kế giao diện Web không thể bỏ qua.

Bước 1: Học kỹ căn bản

Có thể nói nếu bạn đang trong giai đoạn làm quen với Ui / Ux thì cần phải thực sự chắc căn bản

Hãy tìm hiểu tài liệu tại 1 số nguồn nổi tiếng, search cụm từ: "how to learn ui/ux" trên google

Đối với Nam Digital, một nguồn thông tin tuyệt vời mà bạn không thể bỏ qua phải kể đến là material.io. Đây là kho tài nguyên và thiết kế ứng dụng, giao diện theo chuẩn Google. Bạn có thể xem những hướng dẫ vô cùng chi tiết tại đây

Bước 2: Làm quen với Themes Website

Themes website hay giao diện web là yếu tố vô cùng quan trọng trong việc xây dựng một website thành công. Đối với tôi, các yếu tố Themes mà ta cần chú ý là

Màu sắc

Màu sắc của một Website thường rơi từ 2 - 6 màu. Bạn không nên sử dụng quá nhiều màu sắc để tạo tính nhất quán cho 1 giao diện

Thường thì Nam sẽ chia làm 4 loại màu chính thôi

  • Primary color(màu chính)
  • Secondary color(màu phụ)
  • Success color(Màu hiển thị thông báo mang sắc thái tích cực: đăng ký thành công, hoàn thiện đơn hàng)
  • Danger color(Màu mang sắc thái tiêu cực, các loại lỗi....)

Đối với Oxygen builder thì họ chia thành 6 nhóm màu chính

Bạn có thể tham khảo tại kênh Youtube của họ để biết thêm chi tiết

Typography

Font chữ là yếu tố không thể xem nhẹ khi thiết kế một giao diện đẹp. Theo kinh nghiệm của Nam, bạn cần lựa chọn tối thiểu 2 Font chữ để xây dựng một giao diện phù hợp

  • Heading font: Font chữ dùng cho Heading, các thẻ html từ h1 đến h6. Theo như lời khuyên của Oxygen Builder thì họ thường chỉ dùng đến h3 là kịch.
  • Body font: Là font chữ của thẻ p hoặc span.

Bạn cần lưạ chọn Font chữ phù hợp, kết hợp một cách khéo léo Heading & Body.

Search google cụm từ "font pair" bạn có thể tìm được các công cụ phù hợp để mix 2 loại font

Độ cong viền

Độ cong viền là yếu tố "nhỏ nhưng có võ" mang đến sự thông minh & tinh tế cho giao diện của bạn. Có 1 anh thiết kế UI / Ux đã khai sáng cho mình vấn đề này.

Border radius lý tưởng nhất có thể nằm ở khoảng 4 - 8px là đủ để tạo nên một độ cong viền hoàn hảo. Bạn có thể áp dụng hình thức này với các thẻ (card) hiênr thị thông tin.

Với ai học code css, việc áp dụng 1 khối có class là do-cong-vien sẽ được làm như sau:

.do-cong-vien {
  border-radius: 8px
}

Đổ bóng

Theo material.io, bản chất của 1 web hay giao diện đẹp là việc chúng được tạo nên bởi nhiều layout với độ cao khác nhau, độ cao càng nhỏ thì layout đó càng nằm bên dưới và phần bóng cũng sẽ ít hơn.

Bạn cứ hình dung như đó là 1 tấm phản được đặt nhô lên vậy và đặc tính đổ bóng của css sẽ phản ánh điều đó

Bạn có thể dễ dàng tìm kiếm các công cụ đổ bóng bằng cách search: "box shadow generator css" trên google

Grey tint

Grey tint là khái niệm mà Nam Digital mới áp dụng trong những năm gần đây. Grey tint cho phép bạn đặt những mảng màu xám để tạo độ nghỉ cho mắt

Bước 3: Thiết kế giao diện Website một cách bài bản

Sau khi đã nắm vững những thành phần cơ bản kể trên, bạn hãy áp dụng 1 quy trình chặt chẽ để thiết kế chúng. Quy trình đó được thực hiện như sau:

Vẽ Wireframe

Wireframe được coi là bản phác thảo sơ khai nhất của một website mà bạn nên bắt đầu luôn. bản phác thảo này cho phép bạn xác định được bố cục cần có của website.

Thường thì bạn có thể vẽ draft phác thảo Wireframe sau khi ghi nhận ý kiến khách hàng qua một quyển sổ. Bước tiếp theo bạn có thể dùng figma để dựng lại Wireframe cần thiết.

Thiết kế Element (bước 2)

Lúc này bạn cần vận dụng chính xác việc thiết kế những element ở bước 2, thực hiện tuần tự như checklist. Mục đích của việc này giúp bạn thực hiện đủ các đầu việc mà không bỏ sót một yếu tố nào cả.

Ghép các thành phần vào bố cục wireframe

Nếu sử dụng các phần mềm như Lunacy hay Sketch, Xd. Bạn sẽ thường dễ thấy chúng luôn khuyến khích ta sử dụng các khối reuseable: có thể tái sử dụng.

Khi đã xây dựng được các element cần thiết, bạn có thể tái sử dụng chúng trong việc sắp xếp các thành phần của Website.

Một bố cục Website cơ bản mà Wireframe nên tuân theo sẽ gồm 3 phần chính

  • Header
  • Footer
  • Body

Triển khai đủ 3 thành phần này sẽ giúp bạn lắp ghép các thành phần có hệ thống và bài bản nhất.

Dựng website

Nếu bạn là developer thuần code, việc dựng 1 giao diện đẹp hoàn toàn nằm trong tầm tay. Bạn bắt đâug xây dựng Header, Footer và Body cho từng trang. Định nghĩa các class và id cần thiết cho các elements

Nếu bạn giống Nam Digital, sử dụng page builder thì flatsome, Elementor và oxygen builder là lựa chọn hợp lý. Chúng đều có tính năng xây dựng themes, màu sắc và các Element đã định nghĩa ở trên.

Tips để có một giao diện Web đẹp

Giao diện gọn gàng, sạch đẹp

Đừng cố nhồi nhét các thành phần một cách quá đà, hãy tiết chế giao diện, tạo 1, 2 điểm nhấn và giữ giao diện càng sạch càng tốt.

Áp dụng được tips này, bạn sẽ xây dựng được 1 giao diện thoáng mắt, thân thiện cả trên desktop và mobile

Nhiều text thì nên căn trái phải, ít text thì căn giưã

Đây là điểm nhỏ nhưng chất khi xây dựng 1 giao diện

Màu sắc đồng nhất với màu nhận diện, không sử dụng quá 3 màu

Đảm bảo tính nhất quán trong một giao diện là điều vô cùng quan trọng, chính vì thế, việc sử dụng màu sắc đồng nhất với màu nhận diện & áp dụng tiết chế màu sắc là điều vô cùng quan trọng(Sử dụng tối đa không quá 3 màu)

Bạn có thể tham khảo về Design System của Nam Digital tại đây để biết thêm chi tiết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Vps nên dùng

Tốc độ cao, ổn định, hủy đăng ký bất cứ lúc nào!