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

Если вы веб-дизайнер, который следует стандартному процессу проектирования, в ваши задачи входят такие вещи, как:

• Исследования
• Каркас
• Выбор цветовой схемы
• Выбор правильного шрифта
• Тестирование нескольких вариантов
• Взаимодействие с клиентами и партнерами по команде

И еще кое-что…

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

Итак, сэкономьте массу времени и попробуйте эти 10 расширений Google Chrome для дизайнеров.

1. Тестировщик адаптивного веб-дизайна

Опубликуйте обновление Google для мобильных устройств, быстрота реагирования — это модное слово! Итак, вот расширение, которое позволяет протестировать ваш сайт на всех основных мобильных устройствах Android и Apple.

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

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

2. ВведитеWonder

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

Но вот где вступает в дело это удобное расширение шрифта. TypeWonder позволяет вам изменить шрифт любого веб-сайта в вашем браузере.

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

3. Вкладка Упаковщик

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

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

К счастью, вам не нужно так много работать. Tab Packager позволяет упаковать все открытые вкладки. И тогда вы можете отправить по ссылке пакета всего одним щелчком мыши. Вы можете поделиться через электронную почту, Twitter и многие другие сервисы.

4. ТрекДак

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

Это может показаться преувеличением, но TrackDuck похож на мини-асану, предназначенную исключительно для дизайнеров.

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

5. ЦветЗилла

Вы никогда не знаете, когда увидите прекрасный цвет, который вдохновит вас на палитру вашего следующего веб-проекта.

Итак, как вы захватываете любой цвет в Интернете?

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

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

6. Какой шрифт

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

Но вам больше не нужно идти по маршруту Inspect Element — WhatFont анализирует любой шрифт на веб-странице одним щелчком мыши.

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

7. Мгновенный каркас

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

Расширение Instant Wireframe позволяет просматривать достаточно хороший каркас любой веб-страницы. Он все еще находится в бета-версии, но делает хорошую работу.

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

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

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

Page Ruler — самый удобный способ сделать это. Page Ruler позволяет увидеть высоту, ширину и относительное положение элемента. Вы также можете анализировать элементы по разделам.

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

9. Палитра для Chrome

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

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

Мне бы понравилось больше, если бы был способ экспортировать цветовую схему. Но расширение по-прежнему необходимо.

10. ExtensionMuzli — дизайнерский завтрак

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

ExtensionMuzli создан, чтобы компенсировать это. Он курирует истории примерно с 12-15 лучших дизайнерских ресурсов. Также есть раздел вакансий веб-дизайнера, если вы хотите переключиться.

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

Итак, вот и все. Усильте свой Chrome с помощью этих замечательных расширений для веб-дизайнеров и наблюдайте, как ваша продуктивность стремительно растет. Как вы разбиваете процесс проектирования и какие расширения используете для каких задач? Я хотел бы узнать больше.