12 полезных расширений Chrome для дизайнеров

Аудио перевод статьи

В этом списке представлены 12 расширений Chrome, которые я собрал за последние десять лет, начиная с 2011 года. Хотя некоторые из них могут быть устаревшими, многие из них я использую почти каждый день. Наверное, я продолжу с ними работать еще как минимум лет десять.

1. ColorZilla

ColorZilla показывает цвет под курсором мыши

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

Наиболее часто используемая функция этого расширения — пипетка и история ранее выбранных цветов. Другие функции я использую редко.

2. WhatFont

На странице «О компании» сайта Medium используется шрифт GT Super Text Book, согласно расширению WhatFont.

Как только WhatFont был выпущен в 2011 году, он быстро стал расширением де-факто среди дизайнеров — по крайней мере, если речь идет о дизайнерах Нью-Йорка. В свое время мне казалось, что любой уважающий себя дизайнер просто обязан иметь это расширение в своем арсенале. Я до сих пор использую его почти каждый день.

3. Dimensions

Строка поиска google.com находится на 376 пикселей ниже от верха, согласно расширению Dimensions.

Dimensions предоставляет быстрый и точный способ измерения расстояния между двумя элементами DOM (от англ. Document Object Model — «объектная модель документа»). Это как ходить по дому с линейкой, измеряя каждый угол для новой мебели. Это настолько полезно, что вскоре и вы пристраститесь к нему.

4. SVG Gobbler

SVG иконки, которые обнаружило расширение SVG Gobbler на главной странице Medium

Хотите скопировать и изменить значок закладки Medium? Просто зайдите на домашнюю страницу Medium и нажмите на расширение SVG Gobbler. Вы увидите кнопку загрузки, и вы сразу поймете, что надо делать. Я качаю иконки со своего собственного сайта, потому что это проще, чем искать на жестком диске. Имейте в виду, что это работает только для SVG-изображений.

5. CSS Peeper

CSS Peeper отображает цветовую палитру с сайта FedEx

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

6. View Image Info

Щелкните правой кнопкой мыши на изображении, чтобы «Просмотреть информацию об изображении» (иллюстрация Fakurian Design via Unsplash)

‍View Image Info — это очень простое расширение для отображения основной информации о файле изображения — путь к файлу, габариты, тип и размер файла. Хотя его последнее обновление было около четырех лет назад, оно все еще отлично работает благодаря своей простоте.

View Image Info отображает основную информацию об изображении

7. Window Resizer

Window Resizer предоставляет различные возможности для тестирования адаптивного дизайна.

Если вы интенсивно тестируете свой сайт на различных размерах области просмотра, Window Resizer может помочь вам в этом. Он предоставляет множество предустановленных опций, но вы также можете создавать и сохранять пользовательские настройки.

8. VisBug

‍VisBug — это мощный инструмент для отладки и редактирования веб-страниц. Вы можете редактировать живые веб-страницы, как если бы вы редактировали их в дизайнерском приложении, таком как Figma или SketchApp. Вы можете изменять любой текст на странице, менять местами изображения, перемещать любые элементы в любое положение, получать информацию о CSS и так далее.

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

9. Живой редактор для CSS, Less и Sass — Magic CSS

Страница Википедии с цветом фона “психоделический голубой”

Если вы серьезно относитесь к редактированию CSS в режиме реального времени, рассмотрите возможность использования Live-редактора для CSS, Less & Sass — Magic CSS. Он предоставляет всплывающую консоль для записи кода CSS. Единственное, что мне не нравится в этом расширении — это название. Оно слишком длинное.

10. Расширение SEO Pro

Быстрый и удобный просмотр SEO-данных с помощью расширения SEO Pro Extension

Если вы дизайнер продуктов или UX-дизайнер, иногда вам необходимо проверить SEO-данные страницы, которую вы разрабатываете. SEO Pro Extension — это один из самых удобных инструментов, который поможет вам в ваших SEO-исследованиях. Когда я исследую другие сайты, одним из первых моих действий является изучение их SEO-данных.

11. Lighthouse

Lighthouse, представленный Google, — это удобный и мощный инструмент для проверки производительности сайта, оценки доступности и SEO-показателей в одном месте. Это отличный инструмент для всех UX-дизайнеров, которые хотят улучшить показатели своего сайта. Это еще один инструмент, который я всегда использую для исследований или конкурентного анализа. Подробную информацию можно найти на странице разработчиков Google.

12. Momentum

Momentum превращает новую вкладку в красивую приборную панель со списком дел. Как только вы начинаете использовать его в качестве новой вкладки, очень трудно перейти на что-то другое.

13. Earth View от Google Earth (Бонус #1)

И теперь я не могу перестать обновлять новые вкладки

Если вы любите планету Земля, а также красивые абстрактные изображения, я бы очень рекомендовал вам программу Earth View от Google Earth. Изображения настолько потрясающие, неожиданные и красивые, что вы будете настолько зачарованы, что не сможете оторвать от них свой взгляд.

14. Muzli 2 — Stay Inspired (Бонус #2)

Вдохновляйтесь новыми вкладками

Если вам нужно что-то более вдохновляющее и информативное, а не просто красивое, Muzli 2 — Stay Inspired — это то, что вам нужно. Он превращает новые вкладки во вдохновляющую творческую ленту со всего Интернета. Я начал пользоваться им всего несколько дней назад, и пока что совсем об этом не пожалел.

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

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

5 полезных расширений Chrome, которые должен попробовать каждый веб-дизайнер – Сей-Хай

Если вы пользуетесь Google Chrome, то наверняка сталкивались с расширениями для этого браузера. Точнее, с огромным количеством расширений. Выбрать что-то крутое в этом бесконечном списке очень сложно. Конечно, если вам не посоветуют что-то действительно крутое.

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

UX Check работает как юзабилити-тест, только без привлечения пользователей. Расширение сравнивает любой участок сайта на основе десяти эвристик юзабилити Нильсена – списка общих принципов создания удобных интерфейсов.

Этот инструмент – идеальное решение для команд, у которых нет времени или денег на тест с пользователями. Более того, вы можете экспортировать результаты в документ, чтобы поделиться им с другими членами команды!

Вы любите копаться в Интернете, находить новые шрифты и детали, а потом использовать их в своем дизайне? Что же, тогда Fontface Ninja – идеальный выбор. Просто наведите курсор на текст – и расширение Chrome покажет вам шрифт, его размер, межстрочный интервал, межбуквенный интервал и даже код цвета.

Кроме того, в открывшемся окне расширения вы можете протестировать шрифт на своем тексте. Если вам понравится шрифт, вы легко можете скачать или купить его.

Page Ruler Redux – это цифровая линейка для веб-дизайнеров и девелоперов. Используйте расширение, чтобы получить точное, до пикселя измерение любого элемента веб-страницы на экране.

Просто протащите линейку через нужный вам нужный раздел – и получите высоту и ширину выбранного элемента. Кроме того, вы можете настроить цвет линейки, чтобы обеспечить достаточный контраст в зависимости от фона веб-сайта!

Это не просто инструмент выбора цвета или пипетка. Кроме определения цветового кода, Color by Fardos обладает другими полезными функциями: определение оттенков цвета, получение рекомендаций по сопряжению цветов на основе теории цвета, а также захват CSS для любого градиента прямо из браузера.

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

Благодаря Window Resizer вы можете просматривать макеты в разных разрешениях браузера – и убедиться, что ваш дизайн выглядит первоклассно на всех устройствах. Как видно на изображении выше, в инструменты прописаны несколько вариантов разрешения. Но есть и поле для свободного ввода, что позволяет экспериментировать с вариантами для непопулярных устройств.

Источник: Dribbble

Читайте также:

10 мобильных приложений, которые научат вас кодить

5 подкастов, которые помогут вам начать фриланс-карьеру

10 лучших документалок Netflix для дизайнеров

15 обязательных расширений Chrome для дизайнеров

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

1. Colorzilla

Никому не нравятся проблемы с шестнадцатеричным кодом. Вы захотите создать медийную рекламу с теми же фирменными цветами, что и на веб-сайте. Брендбук не всегда под рукой. По крайней мере, для цветов вам не нужно, если у вас установлен Colorzilla. С помощью ColorZilla вы можете получить показания цвета из любой точки вашего браузера, быстро настроить этот цвет и вставить его в другую программу. Он также имеет множество других отличных функций, что делает его наиболее полным доступным средством выбора цвета.

2. Палитра сайта

Если вам нужны все цвета с веб-сайта, то вам подойдет Палитра сайта. Site Palette генерирует цветовые палитры на основе кодировки веб-сайта. Он также позволяет создавать общие ссылки и загружать автоматически сгенерированные шаблоны Sketch.

3. WhatFont

Вы когда-нибудь пытались выяснить, какой шрифт используется на веб-сайте, который вам действительно нравится? И как часто вы появлялись с пустыми руками? WhatFont распознает шрифт, используемый для любой копии, с которой вы сталкиваетесь в своем браузере, наведя на нее курсор. Довольно полезно, когда вы работаете в агентстве, и ваш клиент забыл название шрифта, который он хочет использовать в своей медийной рекламе…

4. Загрузчик изображений

Если вам когда-либо понадобится массово загружать изображения с веб-страницы, Image Downloader — это расширение для вас. Это особенно полезный инструмент для агентств и издателей, которые создают большой объем медийной рекламы для клиентов малого и среднего бизнеса, не располагающих слишком большими ресурсами. Image Downloader имеет некоторые дополнительные функции, которые позволяют фильтровать изображения на странице по ширине, высоте и URL-адресу или настраивать ширину отображения изображения, столбцы, размер границы и цвет.

5. Pageruler

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

6. Линейка дизайнеров

Линейка дизайнеров — это простая экранная линейка, позволяющая дизайнерам измерять что-либо в Интернете. Действительно простой, хотя он включает в себя несколько очень полезных опций, таких как раскрывающееся наложение и размер шрифта.

7. Corporate Ipsum

Не уверен, что мы решаем здесь настоящую проблему, но Corporate Ipsum генерирует случайную корпоративную белиберду, которая отличается от обычных текстов lorem ipsum. Что особенно полезно в этом инструменте, так это то, что он генерирует контент-заполнитель по словам или абзацам. Определенная экономия времени!

8. Изменение размера окна

Цифровые дизайнеры хотят знать, подходят ли их проекты для различных разрешений экрана. Window Resizer позволяет вам эмулировать разрешение экрана или браузера, чтобы вы могли тестировать свои проекты в любом из них. Отличный инструмент для окончательной проверки вашего дизайна.

9. Dark Reader 

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

10. Расширение Pexels для Chrome

Каждый ценит время от времени немного вдохновения. Расширение Pexels для Chrome показывает вам красивую фотографию каждый раз, когда вы открываете новую вкладку браузера. Это расширение заставит вас удивляться пару раз в день. Pexels — один из многих отличных поставщиков стоковых фотографий, который предлагает множество бесплатных материалов.

11. Easy Screen Capture

Этот инструмент для захвата экрана является отличной альтернативой большинству решений, так как он часто обновляется и позволяет сохранять скриншоты в формате PNG. PDF-файлы или поделиться ими напрямую. Easy Screen Capture также позволяет вам определить папку по умолчанию для ваших скриншотов, а расширение предлагает некоторые базовые инструменты редактирования, так что вам не придется открывать, редактировать и сохранять файл.

12. RescueTime для Google Chrome™

Вы заняты весь день, почти все дни недели. Однако к концу недели трудно вспомнить, что именно вы делали. Не говоря уже о конце месяца. Звучит знакомо? RescueTime помогает получить представление о проделанной работе. Например, если вы тратите свое время на создание медийной рекламы для клиентов, вы сможете увидеть, сколько часов вы потратили на какие проекты для каких клиентов.

В основном он используется для соблюдения ограничений на размер файла рекламных сетей или просто для того, чтобы сделать ваш веб-сайт быстрее и интереснее с лучшим сжатием. Если по какой-либо причине изображения, которые вы хотите использовать для своих медийных объявлений, довольно тяжелые, TinyPNG — это то, что вам нужно.

14. Fontsquirrel

Не все файлы шрифтов очень стабильны в Интернете. По этой причине Bannerwise принимает только файлы шрифтов .ttf. Если у вас нет файла .ttf вашего шрифта, вы можете преобразовать его с помощью генератора веб-шрифтов Fontsquirrel. Обратите внимание, что ваши шрифты должны иметь законное право на веб-встраивание. Это означает, что в определенной степени вы должны владеть авторскими правами на шрифт, который используете.

15. Coolors.co

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

И последнее, но не менее важное: мы хотели бы отметить, что наша платформа, Bannerwise, также является довольно изящным инструментом. Это поможет вам создать красивые персонализированные медийные объявления в один миг.

Ознакомьтесь с некоторыми примерами или узнайте больше, связавшись с нами!

27 лучших расширений Chrome для веб-разработчиков [2022]

27 лучших расширений Chrome для разработчиков

Disbug Chrome Extension

By

Terahog Labs





5

(

19

)

NO. Отзывы

.

Disbug — это обязательное расширение Chrome для разработчиков программного обеспечения.

Получить ИТДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Инструменты разработчика React

by

Meta





4

(

1

)

Нет обзоров

БЕСПЛАТНО

Запускаются на

Ключевые особенности приложения:

Инструменты разработчика React позволяют осматривать иерархии CROME Developer

‍

. Получите Itmore Info

JSON Viewer

By

TULIOS





4

(

964

)

NO.0002 Начинается с

Основные функции приложения:

JSON Viewer — это расширение для Chrome, позволяющее просматривать и редактировать данные JSON в браузере.

‍

Get ITmoRE INFO

ColorZilla

by

colorzilla.com





4.4

(

3

)

No Reviews

Free

Starts по телефону

Основные возможности приложения:

ColorZilla — это расширение для Google Chrome, которое позволяет вам легко изменить цвет любого элемента на вашем сайте.

‍

Get ITmoRE INFO

Dimensions

by

www.felixniklas.com





4.2

(

422

)

No Reviews

Free

Начинается с

Основные возможности приложения:

Это расширение — отличный способ быстро получить размеры любого элемента на сайтах с фиксированным макетом.

‍

ПолучитьДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Page Ruler Redux

по

https://rocha.codes





4,5

(

458

)

.

Page Ruler Redux — это расширение для Chrome, которое позволяет просматривать ширину, высоту и положение любого элемента на веб-странице.

‍

ПОЛУЧИТЬДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

UX Check

by

chrisgallello





3,4

(

84

)

Нет отзывов

БЕСПЛАТНО

старт на

Ключевые особенности приложения:

.

‍

get Itmore Info

Контрольный список веб -разработчика

по

Toptal.com





4.2

(

50

)

No Reviews

(

50

0003

Бесплатно

Начинается с

Ключевые особенности приложения:

С помощью этого расширения вы можете легко проанализировать любой веб-сайт на предмет нарушений передовой практики.

‍

‍

Get ITmoRE INFO

Checkbot: SEO, Web Speed ​​& Security Tester

by

checkbot.io





4.9

(

756

)

Нет отзывов

Бесплатно

Начинается с

Ключевые особенности приложения:

С Checkbot вы можете проверить SEO, скорость и безопасность вашего сайта одним щелчком мыши.

‍

Get ITmoRE INFO

Web Developer

by

chrispederick.com





4.5

(

3456

)

No Reviews

Free

Номер начинается с

Ключевые особенности приложения:

С помощью расширения Web Developer вы можете легко получить доступ к различным инструментам веб-разработчика прямо с панели инструментов.

‍

Get ITmoRE INFO

Editthiscookie

by

editthiscookie.com





4. 4

(

11534

)

No Reviews

Free

Starts по телефону

Ключевые особенности приложения:

Editthiscookie — это расширение для Chrome, которое позволяет быстро и легко редактировать настройки файлов cookie.

‍

ПОЛУЧИТЬДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Lightshot

по

https://app.prntscr.com





4,4

(

7235

)

ОБЗОР

БЕСПЛАТНО

Начаты

903 903

. :

Lightshot — это расширение для Chrome, позволяющее делать скриншоты и сохранять их в различных форматах.

‍

ПОЛУЧИТЬ ОБ ЭТОМДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Session Buddy

by

sessionbuddy.com





4,8

(

24803

)

Нет отзывов

бесплатно

начинаются с

Ключевые особенности приложения:

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

‍

ПОЛУЧИТЬ ИНФОРМАЦИЮ

Daily.dev

by

Daily Dev Ltd





900 900

(

1

)

Нет отзывов

Бесплатно

Начинается с

Ключевые особенности приложения:

Daily.dev — ваш лучший разработчик и поставщик последних новостей.

‍

Get ITmoRE INFO

GitHunt

by

roadmap.sh





4.4

(

17

)

No Reviews

Free

Starts в

Основные функции приложения:

GitHunt ищет и отображает популярные репозитории GitHub с поддержкой нескольких языков.

Get ITmoRE INFO

WhatFont

by

chengyinliu.com





4

(

1933

)

No Reviews

Free

Starts at

Ключевые особенности приложения:

WhatFont добавляет значок в адресную строку Firefox, когда шрифт используется на веб-странице

‍

Get ITmoRE INFO

Fonts Ninja

by

fonts. ninja





4.4

(

635

)

No Reviews

Free

Начинается с

Ключевые особенности приложения:

Fonts Ninja — это удобное расширение, позволяющее анализировать шрифты и получать более точные результаты.

‍

ПОЛУЧИТЬДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Пипетка Colorpick

на

vidsbee.com





4,3

(

1

)

Отсутствие APP

Запуск

. расширение, которое позволяет легко выбирать цвета с любой веб-страницы.

‍

get Itmore Info

Resizer

.0003

2542

)

Нет отзывов

Бесплатно

Начинается с

Ключевые особенности приложения:

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

‍

Get ITmoRE INFO

BrowserStack

by

Ritesh Arora and Nakul Aggarwal





4

(

134

)

No Reviews

Бесплатно

Начиная с

$29/месяц

Основные функции приложения:

BrowserStack — это служба тестирования совместимости между браузерами, которая обеспечивает доступ к более чем 3000 реальных мобильных и настольных браузеров.

‍

Get ITmoRE INFO

CSS Viewer for Chrome

by

Free Software Utilities





4.5

(

100

)

No Reviews

Free

Начинается с

Основные возможности приложения:

Средство просмотра CSS для Google Chrome — полезный инструмент, позволяющий просматривать и редактировать код вашего веб-сайта в браузере.

‍

Get ITmoRE INFO

Lorem ipsum generator

by

Jared Drake





3.8

(

97

)

No Reviews

Free

Начинается с

Основные возможности приложения:

Генератор Lorem ipsum позволяет легко генерировать текст Lorem ipsum, используя различные шаблоны.

‍

Get ITmoRE INFO

Ghostery – Privacy Ad Blocker

by

https://www.ghostery.com





5

(

13323

)

Нет отзывов

Бесплатно

Начинается с

Основные возможности приложения:

Ghostery — это расширение для Chrome, которое помогает защитить вашу конфиденциальность во время работы в Интернете. Он блокирует трекеры, файлы cookie и другие сторонние данные от отслеживания ваших привычек просмотра.

‍

Get ITmoRE INFO

Wappalyzer- Technology profiler

by

wappalyzer.com





4.6

(

1860

)

No Reviews

Free

Начинается с

Основные возможности приложения:

Wappalyzer — это расширение для Chrome, которое помогает находить и исправлять ошибки веб-сайтов.

‍

ПолучитьДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Очистить кэш

на

Benjamin Bojko





4,5

(

1066

)

NO Reviews

БЕСПЛАТНО

СЕРЫ. это расширение без каких-либо диалогов подтверждения, всплывающих окон или других неприятностей.

Получить подробнее

HTML Validator

by

gueury.com





3.8

(

31

)

Нет отзывов

Бесплатно

Начинается с

Ключевые особенности приложения:

Это первая версия расширения HTML Validator для Chrome.