Các thuật ngữ trong thiết kế web cần phải biết
Tương tự những lĩnh vực khác, thiết kế website cũng có những đặc trưng và thuật ngữ riêng biệt. Thuật ngữ trong lĩnh vực này chỉ có những người trong lâu năm nghề mới có thể hiểu rõ.
Để hỗ trợ những người mới vào nghề hoặc những bạn muốn tìm hiểu về công việc thiết kế web. JPweb sẽ định nghĩa giúp bạn Những thuật ngữ phổ biến nhất trong thiết kế Web
1. Aligment
Thuật ngữ Aliment diễn đạt sự phân loại, sắp xếp trật tự, cân bằng các yếu tố trên website để có được một bố cục hợp lý. Tuy nhiên, điều đó không có nghĩa là bắt buộc mọi yếu tố phải được sắp xếp với một trình tự thẳng – ngang thẳng hàng. Việc sắp xếp chỉ góp phần làm nên tính chặt chẽ cho website.
2. Animation
Thuật ngữ Animation diễn đạt việc thêm các chuyển động vào những yếu tố xuất hiện trên website bằng các kỹ thuật website. Đặc trưng nổi bật nhất của Animation là hình ảnh động, nó tác động mạnh mẽ đến sự chú ý của người dùng. Kỹ thuật này có thể sử dụng cho các hiệu ứng phức tạp hơn trong việc thiết kế Website.
3. Breadcrumb
Thuật ngữ Breadcrumb là tập hợp các đường link phân cấp có chức năng báo cáo vị trí/ chuyên mục của người dùng trên website. Breadcrumb có chưa những đường dẫn mà các trang hiện tại có thể đến từ trang chủ. Các định dạng bạn sẽ thường xuyên thấy là Home/ Chuyên mục/ Trang. Breadcrumb giúp người dùng định vị tốt hơn trong website, không xảy ra tình trạng “đi lạc”
4. Clutter
Thuật ngữ Clutter dùng để diễn đạt những website có thiết kế không hoàn hảo. Trang web có sắp xếp lộn xộn, kết hợp quá nhiều thông tin khác nhau trên cùng một trang, dẫn đến việc người dùng không nắm được thông tin họ cần.
5. Color Scheme
Thuật ngữ Color Scheme là tập hợp những bộ sưu tập màu sắc được kết hợp với nhau tạo nên sự hài hòa và khác biệt cho website. Color Scheme giúp trang web của bạn có sự thống nhất trên mọi thiết bị và logo website. Bạn có thể sử dụng nhiều cách phối màu khác nhau để khiến trang web trở nên bắt mắt.
6. Contrast
Thuật ngữ Contrast diễn đạt một kỹ thuật được sử dụng để nhấn mạnh sự khác biệt giữa các yếu tố trên website. Nói cách khác, Contrast còn là sử dụng màu sắc bổ sung để hiển thị rõ nét sự tương phản trên website. Sự khác biệt của Website còn phụ thuộc vào hình dạng, phong cách, kiểu chữ… mà Admin căn chỉnh.
7. Empty state
Thuật ngữ Empty state được sử dụng để nói về một Website trống, chưa có bất kì nội dung hay thông tin gì. Tuy nhiên, website này đã hội tụ đủ các thiết kế theo đúng các vị trí
8. Fixed layout
Thuật ngữ Fixed layout là cách bố trí trên website. Thuật ngữ này diễn tả cách bố trí các yếu tố trên trang có kích thước CỨNG, cố định không thay đổi trên các loại màn hình có kích thước khác nhau.
9. Fluid layout
Thuật ngữ Fluid layout có nghĩa hoàn toàn trái ngược với Fixed layout. Fluid layout diễn tả cách bố trí các yếu tố trên trang có kích thước MỀM, thay đổi trên các loại màn hình có kích thước khác nhau.
10. Flat design
Thuật ngữ Flat design là một dạng ngôn ngữ thiết kế giao diện tập trung người dùng vào sự tối giản. Mục đích chính là tập trung người dùng vào nội dung chính của trang, tránh bị phân tâm bởi các kết cấu phức tạp hoặc hiệu ứng rối ren.
11. Fold
- Above the Fold: thuật ngữ này đề cập đến phần người dùng có thể nhìn thấy trên website mà không dùng đến bất kì hành động nào
- Below the Fold: thuật ngữ này diễn đạt sự tương tác của người dùng với website (trượt, cuộn) mới xem được nội dung
12. Gradient
Thuật ngữ Gradient dùng để diễn tả sự thay đổi dần về màu sắc từ tone này sang tone khác khiến website của bạn trở nên độc đáo, nổi bật hơn so với các đối thủ. Bạn nên sử dụng Gradient thay cho ảnh nền. Vì không dễ dàng để chọn một ảnh nền phù hợp với nội dung website. Lời khuyên: Đừng sử dụng Gradient có thiết kế quá rườm rà, rối mắt
13. Grid
Một khung thiết kế được kết cấu từ các được kẻ ngang dọc giao nhau, tạo nên một khoảng không gian được gọi là Grid – mạng lưới. Grid có chức năng gắn kết và sắp xếp các yếu tố trên website một cách gọn gàng, nhất quán.
14. Hero image
Thuật ngữ Hero image diễn tả hình ảnh chất lượng cao, đáp ứng đủ chiều rộng và phản ánh được nội dung của website. Nó còn có thể là những thông điệp xuất hiện trên đầu trang, mục đích truyền tải thông điệp của website đến người dùng. Ngoài ra, Hero image còn có thể là một nút kêu gọi hành động để người dùng sử dụng khi cần thiết
15. Kerning
Kerning là thuật ngữ nói về khoảng cách giữa 2 ký tự (chữ cái, số đơn lẻ). Việc điều chỉnh khoảng cách giữa các ký tự này giúp cải thiện mức độ dễ đọc. Có 2 hình thức Kerning:
- Kern chặn: kết thúc của ký tự trước là vị trí bắt đầu của ký tự sau
- Kern khoảng: là tạo nên khoảng cách tách biệt giữa các ký tự, tùy vào điều chỉnh
16. Landing page
Landing page là thuật ngữ nói về trang đích, được dùng để kêu gọi hành động của người dùng khi truy cập vào website. Mục đích chính của trang đích là mang đến tỷ lệ chuyện đổi cao nhất, tùy thuộc vào mục đích của ban quản trị.
17. Line spacing/ Leading
Hai thuật ngữ line spacing/ leading đề cập đến khoảng cách giữa mỗi dòng văn bản trên website. Thao tác căn chỉnh khoảng cách giữa mỗi dòng giúp người xem dễ đọc, đặc biệt là những nội dung dài có nhiều dòng văn bản. Việc này khiến website trở nên chuyên nghiệp trong mắt người dùng. Có 3 loại tỷ lệ thường gặp trong thiết kế website:
- Tỷ lệ 10/12: khoảng cách dòng bằng 120% cỡ chữ
- Tỷ lệ 10/14: khoảng cách dòng lớn hơn tỷ lệ 10/12
- Tỷ lệ 10/16: khoảng cách dòng tối đa mà nhà thiết kế có thể sử dụng. Tuy nhiên, tỷ lệ này khiến các hiệu ứng trên website không đẹp gây khó chịu cho người dùng.
18. Media query
Media query là thuật ngữ nói về những module mới được thêm vào trong CSS3. Media query hiện đã được triển khai đầy đủ trong các trình duyệt Webkit, Firefox, Opera, IE
19. Opacity
Thuật ngữ Opacity diễn tả sự đậm nhạt của các đối tượng trên website. Khi bạn tăng Opacity, đối tượng sẽ được hiển thị rõ ràng, đậm nét. Ngược lại, đối tượng sẽ hiển thị mờ nhạt đi khi bạn giảm Opacity. Opacity thường được sử dụng để làm nổi bật các yếu tố được chèn thêm lên ảnh (text, ký tự)
20. Resolution
Resolution có nghĩa là độ phân giải – số lượng điểm ảnh trong một hình, có đơn vị là Pixel. Độ phân giải ảnh càng cao, chất lượng hình ảnh càng tốt. Độ phân giải thường được chia ra thành 2 loại:
- DPI (dots per inch): nó là tần suất xuất hiện của các dầu chấm mực khi in trên 1 inch. DPI được sử dụng trong quá trình in ấn thực tế
- PPI (pixels per inch): là các chỉ số Pixel được hiển thị trên 1 inch màn hình. Nói cách khác đây chính là độ phân giải được ghi trên các thiết bị điện tử có màn hình hiển thị.
21. Responsive design
Thuật ngữ Responsive design diễn tả độ tương thích của website với tất cả các loại màn hình trên các thiết bị điện tử khác nhau. Điều này tạo nên sự thuận tiện cho người dùng khi có thể truy cập website bất cứ đâu.
22. Saturation
Saturation là thuật ngữ nói về độ bão hòa màu, vẻ tươi sáng hoặc u trầm của màu sắc các đối tượng hiển thị trên website. Sắc độ là sự sáng chói (Luminosity) hay cường độ (intensity). Nói cách khác Saturation là độ mạnh hoặc yếu của màu nào đó.
23. Typography
Typography là nghệ thuật sắp xếp – các từ, chữ cái, biểu tượng, khoảng cách giữa chúng. Việc sắp xếp này đóng vai trò rất quan trọng trong việc xác định hiệu quả của việc truyền tải thông điệp đến khách hàng. Dựa vào các nghiên cứu khoa học, các yếu tố “xấu – đẹp” sẽ gây ảnh hưởng trực tiếp đến cảm nhận của khách hàng.
