Многостраничный сайт-портфолио для студии дизайна интерьера premium-класса. Подробно расписали каждую услугу и кейсы, и сверстали страницу для онлайн-курса.
Ramazanova Design Buro
Многостраничный сайт-портфолио для студии дизайна интерьера premium-класса. Подробно расписали каждую услугу и кейсы, и сверстали страницу для онлайн-курса.
RDB — Дизайн-студия, которая создает проекты премиум класса
Ниша:
География:
Instagram:
Дизайн интерьеров
Санкт-Петербург
@interior_spb
Студия Анастасии Рамазановой существует уже 10 лет. За это время команда наработала большой опыт и базу информации, которую необходимо было структурировать. А также в последнее время клиенты все чаще спрашивали ссылку на сайт, чтобы посмотреть портфолио, поэтому Анастасия обратилась к нам за разработкой.
Задачи
• На сайте требовалось не просто показать портфолио и услуги, но также передать особенности подхода дизайн-студии к работе.
• Каждый элемент должен гармонировать друг с другом и фотографиями проектов, транслируя качество проработки деталей и стиль.
• Заказчица попросила не использовать яркие цвета и сложные шрифты, а сосредоточиться на аккуратном минимализме
Продумали структуру и создали дизайн, подчеркивающий качество каждой детали проекта
Этапы работы
Разработка структуры
Прототип
Дизайн-концепты
Дизайн сайта
Верстка
Тех. настройки
Структура и прототип
Начали разработку с составления структуры. Это скелет сайта, на котором видны основные смысловые составляющие каждой страницы и их связь друг с другом. Важно продумать, какая страница идет за какой, какие в них блоки и как все это связано друг с другом ссылками и по смыслу. Ведь навигация упрощает взаимодействие с сайтом, делает его интуитивным и помогает лучше понять смысл, который мы хотим донести до пользователя.
Затем отрисовали прототип. Это черно-белый вариант сайта без дизайна, но со смыслами и важными акцентами. На этом этапе мы согласовали структуру и тексты, расположили все формы обратной связи, кнопки, поняли, какую информацию важно показать сразу, а какую можно убрать в попап. При утверждении прототипа поняли, какой контент будет на сайте. Начали собирать недостающие фотографии, тексты, видео и необходимые ссылки.
Смотреть структуру подробнее
Смотреть прототип подробнее
Дизайн сайта
Исходя из вводных данных предложили заказчице 4 разных концепта.
В итоге мы взяли верстку из 2-го варианта, а цвета из 4-го, и получили ту самую идеальную комбинацию.
Изначально пожеланием Анастасии было создать сайт без ярких цветов и сложных элементов. Она скинула референсы, которые ей понравились, и мы вычленили, какие именно детали создавали нужное впечатление. Также мы определились, что в качестве дополнительных цветов попробуем рассмотреть серо-голубые и бежевые оттенки.
Сайт мы сделали минималистичным, но при этом не скучным. Добавили теплых оттенков, чтобы создать обволакивающую атмосферу уюта. Также добавили ненавязчивую анимацию и небольшие видео, чтобы сайт было интереснее разглядывать.
Страницы кейсов
Портфолио, пожалуй, самый важный раздел сайта дизайнера интерьеров. Тут важно показать логику создания проекта, а не просто картинки. Основа хорошего интерьера — грамотное планировочное решение. Мы вынесли его в отдельный блок в виде фото с ползунком. Пользователь может наглядно сравнить «До и После».
В самом начале работы мы столкнулись с тем, что планировки разных проектов отличались друг от друга визуально, поэтому пришлось попросить перерисовывать их в единой стилистике. Но это того стоило. Когда есть понимание смыслов вводимых элементов на сайте и четкое ТЗ, наполнять страницы контентом становится проще, а результат обязательно радует.
Если проект реализован, то использовали как фотографии визуализаций, так и фото после ремонта. Это позволяет потенциальному клиенту оценить, насколько качественно будет проработан его проект.
Использовали также фото в процессе ремонта, чтобы показать высокую вовлеченность команды в процесс. А где это возможно, добавляли видео, снятые на объектах, чтобы еще лучше раскрыть детали проекта.
Страницы услуг
Каждую услугу решили делать на отдельной странице:
К каждой странице подошли индивидуально и разработали уникальную структуру для разных услуг.
• Во-первых, так можно более полно раскрыть детали работы в каждом случае. • Во-вторых, это улучшает продвижение сайта в поисковиках. • В-третьих, это удобнее для пользователя, так как он не теряется в однотипных блоках, а сразу видит понятную структуру работы.
Например, для дизайн-проекта подробно расписали состав проекта и этапы работ, добавили блок с ответами на частые вопросы об этой услуге и сверстали отдельную анкету для клиентов. А на страницах о консультациях вместо заполнения заявки сразу предложили ссылку в личный Telegram Анастасии.
Сверстали чек-лист в стиле сайта
Мы всегда думаем не только о том, чтобы сайт был визуально привлекательным, но и чтобы он работал на бренд и приносил заявки. Поэтому работаем над маркетинговой составляющей и всегда проводим базовую настройку SEO. Для сайта RDB мы использовали форму захвата контактов.
После заполнения обязательных полей автоматически открывается страница со ссылкой на бесплатный чек-лист перед покупкой квартиры. Чек-лист мы также сверстали в стиле сайта и оформили в виде PDF-файла.
Верстка: Аккуратно перенесли дизайн на Тильду и провели все технические настройки
Сверстали весь сайт точно по отрисованному дизайну. Добавили интересную анимацию, которая притягивает взгляд к странице, но не отнимает внимание от главного. Адаптировали все страницы для разных девайсов.
Подключили домен и формы обратной связи. Настроили все кнопки, плавные переходы, фавикон и бейдж, чтобы сайт хорошо смотрелся, когда им делятся в соцсетях. Провели базовую настройку SEO, чтобы сайт хорошо индексировался поисковиками и его можно было продвигать.
В итоге сайт получился чистым, структурированным, с вкраплениями графичных элементов и аккуратной, но эффектной анимацией.
После запуска сайта-портфолио Анастасия обратилась к нам снова за разработкой лендинга перед запуском онлайн-курса.
Оформили дизайн страницы в стиле сайта и аккуратно перенесли его на Тильду. Лендинг расположен по адресу https://ramadesign.ru/course
Результат нашей работы
Сделали светлый и аккуратный сайт с небольшими вкраплениями графичных элементов. В дизайне использовали существующий логотип, но немного его модифицировали, чтобы вписать в новое позиционирование бренда.
Создали дизайн, соответствующий premium бренду
Вписали на сайт портфолио с подробными кейсами, разместили услуги на отдельных страницах и описали условия работы. Также добавили несколько видов форм обратной связи для разных портретов ЦА
Продумали удобную навигацию
Подробно расписали каждый кейс, показав логику создания проекта. Дали возможность сравнить реализацию и 3D-визуализацию. Добавили видео и интерактивное представление планировки.
Грамотно презентовали кейсы в портфолио
Хотите так же?
Заполните короткую форму, мы свяжемся с вами в WhatsApp или Telegram, проконсультируем по услугам и ответим на все ваши вопросы.