Сопровождение сайта клиники красоты

Сопровождение сайта клиники красоты

Подбор фотографий. Дизайн баннеров. Вёрстка текста.

Система управления сайтом — WordPress

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

В наши обязанности входило внесение информации на сайт и визуальное сопровождение контента: подбор имиджей, фотомонтаж и вёрстка текста.

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

Баннеры для слайдера на главной странице сайта

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

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

Общая страница акций

Общая страница акций. Плитка из обложек страниц акций и их короткого описания.

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

Страница отдельной акции

Страница акции. Обложка страницы затемнена, на ней размещены интерактивные кнопки и текст.

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

Текст разбит на короткие и удобочитаемые блоки. Важная информация выделена размером и цветом.

Прототипирование сайта в Фигме

Прототипирование

Десктопная и мобильная версии

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

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

По кнопкам ниже вы можете ознакомиться с десктопным и мобильным вариантами прототипа интернет магазина.
!ВАЖНО! Дождитесь полной загрузки страниц. Индикатор загрузки: голубая полоса вверху экрана. Загрузка прототипа небыстрая.

В Figma есть режим комментирования указанного объекта, а также ответа на оставленный комментарий. Мы с вами будем точно знать какой объект и на какой странице обсуждаем. Одним из весомых плюсов является доступ клиента к самой свежей версии дизайна проекта онлайн 24/7 по одной ссылке.

Заказать сайт. Что и как?

Заказать сайт. Что и как?

Правильные вопросы — ключ к успешному решению задач

Сайт — рабочий инструмент вашего бизнеса. Кто, как не вы, лучше всего знает ваш бизнес?
Совет руководителю: не отдавайте первый этап собеседования с нами менеджерам среднего звена. К сожалению, нередко они относятся к своим обязанностям формально. Формальным получается и результат. Без тесного взаимодействия с вами на первом этапе, без ваших разъяснений о том что и как у вас работает, мы не сможем предложить оптимальное решение ваших бизнес-задач. Не удивляйтесь, что приступая к работе над вашим сайтом, мы будем задавать много вопросов.

Вы можете заранее подумать над ответами на вопросы:

  1. Что вы хотите рассказать о своей компании?
  2. Какой товар, продукт или услугу вы предлагаете? В чём их особенность?
  3. Кто ваши конкуренты?
  4. Кто ваши клиенты?
  5. Как вы обслуживаете своих клиентов, чем ваше обслуживание отличается от конкурентов?
  6. Какие этапы в работе с клиентом у вас существуют, какие шаги на каком этапе в работе с клиентом совершают ваши сотрудники?
  7. Какие из этапов, или шагов работы с клиентом можно убрать или добавить, а какие автоматизировать?
  8. На какие часто задаваемые вопросы клиентов может ответить сайт без привлечения менеджеров?
  9. Решение каких проблем клиентов можно доверить сайту без привлечения сотрудников вашей фирмы?
  10. Какие сайты вам нравятся и почему?

Опросный лист для технического задания на разработку сайта

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

Функционал сайта — инструмент достижения цели

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

Сколько стоит сайт?

Это некорректный вопрос. Он сродни вопросу: «Сколько стоит автомобиль?». Возникает немало уточняющих вопросов, неправда ли? Так и с сайтом. Цена зависит от комплекса деталей: функционал, дизайн, предполагаемые нагрузки и тд. Мы сможем назвать цену только поняв объём и сложность предстоящих работ. Цены динамичные. Возможна поэтапная оплата. Предоплата обязательна. Полная оплата — после приёмки проекта.

Этапы работы над сайтом

4

Разработка дизайна и прототипа

5

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

6

Подбор хостинга и тарифного плана

7

Установка и настройка CMS и модулей

8

Кастомизация функционала

9

Кастомизация дизайна

10

Тестирование на разных устройствах

11

Наполнение контентом, копирайтинг

12

Обслуживание и поддержка сайта

Техническое задание на сайт

Техническое задание на сайт

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

Основные разделы ТЗ

  1. Описание сайта: его задачи, целевая аудитория, дизайн
  2. Структура сайта
  3. Функционал сайта
  4. Взаимодействие пользователя с элементами сайта
  5. Хостинг и его тарифный план
  6. Система управления сайтом
  7. Перечень и описание плагинов
  8. Перечень, описание и этапы работ

Описание сайта

Техническое задание — документ, обращённый и к заказчику, и к разработчикам. Начинается ТЗ с краткого описания будущего сайта: кто заказчик, кто целевая аудитория, какие задачи должен решать сайт. Коротко, только конкретика, без субъективных оценочных суждений, как то: красиво, быстро, хорошо и тд., например:

Техническое задание на разработку интернет-магазина для компании «Такая-то», доменное имя «доменноеимя» для продажи спортивной обуви с онлайн оплатой и доставкой товара в пункты выдачи «БоксБери». Целевая аудитория сайта: горожане 25-44 года, офисные работники, любящие путешествовать.

Сайт должен быть выполнен в минималистическом стиле на белом фоне с элементами взаимодействия фирменных цветов #7248ad и #cc65ed. Логотип и шрифты — согласно гайдлайну, предоставленному заказчиком. текстовая информация предоставляется заказчиком и тд.

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

Структура сайта

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

Шапка сайта

Верхнее меню

По такому же принципу расписываются остальные сквозные блоки.

Структура страницы

Структуру страницы можно прописать словами, а можно представить в виде графической блок схемы. Что важно понимать разработчику: какой тип контента должен присутствовать на какой странице. От этого зависит подбор фреймворков или программных плагинов. Расписываем так каждую типовую страницу сайта.

При формировании структуры страницы важно учитывать контекстную иерархию: на каждой странице обязательно должен присутствовать единственный заголовок Н1. Количество заголовков низшего разряда (Н2, Н3, Н4 и тд) может быть произвольным. Это важные для СЕО правила. Придумывая структуру страницы мы обязательно следуем им, используем семантические тэги, подсказывая поисковым роботам на какую информацию важно ориентироваться.

Функционал сайта

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

Интернет-магазин должен содержать функцию фильтрации по полу (М/Ж), размеру, цвету, материалу, сезону. Должна быть сортировка товара по цене, названию, артикулу. Должна быть возможность быстрой покупки без регистрации и тд.

Сценарий взаимодействия

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

Шапка сайта с элементами: Логотип компании (кликабельный — переход на главную страницу), Телефон компании (кликабельный — производится дозвон на мобильном телефоне), Email (кликабельный — во всплывающем окне открывается форма обратной связи с полями «Имя», «Телефон», «Email», «Задать вопрос» и кнопкой «Отправить» (письма приходят админу и пользователю), поле Поиска, Личный кабинет (переход на страницу личного кабинета клиента), Корзина (переход на страницу Корзины клиента). Меню (навигация по сайту).

Схема взаимодействия может быть представлена в виде имиджа

Хостинг и его тарифный план

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

Доменное имя сайта — эта та часть адреса сайта, что расположена между http:// или https:// и доменной зоной (.ru или .сom, или .рф и тп.), и которую вы вводите а адресную строку браузера для загрузки нужного вам сайта, например https://доменноеимя.рф. Доменное имя (DNS — англ. Domain Name System «система доменных имён») связывает символьный адрес сайта с ip сервера, на котором он размещён. Мы очень упростили объяснение для ясности :).

Компания. предоставляющая хостинг, отвечает за:

  1. Бесперебойную доступность вашего сайта
  2. Предоставление качественного оборудования и современного ПО
  3. Сохранность данных, размещённых на их серверах
  4. Защищённость серверов от хакерских атак
  5. Своевременную и компетентную техническую поддержку

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

Опираясь на исходные данные о сайте и на свой опыт работы с разными хостинг-провайдерами мы выбираем оптимальный по соотношениям цена — качество — соответствие требованиям хостинг и прописываем нужный тарифный план в ТЗ.

Система управления сайтом

Система управления сайтом (CMS, движок) — это программный продукт, заготовка, каркас сайта, на котором он собирается. Можно написать сайт с нуля, но это чаще всего нерационально: долго, трудозатратно, дорого и оправдано только в случае разработки уникального по задачам ресурса.

Среди СMS есть как бесплатные, так и платные варианты. CMS может быть бесплатной в минимальной комплектации, но платной в расширенной, например — Битрикс имеет несколько тарифных планов. К самым популярным движкам (WordPress, Bitrix, OpenCart, Joomla, Drupal и другие) существует множество плагинов и регулярно пишутся новые, значительно расширяющие их функционал. К тому же широкое сообщество разработчиков выкладывают массу справочного материала в сети о настройках CMS и исправлении возможных проблем. И это является весомым плюсом в их пользу.

Выбирать СMS нужно исходя из задач, которые должен решать сайт и с оглядкой на то, кто будет вести сайт. WordPress, например, изначально написан для ведения блогов, хотя сейчас он оброс таким количеством корректно работающих плагинов, что на нём можно делать и полнофункциональные магазины и даже небольшие социальные сети. Основным плюсом этого движка мы считаем удобство администрирования сайта. А у Битрикса главное преимущество, на наш взгляд, — интеграция с 1C Бухгалтерией и складским учётом. К тому же Битрикс имеет мощную CRM систему, позволяющую налаживать бизнес процессы внутри компании. Одним словом:

Задачи сайта определяют выбор системы управления.

Перечень и описание плагинов

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

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

Перечень, описание и этапы работ

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

Анализ сайта конкурентов

Анализ сайтов конкурентов

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

Зачем нужно анализировать сайты конкурентов?

Ясное представление о состоянии дел в своём сегменте рынка даёт понимание направления и методов развития бизнеса. Сайт — частично открытый инструмент коммерческих процессов. Изучая сайты конкурентов, можно увидеть их источники трафика, ассортиментный ряд, сервисы и услуги, маркетинговые уловки, схемы взаимодействия с клиентами и тд. Можно оценить успешность их модели бизнеса. Учиться лучше на чужих ошибках. Вдохновляться можно чужими успехами.

Как и где искать сайты конкурентов?

  • Поисковики. По необходимым ключевым запросам находятся наиболее близкие по ассортименту, услугам и локациям конкуренты. Обращается внимание и на лидеров сегмента. Достаточно изучить около 5-ти сайтов.
  • Личный опрос. О конкурентах опрашиваются собственные сотрудники, клиенты, круг общения.
  • Онлайн сервисы. В сети есть специализированные сервисы для анализа сайтов. Есть частично бесплатные.

На что важно обратить внимание?

  • Каналы трафика: поисковые сети, контекстная реклама, соцсети, прямые заходы, e-mail рассылки и тд. Оцениваются процентные соотношения задействования.
  • Удобство. Насколько проста и интуитивно понятна структура сайта. Как быстро находится нужная информация или товар. Насколько внятно организованы целевые действия клиента. Как много вопросов возникает и остаётся без ответов при пользовании сайтом. В промахах конкурентов кроются ваши потенциальные преимущества.
  • Коммерческая составляющая: ассортимент, цены, сопутствующие услуги и сервисы, программы лояльности, гарантии, полнота и доступность контактной информации, варианты обратной связи и тд. Наличие и заметность подталкивающих к действию элементов интерфейса.
  • Контент. Необходимые качества текста: информативность, полезность, уникальность и увлекательность. Стоит оценивать текст на объём и наличие «воды», тематику и стилистику, а так же логическую структурированность. Так же огромное значение имеет наличие, качество и уникальность инфографики, фото и видео. Особое внимание стоит уделять главной странице, страницам категорий, товаров и услуг.
  • Техническая оптимизация. Оцениваются скорость загрузки, адаптивность, наличие потерянных ссылок, имиджей и элементов интерфейса, позиции в поисковых выдачах Яндекса и Google по ключевым запросам, ссылочная масса.

О чём стоит подумать прежде, чем заказать сайт?

О чём стоит подумать прежде, чем заказать сайт?

Для чего вам нужен сайт?

Это первый вопрос, который вы должны задать себе. Вы хотите коротко рассказать о своей компании или создать узнаваемый персональный бренд, а может вы собираетесь продавать что-то или делиться новостями? Вариантов много. Определитесь с целями. Для разных целей — разные сайты. Если вы не можете определиться, подготовьте рассказ о себе и своём бизнесе, поделитесь с нами своими планами на сайт. Мы готовы реализовать практически любые нешаблонные идеи.

Самые распространённые типы сайтов?

  • Сайт-визитка — самый простой и дешёвый. Визитка — это короткий рассказ о себе: кто вы, чем занимаетесь, как с вами связаться. Как правило, 5-6 страниц.
  • Имиджевый сайт нужен для создания или поддержания образа компании, продукта или персоны. В идеале, делается по разработанному брендбуку. Способствует росту узнаваемости бренда. Требует нестандартных дизайнерских решений. Желательны эффектные фишки в виде скриптовой анимации. Желательно наличие фотогалерей и видео событий или товаров. Возможно наличие блога или новостной ленты.
  • Лендинг пейдж — посадочная страница. Служит инструментом сбора базы потенциальных клиентов через продвижение одного конкретного товара, события или акции. Содержит маркетинговые уловки, которые подталкивают посетителя отправить свои данные через форму обратной связи. Одностраничный сайт.
  • Сайт-портфолио знакомит посетителей с выполненными работами владельца сайта. Содержит так же информацию о персоне или компании, отзывы от заказчиков, форму обратной связи. Количество страниц может быть разным, в зависимости от нюансов профессиональной деятельности.
  • Интернет магазин — онлайн продажи. Электронный каталог продукции с функцией покупки товара онлайн. Витрины товара по категориям — плитка, или список товаров с самой необходимой информаций (фотография, название товара, цена) и кнопками взаимодействия (например: купить, посмотреть подробно, добавить в виш-лист). Карточки товара — подробное описание товара, его характеристики и отзывы о нём, кнопка добавления в Корзину. Корзина позволяет собрать несколько товаров в один заказ. В личном кабинете пользователь может отслеживать статус заказа, видеть архив заказов, изменять личные данные и адрес доставки и тд. В действительности, конфигурация магазина может быть произвольной, это зависит от особенностей вашего бизнеса.
  • Корпоративный сайт развёрнуто рассказывает о компании, её команде и деятельности. Может содержать каталог продукции, прайс-листы, новостную ленту, экспертные статьи. Имеет разветвлённую структуру. Возможно наличие закрытой для посторонних посетителей части, доступной по авторизации. В закрытой части может быть установлена CRM для регулирования проектной деятельности компании, внутренних коммуникаций и информирования сотрудников.
  • Информационный тематический сайт может быть посвящён любой теме: бизнесу, искусству, музыке, медицине. Чему угодно. На сайте может присутствовать новостная лента, аналитические статьи, блоги и тп. Возможны функции комментирования и тд

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

Кто ваши прямые конкуренты?

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

Какие функции нужны на сайте?

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

Кто и чем будет наполнять ваш сайт?

Часто сталкиваемся с такой проблемой: заказчик хочет на сайте и блог, и новости, и фотогалереи, и имиджевые фотографии товаров, а материалов на это нет. Мало того, нет сотрудников, которым можно поручить ведение сайта. Соизмеряйте свои силы. Не надо заводить рубрики, которые останутся пустыми. Это снизит качество вашего сайта, а, следовательно, и его индексацию. Если же вы хотите-таки разнообразного контента, то его нужно готовить. Подбор фотографий узкой тематики — дело долгое и часто безуспешное. К тому же, фотографии на фотостоках платные. Нет ничего лучше собственных фотографии изделий или товаров. Уникальный контент повышает доверие и лояльность клиентов, мы готовы принять участие в его разработке. Нам важно понимать реальное состояние дел с наличием материалов.

Имиджевый одностраничный сайт аромапсихолога

Имиджевый одностраничный сайт аромапсихолога

Фотосессия. Разработка сайта. Копирайтинг. SEO-оптимизация.

Система управления сайтом — WordPress

Задача: разработка имиджевого одностраничника для продвижения услуг аромапсихолога и привлечения новых клиентов. Составление семантического ядра. Написание seo-ориентированных текстов.

Фотосессия

На стадии обсуждения проекта заказчица выразила желание устроить фотосессию. И это правильно: ничто не ценится сегодня выше, чем оригинальный контент. Мы с радостью согласились. Вместе с фотографом Александром Захарченко (его инстаграм: @fotofreeze) мы выбрали студию, согласовали время и провели фотосъёмку как самой Ольги, так и эфирных масел, с которыми она работает. Эти фотографии стали основой визуального наполнения сайта и осталось ещё много незадействованных для ведения Ольгиного инстаграм и тд.

Бэкстейдж фотосессии, снятый на мобильный телефон

Разработка сайта

Сайт не предполагает наличия сложных структур и функционала, поэтому для него мы выбрали систему управления WordPress как наиболее интуитивно понятную в наполнении и администрировании (наше субъективное мнение).

Для оформления сайта мы использовали фотографии Ольгиной фотосессии. Сайт выполнен в минималистичном стиле. За исключением полноэкранных имиджей с эффектом параллакса, которые являются обложками разделов, все остальные имиджи имеют скруглённые углы, что придаёт сайту мягкий, текучий, «женский» характер. Это обусловлено спецификой профессиональной деятельности Ольги: её основной клиент — женщины.

На загрузочном скрине сайта размещён заголовок первого уровня с указанием профессиональной принадлежности Ольги и локации её деятельности. Под заголовком находятся кнопки WhatsApp, Telegram и Instagram для быстрого и удобного перехода к общению с Ольгой.

Скриншоты сайта на десктопе

Срины сайта сверху вниз последовательно

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

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

Скрины сайта на планшете

На планшете происходит перестроение блоков, расположенных в три столбца на блоки в два столбца или в один столбец.

Скрины сайта на смартфоне

На мобильном удобство чтения достигается перестроением всей информации в один столбец.

Копирайтинг

От клиента мы получили фактологические наброски текста. Исходя из них, проверив частотность запросов по необходимым ключевикам, мы составили заголовки и тексты разделов. На одностраничном сайте информация сгруппирована по блокам. В тексте важно соблюсти не только информативность, стилистику речи, но и объём: в родственных блоках он должен быть равновесным.

Seo- оптимизация

WordPress, как и большинство других систем управления сайтом, создаёт дубли страниц, что понижает сайт в поисковых выдачах. Мы сделали 301 редирект наиболее характерным для WP дублям.

На сайт установили модуль Yoast SEO. Сгенерировали sitemap и robots.txt. Прописали для страниц, составляющих разделы одностраничника, description и title.

Добавлены новые разделы на сайт artlepka.ru

Добавлены разделы на сайт artlepka.ru

Интеграция модулей Битрикса. Редизайн дефолтных шаблонов и стилей модулей. Установка ssl.

Система управления сайтом — Битрикс

Раздел Портфолио

C лепной мастерской Артлепка нас связывает давнее, плодотворное и взаимовыгодное сотрудничество. О разработке актуальной версии сайта можете прочесть здесь. В работе мы концентрировались на максимально отчётливом представлении каталога продукции мастерской: изделий из гипса. Суть же гипсовой лепнины в формировании стиля интерьера. Отдельно взятые карнизы, колонны, розетки и тд. не дают полного представления о том, как они изменяют пространство помещения, или фасад здания.

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

Кастомизация стилей дефолтной фотогалереи

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

1 слайд — страница всех фотогалерей до правки, 2 слайд — страница всех фотогалерей после правки, 3 слайд — лайтбокс до правки, 4 слайд — лайтбокс после правки, 5 слайд — страница выбранной галереи до правки, 6 слайд — страница выбранной галереи после правки.

Раздел Статьи

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

Установка ssl-сертификата

Ssl-сертификат — это цифровая подпись сайта. Он нужен для защиты транзакций и предотвращения несанкционированного доступа к информации. Наличие ssl-сертификата повышает доверие к сайту как со стороны поисковиков, так и со стороны пользователей. При установке ssl-сертификата, адрес сайта меняется с http:// на https://, а для поисковиков это два разных адреса, два разных сайта. Сайт http://artlepka.ru — большой и хорошо ранжировался по многим поисковым запросам и в Гугле и в Яндексе, поэтому установка ssl-сертификата повлекла за собой ряд мероприятий: для предупреждения ошибки 404 (Страница не найдена) и проседания в поисковых выдачах нами были настроены редиректы. Для мониторинга страниц в Вебмастере Яндекса мы заменили главное зеркало сайта и совершили переезд сайта.

Торговая марка Atlex

Торговая марка Atlex

Графический дизайн. Фирменный стиль. Брендирование.

Логотип

Торговая марка и защита интеллектуальной собственности

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

Торговая марка — элемент международного патентного права и является обязательным атрибутом товара, связывающим его с определенной компанией. Законодательство РФ не регистрирует торговые марки как объекты интеллектуальной собственности. Для защиты авторских и патентных прав в РФ регистрируется товарный знак.

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

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

Фирменные визитки, бланк деловой документации, конверт, блокнот, карандаш и стёрка

Брендированная кружка

Фирменные обои на десктоп

Логотип на экране смартфона

Фирменные рекламные ролл апы

Товарный знак Firenzo

Товарный знак Firenzo

Товарный знак Firenzo

Графический дизайн. Фирменный стиль. Брендирование.

Исходные данные от заказчика: Firenzo — изысканная мебель ручной работы из натурального дерева, дарящая не только функциональность, но и эмоциональный комфорт. Мы изучаем работы старых мастеров и авторскую мебель, которые дают нам вдохновение и являются базой для созданий новых гармоничных форм…
PS:Firenzo переориентировались на паркетную доску. Логотип оставили неизменённым.

Сувенирная продукция для выставки

Брендированный бумажные пакеты

Рекламный имиджевый буклет

Брендированные карандаши и блокнотик

Сайт сбора средств на мультфильм

Сайт визитка для сбора средств. Разработка: вебмастерская Sol

Сайт для сбора средств на мультфильм Ымка

Дизайн. Вёрстка. Подключение Яндекс Кассы. Наполнение.

Система управления сайтом — WordPress

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

Задумываться об обложках к страницам не пришлось: для этого использованы иллюстрации с персонажами и локациями мультфильма.

Для реализации двуязычности, которая одинаково работала бы и с контентом сайта и с функциями WooCommerce, нами был выбран бесплатный модуль машинного перевода GTranslate от Google.

Главная страница сайта

На главной странице сайта собрана вся информация о снимающемся мультфильме. В первом блоке расположено видео обращения к публике режиссёра и сценариста мультфильма Оксаны Водопьяновой.

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

Завершает главную страницу выдача свежих записей блога.

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

Страница сбора средств

Витрина призов

Ымка предлагает различные форматы финансового участия в проекте. Все виды участия, кроме безвозмездного, предполагают получение приза за помощь: это может быть скачиваемый файл на выбор, эвент или допуск к рабочим материалам и процессам производства мультфильма. Для реализации таких возможностей нами был выбран плагин для WopdPress WooCommerce. Плагин с открытым исходным кодом, он лёгок в установке и настройке, корректно работает, к тому же, имеет много расширений, позволяющих кастомизировать взаимодействие с пользователями сайта.

Мы дополнили WooCommerce плагинами:

  • WooCommerce Customizer — для переименования элементов магазина (заголовков, кнопок и тп.)
  • Checkout Field Editor for WooCommerce — для изменения полей в форме оформления заказа с целью максимально облегчить оформление доната. Были убраны поля адреса доставки, номера телефона и тп.
  • Яндекс.Касса 2.0 для Woocommerce — платёжный модуль.

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

Страница выбранного приза

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

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

Первый слайд: акцентирована цветом кнопка, ведущая на пошаговую инструкцию по скачиванию файла. Второй слайд — инструкция.

Этапы оформления финансовой помощи

Основной целью для нас было облегчить этап перевода денег для спонсора. Мы вычистили все поля, оставив только самые необходимые. Спонсору нужно будет только написать своё имя и email, выбрать форму оплаты и уже на странице ЯндекКассы совершить платёж. В случае выбора скачиваемого приза, спонсору нужно будет со страницы ЯндексКассы по кнопке вернуться на сайт Ымки и кликнуть на ссылку скачивания

Блог

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

Желаем мультфильму Ымка успешно состояться)

Адаптивный сайт каталог на битриксе glass-room.ru

Интернет-каталог на Битрикс. Разработка: вебмастерская Sol

Адаптивный сайт каталог на Битриксе glass-room.ru

Редизайн. Вёрстка. Правка структуры, шаблонов и стилей. Программирование. Ретушь фотографий. Копирайтинг. Наполнение.

Система управления сайтом — Bitrix

Задача: сайт с проблемной адаптацией и плохо структурированной информацией сделать удобным для всех пользователей, независимо от того, какое устройство используется для просмотра сайта, упростить доступ к товарам каталога. Предваряя вопросы клиентов, в карточке товара наглядно показать особенности данной конструкции и варианты её комплектации. Написание СЕО-текстов.

Меню

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

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

Меню до редизайна и после на десктоповом экране

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 слайд — дополнительное описание.

Многостраничный информационный каталог B2B ГКС

Фирменный печатный каталог. Разработка: вебмастерская Sol

Многостраничный информационный каталог b2b ГКС

Дизайн. Вёрстка. Допечатная подготовка.

Задача: каталог информирует о структуре, деятельности и достижениях группы компаний «Систематика».
Целевая аудитория: руководители муниципальных образований, руководители предприятий, организаторы массовых мероприятий и тп.














Промобуклет формата А5 для виски Cooper Dog

Промобуклет А5. Разработка: вебмастерская Sol

Промобуклет формата А5 для Cooper Dog. Материал 18+

Дизайн. Вёрстка. Допечатная подготовка.

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

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

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

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

Можно просто заказывать понравившейся коктейль в заведениях, где распространяется данная марка виски.

Не забывайте: алкоголь вредит вашему здоровью.

Адаптивный интернет магазин Артлепка

Адаптивный многошаблонный интернет магазин на Битрикс. Разработка: вебмастерская Sol

Адаптивный интернет магазин Артлепка

Дизайн. Вёрстка. Программирование. Техническое обслуживание.

Система управления сайтом — Bitrix

Задача: несколько шаблонов вывода товара — пользователю должно быть удобно детально рассматривать лепнину разного типа: вертикальные колонны, горизонтальные карнизы и близкие к квадрату панели из гипса. Фильтрация и сортировка изделий по выбранным параметрам. Текстовые блоки в категориях товара для СЕО продвижения. Водяной знак на фотографиях. Функция минимального заказа. Отложенный платёж, так как цена зависит от многих факторов, требующих дополнительных расчётов: возможны индивидуальные размеры изделия, монтаж, особенности помещения, в котором будет монтироваться лепнина и тп. Упрощена форма оформление заказа.

Главная страница

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

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

Шаблоны категорий изделий

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

Шаблон для изделий, габариты которых близки к квадрату

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

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

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

Всплывающее окно с увеличенной фотографией изделия.

Шаблоны карточек товара

Шаблон для изделий, габариты которых близки к квадрату

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

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

Cтруктура карточки товара

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

Для просмотра внутренних вкладок аккордеона, наведите мышкой на скрин экрана.

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

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

Внизу страницы расположен блок с похожими товарами.

Текстовые страницы сайта

Для удобства чтения, текст разбит на вертикальные столбцы.

Система управления Bitrix