Есть, конечно, и другие поисковики. Но нельзя отрицать, что именно Google стал знаковым в своей нише. Даже появился новый глагол – “гуглить”. То есть искать информацию в интернете. А браузер Chrome без сомнений является одним из самых распространенных и востребованных, По крайней мере, среди наших студентов и коллег. Именно поэтому мы рассмотрим возможности и инструменты Google Chrome, которые пригодятся веб-дизайнеру.
Chrome обладает простым интерфейсом и при этом совмещает это с современными технологиями, быстрым и безопасным доступом в сеть. И наличие встроенных инструментов и расширений только добавляет браузеру плюсов. Возможности Хрома легко масштабируются с помощью расширений. Их можно взять на сайте Chrome Web Store. В маркете тебе нужно выбрать желаемый плагин и скачать его.
Видишь иконку в виде пазла на панели управления? Там и собраны все твои скачанные расширения. Можно запускать их оттуда или же вынести на панель инструментов для удобства.
Есть довольно много узконаправленных возможностей, которые не пригодятся рядовому пользователю, но сильно облегчат работу веб-дизайнеру. Мы рассмотрим 15 самых интересных расширений именно в этой нише.
1. WhatFont
Мы много раз говорили о том, что стоит записывать интересные идеи. А еще тренировать насмотренность и анализировать крутые работы, чтобы позже внедрить в свои собственные проекты оригинальные решения и тренды. Это касается и шрифтов. Иногда заходишь на сайт, видишь крутой шрифт, но не знаешь, как он называется. Расширение WhatFont как раз полезно в такой ситуации. С ним получится не просто определить названия всех шрифтов на нужном сайте, но и узнать подробности о них. Относятся ли они к бесплатным или премиум-версиям, есть ли в базах Typekit или Google Fonts. Удобно? Безусловно. Устанавливай WhatFont и больше не заморачивайся с определением шрифтов.
2. Lorem Ipsum Generator
Мы выступаем за то, чтобы сначала прописывались все тексты и делался прототип, а уже потом дизайн. Но бывает, что тебе нужно сгенерировать “рыбу”. Тут поможет расширение Lorem Ipsum Generator. Оно не только поможет прикинуть, как смотрится тот или иной шрифт, но и позволяет создавать параграфы с тегами, задавать переносы. Удобно и быстро.
3. Font Playground
Очень удобное расширение, которое позволит “поиграть со шрифтами” без изменений в коде на активной странице. Можно попробовать разные варианты, поменять размеры и стили шрифта, добавить эффекты. Для закрепления результата придется потом все-таки лезть в кодинг, но перед этим ты уже вдоволь проверишь все варианты, увидишь, как они будут смотреться в готовом виде. Благодаря Font Playground ты сэкономишь время. А еще можно попробовать некоторые изменения и показать скриншот заказчику – если одобрит, тогда уже менять все.
4. Page Ruler
Казалось бы, линейкой никого тут не удивить. Обычная штука, которая поможет определить положение элементов на странице, их размеры. Но скажем честно, если начнешь пользоваться этим расширением, то уже привыкнешь и не откажешься от него – очень удобно. Линейка будет прямо в браузере, не нужно открывать страницу в других программах. Page Ruler позволяет подогнать все CSS-блоки за пределами Фотошопа и Фигмы.
5. SVG Grabber
Бывает, что нужно скопировать SVG-объекты со страницы. Например, ты делаешь лендинг в стиле основного сайта и понадобились иконки, логотип. Просто используй SVG Grabber – в один клик получишь все объекты.
6. User-Agent Switcher
Адаптивность – одно из главных требований в современном веб-дизайне. Ты должен делать качественный продукт, который хорошо смотрится на разных устройствах. А с расширением User-Agent Switcher можно не только посмотреть вид проекта для разных устройств, но и для разных браузеров, что немаловажно. Обязательно проверяй работу таким способом. Корректируй недочеты сразу, а не в тех случаях, когда проблему заметят другие в уже рабочем сайте. Такие мелочи влияют на удобство работы, на посещаемость и на твою репутацию специалиста.
Также разные разрешения покажет Window Resizer – аналогичное расширение.
7. Responsive Web Design Tester
Еще одно специализированное расширение для проверки адаптивности. Ты легко проверишь, как смотрится сайт на разных устройствах и экранах. Если хочешь узнать, насколько отзывчивый твой дизайн – обязательно тестируй. Не пренебрегай разными моделями устройств, проверяй тщательно. Постоянно появляются новые решения, важно соответствовать им. А ты уже проверил свой текущий проект на соответствие новому iPhone?
8. Yslow
Скорость загрузки сейчас относится к важнейшим факторам удержания пользователей. Никто не хочет ждать, пока страница загрузится, всем нужна молниеносная работа. А еще поисковые системы понижают в выдаче медленные сайты. Если не хочешь столкнуться с подобными проблемами – проверяй сайт с помощью расширения Yslow. Это не только измерение скорости загрузки, но и анализ страниц. Если есть элементы, которые тормозят сайт, то расширение поможет их выявить и оптимизировать.
9. Web Developer checklist
Более обширную задачу выполняет Web Developer checklist:
- проверка страницы на соответствие SEO;
- проверка скорости загрузки;
- оценка видимости;
- оценка уровня юзабилити.
Расширение поможет делать действительно рабочие сайты, а не просто красивую картинку. Оно укажет, если ты пропустил мета-заголовок или другую важную деталь для работы ресурса. С таким инструментом ты сможешь выкатить сайт, который будет правильно функционировать с точки зрения системы и отвечать необходимым параметрам.
10. Loom
Эта вещь полезна не только дизайнеру. Расширение позволяет записывать видео со своим экраном. Можно добавить еще экранчик со своим лицом, если нужно передать эмоции. Очень удобная штука – ты можешь показать в динамике разные элементы, объяснить путь, ошибки, предложения. Это заменит тысячи скриншотов и пояснений буквами.
Если это правки – то запись видео займет минуты вместо долгих переписок. А само видео можно просматривать сколько угодно раз. Для командной работы или для общения с клиентами это самое то. Во многих случаях запись видеосообщений заменит созвоны.
11. Instant Wireframe
Встретился в сети интересный проект? Красиво структурированный, необычный, сложный? Изучи его подробно. Разбери сайт с помощью расширения Instant Wireframe. Оно покажет каркасный просмотр страницы, позволит посмотреть структуру. Работает как на локальных, так и уже опубликованных веб-страницах.
Такой подход поможет усовершенствовать твои работы, добиться сбалансированности и эстетичности, повысить свой собственный уровень.
12. ColorZilla
Это одно из самых известных и распространенных в дизайнерской среде расширений. Возможно, ты уже с ним знаком. Если нет – обязательно попробуй. Это простая классическая пипетка, которая поможет узнать, какой цвет используется для элементов на странице. Она выдаст значения цветов hex и rgb. И еще один плюс – одним кликом ты копируешь это значение, чтобы использовать в своем проекте.
13. PerfectPixel
Страшный сон веб-дизайнера – сделать крутой дизайн, а после верстки обнаружить несовпадения. Ну может это и не трагедия, но очень неприятный момент. И не нужно закрывать на это глаза – добивайся идеального соответствия. Как работает расширение PerfectPixel – в несколько простых действий ты размещаешь поверх своей страницы полупрозрачное изображение изначального дизайна. Это позволяет буквально до пикселя проверить соответствие!
14. Chrome Palette
Ситуация следующая: ты находишь отличную иллюстрацию/картинку/изображение для своего проекта, но не уверен в том, какую цветовую схему стоит применить, чтобы оно вписалось. Как показывает практика, это частая проблема в нашей среде. Расширение Chrome Palette легко решает задачу. Оно генерирует 64 цветовые палитры для нужного изображения, а уже отталкиваясь от них можно внедрять все что нужно в свой дизайн.
15. Awesome Screenshot: Capture & Anno
Удобный способ сделать скрин. Выбираешь нужный участок, настраиваешь его, можешь добавить надписи, размыть частично изображение. Удобно, быстро без всяких условностей и тем более необходимости переносить изображение для минимальной обработки в другие программы. Даже сохранять не нужно – сразу вставляй в проект.
Бонус: Muzli
Не столько полезный технически инструмент, сколько дополнение для вдохновения. С ним при каждом открытии нового окна в браузере будет предлагаться лента с новинками из разных дизайнерских источников. Если ты не находишь времени на просмотр всяких Behance и Dribbble, то такая мелочь очень поможет оставаться в тренде.
Материал подготовлен командой образовательной платформы WAYUP
