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

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

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

Имея это в виду, мы собрали 11 лучших расширений Chrome для дизайнеров.

Ткацкий станок

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

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

Если вы продали Loom, рассмотрите платную услугу премиум-класса, которая позволяет видео 4K, неограниченное хранилище видео, инструменты рисования, выделение щелчком мыши и набор параметров редактирования, включая кнопки призыва к действию и настраиваемые миниатюры.

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

Дизайнеры должны знать, как каждый будет воспринимать их веб-предложения, и макет, который красиво выглядит на вашем экране — который, скажем прямо, вероятно, является первоклассным — может провалиться на устаревшем iPhone.

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

Музли

Если бы вы могли использовать немного дополнительного дизайнерского вдохновения в свой день — а кто бы не мог? – Muzli создан для вас, он собирает привлекательные визуальные дизайны со всего Интернета, чтобы прокручивать их, пока вы потягиваете свой утренний кофе.

Благодаря более чем 150 источникам со всего Интернета, включая Dribbble, Mashable и Product Hunt, Muzli будет приносить вам самые свежие дизайнерские идеи, проекты и новости каждый раз, когда вы открываете новую вкладку.

Увидеть то, что вас интересует? Нажмите и узнайте больше в новом окне браузера.

Линейка страниц

UX-дизайнеры, как правило, ценят простую, но эффективную идею, и это подводит итог Page Ruler.

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

ColorZilla

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

Долгое время являясь одним из самых популярных расширений Firefox, прежде чем, наконец, появиться в Chrome, ColorZilla имеет расширенную пипетку для определения цвета любого пикселя на любой странице, генератор градиента CSS и палитру цветов.

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

Шрифтовый ниндзя

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

«ДНК-движок шрифтов» Fontface Ninja отображает не только имя CSS, но и настоящее имя любого отображаемого шрифта, а затем позволяет вам опробовать его на законных основаниях. Если вам это нравится, Fontface Ninja также предоставляет ссылку для покупки соответствующей лицензии.

Спектр

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

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

Чекбот

Обеспечение того, чтобы все ваши ссылки действительно работали, чтобы ваши формы были безопасными, а ваш сайт был быстрым и удобным для навигации, — все это основные проблемы юзабилити для UX-дизайнера; Checkbot прикроет вашу спину и выявит любые проблемы, которые вы не заметили.

Тестируя сотни страниц одновременно, Checkbot может обнаруживать неработающие ссылки, ошибки HTML/JavaScript/CSS, повторяющиеся заголовки, проблемы безопасности, цепочки перенаправлений и ошибки смешанного содержимого.

На самом деле, Checkbot проверяет ваш сайт на соответствие более чем 50 рекомендациям по SEO, скорости и безопасности.

SVG-граббер

Вам часто приходится получать логотипы, значки, иллюстрации или другие изображения с других веб-сайтов? Если это так, SVG Grabber может сэкономить вам много времени и сил.

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

UX-проверка

Проще говоря, UX Check превращает эвристические оценки в легкий ветерок.

Расширение позволяет сканировать ваш веб-сайт на наличие проблем с удобством использования, чтобы вы могли протестировать его без реальных пользователей. UX Check помечает любые области вашего сайта, которые необходимо улучшить, на основе 10 общих принципов дизайна взаимодействия Nielsen Norman Group, которые включают видимость состояния системы, предотвращение ошибок, согласованность и стандарты, и сохраняет скриншот проблемы.

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

Корпоративный Ипсум

Если вы тестируете новый дизайн — особенно тот, который особенно много текста — вам может надоесть обычный первый абзац Lorem Ipsum. Для тех из нас, кто устал от латыни, Corporate Ipsum — это забавное расширение, которое случайным образом вызывает корпоративную двусмысленность для использования в качестве текста-заполнителя.

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

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

Узнайте больше о курсах BrainStation по дизайну UX.