Là nhà thiết kế web, phần mềm bạn tuyệt đối phải có trên máy là gì? Có lẽ là Photoshop và Illustrator. Và dù đó là yếu tố thiết yếu của quy trình thiết kế, vẫn có những công cụ nhỏ bạn có thể không biết mình cần.
Điều tốt nhất là bạn không cần tải xuống — chỉ cần cài đặt các tiện ích Chrome này và bắt đầu. Từ nhận diện font trên trang đến đo khoảng cách giữa các yếu tố web, các tiện ích Chrome thiết kế web này sẽ làm cuộc sống bạn dễ dàng hơn.
1. Dropbox for Gmail
Dropbox bắt đầu như dịch vụ lưu trữ file, nhưng sớm nhận ra khán giả chính là nhà thiết kế, dùng dịch vụ chia sẻ công việc với đồng nghiệp. Vì file thiết kế thường quá lớn cho tệp đính kèm email, dễ hơn là gửi link Dropbox đến file.
Dropbox for Gmail làm quá trình còn tiện lợi hơn. Khi bạn liên kết file dùng nút Dropbox dưới cửa sổ soạn thư mới, người nhận xem trước được nội dung. Link file ảnh sẽ tải ảnh trực tiếp vào email, link file khác tạo xem trước tiện lợi.
Cài đặt: Dropbox for Gmail
2. FontFace Ninja
Với hàng nghìn font có sẵn, khả năng typography của bạn vô hạn. Đặc biệt nếu bạn có thể nhận diện một font đẹp ở đâu đó và mượn nó cho dự án của mình.
FontFace Ninja là tiện ích Chrome giúp bạn làm chính xác điều đó. Giống các công cụ tìm font từ hình ảnh, nó giúp nhận diện font bạn thấy trực tuyến. Khác biệt là FontFace Ninja đọc font được mã hóa trong CSS của trang, như font chữ tiêu đề và nội dung.
Khi khởi chạy FontFace Ninja, nó hiển thị thông tin font bạn trỏ tới — không chỉ kiểu chữ, mà còn độ đậm, kích thước, chiều cao, chiều rộng, và màu. Để bookmark font đó, bạn cần tài khoản tại dịch vụ chị em FontFace Dojo.
Cài đặt: FontFace Ninja
3. ColorPick Eyedropper
Dù mắt bạn có nhạy màu đến đâu, cũng khó tái tạo một gam màu cụ thể bạn thấy trực tuyến trừ khi biết giá trị RGB hoặc HTML. May mắn thay, bạn không phải đoán nếu có ColorPick Eyedropper.
Giống như các app chọn màu tốt nhất cho Mac, ColorPick Eyedropper cho thấy giá trị của bất kỳ màu bạn trỏ tới. Khác biệt là nó luôn ở trình duyệt và bạn không phải tải gì lên — chỉ click biểu tượng và di chuyển đích đến vị trí đúng.
Tiện ích đọc màu từ văn bản, hình ảnh, và hầu như bất cứ thứ gì bạn thấy trên trang web (kể cả quảng cáo). Khi bắt một màu, nó hiển thị giá trị HTML, RGB, và HSL cho nó.
Cài đặt: ColorPick Eyedropper
4. Dimensions
Tiện ích mã nguồn mở này là phát hiện cho nhà thiết kế web, đặc biệt nếu bạn làm việc một lần cho doanh nghiệp nhỏ. Khi khách hàng giao cho bạn một trang web không có file hay tài liệu trước đó và yêu cầu thiết kế "trang giống này, nhưng văn bản và hình ảnh khác", tìm ra bố cục là đau khổ.
Dimensions cho phép dễ dàng đo chiều cao và chiều rộng của bất kỳ yếu tố nào trên trang, cũng như khoảng cách giữa chúng. Điều đó làm cho việc tái tạo trang hiện có và kiểm tra lại thiết kế của chính bạn sau khi đưa vào sản xuất trở nên dễ dàng.
Cài đặt: Dimensions
5. Visual Inspector
Visual Inspector là công cụ phản hồi và cộng tác mạnh mẽ cho nhóm thiết kế, kết hợp tính năng của ba tiện ích trước và thêm nhiều hơn.
Trong tab Inspect, bạn có thể chọn bất kỳ yếu tố nào trên trang để lấy thông tin đầy đủ, từ kích thước đến tên file. Các sub-tab Colors và Typography cho thấy bảng màu và tất cả font một눈 nhìn, trong khi Assets gom tất cả hình ảnh trên trang vào một nơi.
Tab Collaborate là nơi bạn có thể đưa phản hồi và thảo luận với nhóm, và dễ dàng để lại bình luận bằng cách click vào bất kỳ yếu tố nào trên trang.
Giống hầu hết công cụ nâng cao, Visual Inspector có giá: bạn cần trả từ $9/user/tháng để thêm bình luận và đồng bộ thay đổi. Tuy nhiên, các tính năng cơ bản như kiểm tra màu, font, hình ảnh, đều miễn phí.
Cài đặt: Visual Inspector
6. Easy Screen Capture
Tiện ích chụp màn hình có thể dư thừa, vì chụp màn hình trên Mac dễ dàng, và trên Windows chỉ hơi phiền hơn chút. Nhưng Easy Screen Capture có khá nhiều điểm bán.
Quan trọng nhất, nó cho phép chụp toàn bộ trang web, không chỉ khu vực hiển thị trên màn hình. Đáng giá khi bạn cần báo cáo nhiều vấn đề trên trang dài, và chụp tất cả sẽ tốn ba đến bốn lần chụp màn hình.
Một thủ thuật gọn khác là có thể copy ảnh chụp vào clipboard và dán ngay vào chat hoặc email, thay vì lưu trữ file ảnh vô dụng trên máy.
Cài đặt: Easy Screen Capture
7. Muzli 2
Cuối cùng, có một nhiệm vụ then chốt bạn phải đối mặt mỗi sáng: lắc bỏ buồn ngủ và vào nhịp. Muzli 2 của InVision sẽ đóng vai báo buổi sáng với các bài viết được tuyển chọn về nghệ thuật, thiết kế, UX, và công nghệ.
Muzli thay thế tab Chrome mặc định và cho phép tùy chỉnh những gì bạn thấy đó. Tùy theo sở thích, Muzli sẽ chọn feed cho bạn, với các trang từ Dribble và Behance đến 99designs và Creative Bloq. Đầy đủ cảm hứng để lướt khi bạn uống cà phê đầu tiên!
Nếu bạn nghĩ toàn bộ tab trình duyệt đầy nội dung thiết kế quá nặng, Muzli cũng có phiên bản Lite. Nó không ghi đè tab mặc định, và bạn có thể truy cập feed khi muốn chỉ bằng cách click biểu tượng tiện ích.
Cài đặt: Muzli 2
Lấy tiện ích Chrome cho tất cả nhiệm vụ thiết kế của bạn
Các tiện ích Chrome trong danh sách này không thể so sánh với phần mềm thiết kế của bạn, nhưng chúng bao phủ tất cả những việc nhỏ đi kèm làm nhà thiết kế — từ thông tin typography đến cộng tác với đồng nghiệp.
Khi bạn nhận ra Chrome Web Store tràn đầy công cụ, có thể khó dừng việc thêm mới. Vì vậy hãy học cách quản lý tiện ích Chrome trước khi chúng mất kiểm soát.