Page ruler не работает

10 лучших расширений Chrome для дизайнеров

Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.

Window Resizer

Если вы дизайнер — вы, скорее всего, смотрите на 27-дюймовый iMac, когда читаете это. Тем не менее, у большинства наших пользователей нет мониторов размером с маленького слона.

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

Говорят, картинка стоит тысячи слов, а видео стоит 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

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

Очень весело, очень забавно, очень свежо

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

Источник

17 полезных Chrome-расширений для дизайнеров и веб-разработчиков

Чем больше интернет проникает во все сферы нашей жизни, тем больше работы у дизайнеров и веб-разработчиков. Если вы не живете в Северной Корее и вашим клиентам нужно больше сайтов, работать эффективнее и быстрее вам поможет этот набор расширений для Chrome. Определить цвет, поиграть со шрифтами, измерить попиксельную позицию элемента на странице или протестировать отзывчивость дизайна для разных устройств — теперь все это вопрос пары кликов.

Muzli

Все самое интересное для дизайнеров: новости, статьи, полезные ссылки.

Responsive Web Design Tester

Это быстрый и простой способ протестировать ваш веб-сайт на отзывчивость. Помимо Chrome, поддерживается также Opera и Mozilla Firefox.

Window Resizer

Этот инструмент позволяет менять размер окна браузера, чтобы тестировать макеты в разном разрешении.

Page Ruler

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

Dimensions

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

ColorZilla

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

WhatFont

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

TypeWonder

Позволяет тестировать веб-шрифты на любом веб-сайте в реальном времени.

CSS — Shack

Это десктопное веб-приложение, которое позволяет создавать слои стилей (как в любом графическом редакторе) и экспортировать их в CSS-файл.

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

PerfectPixel by WellDoneCode

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

Lightshot

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

UX Check

Запускает эвристическую оценку вашего сайта (юзабилити).

Code Cola

Позволяет редактировать наглядно CSS-стили онлайн-страниц.

Corporate Ipsum

Генерирует рандомные корпоративные тексты для тестового наполнения сайта.

Pendule

Набор инструментов веб-девелопера для Chrome.

Fontface Ninja

Определяйте шрифты, используемые на странице, пробуйте и покупайте.

Prospero For Gmail

Инструмент позволяет в один клик добавить шаблон фриланс-предложения в ваше письмо на Gmail. Останется лишь заполнить пробелы.

Источник

12 лучших расширений Google Chrome для дизайнеров

Разбираем лучшие бесплатные расширения для Google Chrome, которые упростят жизнь дизайнерам и разработчикам.

Как включить расширения в Google Chrome

Не все пользователи в курсе, что возможности браузера Google можно расширить с помощью дополнительных расширений, распространяющихся через сайт Chrome Web Store.

Чтобы добавить расширение в Хром, нужно зайти на его страницу в маркете и нажать на синюю кнопку «Добавить» в верхнем правом углу. Либо раздобыть файл в соответствующем формате на другом профильном ресурсе и запустить его двойным кликом мыши.

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

Топ расширений для Google Chrome, которые нужны каждому дизайнеру и разработчику

Рассмотрим плагины для Google Chrome, упрощающие работу с интерфейсами веб-сайтов.

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

ColorZilla

Иногда нужно по-быстрому скопировать цвет, найденный на странице, сохранить его в свою палитру для разрабатываемого проекта или в ту же секунду вставить в редактор кода (или в Фигму). Для этого подходит расширение ColorZilla. Это как встроенный в ОС инструмент «пипетка», но работающий в Google Chrome и доступный в любой момент на каждой открытой странице.

Достаточно кликнуть по иконке ColorZilla, а потом навести курсор на интересующий цвет. Оттенок отобразится в панели управления расширением. Оттуда можно будет в один клик скопировать RGB- или HEX-схему. Или сохранить ее на будущее в том же интерфейсе.

Расширение распространяется бесплатно. Скачать в Chrome Web Store

WhatFront

Это дополнение похоже на предыдущее, оно тоже позволяет проанализировать информацию на странице, чтобы потом использовать полученные данные в своем проекте. Только если ColorZilla помогает искать цвета, то WhatFont работает со шрифтами.

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

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

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Wireframe

Чтобы было проще разрабатывать дизайн интерфейса, некоторые специалисты каждому CSS-элементу назначают видимые границы (чтобы было видно, какое именно пространство на сайте занимают блоки и как они взаимодействуют). Естественно, это устаревший метод, не особо аккуратный и сложный в реализации.

Wireframe искусственно создает те самые границы. Каждый элемент дизайна обретает оградку, по положению которой можно оценить размер блока, его влияние на другие элементы интерфейса (соседние блоки), адекватность применения padding и margin.

Взглянуть на расположение div можно на любом сайте. Не везде от этого будет польза (на некоторых ресурсах задействуется крайне специфичная структура), но взглянуть на каркас страницы в общих чертах можно, причем сделав один клик, а не редактируя кучу селекторов в CSS.

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Evernote Web Clipper

Расширение от создателей одноименного цифрового блокнота. С помощью веб-клиппера создатели Evernote предлагают копировать из сети изображения и «куски» страниц в отдельную папку. Получается что-то в духе скрапбука – книги, в которую вы собираете идеи и источники вдохновения.

Таким образом, можно сохранять любимые цвета, интересные варианты реализации уже устоявшихся функций (анимации и переходы), всевозможные иконки, шрифты и арт-стилистику.

Все сохраненные элементы доступны в блокноте Evernote, а значит, можно просматривать и открывать их с любого устройства. Более того, сам Evernote Web Clipper существует в версии для iOS и Android в качестве системного расширения и позволяет собирать элементы веб-страниц прямо в Evernote.

Для работы с плагином понадобится учетная запись в сервисе.

Расширение распространяется бесплатно, но для работы на нескольких устройствах требуется премиум-аккаунт. Скачать в Chrome Web Store

Google Font Previewer

Шрифт – один из важнейших элементов дизайна на сайте. И дело даже не в семействе или определенной подгруппе шрифтов. Слегка измененный размер, кегль или толщина может оказать заметное влияние на общее визуальное восприятие сайта.

Google Font Previewer позволяет «примерить» несколько шрифтов на готовую страницу или ее отдельные элементы, не редактируя CSS. То есть внешний вид страницы будет меняться временно до отключения расширения. Также в плагине можно собрать коллекцию шрифтов, которые вы используете на регулярной основе, и использовать их на других страницах, чтобы проверить, подходят ли они в их стилистику.

Подходящий шрифт можно сразу скачать из коллекции Google Fonts (если он там имеется).

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Lorem Ipsum Generator

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

Расширение Lorem Ipsum Generator генерирует до 20 предложений. Можно создавать параграфы с тегами и задавать определенное количество переносов строк. Получившийся текст можно сразу скопировать в буфер обмена и вставить в «тестируемый» элемент страницы.

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Loom

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

Можно сделать наглядный ролик и запечатлеть баги, анимации или какое-то необычное поведение страницы.

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

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Page Ruler

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

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

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Window Resizer

Обычно у дизайнера огромный монитор, а то и несколько махин по 27+ дюймов с Retina-разрешением. Но у большинства пользователей таких экранов нет. Скорее всего, это будет 13-дюймовый ноутбук, 10-дюймовый планшет или 6-дюймовый смартфон.

Чтобы понять, как страница будет выглядеть на таких «крошечных» дисплеях, необходимо изменить разрешение. Или воспользоваться утилитой Windows Resizer, позволяющей в один клик изменить размер экрана для сайта, не трогая при этом разрешение дисплея в целом.

Можно посмотреть, как разрабатываемый сайт будет выглядеть на MacBook, iPad, iPhone или указать собственное разрешение на выбор. Расширение поможет откалибровать адаптивную верстку для сайта, не открывая его на мобильном устройстве.

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Muzli

Отличный источник вдохновения для всех дизайнеров, который курируется огромным количеством специализированных изданий. Суть работы расширения заключается в замене стартовой страницы браузера на галерею из различных дизайнерских решений. Коллекция собирается из следующих источников:

• Behance – популярный портал для UI-дизайнеров.
• Dribble – площадка для размещения работ художников и разработчиков интерфейсов.
• CSS – галерея для веб-дизайнеров.
• Множество новостных/технологических изданий.

Количество источников можно настроить самостоятельно. Все они отображаются в боковой панели новой стартовой страницы.

Расширение распространяется бесплатно. Скачать в Chrome Web Store

SVG Grabber

Одно из тех расширений, которое нужно редко. Но когда нужно, оно спасает кучу времени и нервов. Иногда дизайнерам требуется быстро сохранить логотип в формате SVG. Звучит просто, но на деле это не так. Вытащить svg-картинки с ресурса сложнее, чем просто сохранить изображения типа .jpeg или .png.

SVG Grabber – дополнение, которое дает возможность вытащить с сайта все svg-файлы одним кликом. При включении SVG Grabber все соответствующие изображения появятся на экране, и под каждым из них будет кнопка Download для загрузки картинки на ПК.

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Clear Cache

Плагин Clear Cache очищает кэш браузера, не вызывая никаких интерфейсов и всплывающих меню. Один клик – и кэша нет.

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

Расширение распространяется бесплатно. Скачать в Chrome Web Store

Это последнее расширение в списке лучших.

Думаю, каждый начинающий дизайнер найдет в этой подборке что-то, что радикально упростит рабочий процесс. Ведь зачастую именно мелочей в духе Wireframe или Page Ruler не хватает, чтобы сделать дизайн/разработку максимально приятным занятием.

Источник