Версия сайта
2.
0.
1
Мельком о себе

Команда #enter.media входит в топ-62 агентств по разработке сайтов на платформе Tilda в России за 2024 год по версии Рейтингов Рунета. За 2024 года команда сдала 17 сайтов, из них 3 медицинских многостраничных сайта, 2 корпоративных сайта,.1 личный кабинет, 2 сайта мероприятия, 10 лендингов.

Разработка сайта-портфолио для дизайнера интерьеров

January 24, 2025

enter.media

Точка А

В апреле 2024 года к нам обратилась Анастасия Гаврюшенкова — дизайнер интерьеров жилых помещений, с задачей разработать сайт-портфолио для описания и демонстрации своих услуг и кейсов. Сайт должен быть интуитивно понятный для пользователей в стиле минимализма, чтобы подчеркнуть направление и стиль работы дизайнера. Ещё одним из пожеланий было использование ахроматических цветов в черно-белом исполнении всего сайта.

Реализация по шагам

Общая работа над проектом состояла из трёх больших этапов. Бриф, прототип и дизайн, вёрстка и настройка сайта.

Бриф

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

Прототип и дизайн

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

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

Вёрстка и настройка.

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

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

После вёрстки и согласования приступили к настройке сайта. Привязали домен, настроили формы и уведомления из них в необходимые клиенту каналы (почта, телеграм, crm тильды). Провели тесты отображения сайта на различных устройствах, разрешениях и основных браузерах — ноутбук, широкоформатный монитор, планшет, телефон на andriod и apple. Затем провели для Анастасии обучение по внесению корректировок на сайт, подготовили презентацию со скринкастом всего, что объясняли.

Итог

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

Срок разработки: 2 недели.

Использованные инструменты: анализ конкурентов, autoscale, базовая анимация, ховеры кнопок.

Ссылка на сайт: gavrushenkova.art

Команда проекта

Юрий

UX/UI-дизайнер

телеграм
Оставьте заявку,
чтобы обсудить проект
whatsapp
телеграм-канал
группа вконтакте
Социальные сети
Мы с вами свяжемся, зададим вопросы, расскажем всё о наших процессах и дадим предварительную оценку вашего проекта.
Made on
Tilda