Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

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

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

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

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

Процесс

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

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

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

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

Результат

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

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

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

°°°

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

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

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

°°°

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

, , ,

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

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

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

  1. Sergey Korol

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

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

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

    • Саша Бизиков

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

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

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

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

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

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

    • Саша Сушко

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

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

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

    • Саша Бизиков

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

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

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

  2. Константин

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

    • Саша Бизиков

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

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

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

  3. Grawl

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

    • Саша Бизиков

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

  4. Igor Dyakov

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

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

  5. Alexandr Schetinin

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

Написать комментарий

Ещё заметки

Точка контакта: презентация

Занялся изучанием дизайна презентаций. Хочу разобраться в том, как передавать смысл в красивой форме. Для начала решил прочитать книгу «Точка контакта: презентация».

Иконка для канала Федора Борщева

Сделал иконку для канала Федора Борщева. Пообщались, в итоге убедил его изменить не только иконку, но и название канала.

Иконка для канала Сергея Капличного

Сделал иконку для канала Сергея Капличного. Раньше канал так и назывался, но Сергей решил развить его в небольшое СМИ с интересными форматами и назвал его «РАЗВИВЕЙШН».

Иконка для канала «Инструменты редактора»

Сделал иконку для канала «Инструменты редактора», который ведет Саша Марфицин. В нём он рассказывает о приложениях и сервисах, которые помогают в работе над текстом.

Иконка для канала «UX Notes»

Сделал иконку для канала «UX Notes», который ведёт Антон Григорьев. Антон делится ссылками на материалы для дизайнеров и проектировщиков.

Иконка для канала Родиона Скрябина

Сделал иконку для канала Родиона Скрябина, где он пишет про контент-маркетинг, медиа, управление и контент.

Иконка канала МИФ в Телеграме

Однажды ребята из «Манн, Иванов и Фербер» обновили иконку в своём телеграм-канале и она мне не понравилась. В иконке была надпись «Издательство МИФ», которую сложно прочитать из-за небольшого размера. Сделал свой вариант иконки и предложил им ей воспользоваться.

Тезисы о науке касания

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

Какой шрифт используется в навигации московского метро?

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

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

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

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

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

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

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

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

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

План

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

Инструмент

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

Цель

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

Модульные системы в графическом дизайне

Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.

Пиши, сокращай

«Пиши, сокращай» относится к тем книгам, которые забиты практичными советами. В заметке расскажу как она помогла мне найти работу младшим дизайнером.

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

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

Советы Сергея Чикина

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

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

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

Культура дизайна

Прочитал книгу Влада Головача — «Культура дизайна». В заметке делаюсь цитатами с интерсными идеями о дизайне.

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

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

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

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

Конспект: Дизайн + 1

Посмотрел все части «Дизайн + 1». Половину лекции Людвиг рассказывает, как стать хорошим дизайнером, вторую половину отвечает на вопросы. Упорядочил информацию и составил конспект.

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

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

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

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

Процесс создания фавикона

Блог существует с 2009 года. За это время он успел побывать обычной ХТМЛ-страницей, блогом на генераторе статических сайтов и сейчас — на системе управления сайтами Вордпрес.

В заметке описываю как Дэн помог нарисовать фавикон для блога.

Правила работы с клиентом

Составил конспект по семинару Андрея Дьякова о правилах общения с клиентами.

Дизайн привычных вещей

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

Дизайн для реального мира

«Дизайн для реального мира» не совсем про дизайн как таковой, она скорее о философии дизайна в самом широком смысле этого слова. В процессе чтения нужно всегда помнить, что книга была написана в 1971 году.

Джони Айв — легендарный дизайнер Apple

Советую к прочтению всем, кто интересуется историей великих компаний и историей Apple в частности.

Дизайн – это работа

Прочитал «Дизайн — это работа» и делаюсь интересными мыслями и цитатами из книги.

Примеры персональных сайтов для вдохновения

Решил время от времени выкладывать подборки интересных сайтов для вдохновения. Для первого раза составил список красивых и интересных персональных сайтов и блогов. Приятного аппетита!

Панель пуск в Windows 7

Сама панель пуск меня не очень удивила, так как у меня на Windows XP SP2 Zver стояла тома оформления Висты, так что я уже привык к этому.

Дизайн приложения Paint в Windows 7

Paint в Семерке значительно отличается от Paint’а в обычной XP. Значительные изменения произошли в дизайн стороне. Он стал намного красивее! Полее похожим на Офис 2007.