Google добавил в выдачу инструмент для подбора цвета


Содержание материала:

Сервисы для подбора идеального цвета сайта

Как управлять вниманием пользователя на сайте? Как подбирать правильные цвета для сайта? С помощью какого приложения узнать код цвета на сайте конкурента? Разбираем сегодня в статье.

  • color-hex.com — определит какие цвета стоят рядом с вашим цветом
  • thestocks.im — агрегатор мокапов, видео, фотографий, иконок, шрифтов.
  • Eye Dropper — расширение для Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
  • Adobe Color CC-подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
  • Colorzilla -расширение для Google Chrome и Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.

Загрузите картинку и сделайте из нее палетку.

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

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

  • Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
  • Белый. Простой, спокойный и чистый.
  • Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
  • Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
  • Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
  • Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
  • Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
  • Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
  • Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.

Черный

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

Белый

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

Красный

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

Оранжевый

Это энергичный и теплый цвет, вызывающий чувство волнения. Дизайнеры используют цвет, если им нужно мотивировать на действие.

Желтый

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

Зеленый

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

Синий

Цвет доверия. Он обычно показывает надежность, успокаивает.

Пурпурный

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

Розовый

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

Коричневый

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

Исследование проводилось в Северной Америке.

· Инструмент для подбора цветов и генерации цветовых схем ·

Схема:
Насыщенность/Яркость

Схема:
Контрастность

Выбранный Вариант:
Насыщенность/Яркость

  • Схема по умолчанию
  • Больше контраста
  • Высокий контраст
  • Максимум контраста
  • Меньше контраста
  • Низкий контраст
  • Минимум контраста
  • Средне-темный (насыщенный)
  • Темный (насыщенный)
  • Очень темный (насыщенный)
  • Пастельный
  • Средне-темный пастельный
  • Темный пастельный
  • Очень темный пастельный
  • Мягкий бледный пастельный
  • Средний бледный пастельный
  • Темный бледный пастельный
  • Очень темный бледный пастельный
  • Полутон (легкий)
  • Серый полутон с цветовым акцентом (легкий)
  • Серый полутон (средний)
  • Серый полутон с цветовым акцентом (средний)
  • Серый полутон (темный)
  • Серый полутон с цветовым акцентом (темный)

Постоянный адрес текущей цветовой схемы:

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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


17 инструментов для работы с цветом

Цвет — один из главенствующих факторов успеха любого дизайн-проекта.

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

1. ColorHexa

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

2. Paletton

Один из самых мощных инструментов для подбора цветовых палитр. Особенно радует возможность взглянуть (пусть и приблизительно), как эта палитра будет работать на сайте, например. А если ну совсем ничего не получается — можно потыкать в Randomize 🙂

3. RgbTo

Удобный конвертер цвета в различные цветовые модели.

4. Color

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

5. Color-Hex

Сервис предоставляет информацию о цвете в различных цветовых моделях.

6. Stylify Me

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

7. Web Colour Data

Сервис, который извлекает и хранит информацию о цветах, используемых на популярных (и не очень) сайтах.

8. Color Extraction

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

9. Multicolr Search Lab

Поиск изображений с лицензией Creative Commons по заданному цвету.

10. Adobe Color CC

Мощный инструмент для подбора цветовых палитр с помощью цветового круга.

11. Colorful Gradients

Автоматически генерируемые цветовые градиенты. Обновляются каждый 48 часов.

12. Brand Colors

Коллекция фирменных цветов крупнейших брэндов.

13. Material Palette

Сервис для генерации цветовой палитры проекта на основе цветов из Google Material Design.

14. Сohesive Сolors

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

15. Pltts

Готовые цветовые палитры.

16. Color Hunt

Ещё цветовые палитры.

17. ColourLovers

Куча цветовых палитр, разбитых на категории.

Эксперименты от Google: подбор палитры по фото

Google уже давно вышел за рамки простого поисковика. Сейчас это целая корпорация, которая занимает вопросами веб-дизайна, безопасности программирования и ещё десятком-другим проблем и поиска решений для них. Новая фишка от ребят из Силиконовой долины – платформа Experiments with Google. Здесь сторонние разработчики и члены команды предлагают свои необычные, “экспериментальные” идеи на суд сообщества.

Одним из крутейших инструментов для дизайнеров должен стать Art Palette, разработанная Simon Doury и Etienne Ferrier. Art Palette работает как поисковая система, которая находит произведения искусства на основе выбранной цветовой палитры. Используя этот инструмент, вы можете исследовать, как те же самые пять цветов из “Ирисов” Ван Гога могут быть связаны с иранским фолиантом 16-го века или кувшинками Моне.

Как утверждают сами создатели, такой инструмент будет полезен не только ценителям искусства и художникам, но и дизайнерам – веб-дизайнерам или ребятам, занимающимся интерьером.

Как это работает?

Для начала переходим на сайт Art Palette.

Можем выбрать, чтобы система нас удивила – Surprise Me – или предоставим изображение сами. Можно и фото сделать – но я слишком красив для Google-экспериментов �� НА изображении отмечается 5 точек, которые и создадут основу будущей палитры. Меняйте и выставляйте её как хотите.

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

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

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

Разбираем выдачу Google: 16 спецэлементов, которые важно отслеживать

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

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

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

SERP Features / Элементы выдачи

Featured Snippet
Блок с ответами

Local Pack
Результаты карт

Top Stories
Главные новости

Site Links
Ссылки сайта

Carousel Results
Карусель

People also ask
Также спрашивают

Reviews
Рейтинг компании

Top Ads
Реклама вверху страницы

Bottom Ads
Реклама внизу страницы

Knowledge Graph
Сеть знаний

Knowledge Card
Карточка знаний

Shopping Results
Товары по запросу

Featured Snippet / Блок с ответами

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

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

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

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

  1. Вывести страницу в ТОП выдачи, так как именно страницы из первой десятки чаще всего отображаются в блоке с ответами.
  2. Сформулировать простые вопросы, которые относятся к вашему продукту и на которые можно дать структурированный ответ. Например:
    • Как собрать ртуть
    • Что такое цветотип
    • Как работает биткоин
    • Как извлечь сим карту из айфона
    • Что такое контекстная реклама
  3. Оптимизировать контент страницы под этот запрос. Добавьте ключевую фразу в заголовки и помимо расширенного ответа на вопрос, пропишите абзац, который бы содержал сжатый структурированный ответ (54-58 слов для англоязычной выдачи, 40-50 для русскоязычной). Если это вопрос типа “что такое Х”, начните абзац с определения (“Х – это…”), для ответа на вопрос типа “как сделать У” напишите пошаговую инструкцию (“чтобы сделать У, нужно 1,2,3,n”). На запросы, предполагающие такие инструкции, Google выводит в Featured Snippets только заголовки (h2-h4) с перечислением шагов.
  4. Добавить микроразметку Sсhema.org. Schema.org – это семантическая база разметки данных. С её помощью можно обозначить разные элементы контента, что поможет поисковым роботам лучше понять их структуру и предназначение: о каком объекте идет речь (itemscope), к какой категории он относится (itemtype), какие его свойства описываются (itemprop) и так далее.


Local Pack / Результаты карт

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

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

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

  1. Зарегистрируйте аккаунт в Google My Business.
  2. Выберите категорию (лучше ограничиться одной), к которой относится ваша компания.
  3. Напишите содержательное описание вашего бизнеса.
  4. Обязательно добавьте ссылку на ваш сайт.
  5. Убедитесь, что указали правильные данные (телефон, адрес, график работы).
  6. Поработайте над рейтингом – соберите положительные отзывы о вашем продукте/сервисе.

Top Stories / Главные новости

Google News – отдельный канал выдачи, результаты которого могут также отображаться в SERP. Блок с главными новостями может выглядеть по-разному: с горизонтальной разметкой без картинок или в виде карточек с изображениями.

Алгоритм отбора в этом блоке очень требователен, и шансы на появление в нем есть только у новостных ресурсов. Блог e-commerce сайта засветиться там не сможет, а вот онлайн-медиа, публикующее уникальный новостной контент, – вполне.

Если у вас интернет-издание, ведущее новостную сводку – обязательно подайте заявку на включение сайта в Google News. Google сформулировал требование как к контенту, так и к техническим параметрам для сайтов, которые хотят быть представлены в Новостях. Изучить их можно здесь.

В Top Stories можно попасть как по горячим news-запросам типа “Сбой в работе Телеграм” или “Facebook слил данные пользователей”, так и по продуктовым, например, как на скриншотах выше.

Site Links / Ссылки сайта

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

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

Images / Картинки

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

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

Попасть в спецэлемент Images можно только попав в выдачу по изображениям – то есть по всем правилам оптимизации с прописанными alt-тегами, правильным title, нормальным размером и ЧПУ. Чуть раньше мы писали подробный гайд по оптимизации изображений – там всё описано в деталях.

Интересно, что по некоторым запросам Google добавляет изображение в Блок с ответом, причем текст в блоке может быть взят с одного сайта, а картинка – с другого. Например, вот так:

Изображение, появившееся в Featured Snippet, часто занимает первую позицию в поиске по картинкам и тщательно оптимизировано под запрос. По этой же схеме в блоке ответов может появиться видео.

Video / Видео

Спецэлемент Video добавляет к сниппету в результатах выдачи превьюшку (thumbnail) видео. Чаще всего это результаты из YouTube или Vimeo, то есть крупных видеохостингов.

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

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

Carousel Results / Карусель

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

  • самые лучшие фильмы ужасов
  • книги гарри поттер
  • лучшие альбомы 2020
  • лучшие игры android

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

Но для этого нужно а) выйти в ТОП по этому конкретному запросу, б) запрос, по которому вы вышли в десятку, должен принадлежать к классу запросов, по которому эта самая карусель выводится. Например, ключевик “Ретривер” относится к классу запросов “породы собак”, “Энни Холл” – к “лучшие фильмы Вуди Аллена”, “Керри” – “лучшие книги Стивена Кинга” и т.д. В англоязычной выдаче карусель отображается по большему количеству ключевых слов. В русскоязычной по этим же запросам скорее получим ответ в виде Featured Snippet. Но это пока.

Зачем же отслеживать карусель, если она не отображает конкретные сайты? Ваша задача не только мониторить, в какие спецэлементы попадает ваш сайт, а и какие фичи Google выдает по вашим основным запросам. Допустим, вы торгуете курами, и по запросу “породы кур” ваш сайт выходит в ТОП. Если по этому запросу выводится карусель, она может отвлечь пользователей от органических результатов и увести их смотреть выдачу по конкретной породе. Это может значительно повлиять на поисковый трафик по этому запросу, так что отслеживать карусели все же стоит.

People also ask / Также спрашивают

Блок People also ask – аккордеон из результатов блока ответов. То есть попадают туда именно те фрагменты текста и страницы, которые уже есть в Featured Snippets. Расширенный сниппет и ссылка на страницу с ответом на вопрос разворачивается, когда нажимаем на серую стрелку.

В отличие от блока ответов, который появляется в выдаче на нулевой позиции, People also ask может отображаться в любом месте страницы.

Рецепта попадания в блок Google не предлагает. Но поскольку формируется он из расширенных сниппетов, велика вероятность, что если ваша страница попала в Featured Snippet, она отобразится и в People also ask.

Reviews / Рейтинг компании

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

Чтобы ваша страница сопровождалась звездочками в выдаче, нужно добавить на сайт форму оценки, например, в блог. Для WordPress существуют специальные плагины для добавления рейтинга статей, к примеру, WP-PostRatings. Google очень строг к накрутке голосов, так что лучше с этим не экспериментировать. Вот тут можно проверить, как работает разметка с рейтингом.

Рейтинг, отображаемый в результатах карт, формируется по-другому – на основе развернутых отзывов клиентов, имеющих Google аккаунт.

Top Ads / Реклама вверху страницы

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

Спецблок Top Ads может сочетаться с другими элементами выдачи, например с Sitelinks (ссылки сайта) или рейтингом:

Рекламный блок практически сливается с органикой, от которой его отличает только тег “Реклама”. В англоязычной выдаче тег “Ad” выглядит еще неприметнее. Максимальное количество результатов в этом блоке – четыре, плюс столько же может входить в рекламный блок внизу страницы.

Чтобы воспользоваться всеми благами контекстной рекламы, зарегистрируйтесь и начните работу с Google AdWords. Главное – определить запросы, по которым вы хотите рекламироваться: от этого зависит и успешность кампании, и её цена. Если вы не знаете с чего начать, воспользуйтесь нашим инструментом Анализ конкурентов в SEO/PPC. Он позволит посмотреть, по каким ключевым словам ваши конкуренты запустили рекламу и во сколько она им обходится. Это, в свою очередь, поможет решить, по каким запросам стоит начинать кампанию в Google AdWords вам.

Bottom Ads / Реклама внизу страницы

Реклама внизу страницы – такой же рекламный блок, как и Top Ads, но располагается он под органическими результатами. Реклама над выдачей срабатывает лучше – ее кликабельность и видимость выше, чем у Bottom Ads.Тем не менее, оба блока неизменно показываются на первой странице результатов.

Как правило, если на одной SERP есть и верхний, и нижний рекламные блоки, в нижний попадают объявления с меньшей ставкой. Но есть запросы, по которым реклама отображается только внизу страницы. Google объясняет это тем, что существует пороговая ставка для Top Ads — если ваша ставка ниже, объявление появится только внизу. Кроме того, на позицию в платной выдаче влияет рейтинг объявления и его релевантность запросу.

Как добиться показа объявлений над, а не под выдачей, читайте в подробной инструкции от Google.

Twitter

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

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

Knowledge Graph / Сеть знаний

Сеть знаний (или граф знаний) – блок, подающий справочную информацию по предмету запроса. Чаще всего Google подтягивает сюда данные из Википедии, включая некоторую дополнительную информацию, которая может пригодиться пользователю. Например, по запросу “Мартин Иден” получим не только информацию о романе, но и список других романов Джека Лондона. Тоже самое происходит с коммерческими запросами:

Как и в случае с другими спецэлементами, Google не рассказывает, как попасть в Knowledge Graph. Предположительно, есть пара вариантов:

  1. Создать страницу своей компании в Википедии. Если ваш бренд уже приобрел некоторую популярность, и страница соответствует всем требованиям платформы, именно она может появиться в графе знаний.
  2. В блок можно попасть через картинки. Если грамотно оптимизировать картинки под предметный коммерческий запрос, они тоже отобразятся в блоке сеть знаний и по клику приведут аккурат к ссылке на ваш сайт.

Если ваш сайт уже попал в Knowledge Graph, добавьте ссылки на свои страницы в соцсетях, но сначала верифицируйте их.

Knowledge Card / Карточка знаний

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

Напоминает Knowledge Graph, но работает он несколько по-другому. Во-первых, если сеть знаний (Knowledge Graph) подтягивает информацию в основном из Википедии (еще из CIA World Factbook и Freebase), то в карточку знаний попадает информация из специализированных баз данных, например, из Всемирного банка или Совета по высотным зданиям и городской среде. Во-вторых, карточка знаний содержит динамичные элементы. Например, в карточке со скрина можно посмотреть данные на каждой точке графика. Фактически, такой элемент уже содержит исчерпывающую информацию по запросу, и к органическим результатам пользователь может не дойти.

Оставаясь верным провозглашенной установке “Mobile First”, Google поощряет сайты, подготовленные для мобильного пользования. Одним из факторов такой оптимизации является наличие AMP – адаптированной версии HTML, которая позволяет загружать страницы быстрее. Страницы, на которых использован AMP, Google помечает соответствующим значком, который можно увидеть только в результатах мобильной выдачи.

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

Shopping Results / Товары по запросу

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

В каждой карточке указана основная информация, которая постоянно обновляется: фото и название товара, цена, магазин и рейтинг. Летом 2020 года блок стал работать в Украине. В других странах СНГ пока не доступен.

Блок Shopping Results отображает товары по принципу контекстной рекламы – место в нем можно купить. Но чтобы это сделать, нужно иметь аккаунты в Google Adwords и Merchant Center. Если с первым большинство знакомы, то работа с Merchant Center для многих в новинку.

Три шага запуска кампании в Merchant Центре:

В заключение сделаю несколько уточнений:


  • Во-первых, Google использует не только перечисленные элементы. Например, еще есть карты без списков (Map), блок “Вместе с Х часто ищут” (Related Search), дополненный сниппет (Rich Snippet) и другие. И Google точно не собирается на этом останавливаться.
  • Во-вторых, попадание в такие элементы не всегда влечет за собой очевидный профит. Если присутствие в блоке ответов (Featured Snippet) или товарах по запросу (Shopping Results) дает заметный прирост трафика, то наличие отметки AMP может разве что косвенно сказаться на результатах. Оценить же эффект от спецэлементов конкретно для вашего бизнеса можно только держа руку на пульсе выдачи. Регулярно отслеживать SERP features поможет наш инструмент Позиции с его функцией анализа элементов поиска.
  • В-третьих, мы продолжим добавлять спецэлементы для отслеживания. Следующими мы планируем запустить трекинг блоков с погодой, временем, курсом валют, маршрутами, авиабилетами и другими элементами. То есть совсем скоро их станет больше, чем 16, и придется писать вторую часть этой статьи.

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

12 лучших инструментов для работы с цветом

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

1. Color

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

2. Color — Method of Action

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

3. Color Hunt

Отборная коллекция отличных палитр цветов. Обновляется ежедневно.

4. Colorful Gradients

Коллекция градиентов, которые автоматически создаются компьютером 48 раз в день.

5. BrandColors

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

6. Coolors

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

7. Color Hex Color Codes

Color Hex — простой в использовании инструмент, позволяющий получить всю информацию о цвете, включая цветовые модели RGB, HSL, HSV и CMYK, а также CSS и HTML-коды.

8. Material Palette

Генератор цветовых палитр для материального дизайна.

9. Colourcode — find your colour scheme

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

10. Adobe Color CC

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

11. Sip

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

12. COLOURlovers

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

Сервисы подбора цвета для веб-дизайна

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

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

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

Сервисы подбора цвета для веб-дизайна

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

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

Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.

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

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

Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic 🙂

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

На этом сайте необходимо указать ссылку на изображение.

На этот сайт нужно загрузить картинку со своего компьютера.

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

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

Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.

Вот такие инструменты есть у меня в закладках.

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

Нужен сайт с правильными цветами? Пишите, сделаем 🙂

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

Пять бесплатных инструментов для выбора цветовой схемы сайта

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

1. Kuler

Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.

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

Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.

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

В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.

Когда речь идёт об эффективном веб-дизайне, то говорят об интуитивном пользовательском интерфейсе и макетах, однако цветовые схемы имеют такое же большое значение, а то и бóльшее. Перечисленные здесь инструменты должны направить вас в верном направлении, чтобы выбрать отличную цветовую палитру для сайта с первой попытки. В интернете можно найти и другие полезные инструменты, но именно с этих вы можете начать подбор идеального арсенала, который соответствует вашему персональному стилю. Удачи и счастливого дизайна!

Сервисы для подбора идеального цвета сайта

Как управлять вниманием пользователя на сайте? Как подбирать правильные цвета для сайта? С помощью какого приложения узнать код цвета на сайте конкурента? Разбираем сегодня в статье.

  • color-hex.com — определит какие цвета стоят рядом с вашим цветом
  • thestocks.im — агрегатор мокапов, видео, фотографий, иконок, шрифтов.
  • Eye Dropper — расширение для Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
  • Adobe Color CC-подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
  • Colorzilla -расширение для Google Chrome и Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.

Загрузите картинку и сделайте из нее палетку.

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

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

  • Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
  • Белый. Простой, спокойный и чистый.
  • Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
  • Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
  • Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
  • Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
  • Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
  • Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
  • Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.

Черный

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

Белый

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

Красный

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

Оранжевый

Это энергичный и теплый цвет, вызывающий чувство волнения. Дизайнеры используют цвет, если им нужно мотивировать на действие.

Желтый

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

Зеленый

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

Синий

Цвет доверия. Он обычно показывает надежность, успокаивает.

Пурпурный

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

Розовый

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

Коричневый

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

Исследование проводилось в Северной Америке.

Бесплатный генератор сниппетов стал ещё полезнее и ещё «живее»

Средняя длина сниппетов в выдаче постоянно меняется. В декабре 2020 Google увеличил число отображаемых знаков примерно до 300, но уже в мае 2020 снова сократил значение до 160. Актуальная длина для Яндекса — 170 символов. Тег Title — 66 символов для Google и 52 для Яндекса.

Теперь в нашем бесплатном инструменте можно контролировать длину заголовка и описания отдельно для Яндекса и Google, а сам сниппет выглядит как «живой» пример из выдачи:

Выберите поисковую систему.

Заполните поля Title, Description, главное зеркало и «хлебные крошки».

Посмотрите, как будет выглядеть сниппет в выбранной ПС, с учётом средней длины и «обрезки».

Сгенерируйте готовый HTML-код для своего сайта.

Нарастите ваш CTR и улучшите кликовые ПФ!

К счастью, у нас есть статистика и возможность анализировать выдачу, чтобы рекомендовать длину. Для анализа конкурентов используйте инструмент парсинга сниппетов из Яндекса и Google. Также важно помнить, что формирование сниппетов необязательно зависит от тега Description и остаётся вариативным.

При этом Google отказывается давать прозрачное руководство для вебмастеров. Напомним об интересной дискуссии в Твиттере Дэнни Салливана, евангелиста поиска Google, в которой Джуст де Вальк (основатель Yoast SEO) и Рэнд Фишкин (основатель MOZ) пытаются добиться точных рекомендаций для SEO-специалистов. Салливан сообщает, что любые конкретные советы будут вырваны из контекста, переоценены и окажутся бесполезными:

Тем не менее, кое-что можно сказать точно и сохраняет актуальность также и для Яндекса:

Длина сниппетов может меняться и отличаться в зависимости от устройств (мобильные / десктоп).

Описание сниппета формируется не только из тега Description, но может подтягиваться из контента страницы.

Уделять внимание нужно содержанию и качеству описания, так как наблюдается прямое влияние на CTR.

Уделяйте внимание привлекательности, пользуйтесь микроразметкой и генерируйте сниппеты быстро!

Топ-пост этого месяца:  Урок 9. Препроцессор Sass. Функции
Добавить комментарий