Когда дизайнеры слышат слово «SEO», у многих возникает желание защищать свою творческую территорию. Ведь зачастую требования SEO-специалистов кажутся противоречащими принципам визуальной эстетики. Но как показывает история редизайна сайта типографии «Кодак96 — Александр фото», когда дизайн и SEO работают в унисон, результаты могут быть впечатляющими. Давайте разберем, как мы сделали это возможным.
Бизнес не мог ничего с этим сделать, а мы смогли
Мини-типография «Кодак96» уже завоевала сердца местных жителей, но их сайт оставался в тени. Он не был оптимизирован под мобильные устройства, что в наше время, когда более 60% пользователей заходят на сайты с мобильных телефонов, было серьезной проблемой. Когда Александр, владелец бизнеса, обратился к нам за помощью в SEO-продвижении, стало ясно: просто заманить людей на сайт недостаточно, нужно сделать так, чтобы они захотели остаться.
Перед нами стояли следующие задачи:
- Разработать мобильную версию
- Обновить ПК-версию
- Разработать дизан и адаптацию внтуренних страниц
- Создать шаблоны мини-лендингов
Требования к дизайну:
Клиент пожелал сохранить логотип, состоящий из цветных элементов, напоминающих абстрактное изображение объектива. Эти цвета — синий, оранжевый, зеленый и красный — были для него важными. Также ключевым требованием было сохранить шрифт Acrobat, который использовался на предыдущем сайте. Однако, мы понимали, что шрифт, выбранный клиентом, может не везде хорошо смотреться, поэтому предложили компромисс: использовать Acrobat для заголовков, а для основного текста выбрать более универсальный шрифт Intro. Это классическое решение в дизайне, когда дизайнеры находят баланс между пожеланиями клиента и реальными потребностями интерфейса.
Хочешь идти в ногу с временем — подстраивайся под его ритм
Первая задача — создание мобильной версии сайта. На старом сайте мобильная версия отсутствовала вовсе, что приводило к значительным потерям потенциальных клиентов. Мы начали с разработки главной страницы, которая полностью пошла в разрез с предыдущим дизайном, но заложила основу для будущего редизайна и дала возможность пользователям мобильных устройств заказывать услуги.
Мы добавили удобную форму заявки, где пользователи могли сразу прикрепить свои файлы и отправить их напрямую в типографию. Также были визуализированы категории услуг и полностью перестроена навигация: от тапбара до верхней шапки с раскрывающимися пунктами меню. Это позволило создать интуитивно понятный интерфейс, который был одинаково удобен как для мобильных, так и для настольных пользователей.
Дизайн и конверсия — друзья или враги?
Когда рекламные кампании привели к росту посещаемости, стало ясно, что настольная версия сайта также нуждается в обновлении. Мы адаптировали идеи из мобильной версии на большой экран, сохранив единый стиль и удобство. Навигационное меню, категории и форма заявки были переработаны так, чтобы пользователи могли быстро находить нужную информацию и совершать действия.
Здесь важно отметить, что дизайн и SEO не всегда смотрят в одну сторону. Например, SEO-специалисты могут просить размещение ярких, пульсирующих кнопок в центре экрана, что может противоречить эстетическим принципам дизайна. Однако, важно помнить, что компромиссы могут приводить к лучшим результатам. Наша задача как дизайнеров — найти золотую середину между визуальной привлекательностью и функциональностью.
Когда нужны интерактивные элементы на сайте
В нашем проекте мы отказались от использования интерактивных и динамичных элементов. Сайт был слишком большим и носил преимущественно информационный характер, поэтому для ускорения загрузки и улучшения пользовательского опыта мы решили не использовать анимации. Это был осознанный выбор, направленный на то, чтобы пользователи могли быстро и без задержек получать нужную информацию.
Пользовательский путь, как показать, что «Александр фото» — это уже не просто фото-салон
Одной из наших ключевых задач было продемонстрировать, что «Александр фото» — это не просто фото-салон, а полноценная типография, предлагающая широкий спектр услуг. Для этого мы выделили контактную информацию — почту и телефон — и создали несколько категорий услуг, которые позволяли пользователям легко находить то, что им нужно.
Например, некоторые пользователи искали услуги по цене, и для них мы создали триггеры, позволяющие сразу перейти в нужный раздел. Для тех, кто хотел ознакомиться с полным спектром услуг, была предусмотрена детальная навигация по всему сайту. Такой подход позволил учитывать интересы разных типов пользователей и обеспечивать их удобный путь по сайту.
Мини-лендинги, быстрое решение для повышения конверсии
Идея создания мини-лендингов на страницах конкретных услуг пришла от нашего SEO-специалиста. Наша задача заключалась в разработке универсальных иконок, баннеров и секций с вопросами и ответами, которые можно было бы использовать для настройки рекламных кампаний без участия дизайнеров и разработчиков. Это решение позволило значительно ускорить процесс запуска рекламы и повысить конверсию.
Почему важно дружить с SEO
Каждый проект начинается с аудита текущего состояния сайта как со стороны дизайна, так и со стороны SEO. Да, мнения могут расходиться, но именно в процессе обсуждения рождаются лучшие идеи. После запуска проекта мы проводим анализ тепловых карт и тестируем различные решения, чтобы убедиться, что сайт работает так, как нужно и пользователю, и поисковой системе.
Взаимодействие с SEO-специалистами не ограничивает творчество дизайнера, а помогает найти оптимальные решения, которые принесут реальную пользу бизнесу. Это сотрудничество позволяет создавать сайты, которые не только красивы, но и функциональны.
Результат, шаг за шагом к успеху
Мы достигли главную цель — увеличение заказов и превзошли ожидания, что важно для роста любого бизнеса. Обновленный дизайн вывел конверсию на новый уровень – с 4% до 10%!
Этот проект — отличный пример того, как дизайн и SEO могут работать в унисон, создавая сайт, который одновременно привлекает внимание, удобен в использовании и эффективен для бизнеса. Это история о том, что совершенству нет предела, и даже самые успешные проекты всегда можно сделать еще лучше, если не бояться экспериментировать и сотрудничать.
Да, да призыв к действию
Хотите узнать больше? Смотрите продолжение истории на нашей странице на Dprofile, где мы делимся всеми деталями и выводами этого проекта. Не забывайте следить за нами в социальных сетях, чтобы быть в курсе новых проектов и инсайтов!
