Разбор концепта сайта для кальянной
Разбираемся, как именно глубокое понимание целевой аудитории может влиять на структуру сайта и, не менее важно, на создание концепции и выбор визуальных ключей для ее выражения.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Радомир, подписчик DL PRO
Какие ключевые вопросы по работе у тебя есть к менторам?
Как сделать дизайн интересным, что делать с фоном когда он просто темный
Задача
Создать сайт, который расскажет о кальянной
Привет, Радомир! Спасибо за твою работу.
Что понравилось в работе
Достаточно чисто оформил все блоки внутри сайта. В структуре блоков нет каких-то моментов, которые явно выбивались бы. Но если начать декомпозировать и разбирать детали, то начинают появляться вопросы, и это мы разберём ниже…
Логика и Бизнес
Самый первый и самый важный шаг начала работы над проектом — это исследование. В твоей работе из исследований есть только одна фраза про целевую аудиторию.
Люди от 18-25 лет, которые хотят расслабиться
Откуда ты получил эту информацию? Её дали заказчики, или сам изучал тех, кто посещает кальянные? Важно понимать, насколько эта информация релевантна твоему проекту. И второй вопрос: что она тебе даёт и как рассказывает про пользователей? Дизайнер исследует продукт и его аудиторию, чтобы понять, в какой форме реализовать предложение для данной категории клиентов.
1) У тебя есть элитная кальяная в центре города, куда ходят самые богатые люди города.
2) Средняя кальянная с низким чеком за кальян. Одна из мотиваций клиентов — сэкономить.
Будет ли в этом случае разная стилистика сайтов для 1 и 2 вариантов? Безусловно! Хватает ли информации, чтобы продолжить работу? Можно раскопать ещё.
1) А что это за город? Москва, Тольятти или вообще Барселона? И вновь это повлияет на стилистику нашего сайта.
2) А полная ли посадка в кальянной? Какое качество услуги? Почему такой ценник? Вдруг это место только для своих с почти постоянной полной посадкой? Это может быть самым популярным местом в городе, куда ходят «ценители» и эксперты. А вопрос цены — лишь решение владельца, для которого это удовольствие и хобби, а не роскошь и бизнес.
Ситуации бывают разные. Важно понимать, кто твой клиент. И это не про возраст. Это про причину, почему же они выбрали это место, зачем они пользуются этой услугой и вообще кто эти люди. Это поможет тебе подобрать не только необходимую визуальную стилистику, но и правильно структурировать сайт.
Информацию про приставку можно выделить в отдельный блок, так как сейчас нужно прочитать весь текст «О нас», чтобы обнаружить эту фичу кальянной. Это важное преимущество, которое нужно использовать. То же и про VIP-зоны.
Структура сайта
Пересмотри референсы других проектов и выдели важные блоки для клиента. Проработай путь пользователя на своей странице, переделай её структуру, чтобы пользователь мог найти ответы на свои основные вопросы. И это не только про FAQ, а про сайт целиком.
Визуал
Типографика
Редактура текста очень важна в работе дизайнера. Ошибки в словах и пунктуации могут снизить статус работы для заказчика или ещё хуже — привести к потере клиента. Используй сервисы Типограф и Главред, чтобы почистить контент.
Над стилями текста тоже хочется поработать. Чтобы какие-то вещи выделялись акцентным шрифтом, какие-то были набраны обычным. Задавай иерархию, расставляй приоритеты с помощью типографики, чтобы человек управлять вниманием пользователя.
Общее
Ты указал возраст аудитории 18-25, но текущая визуальная стилистика сайта больше подходит зрелому и платёжеспособному возрасту. И это не про 18, а скорее про 25+.
Фолд вышел немного хаотичным по структуре текста. Как это должно было идти в правильной иерархии: элитные кальяны от ..., логотип, кнопка «Забронировать столик» и композиционное украшение — «Место, куда хочется возвращаться снова и снова». Кнопку лучше выделить, сделать более активной. Нет сейчас желания нажать на неё. Если ты хочешь обыграть её через анимацию, то надо отрисовать разные состояния и показать, как это будет работать.
Картинку на фолде тоже нужно подбирать под композицию. Сейчас элементы перекрывают основной процесс, сюжет фотографии. Поэтому другое изображение, где композиция уходит вправо, смотрелось бы лучше. Как вариант, можно её отразить зеркально. Второй вариант — взять фотографии самой кальянной (интерьер или общий план, когда сидит много людей), чтобы показать клиенту, в какое место он пойдёт, и тем самым передать атмосферу с первого экрана. Есть интересный эффект: когда мы хотим показать место, куда хочется возвращаться снова и снова, то лучше отобразить его без человека, чтобы наш посетитель представил себя в этом интерьере, а не оценивал человека на фото. Примеры: курорты, отели, туры.
Блок со скидкой в День рождения смотрится одиноко и слишком спокойно для праздника. Его можно комбинировать в два последовательных блока с приставкой, так как это всё про развлечение и мероприятия.
В блоке Контакты проблемы с контрастностью. Акцент выставлен не на приоритетную информацию для клиента, а на заголовки. Поэтому сначала клиент увидит подзаголовки «адрес, время работы, телефон», а во вторую или даже в третью очередь сам телефон и адрес. Или вообще не доедет, так как ему было лень читать текст с прозрачностью.
Прием с тенями в первом блоке не свойственен заданному визуалу сайта и ломает его. Если ты применяешь тень, то работай с этим до конца и во всём макете. Если же нет, тогда не нужно придумывать это в самом последнем блоке. Material Design основан на приёме, что экран — это бумага, и сверху лежат элементы, а тень отображает высоту данных элементов. Посмотри, как в рамках Material Design правильно работать с тенью в проекте.
Цвет
Цвета сейчас спокойные и расслабляющие. Этой гамме не хватает акцентов, которые побуждают сделать какое-то действие.
Твой вопрос про фон
Как сделать дизайн интересным, что делать с фоном когда он просто темный
Подход к композиции в работе дизайнера. Здесь ты можешь почерпнуть для себя ответы на свои вопросы.
Про фон: нужно выделять передний и задний план, а также нужно продумывать композицию вместе с элементами, чтобы это смотрелось интересно. Для этого 100% необходимо работать с референсами и мудбордами.
Итог
Ощущение, что блоки завёрстаны аккуратно, но не используется идея в макете, которая прослеживалась бы в структуре и визуале и создавала бы атмосферу самого продукта, услуги, места. Для этого необходимо понимать аудиторию, а далее формировать метафору, которая проведёт клиента через весь интерфейс. Наш разбор по процессу исследования и работе с метафорами.
Как можно было построить процесс:
- Изучить аудиторию.
- Выбрать близкое ей стилистическое направление.
- Подобрать референсы (посмотреть конкурентов и что-то смежное по визуалу).
- Выбрать идею, метафору на основе референсов.
Что посмотреть
Не знаешь, что делать с композицией? Читай :)
Подход к композиции в работе дизайнера
Как подобрать шрифт для дизайн проекта:
https://ux.pub/kak-podobrat-shrift-dlya-dizayn-proekta/
Хочешь научиться применять исследования?
Вот наш разбор на эту тему
Работу разобрали Алана и Ольга.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: