12 расширений для Google Chrome, которые сильно упростят жизнь дизайнера

Топы 31 окт. 2022 г.

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

Здесь я сформировал список расширений для Chrome, которые помогут вам ускорить свою работу и создавать более удобные для пользователя продукты.

Коротко о том, что вас ждет в этой статье:
· Цвета;
· Шрифты;
· Вдохновение;
· No-code расширения для дизайнеров;
· Выявление проблем с удобством использования;
· Утилиты.

Приятного чтения!

Цвета

1. Eye Dropper — пипетка

Добавить в Хром

Удобный и простой инструмент для определения цветов на любом сайте. Такая необходимость точно возникала у каждого дизайнера. С помощью Eye Dropper можно навести курсор на любой объект на веб-странице и посмотреть его значения в разных цветовых системах. Помимо этого, все выбранные цвета будут сохраняться в вашей личной истории цветов.

2. Color by Fardos — инструмент для подбора цветов

Добавить в Хром

Color by Fardos тоже умеет определять цвета на любом сайте, но в нем есть много других функций. Например, здесь имеется вкладка "Все цвета на этом сайте", переходя на которую вы получаете автоматически высчитанный список всех цветов, используемых на текущем сайте. Цвета можно сохранять, а потом создавать из них градиенты и палитры.

Шрифты

3. WhatFont

Добавить в Хром

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

Вдохновение

4. Muzli 2

Добавить в Хром

Расширение Muzli 2 для Chrome — отличный источник вдохновения. Он превращает вашу домашнюю страницу в место, посвященное дизайну: теперь прямо на главной странице браузера вас будут встречать подборки шотов из Dribbble, проектов Behance и Awwwards, а также дизайнерские новости от разных СМИ.

5. ColorTab

Добавить в Хром

Самый минималистичный плагин для поиска цветов. Работает он так: при нажатие на иконку расширения вы попадаете на отдельную страницу, на которой на весь экран развернута какая-то цветовая схема из коллекции Color Hunt. Конечно же, цвета выбраны не рандомные, а хорошо между собой сочетающиеся, иначе расширение не имело бы никакого смысла.

Каждый раз, когда вы открываете или перезагружаете вкладку, цветовая схема на экране меняется. Единственный элемент управления — это кнопка сохранения. При нажатии на нее вы сможете перейти к более детальной информации про палитру: сохранить ее себе, скопировать значения или посмотреть похожие варианты.

No-code расширения для дизайнеров

6. CSS Peeper

Добавить в Хром

CSS Peeper это средство просмотра CSS и плагин для браузера, специально созданный для дизайнеров. Он убирает всю лишнюю информацию при просмотре CSS кода и оставляет только то, что важно для дизайна. Еще и оборачивает это в приятный и простой для восприятия визуал.

7. SVG grabber

Добавить в Хром

SVG grabber — это инструмент, который позволяет пользователям просматривать, быстро загружать и копировать исходный код всех иконок и SVG-иллюстраций на странице.

Выявление проблем с удобством использования

8. UX Check

Добавить в Хром

UX Check выполняет весь эвристический анализ на открытом в данный момент сайте. Он отображает список из 10 эвристик для оценки юзабилити Нильсена, которые помогут вам найти проблемы с удобством использования.

9. Wappalyzer — профилировщик технологий

Добавить в Хром

Wappalyzer — это профилировщик технологий, который раскрывает технологии, используемые для создания веб-страниц. Откройте для себя CMS, фреймворки, платформы электронной коммерции, библиотеки JavaScript и другое программное обеспечение, которое использует сайт.

Утилиты

10. Window resizer

Добавить в Хром

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