Мало сделать сайт и опубликовать его в сети. Сайт, как и живой организм, требует постоянной заботы о себе: его нужно наполнять новым контентом, чтобы пользователи не теряли интерес к ресурсу и могли найти интересующую их информацию. Важно, чтоб информация на сайте была актуальна, доступно изложена и выдержана в общей стилистике сайта. В рамках субподряда мы занимаемся контекстным наполнением сайта клиники. Маркетинговые стратегии и тексты предоставляет клиент.
В наши обязанности входило внесение информации на сайт и визуальное сопровождение контента: подбор имиджей, фотомонтаж и вёрстка текста.
В преддверии Нового года клиника решила провести широкую акционную программу. Нам нужно было сделать баннеры для слайдера на главной странице, оформить страницы акций и не забывать о плиточной выдаче на общей странице акций.
Баннеры для слайдера на главной странице сайта
Главная страница. Слайдер. На слайдере расположена полупрозрачная плашка с текстовой информацией и ссылкой перехода на страницу акции, новости или продвигаемой услуги.
Как видно на скриншотах, баннеры значительно вытянуты по горизонтали, поэтому помимо поиска рекламного образа, возникла задача создать фон, гармоничный как для этого образа, так и для сайта. Фон должен быть не перегруженным, приглушённых тонов и учитывать наличие полупрозрачной плашки слева, текст на которой должен быть читабельным. Также в большинстве баннеров фон передаёт новогоднее настроение.
Общая страница акций
Общая страница акций. Плитка из обложек страниц акций и их короткого описания.
В блоки имиджей плитки автоматически подгружаются обложки страниц отдельных акций.
Страница отдельной акции
Страница акции. Обложка страницы затемнена, на ней размещены интерактивные кнопки и текст.
Блок обложки страницы отличается пропорциями от блока слайдера на главной и имеет затемняющий слой для того, чтоб создать контраст с белым шрифтом надписи, выводящей краткие условия акции. Так же на обложке присутствуют две кнопки, наличие которых необходимо учитывать. В связи с этим расположение и соотношение фона и рекламных образов на имиджах изменено в сравнении с имиджами баннеров слайдера на главной.
Текст разбит на короткие и удобочитаемые блоки. Важная информация выделена размером и цветом.
Фотосессия. Разработка сайта. Копирайтинг. SEO-оптимизация.
Система управления сайтом — WordPress
Задача: разработка имиджевого одностраничника для продвижения услуг аромапсихолога и привлечения новых клиентов. Составление семантического ядра. Написание seo-ориентированных текстов.
Фотосессия
На стадии обсуждения проекта заказчица выразила желание устроить фотосессию. И это правильно: ничто не ценится сегодня выше, чем оригинальный контент. Мы с радостью согласились. Вместе с фотографом Александром Захарченко (его инстаграм: @fotofreeze) мы выбрали студию, согласовали время и провели фотосъёмку как самой Ольги, так и эфирных масел, с которыми она работает. Эти фотографии стали основой визуального наполнения сайта и осталось ещё много незадействованных для ведения Ольгиного инстаграм и тд.
Бэкстейдж фотосессии, снятый на мобильный телефон
Разработка сайта
Сайт не предполагает наличия сложных структур и функционала, поэтому для него мы выбрали систему управления WordPress как наиболее интуитивно понятную в наполнении и администрировании (наше субъективное мнение).
Для оформления сайта мы использовали фотографии Ольгиной фотосессии. Сайт выполнен в минималистичном стиле. За исключением полноэкранных имиджей с эффектом параллакса, которые являются обложками разделов, все остальные имиджи имеют скруглённые углы, что придаёт сайту мягкий, текучий, «женский» характер. Это обусловлено спецификой профессиональной деятельности Ольги: её основной клиент — женщины.
На загрузочном скрине сайта размещён заголовок первого уровня с указанием профессиональной принадлежности Ольги и локации её деятельности. Под заголовком находятся кнопки WhatsApp, Telegram и Instagram для быстрого и удобного перехода к общению с Ольгой.
Скриншоты сайта на десктопе
Срины сайта сверху вниз последовательно
Каждый блок снабжён призывающими к действию элементами — кнопками, которые по клику вызывают формы обратной связи во всплывающих окнах. Каждая услуга имеет свою форму, что упрощает обратную связь с клиентом. Ольга всегда знает, за какой именно услугой обращается клиент. Внизу сайта есть общая форма вопросов для клиентов, которые ещё не определились с выбором услуги.
После отправки данных через форму на почту Ольге приходит письмо с данными посетителя сайта и заявкой, оставленные им в форме, а самому отправителю — письмо с подтверждением того, что его сообщение доставлено. На основе полученных данных аромапсихолог сможет составить базу данных потенциальных клиентов и проводить с ними маркетинговую работу. На сайте установлена невидимая капча от Гугл — надёжный защитник от спама, не требующий от пользователя никаких действий.
Скрины сайта на планшете
На планшете происходит перестроение блоков, расположенных в три столбца на блоки в два столбца или в один столбец.
Скрины сайта на смартфоне
На мобильном удобство чтения достигается перестроением всей информации в один столбец.
Копирайтинг
От клиента мы получили фактологические наброски текста. Исходя из них, проверив частотность запросов по необходимым ключевикам, мы составили заголовки и тексты разделов. На одностраничном сайте информация сгруппирована по блокам. В тексте важно соблюсти не только информативность, стилистику речи, но и объём: в родственных блоках он должен быть равновесным.
Seo- оптимизация
WordPress, как и большинство других систем управления сайтом, создаёт дубли страниц, что понижает сайт в поисковых выдачах. Мы сделали 301 редирект наиболее характерным для WP дублям.
На сайт установили модуль Yoast SEO. Сгенерировали sitemap и robots.txt. Прописали для страниц, составляющих разделы одностраничника, description и title.
C лепной мастерской Артлепка нас связывает давнее, плодотворное и взаимовыгодное сотрудничество. О разработке актуальной версии сайта можете прочесть здесь. В работе мы концентрировались на максимально отчётливом представлении каталога продукции мастерской: изделий из гипса. Суть же гипсовой лепнины в формировании стиля интерьера. Отдельно взятые карнизы, колонны, розетки и тд. не дают полного представления о том, как они изменяют пространство помещения, или фасад здания.
Чтобы закрыть этот пробел, был добавлен раздел Портфолио, содержащий фотогалереи гипсового декора производства Артлепка в интерьерах. В виду того, что покупателей интересует конкретный тип изделий, фотогалереи были сформированы не по объектам недвижимости, а по категориям изделий.
Кастомизация стилей дефолтной фотогалереи
Стандартная ситуация: устанавливаем необходимый модуль на сайт, а его оболочка в интерфейсе сайта выглядит как на корове седло. К тому же, владелец ресурса не хочет отображения некоторых функций и блоков из дефолтных настроек. Выясняем пожелания и приступаем к правке шаблонов, стилей, скриптов.
1 слайд — страница всех фотогалерей до правки, 2 слайд — страница всех фотогалерей после правки, 3 слайд — лайтбокс до правки, 4 слайд — лайтбокс после правки, 5 слайд — страница выбранной галереи до правки, 6 слайд — страница выбранной галереи после правки.
Раздел Статьи
За многолетнюю практику проектирования, изготовления и монтажа гипсового декора, специалисты лепной мастерской приобрели бесценные опыт и знания, стали настоящими экспертами своего дела. Раздел Статьи содержит справочные материалы по профилю деятельности компании, ответы на наиболее часто задаваемые заказчиками вопросы. Экспертность позволяет создать привлекательный образ в глазах потенциальных заказчиков. К тому же, статьи содержат заголовки, дескрипшены и ключевики, которые хорошо подхватываются поисковиками и помогают поднимать сайт в топ без лишних вложений средств в рекламные кампании.
Установка ssl-сертификата
Ssl-сертификат — это цифровая подпись сайта. Он нужен для защиты транзакций и предотвращения несанкционированного доступа к информации. Наличие ssl-сертификата повышает доверие к сайту как со стороны поисковиков, так и со стороны пользователей. При установке ssl-сертификата, адрес сайта меняется с http:// на https://, а для поисковиков это два разных адреса, два разных сайта. Сайт http://artlepka.ru — большой и хорошо ранжировался по многим поисковым запросам и в Гугле и в Яндексе, поэтому установка ssl-сертификата повлекла за собой ряд мероприятий: для предупреждения ошибки 404 (Страница не найдена) и проседания в поисковых выдачах нами были настроены редиректы. Для мониторинга страниц в Вебмастере Яндекса мы заменили главное зеркало сайта и совершили переезд сайта.
Задача: сделать сайт для сбора средств на производство мультипликационного фильма. Сайт должен быть удобным для внесения финансовой помощи дарителями и информировать их о мультфильме, содержать блог, рассказывающий об этапах производства. Двуязычность.
Задумываться об обложках к страницам не пришлось: для этого использованы иллюстрации с персонажами и локациями мультфильма.
Для реализации двуязычности, которая одинаково работала бы и с контентом сайта и с функциями WooCommerce, нами был выбран бесплатный модуль машинного перевода GTranslate от Google.
Главная страница сайта
На главной странице сайта собрана вся информация о снимающемся мультфильме. В первом блоке расположено видео обращения к публике режиссёра и сценариста мультфильма Оксаны Водопьяновой.
Ниже идут блоки о Цели проекта и Истории проекта. Каждый блок снабжён кнопкой перехода на страницу выбора формата поддержки проекта. Блок, знакомящий с командой, работающей над мультфильмом, проиллюстрирован отрисованными аватарками ключевых участников проекта.
Завершает главную страницу выдача свежих записей блога.
Футер содержит контактную информацию, блок ссылок на соцсети Ымки, логотип и название генерального спонсора проекта.
Страница сбора средств
Витрина призов
Ымка предлагает различные форматы финансового участия в проекте. Все виды участия, кроме безвозмездного, предполагают получение приза за помощь: это может быть скачиваемый файл на выбор, эвент или допуск к рабочим материалам и процессам производства мультфильма. Для реализации таких возможностей нами был выбран плагин для WopdPress WooCommerce. Плагин с открытым исходным кодом, он лёгок в установке и настройке, корректно работает, к тому же, имеет много расширений, позволяющих кастомизировать взаимодействие с пользователями сайта.
Мы дополнили WooCommerce плагинами:
WooCommerce Customizer — для переименования элементов магазина (заголовков, кнопок и тп.)
Checkout Field Editor for WooCommerce — для изменения полей в форме оформления заказа с целью максимально облегчить оформление доната. Были убраны поля адреса доставки, номера телефона и тп.
Яндекс.Касса 2.0 для Woocommerce — платёжный модуль.
Произвести взнос можно прямо со страницы витрины призов, не заходя на страницу выбранного приза. Достаточно кликнуть на кнопку Выбрать.
Страница выбранного приза
На странице подробно рассказывается о призе и способе его получения. если приз — графическая работа, можно рассмотреть её детальней: фотография снабжена функцией увеличения.
Для спонсоров, выбравших скачиваемый приз, мы разместили короткую наглядную инструкцию по скачиванию файла со скринами страниц ЯндексКассы и нашего сайта. Элементы взаимодействия выделены красным. Не ошибёшься.
Первый слайд: акцентирована цветом кнопка, ведущая на пошаговую инструкцию по скачиванию файла. Второй слайд — инструкция.
Этапы оформления финансовой помощи
Основной целью для нас было облегчить этап перевода денег для спонсора. Мы вычистили все поля, оставив только самые необходимые. Спонсору нужно будет только написать своё имя и email, выбрать форму оплаты и уже на странице ЯндекКассы совершить платёж. В случае выбора скачиваемого приза, спонсору нужно будет со страницы ЯндексКассы по кнопке вернуться на сайт Ымки и кликнуть на ссылку скачивания
Блог
Поисковики любят сайты, на которых постоянно появляются новые материалы. С этой целью и для того, чтоб вызвать и поддерживать интерес к мультфильму, на сайте есть блог, в котором публикуются некоторые рабочие материалы производства мультфильма, новости проекта, материалы о культуре и истории нивхов.
Задача: сайт с проблемной адаптацией и плохо структурированной информацией сделать удобным для всех пользователей, независимо от того, какое устройство используется для просмотра сайта, упростить доступ к товарам каталога. Предваряя вопросы клиентов, в карточке товара наглядно показать особенности данной конструкции и варианты её комплектации. Написание СЕО-текстов.
Меню
Главным в электронном каталоге является доступность информации об искомом товаре. В предыдущей версии сайта меню каталога располагалось в левом сайдбаре и при прокрутке страницы уходило за пределы видимости просмотра. В футере меню отсутствовало.
Мы разместили меню каталога в хедер на горизонтальном блоке, который при прокрутке фиксируется вверху окна браузера, что позволяет пользоваться меню на любой странице в любом её положении. Меню адаптивно. На мобильном устройстве меню прокручивается, открывая доступ ко всем своим пунктам.
Меню продублировано и в футере сайта в развёрнутом виде.
Меню до редизайна и после на десктоповом экране
1 слайд — старая версия меню, 2 слайд — горизонтальный блок на главной странице после загрузки страницы, 3 слайд — тот же блок после прокрутки страницы, 4 слайд — открывшееся меню, 5 слайд — футер до редизайна, 6 слайд — футер после редизайна.
Все элементы фиксирующегося блока являются функциональными: логотип — переход на главную страницу, емайл компании — переход на форму обратной связи, телефон компании — функция звонка с мобильного устройства и гамбургер — меню каталога и информационных страниц.
Верхний горизонтальный блок на планшете в горизонтальной ориентации
Главная страница и страницы категорий
Главная страница структурно не изменилась, была перевёрстана, согласно новому дизайну.
Главная страница до редизайна и после на десктоповом экране
1 слайд — старая версия главной страницы, 2 слайд — новая версия главной страницы до прокрутки, 3 слайд — новая версия главной страницы после прокрутки, 4 слайд — блок преимущества, 5 слайд — форма обратной связи на главной, 6 слайд — Яндекс карта на главной.
На страницах категорий верхняя галерея фотографий, в виде плитки, была перенесена вниз страницы и представлена в виде слайдера, так как на мобильной версии фотографии выстраивались в длинную цепочку, сдвигая вниз выбор подкатегорий. Не факт, что каждый пользователь проматывал до них.
В новой версии сайта страница категории начинается с блоков подкатегорий. Сео-текст изобилует кнопками, ведущими на товары категории. Если пользователь не хочет читать текст, он может сразу ознакомиться с ассортиментом конструкций.
Страница категории до редизайна и после на десктоповом экране
1 слайд — верх страницы каталога до редизайна, 2 слайд — блоки подкатегорий в старой версии сайта, 3 слайд — таблица цен , текстовый блок и блоки анонсов изделий, 4 слайд — верх страницы категории после редизайна, в нём сразу расположены блоки подкатегорий, 5 слайд — список, текстовый блок, кнопка перехода в блок анонсов изделий и таблица цен в новой версии сайта, 6 слайд — блок анонсов изделий, 7 слайд — слайдер с фотографиями выполненных конструкций раздела каталога.
Страница изделия
Самые большие изменения претерпела страница изделия. До редизайна информация о товаре была представлена скупо. У клиента неизбежно оставалось много вопросов по комплектации и особенностям конструкции. В новом дизайне были добавлены поля для предваряющих ответов на подобные вопросы.
До редизайна максимальный размер фотографии изделия был в блоке слева от описания товара. Детально рассмотреть нюансы конструкции было невозможно. Теперь и сама фотография изделия изначально грузится в бОльшем размере, а так же присутствует функция ей увеличения.
Самой большой ошибкой в дизайне старой версии страницы изделия было отсутствие призывающей к действию кнопки заказа. Мы исправили ситуацию: под блоком с миниатюрами фотографий изделия, мы разместили две кнопки: Вызов замерщика и Заказать. Тариф Битрикса, на котором выстроен сайт не предполагает функции магазина, то-есть покупки конкретной товарной позиции, поэтому форма заказа сквозная для всего сайта.
Страница изделия до редизайна и после на десктоповом экране
1 слайд — страница изделия до редизайна,2 слайд — после редизайна, 3 слайд — лайтбокс с увеличенным фото и заголовком имиджа, 4 слайд — блок, наглядно знакомящий с вариантами стекла для изделия, 5 слайд — блок, наглядно демонстрирующий особенности конструкции, 6 слайд — блок ассортимента цвета и фактуры фурнитуры, 7 слайд — форма заказа.
Проблемы адаптации сайта
В завершении краткого обзора выполненных работ, выкладываем скрины проблемных блоков сайта с IPada до редизайна. Если на вашем сайте наблюдаются похожие проблемы, пишите, звоните, задавайте вопросы. Мы открыты к сотрудничеству.
До редизайна и перевёрстки. Скрины с IPada
1 слайд — главная страница, 2 слайд — блок преимущества на главной, 3 слайд — страница каталога до прокрутки, 1 слайд — после прокрутки.
После редизайна и перевёрстки. Скрины с IPada
1 слайд — главная страница, 2 слайд — открытое меню, 3 слайд — блок преимущества на главной, 4 слайд — Яндекс карта на главной, 5 слайд — страниц категории верх, 6 слайд — таблица цен с горизонтальной прокруткой (левая часть), 7 слайд — таблица цен — правая часть, 8 слайд — анонсы изделий, 9 слайд — слайдер выполненных работ, 10 слайд — страница изделия верх, 11 слайд — лайтбокс с увеличенным фото на странице изделия, 12 слайд — основное описание изделия, 13 слайд — дополнительное описание.
Задача: несколько шаблонов вывода товара — пользователю должно быть удобно детально рассматривать лепнину разного типа: вертикальные колонны, горизонтальные карнизы и близкие к квадрату панели из гипса. Фильтрация и сортировка изделий по выбранным параметрам. Текстовые блоки в категориях товара для СЕО продвижения. Водяной знак на фотографиях. Функция минимального заказа. Отложенный платёж, так как цена зависит от многих факторов, требующих дополнительных расчётов: возможны индивидуальные размеры изделия, монтаж, особенности помещения, в котором будет монтироваться лепнина и тп. Упрощена форма оформление заказа.
Главная страница
На главной странице представлен рубрикатор категорий каталога лепнины, проиллюстрированный фотографиями. Это помогает пользователю быстро найти в большом ассортименте магазина нужную категорию изделий.
Под блоками с категориями товара расположены текстовые блоки — часть семантического ядра сайта. На сайте дано много полезной справочной информации о лепнине, о выборе материала и стилистики, о подготовительных ремонтных работах и монтаже и тп. Таким же образом структурированы страницы основных категорий изделий.
Шаблоны категорий изделий
Шаблон назначается в административной панели сайта при создании нового товара. Нужно просто выбрать необходимый шаблон из выпадающего списка шаблонов. Для упрощения навигации по категориям и подкатегориям товара, под шапкой сайта расположены хлебные крошки.
Шаблон для изделий, габариты которых близки к квадрату
Шаблон для изделий, размеры которых по горизонтали значительно превышают вертикальные размеры.
Шаблон для изделий, размеры которых по вертикали значительно превышают горизонтальные размеры.
Под хлебными крошками расположены фильтрация и сортировка товарных позиций по выбранным пользователям параметрам, что ускоряет поиск нужного изделия.
Всплывающее окно с увеличенной фотографией изделия.
Шаблоны карточек товара
Шаблон для изделий, габариты которых близки к квадрату
Шаблон для изделий, размеры которых по горизонтали значительно превышают вертикальные размеры.
Шаблон для изделий, размеры которых по вертикали значительно превышают горизонтальные размеры.
Cтруктура карточки товара
Основная информация о товаре — фотография, размеры, цена, минимальный заказ, чертёж профиля изделия и фотогалерея схожих изделий в интерьере (пока мало где заведено: сайт находится на этапе наполнения) — представлена в открытом виде. Дополнительные описания — чтоб не отвлекать внимание посетителя на второстепенную информацию — в закрытых вкладках аккордеона.
Для просмотра внутренних вкладок аккордеона, наведите мышкой на скрин экрана.
Пока покупатель не доведёт количество заказа до минимального, указанного в карточке, кнопка покупки будет неактивной. В дальнейшем, на этапе оформления заказа, покупатель не может снизить количество ниже минимального. Таким образом, соблюдается рентабельность работ для производителя. Обратите внимание, на скриншоте внизу, кнопка Купить неактивна, так как метраж карниза меньше минимального заказа.
Под большой фотографией товара находится галерея-карусель с фотографиями аналогичных изделий в интерьере. При клике на миниатюру карусели, во всплывающем окне открывается большая фотография, в этом режиме можно не только перелистывать фотографии галереи, но и выбрать режим просмотра.
Внизу страницы расположен блок с похожими товарами.
Текстовые страницы сайта
Для удобства чтения, текст разбит на вертикальные столбцы.
Первая версия сайта исчерпала свой маркетинговый потенциал. Выяснилось, что заказчик приходит в поисках конкретного вида съёмок, у него нет времени смотреть большое количество не связанных с его интересом фотографий. Было решено сделать на главной странице рубрикатор: плитку из фотографий, иллюстрирующих категорию съёмок с текстовыми ссылками на вложенные подкатегории.
При наведении курсора на название подкатегории, меняется фоновое изображение блока и подсвечивается ссылка.
Для конкретизации тематики просмотра фотографий была изменена структура сайта: в меню появился второй уровень вложения. Теперь посетитель может ознакомиться только с интересующей его тематикой фотосъёмки и сэкономить время.
Форма обратной связи находилась в самом низу главной страницы. До неё нужно было скроллить. Мы решили упростить доступ к форме и создали кнопку её вызова вверху главной страницы и страниц двух основных категорий: Портфолио и Творчество. Сама форма располагается во всплывающем окне.
На странице “О себе” Лиза решила избавиться от лирических отступлений и дала наиболее важную информацию кратко: кто она, где она, на что снимает, кто её клиенты и свои контактные данные.
В слайдерах конечных подкатегрий был убран общий текст и оставлены только название подкатегории и подпись к фотографии.
Задача: максимально упростить клиенту заказ душевой кабины, ответив на самые распространённые вопросы по пунктам кратко и наглядно. Структура сайта служит решению этой задачи: достаточно просто проскроллить страницу.
Блок с конструкциями имеет функцию заказа изделия. Менеджеру компании приходит оповещение о заказе выбранной конструкции с пояснениями и чертежами (при наличии таких). Пользователю — оповещение о том, что заказ принят.
Пользователю предоставлены разные способы взаимодействия с компанией: форма обратной связи, чат и заказ обратного звонка.
Блок с фурнитурой решён компактно: каждая из ценовой категорий находится во вкладке, внутри которой расположены описание особенности категории и карусели с фотографиями образцов фурнитуры.
Примеры выполненных компанией работ размещены в адаптивном слайдере. Для быстрого просмотра под слайдером выведены миниатюры фотографий.
Сайт прост, интуитивно понятен, функционален. В его разработке мы проявили уважение к пользователю, экономя его время: мало букв, но максимум информации.
Задача: оптимально донести информацию об услуге до желающих качественно выучить иностранный язык и записаться на курсы онлайн.
Адаптивное меню с вложенностью второго уровня обеспечивает быстрый доступ к необходимой информации как в десктоп версии, так и на мобильных устройствах.
Тщательно спроектированная структура сайта позволяет быстро получить весь спектр необходимой информации и записаться на выбранный курс онлайн.
Для оптимизации процесса поиска и получения информации от студентов языковых курсов сделана система отзывов, создана галерея
с изображениями, пишутся и обновляются статьи содержащие подробную информацию о работе центра.
Релевантные заголовки статей, списков меню, обновление отзывов и пополнение информационного контента, позволяет наиболее быстро и качественно продвигать сайт в поисковых системах.
!ВАЖНО! Мы выполнили редизайн сайта. На этой странице представлены скриншоты первой версии сайта.
Основной задачей было сосредоточить максимальное внимание потенциальных заказчиков на фотографиях Лизы: ничего лишнего и отвлекающего. Важно было совместить адаптивность сайта и авторское кадрирование снимков независимо от типа устройства пользователя. Было продумано удобство выбора тематики съёмки: адаптивное меню в 2 клика приводит к нужному результату.
Лиза живёт и работает в Шанхае, поэтому важным аспектом сайта является его двуязычность.
Заголовки списков меню и разделов портфолио выбирались в соответствии с
наиболее релевантными запросами пользователей поисковых систем. Такой способ позитивно влияет на формирование сниппетов в Google или Yandex.
Решает проблему с продвижением сайта.
Адаптивность позволяет смотреть примеры работ на любом устройстве,
привычно свайпить картинки, переключать нужный раздел, затрачивая минимум времени на понимание структуры сайта.
Для сохранения авторского кадрирования снимков, были отредактированы стили и код слайдера. Несколько спорно относительно эстетики главной страницы, но бесспорно позволяет наиболее полно наслаждаться композиционным решением снимков.
