Создание сайтов под SEO-задачи и основные принципы дизайна

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

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

То есть как делать анализ проекта, что касается именно дизайна под SEO. Какие приёмы композиции используются в веб-дизайне, какой инструментарий мы будем использовать, и немного поговорим о том, в чём же разница между дизайном Запада и Востока, чтобы люди понимали принципы и разницу между заказчиками. Вот это больше в эту сторону.

Давайте начнём с анализа. Вообще сделать анализ дизайна либо проекта можно под те же самые инструменты, которые мы используем для SEO. То есть в этих инструментах можно найти нужную структуру. Например, количество текстовых блоков, заголовков, основной части продукта. Всё это визуально распределить по странице, можно даже в блокноте условно выписать. Допустим, у нас на странице 5 заголовков, разделы и так далее. Это уже похоже на сетку.

Что такое сетка, я скажу дальше. Задача — найти 10 конкурентов из ниши и просто посмотреть их сайты, как они выглядят. Как правило, в России они выглядят плюс-минус одинаково: это колоночная система, карточки, текстовые блоки, выстроенные определённым образом. Если сделать три сайта на основе анализа, то уже можно понять принцип, как это всё работает и как это проще будет выстраивать далее.

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

Далее виды сеток. Ну вот самые простые, да, это колоночная сетка, модульная и иерархическая. Чаще всего для всего сайта используют именно колоночную сетку. Как правило, это экран шириной 1214 пикселей, разбитый на колонки. Если вы откроете YouTube на компьютере, то вы увидите шорцы — это такие колонки. Примерно то же самое в сайтах, чтобы было понятно, как сводится визуал. Как правило, сетка состоит либо из 10, либо из 12 колонок, и этого достаточно.

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

Вот пример: сетка из колонок, где есть H2 и карточки услуг или товаров. Также по левой части может располагаться фильтр категорий. Такие сетки наиболее хорошо подходят под SEO. Если вы посмотрите по анализу вашей ниши, то увидите, что сайты устроены примерно так. Эти сайты точно работают, и вы можете просто брать их за основу и применять при создании коммерческого предложения для клиента либо для чернового макета.

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

Самая базовая история — это пропорции и ритм. Доступно и понятно любому человеку, как это работает. У нас задача — построить какую-то композицию. Задача — развить бизнес клиента либо через другие каналы. Поэтому достаточно использовать базовые принципы композиции.

Такой инструмент, как Elementor, достаточно гибкий. Он даже на стоковой версии позволяет работать с большим объёмом информации и большими возможностями. Как минимум, это вёрстка текстов и функционал композиций, который у вас будет закрыт. Использование его достаточно простое. Если потренироваться, можно развить хороший скилл.

Elementor позволяет дизайнерам и разработчикам создавать адаптивные профессиональные сайты для их продвижения. Чуть позже я покажу несколько принципов работы в Elementor, которые вы сможете потом повторить в своих проектах. Если у вас, допустим, задача просто протестировать гипотезу, вы можете смело использовать темплейты или библиотеки. Я не говорю, что нужно брать темплейт целиком и просто переписывать текст. Мы можем, например, взять два-три темплейта, даже со штатной темы WordPress или с плагина, найти эти темы, а затем создать отдельную страницу и копировать разные блоки из разных тем и их комбинировать. Получается достаточно интересный вариант. Это может быть хорошим решением, если нужно быстрое решение по дизайну. Мы тоже часто применяли такую технологию, и, собственно говоря, всё прекрасно работает и ускоряет процесс.

Что у нас есть в Elementor? У нас есть библиотека готовых шаблонов — это находится в темах. У нас уже есть адаптивный дизайн, то есть мы можем не заморачиваться под мобильные версии и планшеты, потому что, как правило, в код уже вшиты все брейкпоинты. Есть возможность работать с визуальным редактором, гибкий стиль настроек в темах и простота использования. Если есть запрос под проект, то команда из одного-двух человек вполне может справиться с задачами.

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

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

Elementor, вернее, это вообще класс. Там есть ThemeForest и всякие другие площадки, я там много лет покупаю.

Перед нами рабочая область страницы. Допустим, мы хотим сделать какой-то заголовок, подзаголовок, какой-то визуал. Мы просто открываем стандартную сетку, обычную сетку, и здесь уже видим варианты. Это могут быть две колонки или 10 колонок. Обычно можем взять самый классический вариант — это две колонки. Здесь просто выставляем размеры контейнеров. Накидываем, допустим, заголовок, дублируем его, и вот у нас будет какая-то иерархия.

Далее делаем какой-то текст, допустим, H5. Здесь всё это дублируем картинкой. Достаточно просто всё делается, даже можно использовать изображения из библиотек или с жёсткого диска. Ничего сложного в этом нет, главное понять основной принцип, как всё это может работать. Elementor позволяет дублировать блоки, и мы можем уже менять контент. Я могу удалить всё, и дальше может пойти аккордеон или список частых вопросов или кнопка.

Допустим, я хочу здесь вставить аккордеон. Прямо в поиске ищу “аккордеон”, он появляется, и я вставляю его. Здесь вношу контент. Дальше могу поставить картинку. Такой принцип: постоянно дублируем текстовую часть с каким-то визуалом. Также можно менять эту историю местами, как в виде презентации. Я могу менять текстовые блоки между собой, и получается ровный ритм. Здесь основной контент, дальше дублируется картинка, потом картинка, контент — так можно двигаться до самого низа сайта и заполнять страницу.

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

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

– Какое отношение к статическим сайтам, когда движки генерируют статику или вообще создаются статические страницы?

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

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

– Как быть с фактом, что некоторые крупные сайты с огромным трафиком работают на WordPress? Погугли, и удивишься, что определённые новостные порталы работают на WordPress. Конечно, во многих случаях WordPress изменён до неузнаваемости, но они по каким-то причинам не уходят на другие движки. Они могут заказать любой движок и что угодно, а вот почему так?

Ну, я думаю, что это всё началось, когда WordPress ещё начинал набирать обороты. Сейчас, конечно, они вставляют собственный код, работают с PHP, и, я думаю, там WordPress используется как оболочка, а всё остальное кастомное. Эти компании просто начинали очень давно и решили постоянно дорабатывать WordPress.

Возможно, это зависит от привычки. За последние 5 лет появилось много инструментов, и в целом всё зависит от команды. Причина не в том, что директору просто нравится WordPress, а скорее в привычке и удобстве. WordPress нравится всем, потому что он на слуху и хороший рабочий инструмент. Я тоже не против WordPress, если он работает. По функциям, по пожеланиям, по ТЗ он закрывает всё. Поэтому даже заказчикам, которые хотят, допустим, переехать на что-то более серьёзное, всегда советуем WordPress. Потому что это не так долго по бюджету, как кастомная разработка, и уже не так по школьному, как, например, Тильда. Пока это The Best движок.

– Наверняка встречали такие мнения, когда крутые разработчики, профи, у них волосы дыбом от WordPress. Они говорят: “Да это вообще кошмар, как там можно работать”. Они или пилят свои движки, или что-то другое, но не WordPress. А мне вот, как обычному пользователю, даже не в сфере SEO, WordPress всем рекомендую. Классная штука.

Да, классная штука. Но опять же, с позиции разработчиков задача просто сделать функциональную часть, “просто руками”, как правило. Они не думают про маркетинг, продвижение, удобство. Они просто общаются на свои профессиональные темы, и для них WordPress — это движок сайтов для домохозяек. Я бы сказал — прекрасно, вообще. Нормальное определение, но не для профи.

Есть, допустим, заказчики из Америки, которые говорят: “Нас устраивает WordPress, вы можете сделать нам на нём?” Без проблем, потому что задача решается. Я считаю, что если движок решает задачи, то его нужно использовать, а не из-за крутизны.

– В чём отличие веб-дизайна в рунете и на Западе — в Европе, США, Канаде?

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

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

Восточная часть — Россия, СНГ, Европа — это более смелые, креативные решения и чуть меньше информации. Но нужно быть очень аккуратным, потому что наша задача — решить проблемы пользователя, особенно если это трафик. Поэтому нужно иметь баланс между красотой и функциональностью, полезностью. Анализировать сайты конкурентов, как минимум, и на основе этого уже иметь большой объём данных для работы, чтобы создать что-то полезное и интересное.

– Как определить, подойдёт ли шаблон WordPress для твоего сайта или проекта? Ну, они же все, знаешь, однотипные: и блог, и интернет-магазины. Всё. Как понять, подойдёт он или нет? Бывает тяжёлый какой-то или корявый.

Да, так скажу: мы находим два-три сайта конкурентов примерно, делаем с них скриншоты экранов, ставим перед собой, открываем параллельно те темы WordPress, которые доступны. Смотрим визуально на структуру, которую предлагает WordPress, и находим похожую историю. Сохраняем её в админпанель. Далее каждый сохранённый элемент мы открываем и тестируем: работает ли он у нас с нашей версией PHP, не вылетает ли, не лагает ли. Работают ли все плагины? Из этой подборки мы найдём 100% какую-то рабочую тему. Тем более что мы можем кастомизировать тему: брать блоки, копировать их, разбирать и соединять по-другому, перемешивать. Не все темы работают, надо искать, тестировать и смотреть. Как правило, из десяти тем семь — рабочие.

– А как на том же Envato или других маркетплейсах шаблонов потестить? Ты же должен купить сначала, потом уже всё смотреть. Или так, визуально на глаз?

Ну, если брать Envato, то там не очень дорого. Там вообще безлимит стоит за 20 долларов, можно купить доступ ко всем шаблонам. На какое-то время, да, на месяц, по-моему. А если без покупки, то на Envato вы не определите работоспособность, потому что её нужно скачать и залить себе. Если без покупки, то только визуально определяем. Если с покупкой, то скачиваем и заливаем её в нашу админку на WordPress и смотрим, как она работает. Также ставим плагин Demo Import, который позволяет импортировать демо-данные с версии. Сейчас выведу на экран, чтобы было понятно. Так, Demo Import, вот так, да. Он позволяет импортировать демо-данные темы в том виде, в каком мы её видели визуально. Уже с этим работаем: можем менять картинки, тексты и остальное. Есть полноценный сайт со страницами, каждую страницу можно редактировать под услуги, под сервисы и так далее.

– Как проверить шаблон на уникальность? Например, вы где-то заказываете шаблон у компании или фрилансера, а он мог взять его с того же Envato, цвета там поменял, какие-то картинки вставил, шрифт поменял — и вам продаёт. А это, ну, уникальности не даёт же, на самом деле.

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

А на уникальность, в принципе, если это шаблон, то тяжело проверить. Вот, потому что непонятно. Я думаю, что фрилансер скажет о том, что он будет темку менять, либо скажет, что будет рисовать потом.

– Почему многие считают, что Elementor — зло?

Ну, вот технари, например. Много лишнего кода добавляет, бывает притормаживает. Но, опять же, важно понимать, что, подходя к разработке, мы должны понимать, какой у нас будет объём сайта, что это вообще будет. Если это магазин, само собой, нужно искать более быстрые решения для скорости и всего прочего. Если это более простые сайты, типа сайтов услуг, бытовые, то просто ищем менее нагруженный шаблон. Убираем лишний код.

Что касается формы обратной связи — тоже есть несколько форм, есть Contact Form 7, достаточно быстрый груз. То есть пока не возникало проблем. Чистим шаблон от всего лишнего — скрипты, какие-то эффекты. Я знаю, что это есть. Да, это есть, но опять же, мы должны отталкиваться от задачи, которая перед нами стоит, и от объёма проекта, который у нас есть.

Большое спасибо, до новых встреч!