5 полезных расширений браузера для дизайнеров

Дизайнеры часто не рассматривают расширения для браузера как способ ускорить свою работу, проверить чужую или дать ценный комментарий. Но на деле среди них есть много полезных инструментов, которые помогут вам с дизайном сайтов.

Рассказываем о пяти расширениях для браузеров, которые стоит взять на вооружение.

Font Ninja — чтобы определить шрифт на сайте

Расширение позволяет распознать шрифты, их размер, межбуквенный интервал, высоту строки и цвет на любых сайтах.

Чтобы определить шрифт, нажмите на иконку расширения и наведите курсор на любую строку или заголовок. В появившейся подсказке вы увидите его название, кегль и HEX‑код цвета. В главном окне расширения также будет отображаться список всех шрифтов, которые есть на странице.

Также у Font Ninja есть режим предпросмотра, чтобы проверить шрифт в разных начертаниях и размерах.

Pixel Perfect — чтобы сравнить макет с готовым сайтом

Расширение позволяет сверить макет с готовым сайтом, чтобы найти в нём ошибки верстальщиков и разработчиков. Для этого нужно открыть сайт, запустить расширение и загрузить в него изображение-эталон.

В расширение можно добавить несколько изображений для сравнения. Также вы можете изменить их размер и непрозрачность.

ColorZilla — чтобы узнать цвета

Позволяет быстро узнать, какие цвета используются на сайте. Для этого запустите расширение, наведите указатель мыши на интересующие элементы страницы, и на верхней панели появится HEX-код цвета.

В меню расширения есть инструмент, который даст доступ ко всем ранее найденным цветам.

Loom — чтобы записать экран

Расширение для записи экрана. Обычно с помощью него демонстрируют пользовательские сценарии, фиксируют ошибки и комментируют работу. Перед началом съёмки можно выбрать необходимый формат — вкладка или окно. В личном кабинете готовое видео можно отредактировать.

Все ролики доступны по прямой ссылке — их можно отправлять коллегам и комментировать. Владелец ролика моментально получает уведомления о реакциях.

Также во время записи можно включить микрофон и веб-камеру.

YellowPencil — чтобы изменить готовый сайт

Инструмент предназначен для визуального изменения любых элементов сайта. Выделите нужный объект на странице и переходите к редактированию его параметров в окне справа.

YellowPencil позволяет изменить практически любые параметры CSS: шрифты, цвета, внешние и внутренние отступы, поля, границы и их радиус, положение элементов, выравнивание.

С помощью инструмента можно легко вносить визуальные правки в лендинги или витрины виртуальных магазинов. Это удобно, если вы хотите показать разработчикам, как именно вы хотите поменять сайт.