49

Редизайн Федерации Настольного Тенниса

Все помнят этот сайт?! Ууух страшненько, кто не помнит лучше посмотрите

Моя профессия UX/UI дизайнер. Проще говоря, Я делаю сайты/приложения удобными понятными и красивыми для юзера.


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

Посмотреть страницу целиком можно здесь:

1. Десктоп версия

2. Мобильная версия


Вы скажете, ну перерисовать - то легко, но сохранилась ли та логика которая была на сайте?
Да! Ниже ссылка на статью, о том как принимались решения.

Также в статье можно лучше понять работу UX UI дизайнера

Статья


Пройдемся по отдельным элементам:

Меню

Вместо 10 пунктов меню - которые не реально нормально воспринимать, путем анализа было оставлено 5 разделов с подпунктами (ниже набросок). Так же Я добавил "Поиск", так как на сайте много инормации и ее иногда сложно искать.

Блок достижений/наград

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



Блок с рекламными и информационными ссылками

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

Больше интересных решений - в статье :)


P.S.

Я как  UX/UI дизайнер - обожаю Пикабу, здесь много качественных решений, та же самая фильтрация по постам или редактор постов - все сделано с любовью к юзеру
Побольше бы удобных сайтов. Всем UX!)

Графический и Веб-дизайн

1.1K постов12.5K подписчика

Правила сообщества

Можно:


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


Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.


Нельзя:


1. Публиковать сообщения, картинки, не соответствующие тематике;

2. Размещать ссылки рекламного характера;

3. Перегибать палку;


Если оступился:


в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;

7
Автор поста оценил этот комментарий

А я не могу воспринимать ВСЕРЬЕЗ людей, делающих в словах ошибки на уровне 3го класса :) вот это прям истиНа. Пиздецки обидно за уровень образования современных буратин.


Нормана Нильсена в первом русском издании я читал в 1997 году, когда впервые подвязался после граф дизайна на веб. Эти твои "паттерны" вырабатывались еще до Нильсена и продолжают развиваться постоянно. Никакой институт исследований не успеет все законспектировать, пока это уже не стало вчерашним днем.


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


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

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

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

После 97 года появилось намного больше в ННГ чем одно русское издание.


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

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

показать ответы
4
Автор поста оценил этот комментарий
Но до lingscars.com ещё надо расти)
раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Иллюстрация к комментарию
0
Автор поста оценил этот комментарий

Хмм... Ваша десктопная версия грузится 12 секунд и криво работает при размере окна меньше, чем 1500 (у оригинала - 1024). По ресурсам не смотрел, но думаю, что картина будет похожей.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Она не зафронтендена, не адаптивная версия, это чисто дизайн)

показать ответы
1
Автор поста оценил этот комментарий

"Хотя, конечно, убедительно, если бы Я не разбирался в UX UI"

Иллюстрация к комментарию
раскрыть ветку (1)
Автор поста оценил этот комментарий

Это Я и ожидал. Как только предложил подтвердить свои слова - ты сливаешься и кидаешь мемасик.

показать ответы
4
Автор поста оценил этот комментарий

В UX вы понимаете, а вот в маркетинге -- нет.

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

раскрыть ветку (1)
Автор поста оценил этот комментарий

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

показать ответы
1
Автор поста оценил этот комментарий

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


Оболочка, оформление - ТРЕТИЧНОЕ понятие по твоей же системе приоритетов. Сейчас у тебя в макете прежде всего убита именно информационная составляющая с неправильными акцентами элементов сверху-вниз. А ты про какие-то "креативы" и "клешейные решения".


Плохо жить с броней в голове, ой плохо

раскрыть ветку (1)
Автор поста оценил этот комментарий

Я видел как ты написал UI/UX. Поставив UI на первое место. Понятно, что рисунок для тебя важнее чем логика.

И опять, ты повторяешься говоря что какая-то модель не правильная. Покажи исследования, доказательства своих слов. На чем основано это предположение.

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

У тебя здесь модель поведения в комментах не говорить что-то дельное (похоже не знаешь такого), а выглядеть убедительно.

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

5
Автор поста оценил этот комментарий

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

Если уж на то пошло, то одно повторение "Я - UX/UI ДИЗАЙНЁР" на фоне шаблонных решений отталкивает. На самом деле весь дизайн больше похож на набор клешейных решений, которые показывают на бесплатных обучающих курсах...

раскрыть ветку (1)
Автор поста оценил этот комментарий

В этом и суть. Юзер привык к определенным шаблонам.
И "набор клешейных решений" - это лучший способ сделать сайт понятным и удобным.
В этом и была суть редизайна - засунуть непонятную кучу инфы - в понятную оболочку. Рассортировать и сделать сайт юзабельным.
Задачей не было - добавить кучу креативов. К примеру сайт вк - вообще без креативов и похож на обычный сайт, но при этом очень юзабелен.
Не стоит считать дизайн хорошим - только если он отличается сфоим "креатиффом".

показать ответы
DELETED
Автор поста оценил этот комментарий

@EasterSpirit, ТС, не обращай внимания, местные дезигнеры всегда найдут за что покритиковать, так что забей. По моему мнению, у дизайнеров самое кислотное сообщество, цель одна - обосрать.

раскрыть ветку (1)
Автор поста оценил этот комментарий

Спасибо)
Не обращаю, воспринимаю только конструктивную критику

10
Автор поста оценил этот комментарий

Во-первых, слово "бизнес" пишется с одной С.


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


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

раскрыть ветку (1)
Автор поста оценил этот комментарий

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

показать ответы
28
Автор поста оценил этот комментарий

EasterSpirit ты конечно извини, парниша, но до того чтобы вместо обычного веб-дизайнера гордо называется UI/UX - нужно научится главному - применять к каждому уже переделанному элементу великую парадигму "А НАХУЯ?"


Нахуя зачем разделять новости и события если по контексту они (новости) как раз освещают события? Зачем утрамбовывать смежные по смыслу разделы по наитию в один, если они на пользовательский сценарий предусмотрены для разных категорий посетителей и нет намека, что при наведении на раздел выпадет менюшка-список с теми спрятанными за пазуху разделами, которые некоторые юзеры просто не найдут в таком исполнении?


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


В стандартном списке не вставишь табличку, не раскроешь фотогалерею с соревнования. Все это предлагается отщелкивать по кнопкам "ИЩЁ" видимо с переходом на новую страницу. Это вместо того, чтобы как на Ленте окрывать статью с материалами прямо тут, на главной.


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


Проебано большинство полезных триггеров на первом экране. Плиточный дизайн внутренних баннеров на горячие события спас бы положение, но все было похерено на безликий список с оформлением этих чудных цветных скругленных с одного угла форм, с визуальным наследием ИнвиженПаверБорда, уже успешно заебавший всех еще в 2005м.

раскрыть ветку (1)
Автор поста оценил этот комментарий

На вопрос "А нахуя" - есть простая иерархия
1. Интерфейс должен максимально хорошо исполнять цели бизнесса
2. Интерфейс должен максимально хорошо исполнять цели юзера, если это не противоречит п.1.
3. Интерфейс должен быть эстетически приятным в той мере, в которой позволяют п.1 и п.2

По остальным пунктам, как принимались решения - расписал в статье

показать ответы
5
Автор поста оценил этот комментарий

Я как раз все внимательно прочитал :)

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


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


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

раскрыть ветку (1)
Автор поста оценил этот комментарий

Не могу воспринимать тебя в серьез)
По тебе видно что ты заучил пару паттернов и пытаешься их сделать истинной.
Хороший UX дизайнер понимает что все требует исследований/теситрований.
Поэтому то что ты говоришь выглядит как догадка.
А если на 100% знаешь, что есть какое-то верное решение и оно точно не так как у меня в макете, то пожалуйста не голословь, а приходи с ссылочкой с NNGroup ;)

показать ответы

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества