Кто сказал что классный графический редактор – наше все? На практике дизайнер веб и мобильных продуктов кучу времени проводит в браузере. Поиск идей, иконок, фото, шрифтов может занимать намного больше времени, чем этап отрисовки макета. И не стоит забывать про тестирование, как макета, так и уже готовой верстки.

Чем удобнее организован ваша рабочая среда в браузере, тем меньше времени у вас будет уходить на эту работу.

Синхронизация

Ваши закладки и расширения должны быть доступны с любого устройства, на котором вы будете работать. Сделать это можно с помощью Google Account в Chrome. Зарегистрируйтесь на Gmail и включите в настройках браузера режим синхронизации. Таким образом, просто войдя в свою почту с другого компьютера, вы сможете получить доступ к своему пространству.

На практике это может очень пригодится. Например, если мне нужно закончить срочную работу дома, все закладки, история поиска и прочее дублируются в браузере личного ноутбука.

Syncing

Сортировка закладок

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

  • Шрифты
  • Цвет
  • Иконки
  • Сетки
  • Хорошие вебсайты (сюда добавляю веб-сайты, которые считаю идеальными)
  • Landing Page (тут все для дизайна посадочных страниц)
  • Контент для дизайна (в эту категорию входят фото- и видео-стоки, мокапы, сайты с векторной графикой и другие сайты с контентом для дизайна)
  • Вдохновение (тут дизайнерские социальные-сети и портфолио крутых студий)
  • Статьи и полезное

Bookmarks

Замечу что закладку “Контент для дизайна” можно было бы разбить еще более подробно, но дело в том, что тогда папки займут слишком много рабочего пространства в длину, а для меня это не совсем удобно. Я часто использую браузер из ноутбука. О том, какие именно сайты для дизайна я добавила в закладки вы можете прочитать в статье “Организация рабочего пространства дизайнера в Google Chromе часть 2: полезные сайты”.

Расширения для дизайнера

Так, как расширений сейчас очень много, я распределила их на подгруппы. В каждой из подгрупп вы можете выбрать 1-2 наиболее понравившихся. Ставить все нет смысла, вы только перегрузите свой браузер ненужными иконками, о которых вскоре забудете.

Расширения для работы со шрифтами

What font

Пожалуй, самый популярный плагин для просмотра шрифтов на сайте. Для использования нужно навести на строку с текстом.

СкачатьУстановить расширение What font

What Font

Font Face Ninja

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

СкачатьУстановить расширение Font Face Ninja

Font Face Ninja

Fontanello

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

СкачатьУстановить расширение Fontanello

Fontanello

Font Picker

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

СкачатьУстановить расширение Font Picker

Font Picker

Google Font Previewer

Запустив расширение, у вас появится возможность изменить шрифт на текущей вкладке на один из каталога Google Fonts. Очень удобно, если планируете редизайн сайта.

СкачатьУстановить расширение Google Font Previewer

Google Font previewer

Font Swap

Удобный инструмент для быстрой замены шрифтов на сайте. Все шрифты берутся из каталога Google Fonts.

СкачатьУстановить расширение Font Swap

Font swap

Расширения для работы с цветом

Eye Dropper

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

СкачатьУстановить расширение Eye Dropper

Eye Dropper

Site Palette

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

СкачатьУстановить расширение Site Palette

Site Palette

ColorZilla

Кроме стандартной пипетки в расширении есть также генератор дополнительных цветов и градиентов.

СкачатьУстановить расширение ColorZilla

ColorZilla

Инспектор и тестирование сайта

Toybox

Очень хороший инструмент для проверки действующего сайта: вы смотрите и сверяете стили, а также пишете комментарий. При этом плагин автоматически делает скриншот. Удобно для внесения правок при верстке. Инструмент является платным, но есть 30-дневная бесплатная версия.

СкачатьУстановить расширение Toybox

Toybox

Check My Links

Проверить корректную работу ссылок в тексте теперь можно одним кликом. Плагин выделит красным все неработающие.

СкачатьУстановить расширение Check My Links

Check My Links

Clear Cache

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

СкачатьУстановить расширение Clear Cache

Clear Cache

Wappalyzer

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

СкачатьУстановить расширение Wappalyzer

Wappalyzer

CSS Viewer

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

СкачатьУстановить расширение CSS Viewer

Corporate Ipsum

Perfect Pixel

Маст-хэв многих разработчиков, сверяет действующую верстку с макетом, и показывает разницу.

СкачатьУстановить расширение Perfect Pixel

Perfect Pixel

Visual Inspector

Позволяет изменить верстку готового сайта и работает по принципу визуального редактора.

СкачатьУстановить расширение Visual Inspector

Visual Inspector

Dark Mode Dev Tools

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

СкачатьНастроить Dark Mode Dev Tools

Dark Mode Dev Tools

Проверка адаптивности

Window Resizer

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

СкачатьУстановить расширение Window Resizer

Window Resizer

Генератор текста

Corporate Ipsum

Генератор случайных фраз, для тех кому надоел привычный Lorem Ipsum

СкачатьУстановить расширение Corporate Ipsum

Corporate Ipsum

Видео и скриншоты

Loom

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

СкачатьУстановить расширение Loom

Loom

Full Page Screen Capture

Позволяет делать скриншоты экрана с прокруткой.

СкачатьУстановить расширение Full Page Screen Capture

Full page screen capture

Вдохновение

Muzli 2

Ежедневная порция качественного контента вам гарантирована. Теперь каждый раз открывая новую вкладку мне рандомно показывается интересный визуал. Расширение требует регистрации с помощью гугла.

СкачатьУстановить расширение Muzli 2

Muzli 2

Panda

Плагин очень похож на Muzli, с небольшими отличиями. Например есть возможность настраивать вид подачи информации: количество новостей, размер “плиток”.

СкачатьУстановить расширение Panda

Panda

Достать контент из сайта

SVG Grabber

Позволяет несколькими кликами извлечь все SVG, используемые на странице.

СкачатьУстановить расширение SVG Grabber

SVG Grabber

Image Downloader

Позволяет просмотреть и загрузить все изображения с выбранного сайта.

СкачатьУстановить расширение Image Downloader

Image Downloader

Измерение объектов и расстояний

Page Ruler

Инструмент позволяет измерить размер любого объекта на страничке.

СкачатьУстановить расширение Page Ruler

Page Ruler

Dimensions

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

СкачатьУстановить расширение Dimensions

Dimensions

Работа с вкладками и блокировка рекламы

Sessions Buddy

Инструмент для управления вкладками. Поможет распределить вкладки на отдельные сессии и открыть их позже. Очень эффективно, если вы открыли много вкладок для текущего проекта, но вам нужно сделать перерыв и вернуться к нему позже. Данный плагин поможет не нагружать оперативную память и удобно использовать браузер.

СкачатьУстановить расширение Sessions Buddy

Sessions Buddy

uBlock

Блокирование ненужной рекламы, которое позволит быстрее получать доступ к нужной информации.

СкачатьУстановить расширение uBlock

uBlock

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.