Полезные расширения для google chrome для дизайнера
![Полезные расширения для google chrome для дизайнера Полезные расширения для google chrome для дизайнера thumbnail](https://say-hi.me/wp-content/uploads/2016/10/d43d172f83053b4db2cb8eb615ca7fa8.jpg)
Ускорьте свой рабочий процесс и сэкономьте время для более важных вещей
С тех пор, как технический гигант Google запустил браузер Chrome, он стал выбором номер один для дизайнеров и разработчиков, и захватил около 70% рынка браузеров.
Благодаря встроенным инструментам разработчика, доступным в Chrome, вносить изменения или проверять свойства дизайна довольно легко, но лучшее это делать с помощью расширений Chrome. Они позволяют дизайнерам и разработчикам делать больше при меньших усилиях.
Давайте посмотрим на последние Chrome-плагины, рекомендованные для вас на основе опроса нескольких самых популярных команд дизайнеров и разработчиков в мире.
Инспектирование свойств дизайна на странице
Page Ruler
Нарисуйте линейку и измерьте элементы на любой веб-странице.
Вы научитесь анализировать и улучшать клиентский опыт, создавать продукты и предоставлять сервисы, нужные клиентам, внедрять сервисные инновации
Забронировать место
Dimensions
Инструмент для дизайнеров, который поможет измерить размеры экрана.
Скачать по ссылке
Perfect Pixel
Это расширение помогает разрабатывать ваши сайты с точностью до пикселя!
Скачать по ссылке
Visual Inspector — Inspect
Восхитительный способ проверить свойства дизайна веб-страницы, не теряя при этом удобства инструментов дизайна.
Скачать по ссылке
Визуальное редактирование веб-страниц
Code Cola
Code Cola – это Chrome-расширение для визуального редактирования css стилей онлайн страниц.
Скачать по ссылке
Css Shack
Верстайте свои дизайны прямо в браузере.
Скачать по ссылке
Visual Inspector — Measure
Восхитительный способ внести изменения в веб-сайт без потери удобства инструментов проектирования.
Скачать по ссылке
Получить цвета с веб-сайта
Colorzilla
Продвинутая пипетка, цветовая палитра, генератор градиента и другие полезные плюшки.
Скачать по ссылке
Visual Inspector—Colors
Извлечение и изменение цветов, градиентов на веб-сайте.
Скачать по ссылке
Получить шрифт с веб-сайта
What font
Определяет шрифты на веб-страницах.
Скачать по ссылке
Google Font previewer
Позволяет вам выбрать шрифт из каталога Google Font с несколькими вариантами настройки текста и предварительно просмотреть их на текущей вкладке.
Скачать по ссылке
Fontface Ninja
Исследуйте шрифты на веб-сайте, попробуйте, внесите в закладки и купите их!
Скачать по ссылке
Type wonder
Это расширение помогает тестировать веб-шрифты на активной вкладке Chrome через typewonder.com
Скачать по ссылке
Font swap
Мгновенная замена шрифтов на любой веб-странице на Google Fonts.
Скачать по ссылке
Visual Inspector — Fonts
Проверяйте и экспериментируйте со шрифтами на веб-сайте.
Скачать по ссылке
Дизайн вдохновление
Muzli
Самые свежие ссылки о дизайне и интерактивные прототипы со всего Интернета. Каждый дизайнер должен установить это расширение!
Скачать по ссылке
Panda
Находите лучший контент. Будьте информированными. Будьте вдохновленными.
Скачать по ссылке
Сделать скриншот
Light shot
Простой и удобный инструмент для создания скриншотов. Выберите область, отредактируйте скриншот и загрузите его на сервер.
Скачать по ссылке
Full page screen capture
Гарантированно сделайте снимок экрана текущей страницы без каких-либо дополнительных разрешений!
Скачать по ссылке
Image downloader
Просмотр и загрузка изображений на веб-странице.
Скачать по ссылке
Visual Inspector — Assets
Экспорт всех баннеров, иконок, ресурсов и всего остального с «любой» веб-страницы.
Скачать по ссылке
Проверьте адаптивную веб–страницу
Responsive Web Design Tester
Быстрый и простой способ проверить ваш адаптивный веб-сайт.
Скачать по ссылке
Window Resizer
Измените размер окна браузера, чтобы эмулировать различные разрешения экрана.
Скачать по ссылке
Corporate Ipsum
Создает случайные фразы и предложения для использования в качестве текста наполнителя.
Скачать по ссылке
Pendule
Инструменты веб-разработчика для Chrome.
Скачать по ссылке
Daltonize
Дальтонизация – это метод демонстрации деталей для пользователей, страдающих от цветовой слепоты, позволяя им увидеть то, что они иначе не заметили бы.
Скачать по ссылке
Вывод
Возможно, вы уже знакомы с некоторыми из этих плагинов. А некоторые из них могут быть для вас новыми. Все эти плагины удобны, и трудно сказать, какой лучше, если вы не попробовали их самостоятельно.
«Почему Visual Inspector охватывает несколько категорий?» Visual Inspector – это “все в одном” Chrome расширение для проверки и внесения любых изменений в дизайн веб-страницы – позиционирование, извлечение цветов, шрифтов, дизайнерских ресурсов и многое другое.
Недавно Visual Inspector заменил многие расширения Chrome на упорядоченную панель инструментов дизайнера, ускоряя их рабочий процесс, а также браузер.
Если мы пропустили ваше любимое расширение Chrome, не стесняйтесь писать в комментарии, и мы добавим его в список.
Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.
Window Resizer
Если вы дизайнер — вы, скорее всего, смотрите на 27-дюймовый iMac, когда читаете это. Тем не менее, у большинства наших пользователей нет мониторов размером с маленького слона.
Таким образом, встречайте Window Resizer. Это реально спасает жизнь, когда дело доходит до просмотра того, как ваш сайт выглядит в разных окнах просмотра. Просто откройте расширение и либо нажмите предустановленные видовые окна, либо введите что-нибудь нестандартное.
Loom
Говорят, картинка стоит тысячи слов, а видео стоит 10000? 1M? Кто знает — много, хотя. Loom — это действительно потрясающее бесплатное программное обеспечение, которое поможет вам записывать анимации, пользовательские разработки или описать ошибки в работе. Делиться этими видео со своей командой.
За последние несколько месяцев я много использовал этот инструмент. Это замечательно, когда вы пытаетесь передать вещи, которые невозможно запечатлеть, просто скриншотами. Просто установите расширение и нажмите запись. Когда вы закончите, вы можете поделиться своим видео и получить статистику о том, кто его просматривал и многое другое. Оценка приложению 10/10 порекомендовал бы другу — и вам конечно 🙂
Toybox
Вы тратите кучу времени на проверку элементов, захват скриншотов и регистрацию ошибок на вашем сайте? Вы можете решить данные проблемы с расширение Toybox Chrome. Это действительно самый быстрый способ оставить отзыв и проверить CSS прямо на вашем сайте.
Вы можете думать об этом как о комментировании в программах InVision или Zeplin Inspecting — но на вашем сайте. Кроме того, когда вы оставляете комментарий в данной программе, он автоматически делает снимки экрана, записывает данные браузера, информацию об ОС, размер области просмотра и многое другое — что делает диагностику проблем на одном дыхании. Это будет серьезная помощь для любой команды или продуктового агенства.
Muzli
Нужно вдохновение с утренним кофе (или чаем)? Расширение для Chrome Muzli поможет вам. Каждый раз, когда вы открываете новое окно браузера, вы увидите актуальную ленту всех интересных вещей. Они извлекают из тонны дизайнерских источников, чтобы дать вам что-то новое, модное и классное.
Я использовал это расширение в течение многих лет, и это просто замечательно.
SVG Grabber
Иногда вам просто нужно «стянуть» логотип или значки на странице. Если это, то чем вы занимаетесь довольно часто — тогда попробуйте SVG Grabber в своей жизни. Нажмите одну кнопку, и она автоматически вытянет все SVG, которые находятся на странице. Получите полное представление о том, как быстро загрузить то что вам нужно.
Не скажу что это то расширение, которым я пользуюсь все время, но порой оно выручает в сложные моменты.
Page Ruler
Измерение размера объектов на вашей странице может быть серьезной болью. Если вы часто открываете инструмент для создания скриншотов, я бы определенно рекомендовал вам приобрести расширение Page Ruler.
Откройте расширение, установите блок для измерения, и все готово! Ничего лишнего.
Dark Mode Dev Tools
Темная тема — настоящая необходимость для любого дизайнера. Так что эта утилита на самом деле встроена прямо в Chrome Dev Tools и не является расширением — но я думаю, что я все еще упомяну это;)
Просто откройте Инструменты разработчика> Нажмите на многоточечные эллипсы в правом верхнем углу> Нажмите «Настройки»> «Под внешним видом», переключите его на «Темный».
ColorZilla
Иногда вам просто нужен быстрый способ узнать, какой цвет используется, и ColorZilla — отличное решение именно для этого. Просто наведите курсор мыши на элементы на своей странице, чтобы увидеть используемые значения цветов hex и rgb. Нажмите, чтобы быстро скопировать его в буфер обмена. Это быстро, просто и эффективно.
У виджета есть и несколько других функций, но они не слишком часто используются.
Fontface Ninja
Еще одно простое, свежее и красивое расширение для вашего браузера — Fontface Ninja. Это приложение позволяет вам наводя курсор на элементы увидеть, какие шрифты они используют. Вы также можете перейти прямо с показываемых шрифтов на страницу, где их можно купить.
Простое и удобное расширение для док-станции.
Custom Cursor
Этот финт не совсем дизайнерский, но я нашел его на днях и подумал, что это настоящий хит. Пользовательский курсор позволяет вам изменить курсор по умолчанию на любой из выбранных кастомный, а также загрузить пользовательский курсор.
Очень весело, очень забавно, очень свежо
Спасибо что дочитали, и я надеюсь, что вам понравятся некоторые из этих расширений так же, как и мне 🙂 Пожалуйста, оставьте комментарий, если у вас есть другие расширения, которые вы используете в своем рабочем процессе!
Сделаем web лучше.
Google Сhrome уникальный браузер, кроме того, что он кушает много оперативки, в нем есть огромное количество полезных расширений. И в этой статье мы пойдем дальше виджетов погоды и блокировщиков рекламы.
1. WriteWell
WriteWell – это очень полезное расширение, которое поможет с любым писательским проектом – статьи, электронные книги, романы и блоги. Это расширение предлагает большую библиотеку шаблонов, советов, образцов текстов и умных фраз, чтобы направить в процессе созидания текстов.
2. DomFlags
Радикально ускорить процесс создания элементов с DomFlags поможет это расширение. Оно позволит вам создать горячие клавиши для DOM-эементов. Это очень похоже на закладки в DOM-объектах, такие закладки очень упростят работу с DevTools.
3. Highly Highlighter
Это интересный способ вовлечь людей в дискуссию: Highly позволяет поделится выделенным текстом из интересных статей в интернете.
4. Booom
Это приложение делает Dribbble лучше, показывая бОльшие превью картинок; добавляя кнопки Like и Add to Bucket в каталог; позволяет делать автовоспроизводение GIF.
5. CSS-Shack
Мощный инструмент для Chrome, позволяет создавать дизайн и потом экспортировать его в CSS файл для использования на сайте. Оно поддерживает слои и содержит множество инструментов, которые можно использовать и в стандартном фоторедакторе.
6. Marmoset
Это расширение поможет вставить ваш код в скриншоты ваших демок и мок-апов. Вы также можете добавить эффектов и создать промо для портфолио.
7. iMacros for Chrome
Как веб-разработчику вам нужно будет протестировать созданный сайт. Повторять один и тот же процесс довольно утомительно. iMacros позволит записать экшены, чтобы вызывать их всего один раз. Затем вы прогоняете этот экшн по заданным параметрам и сэкономите кучу времени для себя.
8. Font Playground
Каждый дизайнер и разработчик оценит это приложение по достоинству. Font Playground поможет экспериментировать со шрифтами и Google Fonts на онлайн веб-странице, не делая при этом никаких изменений. Прелесть этого расширения еще в том, что можно менять размер шрифта и применять различные эффекты к нему, прежде чем добавить его на сайт.
9. Window Resizer
Если вы делаете адаптивную верстку сайтов то это расширение точно для вас. Вы можете легко посмотреть, как работает сайт на всех популярных устройствах.
10. Project Naptha
Если вам когда-нибудь придется работать с текстами в мокапах, то не отчаивайтесь, это расширение поможет вам выделять, копировать и вставлять текст с любого изображения и переводить его.
11. What Font
Название этого приложения говорит само за себя. Хотите узнать, какой шрифт использовал тот или иной бренд? Можете сделать это одним кликом мышки.
12. Yslow
Это расширение не только проверяет скорость загрузки сайта, но еще и показывает, что именно тормозит сайт.
13. Web Developer
Если вы веб-разработчик и до сих пор не пользовались этим приложением, то мы не знаем, как вы жили. Оно добавляет в тулбар кучу полезных инструментов.
14. Page Ruler
Это расширение легко поможет померить любое место на экране.
15. Web Developer checklist
Этот инструмент поможет проверить вашу работу с точки зрения SEO, юзабилити и перфоманс. Допустим, у вас на странице потерялся H1 тэг, или нет мета-тайтла или мета-описания. Он легко определит, где ошибка, и поможет устранить ее.
16. DevTools Autosave
Истинное сокровище для веб-разработчиков! Эта программа позволяет автоматически сохранять любые изменения в CSS или JS с помощью инструментов среды Chrome Dev к его исходному файлу. Это легко настроить и использовать, и поможет сэкономить вам много времени.
17. Instant Wireframe
Это приложение позволяет одним щелчком мыши накладывать модульную сетку на любом сайте или офлайн скриншоте.
18. ColorZilla
Это приложение – не просто пипетка, оно еще и помогает передавать цвет в любую программу и создавать градиенты.
19. Ripple Emulator
Ripple Emulator – это мультиплатформенное приложение которое поможет протестировать ваше веб-приложение, используя большое количество размеров и разрешений экранов. Также можно использовать его для поиска багов и автоматического тестирования.
20. Streak CRM
Streak CRM для Gmail является основным инструментом для управления CRM и поддержки электронной почты.
21. Search Stackoverflow
Это приложение добавляет кнопку поиска на сайте Stack Overflow. Сам сайт является аналогом Quora для веб-разработчиков и поможет вам быстро решить возникшую проблему.
22. PHP Ninja Manual
Очень трудно запомнить каждую функцию, и если раньше вы тратили часы на поиск в гугле, то это расширение облегчит вам жизнь. Оно содержит всю PHP 5.5 документацию на 8 языках, и это не выходя из браузера.
23. PerfectPixel
Дизайнеры просто ненавидят, когда они создают крутой дизайн, но в процессе кодинга он теряет некоторые свои задумки. Это приложение очень просто использовать, одним нажатием кнопки можно наложить полупрозрачные картинки на мокап сайта и проверять попиксельно, чтобы все совпадало.
24. Code Cola
Мало того, что этот инструмент позволяет просматривать исходный код, над которым вы работаете, так он еще и работает как CSS редактор.
25. User-Agent Switcher![477bae3658f0e901931f307a1a8e06ea](https://say-hi.me/wp-content/uploads/2016/10/477bae3658f0e901931f307a1a8e06ea.jpg)
Еще одно приложение для того, чтобы увидеть, как сайт будет выглядеть на разных устройствах.
26. IE tab
Приложение для ленивых или тех, кто тут же сносит ненавистный интернет-эксплорер, а потом вспоминает, что на нем тоже нужно тестировать сайт. Превращает ваш хром в IE.
27. PicMonkey
Простой в использовании онлайн фоторедактор, в котором можно работать со скриншотами, изображениями и веб-страницами.
28. Chrome Daltonize!
Среди людей, которые пользуются интернетом, есть те, кто страдает дальтонизмом. Именно это приложение поможет вам улучшить дизайн сайта, чтобы им было комфортно пользоваться.
29. Appspector
Расширение, которое находит и показывает, какие использовались веб-утилиты и JS-библиотеки.
30. Check My Links
Закончили разработку сайта? Но при этом забыли проверить ссылки? Не беда, это расширение все сделает за вас.
31. Flickr Tab
Вам надоело, как в хроме выглядит окно новой вкладки? Это приложение позволит вам видоизменить его, поставив на фон лучшие снимки с Flickr.
32. Google Art Project
По принципу работы похоже на предыдущее приложение, только вместо фото показывает произведения Моне и Ван Гога.
33. Экономия трафика
Сокращает трафик, получаемый при загрузке страниц с помощью серверов Google.
Существует много разных и интересных приложений, которые позволят повысить вашу продуктивность. А какими из вы уже пользуетесь?
Читайте также:
10 плагинов для After Effects, которые очень вам нужны
40+ потрясающе креативных дизайнов кредитных карт
14 сайтов с великолепным дизайном, которые вас вдохновят
Всё никак не набалуетесь с плагинами в Figma? Не будем забывать, что в Google Chrome так же есть полезная дюжина расширений, коротая поможет улучшить и ускорить ваш рабочий процесс.
Вы точно дизайнер? Если вы читаете это, смотря на 27-дюймовый iMac, вероятнее всего, вы таковым являетесь(да наступит же холивар всех ненавистников Apple). Тем не менее, большинство пользователей, для которых вы делаете продукт не имеют таких огромных мониторов.
Есть выход – встречайте Window Resizer. Он реально спасет жизнь, когда дело доходит до просмотра вашего интерфейса / сайта на разных диагоналях. Работает просто – откройте расширение и нажмите предустановленные размеры, либо введите свои.
Всегда ли обычный скриншот готов передать всю суть происходящего? Loom – это действительно потрясающее бесплатное программное обеспечение, которое поможет вам записать скринкаст того, что происходит на вашем мониторе. Просто установите расширение и нажмите запись. Когда вы закончите, можно поделиться видео и получить статистику о том, кто его просматривал запись.
Не знаете, где искать вдохновение утром за чашечкой кофе? Расширение Muzli Chrome поможет вам. Каждый раз, когда вы открываете новое окно браузера, вы увидите актуальную подборку самых интересных вкусностей. Это своего рода выжимка из тонны дизайнерских источников, чтобы дать вам что-то уникальное, стильное и ультрасовременное.
Иногда вам просто нужно захватить логотип или иконку на странице. А еще бывает так, что иконка не сохраняется, или их целая куча и приходится сохранять по одной… Поприветствуйте SVG Grabber. Нажмите одну кнопку, и Grabber автоматически вытянет все SVG, которые находятся на странице. Получите полный список иконок, которые удалось вытянуть, и быстро загрузите те, которые вам нужны.
Измерение размера объектов на вашей странице может стать серьезной болью. Если вы часто открываете инструмент для создания скриншотов, чтобы измерить размер объекта, я бы определенно рекомендовал вам приобрести расширение Page Ruler. Откройте расширение, перетащите прямоугольник для определения размера области.
Иногда вам просто нужен быстрый способ узнать, какой цвет используется. ColorZilla станет отличным решением для этого. Просто наведите указатель мыши на элементы на своей странице, чтобы увидеть используемые коды цветов HEX и RGB. Так же есть возможность быстро скопировать код цвета в буфер обмена.
Еще одно просто и нужное расширение – Fontface Ninja. Оно позволяет вам наводить курсор на элементы, чтобы увидеть, какие шрифты используются. Сразу можно перейти к скачиванию или покупке этого шрифта, если он платный.
Ну и небольшая посхалочка, для тех, кто любит подшутить над коллегами. Одним кликом можно изменить обычный курсор на любой из представленных, а также загрузить свой)). Хотели бы чтобы ваш коллега крутил морковкой вместо стрелки, Custom Cursor поможет вам в этом.
{
“author_name”: “Евгений Егоров”,
“author_type”: “self”,
“tags”: [],
“comments”: 13,
“likes”: 46,
“favorites”: 285,
“is_advertisement”: false,
“subsite_label”: “design”,
“id”: 79358,
“is_wide”: false,
“is_ugc”: true,
“date”: “Wed, 14 Aug 2019 22:38:41 +0300”,
“is_special”: false }