Google Chrome является самым востребованным браузером. И если ты работаешь в нем, то стоит облегчить свою профессиональную деятельность установкой полезных дополнительных расширений. Их сотни. Но мы рассмотрим те, которые непосредственно пригодятся дизайнеру.
Наличие встроенных инструментов позволяет Google Chrome существенно масштабировать возможности. Тебе нужно просто добавить нужные функции в свой браузер.
Делается это легко. Нужно найти на сайте Chrome Web Store необходимый плагин и скачать его. А позже запускать нужные расширения из списка или вынести часто используемые на панель инструментов.
Какие-то плагины полностью бесплатны, какие-то имеют бесплатную и дополненную платную версию. Мы собрали те, которыми можно пользоваться прямо сейчас без лишних сложностей. Смотри.
1. ChatGPT
Само собой, сейчас все рейтинги рвет ChatGPT. И это отличный помощник для многих специалистов, в том числе и для дизайнеров. Что он может? Очень многое. Если вкратце, то он поможет создавать текстовый контент, “причесывать” твои письма заказчикам, подбрасывать идеи концептов, шрифтовых пар и палитр, исследовать целевую аудиторию. Мы подробно писали уже об этом в отдельном материале, так что посмотри там.
2. WhatFont
Это расширение полезно в тех случаях, когда ты видишь на чужом сайте шрифт и хочешь точно знать, как он называется. Нередко это нужно, когда тебе не дали брендбук, но хотят, чтобы новый дизайн был в фирменном стиле.
Да и в целом стоит сохранять себе интересные сочетания и идеи. Пригодится.
Данное расширение помогает не просто определить шрифт, но и узнать важную информацию о нем. Например, есть ли они в базе Google Fonts или Typekit. И бесплатные ли это версии или платные. Это очень удобно.
3. Languagetool
Проверит ошибки в тексте. Огромное количество языков. Это открывает новые возможности для зарубежных заказов. Один знакомый написал с помощью чата GPT тексты на иврите (не зная его, естественно) и подправил их в Languagetool. И заказ был принят заказчиком! Ну и просто проверить свои письма/сообщения не будет лишним. Грамотность – это уважение к собеседнику и показатель твоего профессионализма.
4. Lorem Ipsum Generator
Сейчас уже считается стыдным вставлять “рыбу”. Гораздо лучше попросить тот же чат GPT набросать примерный текст вместо абракадабры. Но бывают и такие случаи, когда нужно вставить Lorem Ipsum. Расширение позволяет задавать переносы, формировать параграфы примерять шрифты без лишних сложностей.
5. Loom
Очень крутая вещь, которая в целом пригодится многим, а не только дизайнерам. Что это такое? Запись видео со своим экраном и звуком. А еще там можно включить камеру и будет маленький экранчик с твоим лицом. Когда хочешь показать эмоции.
Для чего пригодится: для защиты/демонстрации своего проекта, для быстрого объяснения правок, предложений. Вместо скриншота можно сразу записать видео, буквально пальцем (курсором) показать все необходимое и объяснить. Особенно важно, когда элементы динамичные и в статике их нельзя показать. Вместо длинных текстов и тонны скринов теперь записывай короткие ролики с комментариями и экономь время.
Удобно, что видео можно просматривать когда угодно и несколько раз. На созвоне информация могла бы быть упущена, а тут все записано. И для командных проектов отлично.
6. Chrome Palette
Допустим, у тебя есть иллюстрация или фото, которые ты используешь в проекте. Ты можешь вставить картинку в Chrome Palette и расширение подберет под нее наиболее подходящие цветовые палитры. Целых 64 штуки – будет из чего выбрать, чтобы вписать в свой дизайн в зависимости от специфики проекта.
7. SVG Grabber
Хочешь с какого-то сайта скопировать SVG-объекты? Вот специальный инструмент. В один клик позволяет получить нужные элементы со страницы. Это очень удобно, если тебе с основного сайта нужно перенести на лендинг/презентацию/баннеры какие-то лого или иконки в фирменном стиле. И не нужно запрашивать их у заказчика.
8. User-Agent Switcher и Window Resizer
Два расширения с одним функционалом – они позволяют проверить дизайн на адаптивность и посмотреть его в рамках разных устройств и разных браузеров. Очень удобно и наглядно, позволяет сразу учесть недочеты и подправить их. Нам же не нужно говорить, что адаптивность – наше все? Что касается разницы в этих двух расширениях, то она не принципиальна. Просто попробуй оба и выбери то, которое удобнее лично тебе.
9. Instant Wireframe
С помощью расширения Instant Wireframe можно разобрать любой сайт структурно и изучить его. Это очень полезно, если ты видишь красивый интересный проект, он довольно сложный и нестандартный. Стоит взять на заметку его особенности, увидеть каркасный просмотр страницы. Повышай уровень насмотренности, бери из сети лучшее и внедряй в свои работы.
10. Font Playground
Позволяет на активной странице играть со шрифтами без изменений в коде. Ты можешь примерить разные варианты, размеры и эффекты. А уже потом лезть в код и менять параметры, когда выберешь лучшее решение. Очень наглядно, удобно, быстро и без лишних сложностей.
Можно сгенерировать несколько решений, сбросить заказчику скриншоты, а только потом менять страницу согласно утвержденному выбору.
11. ColorZilla
Если ты еще не используешь эту пипетку – немедленно начни. Простое и самое удобное решение из всех аналогов. Ты не только можешь узнать цвет элемента в hex и rgb, но и легко копируешь его номер одним кликом, чтобы вставить в свой проект.
12. Web Developer checklist
Делай не только красиво, но и эффективно, Web Developer checklist делает сразу несколько типов проверки страниц: на соответствие SEO, на уровень юзабилити, на скорость загрузки и видимость в поисковике.
Это позволяет выкатывать сайты с хорошими параметрами. Такая страница будет нормально работать и приносить лидов, что и является главным условием для большинства продуктов.
13. Page Ruler
С виду это обычная линейка. Для того чтобы определить размеры и положение разных элементов на странице. Секретов никаких нет, просто это очень удобный инструмент, который будет у тебя прямо в браузере и не нужно будет открывать отдельно какие-то программы, чтобы подогнать CSS-блоки. Мелочь, которая делает работу проще и быстрее.
14. Awesome Screenshot: Capture & Anno
Без скриншотов никуда. По нашему скромному мнению Awesome Screenshot: Capture & Anno является самым удобным инструментом из аналогичных. Настройка участка для копирования, возможность оставлять подписи прямо на изображении, частично размывать картинку – все это реализовано отлично. Никаких лишних телодвижений и лишних кликов. И не придется ничего никуда переносить, сохранять и тем более открывать в других программах.
15. Yslow
Плагин для проверки скорости загрузки. Стоит ли напоминать, что это один из самых важных факторов ранжирования в поисковике и способов удержания пользователей.
Готовый сайт проверь в Yslow. Он даст также минимальный анализ страницы и подскажет, какие конкретно элементы стоит оптимизировать, чтобы сайт не тормозил.
16. Muzli
Расширение для удовольствия, а не для работы. Хотя, это полезно для развития вкуса дизайнера и понимания трендов.
Что оно дает? При каждом открытии новой вкладки появляется лента с новинками в мире дизайна. Используются разные проверенные источники, там самая актуальная информация. Ты не тратишь время на просмотр Behance и Dribbble, а попутно и невзначай видишь все тренды и остаешься на волне.
17. PerfectPixel
Бывает такая неприятность – отрисовать крутой дизайн, а потом обнаружить несовпадения после верстки. Этого можно легко избежать и добиться идеального соответствия. Расширение PerfectPixel позволяет наложить полупрозрачный первоисточник дизайна на страницу. Получится проверить соответствие до малейшего пикселя.
Вникай в тонкости
Хочешь знать больше фишек, которые помогут работать удобно, быстро и эффективно? Это все наглядно показано в наших образовательных программах. Для тех, кто готов освоить профессию и стать профессионалом есть онлайн-курс «UX/UI легенда».
Если же в этой статье для тебя ничего непонятно, но очень интересно – ты можешь “примерить” работу дизайнера на себя на бесплатных курсах «Веб-дизайнер: взрывной старт» и «Графический дизайнер: запуск». Это поможет без финансовых затрат попробовать себя в профессии, посмотреть, как все устроено и определиться с путями дальнейшего развития. Ждем тебя!