Các công cụ hữu ích để kiểm tra các yếu tố thiết kế của một trang web (và tìm hiểu các chi tiết tốt hơn về thiết kế web)
Các trang web tìm kiếm hấp dẫn, theo cách riêng của họ, một kiệt tác nhỏ của thời đại Internet. Tùy biến có thể dễ dàng hoặc phức tạp như bạn muốn, từ việc sửa đổi một chủ đề WordPress để phát triển sự xuất hiện của trang web từ đầu đến cuối.
Sau đó, bạn có khả năng đi qua các yếu tố bạn thích và màu sắc mà bạn muốn tái sử dụng trong các dự án của riêng bạn. Trong bài viết này, chúng tôi sẽ cho bạn thấy các yếu tố cần thiết để trang web cho bạn biết mọi thứ bạn muốn biết.
Màu gì?
ColorZilla
Ban đầu được tạo cho Firefox, ColorZilla đã có sẵn trên Chrome và các trình duyệt liên quan của Chrome.
Sau khi cài đặt, bạn sẽ tìm thấy một nút bổ sung trong giao diện người dùng cho cả hai trình duyệt. Nút này cung cấp cho bạn khả năng tìm ra màu sắc của bất kỳ thứ gì trực tuyến. Bạn sẽ nhanh chóng nhận ra rằng ColorZilla làm được nhiều hơn là chỉ xác định màu sắc vì nó cũng hỗ trợ cho các bảng màu.
Font là gì?
WhatFont? (Chrome)
Nói đúng ra, bạn không cần WhatFont? mở rộng để tìm ra phông chữ của một trang web, nhưng đó là cách nhanh nhất để làm như vậy. Cách khác là mở bảng định kiểu và đi săn qua nó.
Cài đặt WhatFont? và bạn sẽ thấy một biểu tượng mới trong giao diện người dùng trình duyệt của mình. Trừ khi bạn khởi động lại hoàn toàn trình duyệt, bạn sẽ phải làm mới trang mà bạn muốn xác định phông chữ. Khi bạn đã thực hiện việc này, hãy nhấp vào nút trong trình duyệt của bạn.
Một nút mới sẽ xuất hiện ở góc trên bên phải của trang web và khi bạn di chuột qua văn bản, tên phông chữ sẽ được hiển thị. Nhấp vào phông chữ sẽ cung cấp thông tin bổ sung liên quan đến định cỡ. Nó cũng sẽ xác định các phông chữ khác trong "ngăn xếp" đó là thuận tiện bạn nên muốn xem những gì các nhà phát triển web thay thế xem xét cho kiểu chữ dự định của họ.
Trình tìm phông chữ (Firefox)
Một phần mở rộng độc quyền của Firefox trong cùng một mạch như WhatFont của Chrome?
Cài đặt tiện ích mở rộng và bạn sẽ có tùy chọn mới trong trình đơn ngữ cảnh nhấp chuột phải.
Khi bạn tìm thấy nội dung nào đó bạn muốn xác định, hãy đánh dấu nó, sau đó hiển thị các tùy chọn có sẵn cho bạn. "Phân tích lựa chọn" sẽ cho bạn biết mọi thứ bạn từng muốn biết.
Các chi tiết nó cung cấp là không có gì ngắn của hàm-rơi. Nếu văn bản được đánh dấu là "(ngăn xếp)" thì nó sẽ chọn phông chữ đầu tiên trong ngăn xếp mà bạn đã cài đặt. Ngăn xếp thường kết thúc bằng một thuật ngữ chung, như “sans-serif” trong ví dụ trên. Trong trường hợp không chắc chắn một trong các phông chữ khác trong ngăn xếp không được cài đặt, nó sẽ rơi trở lại mặt sans-serif mặc định của hệ thống của bạn.
Bạn cũng có thể tùy chỉnh các yếu tố cũng thông qua tùy chọn "Điều chỉnh phần tử". Khi tiện ích mở rộng nhắc bạn nhập một họ phông chữ, bạn có thể tự nhiên. Trong ví dụ của chúng tôi, chúng tôi đã thay đổi mọi phông chữ trên Wikipedia thành một cái gì đó khác, tạo ra mash-up kỳ lạ được hiển thị. Những thay đổi này không phải là vĩnh viễn và biến mất khi bạn tải lại trang.
"Thay thế phông chữ (toàn bộ DOM)" cho phép bạn thay đổi mọi phiên bản phông chữ trên trang. Không phải là một fan hâm mộ của Roboto (mà chúng tôi sử dụng như sans-serif chính của chúng tôi)? Đánh dấu tùy chọn này, nhấp vào “Roboto” từ danh sách phông chữ hiện có trên trang và nhập tên phông chữ bạn muốn xem. Một lần nữa, nó không phải là vĩnh viễn, nhưng nó cho phép bạn chơi với thiết kế của các trang web yêu thích của bạn, ngay cả khi chỉ tạm thời.
Đo lường trang web
Thước trang (Chrome)
"Một người cai trị? Thật sao? ”Chúng tôi nghe bạn hỏi. Thước trang là thước đo màn hình hơi khác so với âm thanh của màn hình. Trong thực tế, chúng tôi hoàn toàn hiểu được bất kỳ hoài nghi ban đầu nào.
Định vị các vấn đề trên Web. Các yếu tố của một trang phải được đặt cách nhau, hoặc chúng không hấp dẫn như chúng có thể. Mặc dù thông tin này đặc biệt bí mật để muốn biết, Trình quản lý trang làm cho nó có thể.
Cài đặt nó giống như bạn làm bất kỳ phần mở rộng nào khác, và bạn sẽ có một nút khác trong giao diện người dùng trình duyệt của bạn. Lưu ý rằng bạn sẽ phải mở trang web để thử tiện ích mở rộng - bạn sẽ không thể sử dụng một trong các trang web tích hợp của Chrome vì lý do bảo mật.
Khi bạn đã nhấp vào nút, bạn sẽ nhận được một dải thông tin bổ sung ngay bên dưới thanh địa chỉ và bạn có thể sử dụng chuột để nhấp và kéo hình dạng, kích thước của nó sẽ được tính và hiển thị dọc theo thanh nói trên . Ngoài ra, bạn cũng có tùy chọn bật hoặc tắt lưới, mặc dù nó có thể giúp chính xác.
Nếu bạn muốn bạn cũng có thể thay đổi màu sắc của hình chữ nhật từ màu xanh mặc định của nó. Bất kể màu bạn chọn, nó sẽ tự động thêm mức độ minh bạch để bạn có thể xem nội dung bên dưới màu đó.
Page Ruler xứng đáng một số tín dụng để có một cách tiếp cận đặc biệt tối giản cho các tính năng của nó, đóng gói tất cả các thông tin cần thiết vào một thanh nhỏ dọc theo phía trên cùng của cửa sổ.
MeasureIt (Firefox và Chrome)
MeasureIt thực hiện nhiệm vụ tương tự như Page Ruler và có sẵn cho cả Firefox và Chrome.
Sau khi cài đặt, nhấp vào nút và bạn có thể nhấp và kéo để tạo hình chữ nhật. Dọc theo hình chữ nhật sẽ là một số điểm ảnh, có nghĩa là bạn có thể có được các phép đo chính xác để định vị.
Nếu bạn lo lắng về việc đo lường ngay với một con chuột, bạn có thể điều chỉnh kích thước của khu vực được đánh dấu bằng các phím mũi tên, làm cho độ chính xác dễ dàng hơn nhiều so với âm thanh. Chúng tôi khuyên bạn nên kiểm tra tùy chọn "Khu vực" trong cài đặt; nó không thay đổi cách thức hoạt động của phần mềm và chỉ đơn thuần là cho bạn một ý tưởng về khu vực mà hình chữ nhật bạn vẽ ra.
Chúng tôi đặt cược bạn sẽ ngạc nhiên khi bạn thấy có bao nhiêu điểm ảnh trên màn hình và khu vực họ tạo ra khi được đánh dấu. Nếu không có gì khác, nó chắc chắn nên đặt thuật ngữ "màn hình bất động sản" trong quan điểm.
Phần kết luận
Phải mất một thời gian để có được tốt nhất từ các phần mở rộng này, nhưng họ đặt một số thông tin tuyệt vời trong tầm tay dễ dàng. Bạn sẽ nhanh chóng nắm bắt được chúng, nhưng nếu bạn thấy khó thay thế phông chữ, hãy nhớ rằng tên cần phải chính xác. "Comic Sans" sẽ không hoạt động, trong khi "Comic Sans MS" (như nó xuất hiện trong Office) sẽ.
Hãy nhớ rằng tất cả các phần mở rộng này yêu cầu loại độ chính xác này trong thông tin bạn cung cấp cho chúng và bạn sẽ được trang bị đầy đủ để sử dụng chúng một cách đầy đủ nhất.