WebValley Studio
бюджет:

Ingain — сайт студии дизайна интерьеров

500 000 ₽
Сроки:
решения:
Анализ конкурентов
Разработка информационной архитектуры
7 месяцев
Составление бизнес-модели
Дизайн
Презентация по фирменному стилю
Проект, который изменил множество бизнес процессов (БП), в том числе и у заказчика =)
Логотип
Визуальное исследование
Технические задания
Сбор семантического ядра
Копирайтинг
Оптимизация сайта
Прототип
Вёрстка
Работа с кодом
Разработка видео-роликов

Начало сотрудничества

Знакомство с заказчиком было нестандартным: у клиента своё видение проекта, так как ранее свой сайт он создавал полностью своими руками. И мы скажем вам, что это первый проект, который изначально был сделан хорошо) Сами в шоке, но это так))) Отсюда ответственность за результат и уровень ожиданий со стороны заказчика весьма высокие.

Был ряд сложных вопросов, в которых приходилось убеждать и доказывать нашу экспертность. В плане продажи это был вызов для нашего менеджмента. После длительных переговоров, заказчик выбрал нас, и открыто заявил, что стоимость проекта значительно выше, чем у других специалистов, которых он рассматривал. Это радовало, но и добавляло новую порцию ответственности.
Тип:
Корпоративный сайт
Клиент:
Результат:
Дизайн интерьеров
UX/UI, сайт под ключ

Видео-презентация дизайна

/01 Агрегация требований

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

Визуальный анализ и стайлборд

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

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

Конкурентный анализ с выводами

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

Интервью

сайт дизайн интерьера
Цветовая палитра для дизайна сайта студии интерьеров.
заказать сайт дизайн интерьера

/02 Проектирование страниц

Прототипы всех страниц были отрисованы за 9 дней, но их обсуждение затянулось. Мы обсуждали каждый блок, его функциональность, возможную анимацию и комфортность для пользователя.
разработка сайта дизайн интерьера
Прототипирование сайта студии дизайна интерьеров.
Всего было 3 итерации правок. Серьёзно мы зависли над несколькими блоками:
•Из чего складывается бюджет;
•Меню;
•Портфолио;
•Страница конкретного проекта (кейс).

Например, секция «бюджет ремонта» — это изначально громоздкая диаграмма, неудобная для чтения, разработки, использования в мобильных устройствах.
создание сайта дизайн интерьера
Итерации проработки секции с бюджетом.
Некоторые страницы пришлось прорабатывать сразу с графикой и анимацией. Например, страницу конкретного кейса (обычно мы так не делаем, так как визуал прорабатывается исключительно на дизайне).
разработать сайт дизайн интерьера
Страница дизайн-проекта интерьера в портфолио.
Основной идеей дизайна было создание визуально чистого, эстетичного образа. В то же время, хотелось эффектности, использовались идеи из журнальной вёрстки, мы даже съездили на выставку архитектуры и интерьеров в Москве, чтобы зарядиться вдохновением под эту задачу. В результате на сайте можно встретить много схожего с оформлением премиальных журналов, например, страницу «Портфолио» мы целиком превратили в некое подобие альбома, совместив вертикальный и горизонтальный скролл. Довольно необычное решение, но действительно эффектное. Эти идеи обосновываются тем, что в нише премиального дизайна интерьеров самое главное — произвести впечатление на клиента компании.
создать сайт дизайн интерьера
Черновой дизайн страницы портфолио студии дизайна интерьера с горизонтальной прокруткой.
Для дополнительного удобства навигации и схожести с колонтитулами журналов, мы разместили плитки в конце каждой страницы со ссылками на разделы, таким образом создавая логический коридор для пользователя сайта.
проектирование сайта дизайн интерьера
Таблица перелинковки между страницами сайта через блок с плитками в конце.
сайт дизайнов интерьера
Прототип нижней секции страниц. На скриншоте виден блок с плитками для перехода.

/03 Логотип

Разработка логотипа не обошлась без трудностей. Команда дизайнеров в процессе поиска идеи перебрала более 60 вариантов и остановилась на 6. По завершении, мы отобрали 3 идеи и оформили их в презентации для демонстрации заказчику.
логотип студии дизайна интерьера
Слайды презентаций концепций айдентики для студии дизайна интерьеров Ingain.
Каждый логотип имел свой фундамент:
логотип дизайн интерьеров
Название образовано от 2-х слов: In Gain. Логотип состоит из трех букв I, N, G. В основе концепции заложена премиальность, функциональность и доверие. Рамка символизирует пространство. Стрелка задаёт направление и символизирует компанию, как непрерывно растущую и динамичную.
разработка логотипа студии дизайна интерьера
Логотип символизирует мощный рост и развитие компании, абстрактно напоминает чертеж. Буквы I и G объединены в одном пространстве, образуют асимметричную композицию, передавая приверженность бренда к постоянному развитию технологий и преодолению новых рубежей. С другой стороны — буквы разделены, что символизирует разделение пространства на функциональные части и отражает детальность проработки всех мелочей интерьерных проектов.
создание логотипа студии дизайна интерьера
Пространство-чертёж в виде помещения с открытой дверью, приглашающее в премиальный и уютный дом, побуждающее к знакомству с компанией и символизирующее открытость, гибкость и дружелюбность показано буквой G — главной в логотипе компании. Циркуль просматривается в соединении букв I, A и N. Эмблема отражает функциональность, сложность и комплексность решений, работы под ключ и их взаимосвязь.

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

/04 Копирайтинг

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

Этот проект был сильно завязан на дальнейшее SEO-продвижение. Ключевых запросов было много и зачастую они оказывались весьма длинными (в формате длинных словосочетаний). Это крайне осложняло незаметную вставку ключей в текст, а удалять их категорически нельзя, иначе все SEO… ну вы поняли — насмарку =). К тому же, у заказчика было своё видение копирайтинга, которое, в некоторых местах никак не совпадало с тем, что на самом деле нужно аудитории. После длительных обсуждений, текст был согласован.

/05
Дизайн сайта

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

Кроме уже описанных идей по совмещению идей из каталогов, журнальной вёрстки, минимализма и анимации, мы использовали несколько дополнительных решений:

/05 Дизайн сайта

Видео фоновых элементов анимации.
сайт event агентства
Кастомные слайдеры с фотографиями готовых интерьеров.
создать сайт дизайн интерьеров
Создана отдельная нестандартная версия блока с социальными сетями для Desktop-ного разрешения.
Отдельный вопрос вызывал блок с тарифами. В данном случае была чёткая тарификация, однако делать стандартные три карточки по вертикали было не очень разумно — не вписывалось в макет, да и в карточках было бы столько текста, что ну никак не уместить в 1 экран. Для десктопа это было бы неудобно. Мы реализовали довольно необычный блок, в духе журнальной вёрстки, с ценами, который в итоге начали копировать и воссоздавать другие дизайнеры на десятках своих проектов =)
Наша студия задала новый тренд на компоновку тарифов.
Дизайн тарифов на сайте студии интерьеров Ingain.
дизайн сайта студии дизайна интерьеров

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

разработка сайта студии дизайна интерьеров
создание сайта студии дизайна интерьеров
разработать сайт студии дизайна интерьеров
создать сайт студии дизайна интерьеров
сайт студии дизайна интерьера
заказать сайт студии дизайна интерьера
разработать сайт студии дизайна интерьера
создать сайт студии дизайна интерьера

Адаптационные версии

адаптация сайта дизайна интерьеров
адаптив сайта дизайна интерьеров
мобильная версия сайта дизайна интерьеров
адаптация сайта дизайн интерьеров
адаптив сайта дизайн интерьеров
мобильная версия сайта дизайн интерьеров

Адаптационные версии

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

Страница проекта

заказать сайт дизайнера интерьеров
сайт дизайнера интерьеров
создать сайт дизайнера интерьеров
разработать сайт дизайнера интерьеров
создание сайта дизайнера интерьеров
разработка сайта дизайнера интерьеров
заказать сайт дизайнера интерьера
сайт дизайнера интерьера

Внутренние страницы

дизайн сайта дизайнера интерьеров
создание сайта дизайнера интерьера
разработка сайта дизайнера интерьера
дизайн сайта дизайнера интерьера
создать сайт дизайнера интерьера
разработать сайт дизайнера интерьера

Типографика и цветовая палитра

цвет для сайта дизайна интерьера
цвет для сайта дизайна интерьеров
Futura шрифт на сайте дизайна интерьеров
Futura шрифт на сайте дизайна интерьера
Inter шрифт на сайте дизайна интерьера
Inter шрифт на сайте дизайна интерьеров

/06 Вёрстка

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

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

/07 Отзыв

Отзыв в процессе работы

Голосовой отзыв заказчика
Транскрибация:

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

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

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

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

Резюмируя, с вами приятно общаться, результат работы соответствующий. А деньги, которые я затратил, просто не измеримы с качеством работы, и я считаю, что вы даже не на 100%, а на 1000% отработали свою работу, и выполнили даже больше. По результатам видно, что вы стремитесь к качеству. Мне все очень-очень нравится.

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

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

/06 SEO‑оптимизация

Дизайн интерьеров — конкурентная ниша. Помимо студий, подобным INGAIN, поисковую выдачу приходится делить с ремонтно-строительными компаниями, информационными порталами, работающими по партнёркам, частными дизайнерами, досками объявлений и агрегаторами. В таких условиях SEO-продвижение требует много времени и ресурсов, а выйти в ТОП на одной лишь оптимизации практически невозможно.

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

Сайт сразу же после индексации вышел в ТОП по нескольким десяткам целевых запросов на одной оптимизации и начал приносить бесплатный поисковый трафик.
Съём позиций INGAIN.