Расскажу о процессе дизайна, что и почему поменял, чего не достиг
Эта статья была и есть на медиум, но в РФ её забанили, поэтому решил перенести сюда.
Дисклеймер. Статью я писал своим тон оф войс, тут сто проц будут ошибки в пунктуации. В интерфейсах я проверяю тексты, а тут мне лень. Не бейте палками плиз за это.
Небольшая предыстория. Уже где-то год я плотненько занимаюсь волейболом (апдейт спустя полгода: уже не так плотненько). В какой-то момент я начал смотреть видосы на ютубе по волейболу. Приметил для себя ютуб казанского зенита и начал следить за клубом. Как-то вот так этот клуб и стал моим любимым. И вот недавно я узнал, что у них есть свое приложение и решил его глянуть.
Че сразу бросилось в глаза, так это устаревший дизайн. Всё, абсолютно всё написано капсом, я с этого ваще выпал. Таббар сделан как-будто для дрибла, как по мне это не гуд. Верстка хромает, текст где-то залезает на другие элементы. И еще вот эта менюшка, которая тут на самом деле не нужна.
Для себя выделил несколько целей по редизайну:
1. Избавиться от этой боковой менюшки, но при этом не потерять её функций
2. Меньше капса
3. Поработать над логикой
4. Добавить тёмную тему
5. Ну и подкрутить визуал
Щас будет попытка воссоздания процесса дизайна. По сути сначала будет немного(а может и много) кринжа, а потом чё получилось в итоге.
До того, как приступить дизайнить, я посидел позырил кучу сайтов и другого визуального контента по тематике спорта. Выделил для себя то, что частенько применяют акцентную типографику и придают ей движения путем италика, а еще юзают прямые формы везде. По типографике я решил так и делать, взял Druk и в помощь к нему Golos. А вот по формам я решил всё-таки остаться со скруглёнными углами.
Сначала решил определиться с таббаром. Покумекав некое время оставил 5 пунктов, а именно: «Главная», «Билеты», «Клуб», «Магазин», «Профиль». Дизайнить начал с главной страницы. Поместил туда новости, медиа штуки, предстоящий матч и его лайв вариант. И чё-то еще было вроде, но я забыл.
Ну вы сами видите какое говно получилось, акценты умерли и в целом скучно как-то. Я тоже понимал, что это говно, поэтому начал переделывать. Решил оформить новости крупно и сделать их листающимися. Ниже поместил прошедшие матчи и предстоящие матчи.
Внимательные читатели, наверное, уже заметили пропажу медиа с главной. Все верно, я решил убрать их в таббар. А чтобы не нагружать таббар 6 вкладками я вынес профиль на главную.
Билеты
С главной вроде разобрались, теперь по очереди пройдемся по другим. Вкладочка достаточно простая, помещаем те же карточки матчей с главной и добавляем кнопку «Купить билеты». А ну еще корзину с купленными билетами.
Вот щас кстати пишу это и чёт только сейчас до меня дошло, что стоит задизайнить еще страницу покупки билетов. Дорисую для кейса на беху потом (не дорисовал в итоге ахахах), а щас скажу как я её вижу. Сначала видим стадион отдаленно как бы сверху и он разделен на сектора. По тапу на сектор он раскрывается и уже появляются места. Хз получится ли вместить в эти места цену, если нет, то цветом их разделю и добавлю подсказку сколько какой цвет стоит. И кнопку купить. Там дальше оформление заказа все дела.
Клуб
Сюда решил добавить инфу о всех предстоящих матчах, инфу по составу и тренерскому штабу и турнирную таблицу. Получилось три вкладки. Начнем с вкладки «Матчи». Сначала я сделал ее по сути визуально такой же, как и вкладку с билетами. Два предстоящих матча и еще снизу кнопка с календарем со всеми матчами. Но потом я от этого отказался, и сразу поставил календарь.
Дальше о вкладке состав. Тут решил сделать карточки с инфой по игрокам. Фотка, имя, фамилия, возраст, рост, амплуа и номер. Вот эту страничку я кстати сделал за одну итерацию.
Турнирная таблица
Тут тоже особо ничего сложного не было, возможность выбрать турнир и его годы, и сама таблица. Ну и выделить сам клуб решил для быстрого считывания.
Медиа
Тут я решил расположить новости, прошедшие трансляции матчей, видео с ютуба и фотки с матчей. Все по сути выглядит одинаково, просто карточка с обложкой и инфой. Сначала инфа была прям в карточке.
И вроде как окей, но если заголовки будут длинными, то все станет плохо. Поэтому отдельно сделал обложку и инфу.
Магазин
Или фаншоп, хз как назвать было бы правильнее. Товаров немного, поэтому решил делать все не так скучно, как обычно делают в крупных екомах. Крупно выделяем ходовые товары, поменьше остальные. На странице самого товара фотку, возможность добавить в избранное, название и цена, размеры, цвета и кнопка добавления в корзину.
На этом этапе дизайна меня позвали на собес. Где-то в сентябре студия «Crauch» выложила пост у себя в телеге о том, что ищут ux/ui дизайнера на парт-тайм. На тот момент я понимал, что не сильно тяну на уровень крауча, но все равно отослал свое резюме и портфолио. Там еще было написано, что если не ответят в ближайшие три дня, то типа не подходишь ты нам. Мне и через месяц не ответили ну я и забил.
И вот 22 ноября мне написал Антон, основатель крауча, сказал, что есть один проектик и спросил хочу ли я в нем поучаствовать. Понятное дело я хотел. Со мной списался дизайн-лид Никита и позвал поговорить. Созвонились, он мне рассказал че за проект, что придется делать, поспрашивал всякие технические моменты. А потом не помню почему, но я зашерил экран и показал вот эту приложку. И вот он мне сказал, что в целом прикольно, но можно докрутить все это. А именно всякие элементы типа иконок и свитчей можно подстроить под типографику.
После созвона Никита мне так ничего и не отписал, видимо я не подошёл. Ну да и фиг с ним.
И я начал перерисовывать все иконки сам. Для меня это было первым опытом рисования иконок, но вроде получилось гуд (апдейт спустя полгода: далеко не гуд).
После этого начал уже другие странички дорисовывать, например, профиль. Сюда поместил аватарку, любимого игрока, инфу о баллах, цели, бейджи, активность. Кстати о баллах, если делать верные прогнозы на матчи в приложении, можно заработать баллы, а тратить их можно на всякие промики и мерч.
Матчи
Есть два состояния странички матча: предстоящий и оконченный. На предстоящий матч мы можем сделать ставки, посмотреть составы команд и заранее перейти на трансляцию. В оконченном матче есть инфа об MVP, статистика, результаты прогнозов, запись матча.
Ну вроде ничего особо не осталось больше, страничка новости есть вот.
Темная тема
Ну и куда без ночной версии UI. Делал кстати впервые тёмную тему, но вроде ничего сложного. Взял рекомендуемый цвет фона от Apple, акцентный цвет чуток затемнил.
А теперь о сомнительных вещах
Понятное дело, тут есть что допиливать, сейчас расскажу, что считаю не совсем прям идеальными вариантами дизайна.
Карточка матча, которая на главной ну и ещё много где. Вроде бы окей, но по сути внутри вёрстка то хромает, спасает всю эту штуку прямоугольник этот. Но ничего лучше я не смог придумать. Да и вообще кстати я её спиз.. вдохновился у Белогорья. Сначала что-то похожее сам сделал, а потом чет случайно наткнулся на приложение «ВК Белогорье» и там прям вот вариант с той же инфой, которую я пихал в свою версию. Ну и взял оттуда.
Фотки игроков. Я брал фотки с сайта, ничего лучше потому что не нашел, но они так себе потому что плечи обрезаются по-дурацки.
На странице магазина получилось так, что появились новые табы. Хз насколько это критично, но скорее всего надо бы поправить.
А ну еще думаю надо бы онбординг сделать.
Вроде как всё на этом. Оверолл мне всё более-менее нравится. Да ваще это лучший мой проект на данный момент. Получилось передать спортивный движ, UI хорош, функций не потерял, сделал удобнее. Попрактиковался в отрисовке иконок и создании тёмной темы.
Ставьте хлопочки лайки, пишите комменты, по возможности делайте хорошо, не делайте плохо.
А ещё я на данный момент всё ещё не работаю нигде фуллтайм, зато на парт-тайме набрался большого опыта. Поэтому если вы вдруг важная шишка которая может меня пригласить на работу, то я только за. Связаться со мной можно в телеграмме. Портфолио и резюме можно посмотреть в моем Notion.
