Как я пытался улучшить дизайн популярных сервисов и что это мне дало

24

Этот текст написан в Сообществе, в нем сохранены авторский стиль и орфография

Аватар автора

Магомедрасул Рамазанов

Страница автора

Когда я приступил к 30 дневному UI-челленджу, я поставил перед собой задачу не просто перерисовывать экраны популярных сервисов в Figma, а создавать их так, как я бы их спроектировал. Я решил не менять функциональность, а сосредоточиться на том, чтобы интерфейс выглядел более современно, красиво и с учетом актуальных дизайнерских трендов.

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

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

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

  • Скажи, ктоА как вы оцениваете сделали ли вы лучше или хуже?) Зачем, например, у Тинька убрали всю нижнюю панель, которой часто пользуются? «В результате, я научился создавать более визуально привлекательные и гармоничные интерфейсы.» Почему думаете, что интерфейсы стали лучше?20
  • little~witchПорой не понимаю любовь некоторых дизайнеров к огромным заголовкам и при этом мелкому шрифт для важной информации, как вот с кэшбэком в тиньке. Часто встречаю, может это и правильно, но хз. Акцент же сильно не на том:(2
  • DariaПервая работа: картинка функционала не несёт, но перетягивает внимание, белый текст на черном фоне хуже воспринимается глазом чем чёрное на белом, на кнопке (очень контрастной) появился голубой цвет, которого нигде нет. Если мне нужно зайти в чат с поддержкой или в другой раздел, то это куда нажимать?4
  • user5981751Скажи,, По-моему получилось не очень, но в любом случае это опыт. Видно человек новичок, надо бы прокачаться в ux4
  • ВеточкаСтало хуже5
  • Кристофер РобинКуда дели таб-бар? Если вы меняли только ui, то навигация должна сохраниться. Как с экрана карты попасть хоть куда-то еще?) Я б вот лучше убрала шкалу в плашке с операциями. Она тут ничего не дает, я ж не знаю, какой цвет что значит) предположу, что внутри раздела индикация описана. Вот там пусть и будет шкала, а на плашке только место занимает. Менять цвет праймари кнопки - ну такое. Это ж основной цвет бренда.0
  • Кристофер РобинВ Яблоке тоже цвета какие-то не их, тусклый оранжевый и депрессивный синий. У них кислотная палитра, этим и выделяются. Сокращение текста в кнопке до «Перейти» не обосновано. Куда я перейду непонятно, текст над кнопкой не поясняет. Потому «Перейти к подборке» очень логично.2
  • Кристофер Робинна третьем скрине (не знаю, что за приложение) - куда пропала кнопка «написать»?) полагаю, что она очень важна.0
  • Кристофер РобинРезюме: дизайн - это конечно хорошо, но функционал-то не забирайте у пользователей)8
  • ЗаказнойТ-анк Не корректно сравнивать макеты с разными темами. Это слишком сильно влияет на восприятие итогового результата. Сравнивать нужно только светлая/светлая и тёмная/тёмная. Непонятно зачем сломал навигацию, и накрутил ненужной стилизации (градиент в бордере). Золотое яблоко Указать разделы и поиск как основные элементы навигации, верное решение. Стало в целом аккуратнее. Стоило бы немного ещё поковыряться, чтоб убрать градиент по верх баннера. Подготовленный контент контрастирующий с текстом на переднем плане баннера, всегда смотрится дороже. В случае зя, это важно. Vc.ru Сдвинул акцент на навигацию по разделам, теперь там огромная синяя кнопка, из-за которой внимание постоянно улетает с ленты на левый верхний угол, зачем? Аккуратную Безблочку в ленте разбил на такие себе блоки, зачем? Чтобы что? Комментарии спрятал, чем уменьшил вовлечённость в контент... Аккуратные иконки из линий, сменил на заливку, тот же вопрос, зачем там акцент в виде дополнительной плотности? Про попытку сделать не круглые аватарки и уменьшить скругления у других элементов, вообще молчу. Upd, каждый раз когда принимаете решение внести какие-то изменения в макет, всегда задавайтесь вопросом, зачем я это делаю? Какая конечная цель? Увеличить вовлечённость в контент через первые комментарии под постом, Привлечь внимание к сторис или вести юзера до карточки с акцией. Всегда должна быть конечная цель, система и обоснование. Даже если это обоснование сделать свистоперделоку, чтоб развлечь юзера, "хайпануть" или привести его к каким-то определенным действиям.2
  • Тётушка ПоТэк-с. Я - старая тётка. Нас таких среди пользователей приложений немало. И если вдруг привычный светлый с понятными кнопками экран заменят вот этим вот чёрным с шишкой, я буду долго и мучительно долбить поддержку и требовать "вернуть как было". Темно-серое на чёрном тупо не видно, а неоновые розовые всполохи даже не дают глазу сосредоточиться на важном. Это ж не дискоклуба приложение, а банка. Мне оут цифры важны, а яих тупо не вижу. Чёрный фон - зло, яркие пятна - зло, дизайн вместо функционала - зло... Усё, ушла бухтеть на лавку14
  • МаксимКубышка -> Кубушка Зачем предлоги в конец строки обратно вернули? Их там не должно быть никогда и нигде. Зачем убрали жёлтую плашку, которая никогда не видна при использовании приложения?1
  • АннаТётушка, ну насчёт чёрного фона, у меня везде на телефоне стоит тёмная тема, в том числе и в Тбанке, и нормально видно все цифры, они же белые на тёмно-серых плашках2
  • Михаил ЕдошинИнтерфейс предполагает сценарий использования. Без сценария просто композиционно его менять не очень разумно, разве что если в нём есть явные ошибки, например, ошибки выравнивания. Для композиционных упражнений логичнее брать статичные вещи — объявления, вывески, плакаты, книжные обложки, и так далее. А для упражнений с интерфейсом может быть лучше взять более простые приложения вроде таймера, где сценарий использования проще, и работать именно сначала над сценарием, а затем уже над внешним видом. Таймеры, кстати, в том же Андроиде сделаны так себе: занимают весь экран, неудобно добавлять и организовывать те, что часто нужны, нет возможности запустить два таймера сразу и так далее; там есть, что улучшить.0
  • БорисТиньков даже не догадался копейки убрать с экрана. Даже шрифтом не выделили их. Всё написано одним на вашем накопительном счёте 4 733 622,73 р Как же я жил без информации об этих семидесяти трех копейках..0
  • Кристофер РобинАнна, скажем так, темная тема не должна стоять по умолчанию. Иметь возможность включить - да неплохо бы.4
  • АннаКристофер, согласна) Думаю, автор просто показал здесь один вариант для примера0
  • darumaТётушка, практически все программы работают на тёмных фонах. А там только буквы и цифры. Так что ваш аргумент про цифры не убедителен.1
  • ChikensСубъективно - последнее время дизайнеры просто какие-то ...ы. Повыпускались со своих скиллбоксов и пошли хрень делать, создавая видимость, что они полезны, хотя на мой взгляд их всех на аутсорсы и проекты нужно увольнять, а не держать в штате. Уже испоганили кучу сервисов (причем как внешне, так и функционально): - новый дизайн вк (ну это просто трындец, я бы увольнял там всех причастных по какой-нибудь статье "за преступления против эстетического вкуса поколения" с запретом прикасаться к фотошопу) - мегамаркет в какой-то момент в декстоп версии решили обновить дизайн и перенести элементы поиска и категорий вниз, как на мобилках, тоже гении что трындец. Повезло, что доперли до этого, и сейчас вернули обратно (хоть и все равно сжали элементы поиска, которые блин являются ключевыми). - гении видеосервисов (как Ютуб, так и вк), которые решили, что каждый первый их пользователь записывает видосы и оставлять центральной кнопкой в главной панели управления - кнопку создания видоса будет отличной идеей (чёртовы тиктокеры) - мобильный дискорд, который испоганил функционал свайпов влево-вправо, где я мог спокойно посмотреть каналы и кто в сети, а сейчас абсолютно ненужная фигня (+ испортили каноничный приятный цвет дизайна). Это из того, что вспомнил на вскидку. "Обпились своих смузи, накурились электронок и сидят с важным видом за свои 299к/наносек". Дизайнеры, которые ради своих "ну это же круто выглядит и по новому, по свежему, свэээг" режут функционал и удобство - не заслуживают ничего, кроме презрения. И учиться у таких точно не нужно. Дизайны золотого яблока и ВС кстати неплохие получились.0
  • Orlova DarianaНе используйте ИИ для выражения мыслей и написания статьи, сразу же видно эти шаблонные фразы. Как робот: я приступил,я поставил,я решил, я научился, я планирую. Неужели не можете кратко сами изложить или не знаете русский язык. Народ здесь вам в комментариях больше усилий приложил, излагая по несколько абзацев.0
  • Orlova DarianaЕсли вы не смогли приложить усилия, чтобы написать самому три абзаца, что уже говорить о дизайне. Тоже генерировали день и ночь. Есть вероятность, что это статьи от ботов, почему Тинькофф ничего с этим не делает, пока же легко их распознать.0
Вот что еще мы писали по этой теме