Саша Бизиков

Концепт главной страницы сервиса Туту.ру

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

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

ЗадачаЗа две недели разобраться, как устроена главная страница Туту.ру и представить свою улучшенную версию.

Процесс

Как выглядела главная страница:

Текущая версия главной страницы Туту.ру

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

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

Результат

Основные тезисы новой главной:

Макет кликабельный, подходит для экранов с шириной 1280 пикселей.

Концепт главной страницы Туту.ру

°°°

За время работы над тестовым заданием было проведено две итерации показа макета. Огромное спасибо дизайнерам из Туту.ру Никите Иванову и Льву Пикалёву за ценные советы и возможность выполнить задание!

Это был полезный для меня опыт. Почитайте моё описание дизайн-процесса для тестового задания в школу Яндекса и редизайн главной страницы моего блога.

Буду рад, если оставите комментарий с критикой работы или ценный совет как можно сделать лучше.

°°°

Результат: не прошёл. От дизайнера ожидался несколько иной набор «свойств», не вызвал чувства «а чё, так можно было?».

Поделиться
Отправить
Отправить

11 комментариев

  1. Sergey Korol 15 октября 2016

    https://uploads.disquscdn.com/images/5e1d8c1019036dc6244c4eed9382fa0b672eb77569c29ac42f1136a2727d6a7d.png

    Я не дизайнер, но это место мне кажется странным.

    — Очень разряжено. Селектор выбора типа транспорта куда-то улетел.
    — Не верю, что человек будет писать в поле ввода «Когда» — «Через неделю». Мне кажется, что поездки всегда чётко ассоциируются с датами.
    — Под полями — нумерованный порядок действий. Но сейчас он словно привязывается к полям, и это раздражает.
    — Непонятно, зачем нужна кнопка «Найти билеты».

  2. Константин 15 октября 2016

    Если сложно определиться с тем, как сделать лучше — делай проще. Как я понял, целевой действие — заказ билета, так что на главной странице можно оставить только форму заказа и ссылки на всё остальное, для навигации. Из стандартного —убрать все сомнительные утверждения, вроде «самый популярный»; убрать дублирующие элемент, вроде «Туту.ру», которое и в Лого и рядом в тексте; прочее.

  3. Саша Бизиков 15 октября 2016

    Сергей, спасибо за замечания!

    > Очень разряжено. Селектор выбора типа транспорта куда-то улетел.
    Во время показа работы дизайнерам из Туту, как раз поговорили об этом. Первый раз попробовал применить сетку в дизайне сайта, выбрал 4 колонки, этого оказалось недостаточно. Как ты правильно заметил, вышло очень разряжено. В следующей работе попробую применить другой подход: сначала составлю структуру, а только потом буду выравнивать по сетке и не с 4 колонками, а 12 или 24.

    > Не верю, что человек будет писать в поле ввода «Когда» — «Через неделю». Мне кажется, что поездки всегда чётко ассоциируются с датами.

    Писать «Через неделю» не надо. В поле указывается дата через окно выбора даты (дата пикер). Подпись «через неделю» для того, чтобы легче читалось, во всяком случае на мой взгляд читается легче, но я могу и ошибаться, раз тебя это смутило.

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

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

  4. Саша Бизиков 15 октября 2016

    > убрать все сомнительные утверждения, вроде «самый популярный»; убрать дублирующие элемент, вроде «Туту.ру», которое и в Лого и рядом в тексте; прочее.

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

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

  5. Grawl 15 октября 2016

    Уровень работы как раз такой, что я бы тебя нанял, не боясь учить дальше и развиваться вместе. Придраться есть к чему, но страница точно стала лучше. Только вот одно но: жёлтый цвет неприятен в таких количествах.

  6. Саша Сушко 15 октября 2016

    >> Не верю, что человек будет писать в поле ввода «Когда» — «Через неделю».
    > Писать «Через неделю» не надо.

    Меня это тоже смутило. Привычно под полями видеть пояснения к полям, либо пример подстановки. А тут, получает, просто «очеловечивается» вводимая информация: ввел «Оренбург», подписалось «Из Оренбурга». А нужно?

    А то, что получилось убрать дубль меню: одно строкой, второе вкладками формы — это круто. Хотя, уверен, в ТуТу не согласятся.

  7. Саша Бизиков 16 октября 2016

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

  8. Саша Бизиков 16 октября 2016

    > А нужно?
    Возможно не нужно, это же концепт. На тот момент, это показалось интересной идеей, которую отобразил.

    В Туту ничего против такого меню не сказали, спросили только как пользователи смогут перейти на раздел.
    При прокрутке меню фиксируется. На видео можно посмотреть как это примерно могло бы выглядеть:
    http://share.bizikov.ru/tutu_v02.05_0810_fixedmenu.mov

    Меню можно не просто фиксировать, но и полностью раскрывать при прокрутке, ширина позволяет это сделать.

  9. Igor Dyakov 27 октября 2016

    https://uploads.disquscdn.com/images/95c3b120229c1c2fac594cef678e8a34ebe14ed2716c799680e5a21bb7fe14b0.png

    Стоит обратить внимание насколько снизилась информационная плотность

  10. Alexandr Schetinin 16 марта 2017

    Подскажи как делать длинные скриншоты с тенюшкой на маке:)
    Понравился твой блог. Много полезной инфы!

  11. Саша Бизиков 16 марта 2017

    Сначала делаю скриншот всего сайта через плагин для Хрома — https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl.

    Если это экран сайта из Скетча, то просто сохраняю файл. Потом добавляю браузер с тенью (можно и без тени) через сервис http://getcover.ru

🔒 Обсуждение закрыто

Ещё заметки

Итоги по годовому курсу графического дизайна Bang Bang Education

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

Верстка книжных и журнальных разворотов

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

Как руководить дизайнерами

Прошёл небольшой курс на Bang Bang Education от Кости Горского «Как руководить дизайнерами». В заметке поделюсь впечатлениями от курса.

Лайфлист дизайнера презентаций

За последние два года я сверстал 91 презентацию. Все они сделаны в рамках ФанБокса и по понятным причинам показать их не могу. Зато могу поделиться списком материалов, которые стоит изучить, чтобы научиться делать презентации.

Развитие в профессии

Выступил с лекцией «Развитие в профессии» на конференции UWDC 2018 в Челябинске.

Тайпетербург, 2017

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

Как поставить обучение на поток при небольшом количестве времени

Отвечаю на вопрос читательницы о том, как у меня устроен процесс обучения.

Дизайн-просмотр за три минуты

Смонтировал видео с форума «Дизайн-просмотр», который прошёл 29 и 30 апреля в Москве.

Прошёл курс «iOS-программирование для дизайнеров»

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона. В заметке рассказываю, чему научился.

Характер и эмоции в штрихе, итоговое занятие

Последнее занятие курса «Характер и эмоции в штрихе». В качестве итоговой работы взял фразу «Автостопом по галактике».

Характер и эмоции в штрихе, четвёртое и пятое занятия

На четвёртом и пятом занятиях курса «Характер и эмоции в штрихе» занимались композицией фразы. Влада показала на примерах какие композиции могут быть. Какие эмоции и смысл они передают. Разобрали плакаты, вот некоторые из них: Больше примеров композиции можно посмотреть в Пинтересте Перед тем как рисовать композицию, хорошо было бы составить её карандашом на листочке. Можно

Лайфлист дизайнера, 2017

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

Характер и эмоции в штрихе, третье занятие

На третьем занятии курса «Характер и эмоции в штрихе» мы учились передавать характер вида спорта через его название. В конце расскажу, как у меня «взлетело» регби. Лучше всего сразу писать на белом листе бумаги. Так проще будет отсканировать и использовать в Фотошопе. Перед тем как начать писать название вида спорта, хорошо было бы понять, что оно означает. Чем

Настройка шаблонов экспорта в Sketch

Раньше нарезанную графику для андроида сохранял с помощью специального плагина для Скетча. Даже хотел написать свой, чтобы сделать процесс ещё проще. Начиная с 42 версии, у Скетча появилась возможность задавать шаблоны экспорта. С их помощью можно экспортировать иконки в нужных разрешениях без использования сторонних плагинов. Шаблоны находятся в Sketch → Preferences → Presets: Добавил четыре шаблона: Экраны для айфона рисуем в

План

Третья часть из серии заметок про составление плана развития на год. Описываю как составить план развития дизайнера.

Инструмент

Вторая часть из серии заметок про составление плана развития на год. Подробно рассказываю какие инструменты использую для составления плана развития.

Цель

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

100 книг для дизайнера

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

Характер и эмоции в штрихе, второе занятие

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

Характер и эмоции в штрихе, первое занятие

Записался на курс «Характер и эмоции в штрихе», который рассчитан на 6 занятий по 3 часа. На каждое занятие буду составлять заметку с впечатлениями и результатом. Будет интересно посмотреть на прогресс.

Первые 90 дней в компании

С 5 декабря работаю младшим дизайнером в ФанБоксе. Пришло время составить список для развития навыков в рамках компании, разобраться во внутренних процессах и пройти испытательный период. Для этого посмотрел пару лекций и составил конспект.

Тестовое задание для RedMadRobot

Выполнил тестовое задание на вакансию дизайнера-стажёра для RedMadRobot. Попробовал Фреймер в деле, получил отказ и поставил новую цель. В конце расскажу, зачем публикую описания дизайн-процессов.

Сайт для Сергея Сичкар

Задизайнил и сверстал блог для Сергея Сичкара. В заметке описываю процесс работы.

Кристал — просмотр дизайна на Андроиде

Нашёл для Андроида приложение, которое позволяет просматривать макеты из Скетча.

Опыт покупки MacBook Pro

В апреле купил MacBook Pro, середины 2012 года. Не новый, а с рук. В заметке кратко поделюсь основными наблюдениями и полезными ссылками.

Мобилизация, итог обучения

10 августа презентовал проект организаторам Школы. В начале недели стали известны результаты.

Мобилизация, четырнадцатый день

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

Мобилизация, с восьмого по тринадцатый дни

Последние пять дней были насыщенными: узнал про инструменты для создания прототипов, мастерство презентации, писал во Фреймер Студии, узнал подробнее про развитие продукта и как исследовать интерфейсы.

Мобилизация, седьмой день

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

Мобилизация, пятый и шестой день

Прошло две лекции и два семинара, поэтому опишу впечатления по прошедшим дня. Они были насыщенными.

Мобилизация, четвертый день

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

Мобилизация, третий день

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

Мобилизация, второй день

В начале недели у нас была вводная лекция. О том дне писать не стал, т.к раскрывались организационные моменты. Появилось понимание того, что всё серьезно. Будет не до отдыха.

Мобилизация, первый день

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

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс. Главный вопрос, который задал себе: зачем это делать? Точно необходимо? Бизиков.ру — личный блог, куда пишу заметки о прочитанных книгах, советы по разработке и наблюдения. Стараюсь постоянно развиваться, и сейчас самое время завести главную страницу, которая сможет рассказать обо мне посетителю: что умею делать и как со мной

Школа мобильного дизайна: результат поступления

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

Школа мобильного дизайна: процесс выполнения тестового задания

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

Поэтому решил выполнить тестовое задание и в заметке описал процесс выполнения задания.

Лайфлист дизайнера, 2016

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