Кто сказал что классный графический редактор – наше все? На практике дизайнер веб и мобильных продуктов кучу времени проводит в браузере. Поиск идей, иконок, фото, шрифтов может занимать намного больше времени, чем этап отрисовки макета. И не стоит забывать про тестирование, как макета, так и уже готовой верстки.
Чем удобнее организован ваша рабочая среда в браузере, тем меньше времени у вас будет уходить на эту работу.
Ваши закладки и расширения должны быть доступны с любого устройства, на котором вы будете работать. Сделать это можно с помощью Google Account в Chrome. Зарегистрируйтесь на Gmail и включите в настройках браузера режим синхронизации. Таким образом, просто войдя в свою почту с другого компьютера, вы сможете получить доступ к своему пространству.
На практике это может очень пригодится. Например, если мне нужно закончить срочную работу дома, все закладки, история поиска и прочее дублируются в браузере личного ноутбука.
Для того чтобы легко переходить на нужные сайты, логично распределите их в закладках по папкам. Вот тот список, который использую я:
- Шрифты
- Цвет
- Иконки
- Сетки
- Хорошие вебсайты (сюда добавляю веб-сайты, которые считаю идеальными)
- Landing Page (тут все для дизайна посадочных страниц)
- Контент для дизайна (в эту категорию входят фото- и видео-стоки, мокапы, сайты с векторной графикой и другие сайты с контентом для дизайна)
- Вдохновение (тут дизайнерские социальные-сети и портфолио крутых студий)
- Статьи и полезное
Замечу что закладку “Контент для дизайна” можно было бы разбить еще более подробно, но дело в том, что тогда папки займут слишком много рабочего пространства в длину, а для меня это не совсем удобно. Я часто использую браузер из ноутбука. О том, какие именно сайты для дизайна я добавила в закладки вы можете прочитать в статье “Организация рабочего пространства дизайнера в Google Chromе часть 2: полезные сайты”.
Так, как расширений сейчас очень много, я распределила их на подгруппы. В каждой из подгрупп вы можете выбрать 1-2 наиболее понравившихся. Ставить все нет смысла, вы только перегрузите свой браузер ненужными иконками, о которых вскоре забудете.
What font
Пожалуй, самый популярный плагин для просмотра шрифтов на сайте. Для использования нужно навести на строку с текстом.
Установить расширение What font
Font Face Ninja
Я выбрала для себя это расширение. При активации в правом верхнем углу сайта показывается перечень всех шрифтов, которые используются на странице, а также цены на них, если они платные.
Fontanello
Плагин тоже показывает шрифт, начертание, а также величины и цвет выбраного текста. Для активации нужно использовать правую клавишу мыши.
Font Picker
Работает аналогично как и Fontanello: выделите фразу, нажмите правую клавишу мыши, выберете нужную вкладку в меню и посмотрите информацию в появившемся попапе.
Google Font Previewer
Запустив расширение, у вас появится возможность изменить шрифт на текущей вкладке на один из каталога Google Fonts. Очень удобно, если планируете редизайн сайта.
Font Swap
Удобный инструмент для быстрой замены шрифтов на сайте. Все шрифты берутся из каталога Google Fonts.
Eye Dropper
Плагин позволяет пипеткой выбрать цвет на сайте, а также сохраняет историю поиска предыдущего цвета.
Site Palette
Действительно хорошее расширение, генерит полную цветовую палитру выбраной вебстраницы в отдельном окне.
ColorZilla
Кроме стандартной пипетки в расширении есть также генератор дополнительных цветов и градиентов.
Toybox
Очень хороший инструмент для проверки действующего сайта: вы смотрите и сверяете стили, а также пишете комментарий. При этом плагин автоматически делает скриншот. Удобно для внесения правок при верстке. Инструмент является платным, но есть 30-дневная бесплатная версия.
Check My Links
Проверить корректную работу ссылок в тексте теперь можно одним кликом. Плагин выделит красным все неработающие.
Clear Cache
Думаю у каждого возникали проблемы с полной и частичной очисткой кеша. Это расширение решает эту проблему полностью, так как позволяет настроить это процес. Вы можете опционально выбрать, что именно будет очищаться: только кеш, Cookies, загрузка, автозаполнение форм и пароли, история, локальное хранилище и прочее.
Wappalyzer
Позволяет получить информацию о всех технологиях, которые используются на сайте. Приложение не раз выручало, если заказчик демонстрирует пример, и нужна примерная оценка стоимости сайта.
CSS Viewer
Еще одно расширение, позволяющее собрать информацию с элементов на сайте, не открывая инспектор кода.
Perfect Pixel
Маст-хэв многих разработчиков, сверяет действующую верстку с макетом, и показывает разницу.
Visual Inspector
Позволяет изменить верстку готового сайта и работает по принципу визуального редактора.
Dark Mode Dev Tools
Плагин включает темный режим для режима кода в браузере. Для этого нужно всего лишь один раз включить его, и изменения применятся для всех сайтов, которые вы просматриваете через Chrome.
Window Resizer
Эмулятор разрешения различных девайсов прямо в окне браузера. Инспектор кода больше не нужен. В приложении подобраны самые популярные примеры.
Corporate Ipsum
Генератор случайных фраз, для тех кому надоел привычный Lorem Ipsum
Loom
Прекрасное расширение для записи видео с экрана браузера. Позволяет показать то, что невозможно сделать скринами: например ошибки работы сайта. Кроме того, у расширения есть десктопная версия.
Full Page Screen Capture
Позволяет делать скриншоты экрана с прокруткой.
Muzli 2
Ежедневная порция качественного контента вам гарантирована. Теперь каждый раз открывая новую вкладку мне рандомно показывается интересный визуал. Расширение требует регистрации с помощью гугла.
Panda
Плагин очень похож на Muzli, с небольшими отличиями. Например есть возможность настраивать вид подачи информации: количество новостей, размер “плиток”.
SVG Grabber
Позволяет несколькими кликами извлечь все SVG, используемые на странице.
Image Downloader
Позволяет просмотреть и загрузить все изображения с выбранного сайта.
Page Ruler
Инструмент позволяет измерить размер любого объекта на страничке.
Dimensions
Поможет узнать не только размеры объектов, но и расстояния между ними. Понятное дело, все в пикселях.
Sessions Buddy
Инструмент для управления вкладками. Поможет распределить вкладки на отдельные сессии и открыть их позже. Очень эффективно, если вы открыли много вкладок для текущего проекта, но вам нужно сделать перерыв и вернуться к нему позже. Данный плагин поможет не нагружать оперативную память и удобно использовать браузер.
uBlock
Блокирование ненужной рекламы, которое позволит быстрее получать доступ к нужной информации.
Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.