Найти тему
Даниил Постнов

Концепт лендинга для туристической компании World19

Оглавление

Сообщество «Тильдошная» объявила конкурс для дизайнеров.

Задача — сделать главную страницу для туристической компании World19. Компания занимается организацией уединённых путешествий.

Проще говоря, если вы хотите, чтобы ближайший сосед от вас был на расстоянии 10 тысяч километров — вам в World19.

Идея и прототип

Что должна была предоставить страница:

  • Дать пользователю понимание, куда он попал
  • Предоставить 3−4 направления с возможностью забронировать
  • Бронирование с формой: имя и фамилия, количество человек, дата отдыха, пожелания и кнопка «Отправить»

Я решил сделать следующую структуру

  • Первый экран: шапка, заголовок, подзаголовок, изображение
  • Рассказ о компании
  • Преимущества
  • Направления
  • Секция с формой
  • Подвал

Жирным выделил то, что нужно сделать акцентным на уровне всего макета.

Первый экран

Первая версия первого экрана

Сначала я хотел сделать первый экран как мы все привыкли видеть: картинка, заголовок, подзаголовок, фактоиды, кнопка.

Прототип первого экрана
Прототип первого экрана

Поразмыслив, я понял, что хочу использовать эту схему для направлений, для первого экрана это не подойдет.

Что предоставляет туристическая компания? Уникальные места, эмоции.

Вторая версия первого экрана

Я продумал новый прототип, который показывает больше визуала, расположив другие элемент в углах макета.

Снизу идет заголовок, подзаголовок и кнопка «Забронировать». В центре можно включить видео. На фоне всего блока лежит изображение.

Вторая версия первого экрана
Вторая версия первого экрана

Визуальное исполнение прототипа

Дизайн первого блока по второй версии прототипа
Дизайн первого блока по второй версии прототипа

И также хотел добавить стрелки или точки для переключения направлений.

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

Третья и последняя версия первого экрана

Что нужно рассказать на первом экране? Куда вы попали. Сразу в лоб предлагать что-то купить — глупо, так как это премиум услуга. Пользователю нужно понять, что вы не пытаетесь впарить.

Оставил то же расположение объектов, но немного изменил текст.

Финальная версия первого экрана
Финальная версия первого экрана

Здесь я написал название компании и тех, кто подойдет по описание клиента. Вы хотите быть ближе к природе — тогда вам в World19.

Справа подписал место и если бы это был сайт, при клике на название сайт прокручивал к нужному направлению.

Здесь легко можно сделать сменяемость слайдов и менять фото и подпись. А при клике на подпись прокручивать к направлению. Дополнительное удобство 🙂

В шапке добавил кнопку «Забронировать» для быстрого бронирования.

О компании

В первой версии я использовал иллюстрацию комады.

Первая версия второго экрана
Первая версия второго экрана

Не нравился хаос в стилях. В первом экране фото, во втором иллюстрация. Должен вырабатываться единый стиль. Принял решение поставить фото команды.

Я уделил мало времени этому блоку и поставил фото команды в офисе.

Вторая версия второго экрана
Вторая версия второго экрана

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

Границы слипшихся изображений
Границы слипшихся изображений

Посыл фото не давал покоя. Если бы я отправлялся в путешествие, я хотел бы довериться людям, которые в теме. Которые не просто сидят в офисе и перебирают бумажки, а которые живут драйвовыми эмоциями.

Третья версия блока
Третья версия блока

Фото передаёт эмоции, я вижу, что вот она, команда, которая бывает в уникальных местах и событиях.

Они всей командой летят по руслу реки и я хочу доверить им свой отдых. Чтобы я испытал те же эмоции.

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

Преимущества

Блок с преимуществами — акцентный, поэтому я хотел выбрать для него какой-то темный фон. Но что может быть лучше звездного неба? Я увидел это на одном сайте мне хотелось использовать этот приём.

Этот блок был принят мной с первой версии.

Блок преимущества
Блок преимущества

Направления

По направлениям у меня уже был готовый прототип от первого экрана, поэтому я принял его в единственном варианте.

Здесь мы даём нужную информацию для клиента:

  • Возможность просмотреть видео об объекте
  • Название объекта
  • Расположение
  • Описание
  • Стоимость в сутки
  • Кнопку для бронирования

Направления всего три. Это не случайно. Если предлагать пользователю слишком много направлений, он растеряется и в итоге не купит ничего.

Если прорабатывать данное решение, но нужно выбрать 3 самых лучших и крутых места, работать над улучшением сервиса и продавать как премиум-услугу.

-10

Бронирование

В бронировании я хотел показать, что пользователи бронируют не номер, отель, место. Они бронируют эмоции и показал пару, которая наслаждается закатом.

Первая версия
Первая версия

Мне не нравилась форма. Здесь она раздробленная, количество человек в конце, там, где имя отсутствие поля, из-за этого появляется рваный правый край.

С полем «Сколько планируете отдыхать» тоже есть проблема — не понятно как его заполнять.

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

В следующем варианте я её сделал её собранной и добавил дату начала и дату конца.

Вторая версия
Вторая версия

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

Итоговый макет

Финальный макет сайта
Финальный макет сайта

Выполненная работа

  • Поиск референсов
  • Прототип
  • Поиск уникальных мест
  • Подбор изображений
  • Написание текста
  • Дизайн