16 лучших инструментов разработки и дизайна Google в 2020 году

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

К счастью, Chrome предоставляет инструменты, которые гарантируют, что любой сайт или приложение будет в лучшем виде. DevTools позволяют дизайнерам и разработчикам получить представление о веб-странице: вы можете манипулировать DOM, проверять CSS, экспериментировать с проектами при редактировании в реальном времени, отлаживать JavaScript и проверять производительность. (Подробнее об использовании этих веб-инструментов Google см. Здесь).

Но Google предлагает больше, чем просто браузер. В нем есть инструменты и ресурсы, помогающие практически во всех аспектах вашей жизни. Хотите знать, как улучшить производительность? Маяк здесь, чтобы помочь. Хотите создавать более эффективные мобильные сайты? Тогда поздоровайтесь с AMP. Вы ищете для создания красивых PWAs? Затем Flutter, Material Design и Workbox готовы к работе.

Прелесть использования инструментов, ресурсов, библиотек и фреймворков Google в том, что вы знаете, что они будут хорошо работать с браузером Chrome – самым популярным браузером на планете. Дополнительные инструменты см. В наших обзор инструментов веб-дизайна.

1. Маяк

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

02. Полимер

Polymer хорошо известен своей работой с веб-компонентами, но теперь проект расширил свой репертуар, включив в него коллекцию библиотек, инструментов и стандартов. Что включено? LitElement – это редактор, который позволяет легко определять веб-компоненты, а lit-html – это библиотека шаблонов HTML, которая позволяет пользователям писать HTML-шаблоны следующего поколения в JS. Кроме того, вы также найдете PWA Starter Kit, оригинальную библиотеку Polymer и наборы веб-компонентов.

03. APIs Explorer

Google имеет обширную библиотеку API-интерфейсов, доступных для разработчиков, но найти то, что вам нужно, нелегкая задача. Вот где Google API Explorer предлагает протянуть руку помощи. Существует длинный список, который можно прокручивать, но для более быстрого доступа есть поле поиска для фильтрации списка API. Каждая запись ссылается на справочную страницу с более подробной информацией о том, как использовать API.

04. Флаттер

Инструменты Google Flutter

Создавайте красивые приложения с Flutter (Изображение предоставлено: Флаттер)

Если вы хотите создавать привлекательные приложения для мобильных устройств, веб-приложений и настольных компьютеров из единой кодовой базы, тогда Flutter может быть для вас. Сайт является полной ссылкой на работу и создание с Flutter. Понятия не имею, что делать? Документы проведут пользователя от установки до создания с помощью множества примеров и учебных пособий.

05. Google GitHub

Как известно большинству, GitHub является хостинговой платформой / хранилищем для хранения и обмена кодом и файлами. И, к счастью, у Google есть собственное место на платформе с более чем 260 репозиториями, которые нужно просеять. Используйте фильтр, чтобы сократить время поиска и приблизиться к хранилищу, с которым вы хотите поиграть или внести свой вклад.

06. Кукольник

Встроенный в Node, Puppeteer предлагает высокоуровневый API, который позволяет вам получить доступ к Chrome без головок – фактически Chrome без пользовательского интерфейса, который разработчики могут затем контролировать через командную строку. Так что вы можете сделать с Кукольником? Доступно несколько вариантов создания скриншотов и PDF-файлов страниц, автоматизации отправки форм и создания среды автоматического тестирования.

07. Рабочая коробка

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

08. Codelabs

Вам нужны практические рекомендации по продукту Google? Codelabs предоставляет «практическое руководство по программированию». Сайт аккуратно разбит на категории и события, что позволяет быстро и легко найти то, что вы хотите. Он включает в себя аналитику, Android, Assistant, дополненную реальность, Flutter, G Suite, Search, TensorFlow и виртуальную реальность. Выберите опцию и получите код и указания, необходимые для создания небольших приложений.

09. Инструмент Цвет

Инструменты Google Chrome

Выберите палитру, любую палитру (Изображение предоставлено: Color Tool)

Color Tool – простой инструмент, который позволяет создавать, совместно использовать и применять палитру в дополнение к проверке доступности. Пользователи могут выбрать предопределенную палитру из палитры материалов. Просто выберите цвет, а затем примените его к основной цветовой схеме, переключитесь на дополнительный вариант и выберите снова. Наконец, выберите цвета текста для обеих схем. Или же выберите Custom, чтобы выбрать цвета. Затем переключитесь на Доступность, чтобы проверить, все ли хорошо, прежде чем, наконец, экспортировать палитру.

10. Дизайн Спринты

Design Sprint Kit предназначен для тех, кто учится участвовать в спринтах на дизайн или проводить их. Он охватывает все базы знаний, от начинающих до опытных инструкторов по спринту. Узнайте о методологии или пройдите прямо на этапе планирования, включая написание брифов, сбор данных и исследования, а также то, что делать после спринта. Также включает в себя множество ресурсов, таких как инструменты, шаблоны, рецепты и возможность представить свой собственный метод.

11. Люди + AI Путеводитель

Данное руководство является работой инициативы People + AI Research в Google и призвано предложить помощь тем, кто хочет создавать ориентированные на человека продукты ИИ. Комплексное руководство состоит из шести глав, охватывающих потребности пользователей, сбор и оценку данных, ментальные модели, доверие, обратную связь и изящные ошибки. Каждая глава сопровождается упражнениями, рабочими листами и инструментами и ресурсами, которые необходимы для этого.

12. Google Assistant

Инструменты Google Chrome

Помощник Google делает много помощи (Изображение предоставлено Chrome)

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

13. PageSpeed ​​Insights

PageSpeed ​​Insights анализирует веб-контент, а затем предлагает рекомендации по ускорению его загрузки. Просто добавьте URL, нажмите кнопку «Анализ» и подождите, пока волшебство не случится. Посмотрите документы, чтобы лучше понять, как работает API PageSpeed ​​и как его использовать.

14. AMP в Google

AMP – это инструмент Google для создания быстро загружаемых мобильных страниц, которые (будем надеяться) попадут в топ поисковых рейтингов. Узнайте, как создавать быстрые сайты, ориентированные на пользователя, интегрировать AMP в продукты Google, использовать кэш Google AMP для ускорения страниц AMP и монетизировать страницы AMP с другими продуктами Google.

15. Google DevTools

Инструменты Google Chrome

С DevTools можно многое сделать (Изображение предоставлено Chrome)

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

Вкладка Элементы представляет собой введение в DevTools. Он отображает HTML-код, который составляет выбранную страницу. Получите представление о свойствах каждого элемента div или тега на выбранной странице и начните редактирование в реальном времени. Это идеально подходит для экспериментов с дизайном. Проверьте макет – используете ли вы Flexbox или Grid – и посмотрите на связанные шрифты с примерами и изучите анимацию.

В другом месте вы можете просматривать и изменять CSS. На вкладке «Стили» на панели «Элементы» перечислены правила CSS, применяемые к текущему выбранному элементу в дереве DOM. Включите и выключите свойства (или добавьте новые значения), чтобы поэкспериментировать с проектами. Это идеальный инструмент для обеспечения того, чтобы все работало как положено, прежде чем вносить какие-либо изменения в живой дизайн.

Вы также можете отлаживать JavaScript, оптимизировать скорость работы сайта и проверять скорость сети. Вот быстрый совет, который вы можете использовать, чтобы немедленно ускорить рабочий процесс. Перейдите на вкладку Sources, нажмите New Snippet и добавьте часто используемый код. Назовите фрагмент кода и сохраните. Повторите по мере необходимости. Теперь вы можете взять этот фрагмент кода вместо того, чтобы писать его снова.

Как и любой хороший браузер, Chrome постоянно развивается, и каждый новый выпуск приносит новые функции. Узнайте, что происходит на платформе статуса Chrome

16. Материал Дизайн

Инструменты Google Chrome

Материал является жизненно важным элементом дизайна комплекта (Изображение предоставлено Chrome)

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

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

Помимо раздела «Дизайн» находится компонент «Компоненты», который предоставляет физические строительные блоки, необходимые для создания дизайна. Что здесь включено? Кнопки, баннеры, карточки, диалоги, разделители, списки, меню, индикаторы прогресса, ползунки, панели быстрого доступа (это краткие сообщения о процессах приложения в нижней части экрана), вкладки, текстовые поля и всплывающие подсказки. Несомненно комплексная коллекция компонентов.

И разработчики не забыли подробности и руководства о том, как создавать приложения для разных платформ – Android, iOS, Web и Flutter. И, наконец, есть страница, посвященная множеству ресурсов, которые помогут реализовать выбранный вами дизайн.