Вже майже 15 років (день народження ми відсвяткуємо через три тижні) наш сайт має стабільний зовнішній вигляд. Він полюбився уболівальникам, до нього звикли. Проте життя не стоїть на місці, і сьогодні ми хочемо запропонувати вам новий інтерфейс сайту, на який можна перейти за посиланням...
Поки це ще дуже "сирий", тестовий проект, і демонструємо ми його в першу чергу для того, щоб зібрати відгуки вболівальників, знайти недоопрацювання, баги в новій версії. Залишати коментарі з помилками і пропозиціями щодо вдосконалення ми просимо в цій новині (вона завжди буде знаходитись в топі новин).
Разом з тим, ви можете подивитися на новий зовнішній вигляд - і повернутися до старого, обидві версії будуть функціонувати паралельно.
А після вивчення нової версії сайту, пропонуємо взяти участь у голосуванні- чи подобається вам його зовнішній вигляд?
Вижу исправили на новом сайте критический баг с отображением зачёта. Значит оно кому-то нужно.
Возобновлю работу над своим видением улучшения данного, как по мне, изначально концептуально неудачного редизайна любимого сайта, чтобы он хотя бы не вызывал сильное раздражение.
За этот год я успел ещё редизайнуть один сайт, на основе этой работы стал немного опытнее. Но этот сайт самый ужасный из всех, что я переделывал, в нём нужно хоть немного, но переделывать практически всё. Так жестоко отказаться почти от всех наработок старого сайта... я бы не смог, это слишком бессердечно. А ещё прочитал книги по UX дизайну и убедился, что на новом сайте многое сделано неправильно.
А потом хочу создать несколько "живых" страниц-образцов, как можно было бы редизайнуть, провести эволюцию старого сайта на новых технологиях вебдизайна, а не создавать монстра как сейчас. Чтобы в чёрный день перехода на новый сайт показать людям, как всё можно было сделать, но не было сделано. Ну или в идеале администрация прислушается к подобной идее, хотя я реалист, и понимаю, что этот сценарий почти невозможен. Но сделаю всё, чтобы в будущем не заходить на этот сайт с раздражением от вырвиглазного внешнего вида и юзабельности, когда, допустим, раньше находил информацию за 10 секунд, а на новом сайте эти же действия будут занимать минуту.
2022-01-22 01:00
За две недели и около 200 часов работы удалось закончить примерно на 90% своё видение исправления дизайна нового сайта. Остальные 10% изменений несущественны.
Были изменены буквально все страницы на сайте, одни больше, другие меньше.
Чтобы вы могли посмотреть на изменения в живую, загрузил их на другой сайт, который работает постабильнее, но не идеально, периодически может писать стиль не найден, нужно перезагрузить несколько раз страницу и должно заработать. https://userstyles.world/style/2882/biathlon-com-ua
Как установить стиль:
1. Загрузите расширения для браузера типа Stylish или Stylus (рекомендуется);
2. Зайдите по ссылке выше, нажмите на кнопку кнопку “Install” и далее в расширении подтвердите установку;
3. По иконке приложения перейдите в его настройки и у строки стилей new.biathlon.com.ua включите галочку, если она у вас не включена;
4. Готово.
Нажимая на эту галочку вы можете включать и отключать стили когда захотите. Также в расширении нажав на стрелочки, что крутятся можно обновлять стиль, если выйдет обновление. В том же меню можно удалить стили.
Как всегда по пунктам:
1. Главная страница сайта теперь выглядит так:
Горизонтальное меню расположено в потолке страницы, никаких зазоров. Все два зачёта по 10 биатлонистов помещаются на один экран, его не нужно опускать ниже, чтобы увидеть всех. Также видно название первой новости без скроллинга страницы. https://i.imgur.com/AFj8Yxa.jpg
2. Зачёт Кубка Мира и другие зачеты теперь занимают по ширине не полностью всё пространство страницы, а примерно столько же как и на старом сайте. Теперь нету абсурдных ситуаций как эта, когда информация с одного столбика таблицы находится на самом левом краю страницы, а второй столбик на самом правом. https://i.imgur.com/D0fnaya.jpeg
Чтобы их прочитать приходилось физически вертеть головой влево-вправо, плюс выключалось периферическое зрение. Также кнопки зачётов стали менее круглыми, и вообще все кнопки на сайте стали менее круглыми. А ещё при наведении на строку мышкой, она выделяется слегка другим цветом, это должно помочь в усваивании информации с таблиц. https://i.imgur.com/eqsa8nx.jpeg
2.1. А в анализе гонки столбик стрельбы выравнен по центру, так информацию выглядит намного лучше. https://i.imgur.com/9RsI28q.jpeg
3. Исправил страницу с комментариями. Теперь они более компактные за счет меньшего количества пустого пространства; уменьшения размера аватарки, выравниванием ника по центру аватарки, а не как попало, а также название города человека теперь пишется не под ником, а справа от него, как и на старом сайте, также город взят у скобки (прикручено костылями, по-другому никак, поэтому даже если у человека город не указан всё равно отображаются скобки). Эти же скобки теперь обрамляют количество комментариев в новости, опять же как на старом сайте.
Также каждый коммент завернут в рамку и внутри используются чуть сероватый фон, чтобы придать ленте комментариев структурированности и не так сильно бить по глазам белым цветом. https://i.imgur.com/9TvPzfo.jpg
3.1. Вот к чему приводят излишние закругления всего и вся. Отображение блока процитированного текста исправлено. https://imgur.com/a/y3q5Gvr
4. Картинки в профайле теперь имеют тонкую рамку, как и в фотогалереи. Как по мне, так фотки лучше воспринимаются, но это спорно. Также иконка возле имени биатлониста заменена с стандартной головы на иконку бегущего биатлониста, но она платная, для использования её нужно купить. Бесплатную хорошую не нашел. https://i.imgur.com/OuzNWdt.jpeg https://i.imgur.com/ST2m03x.jpg
6. Таблица набранных очков в Кубок Наций стала более компактная, появились вертикальные грани ячеек и при наведении мышкой на строку она выделяется другим цветом. Хотелось сделать, чтобы она также выделялась и вверх по строке, но, наверное, не хватило знаний, это довольно сложно сделать. https://i.imgur.com/rVc6oZU.jpeg
6.1. Также более компактное отображение набранных очков по спортсменам за счет уменьшения пустых пространств. https://i.imgur.com/AwIX97I.jpeg
7. Добавил фоновое изображение для сравнения скорости спортсменов. Ещё бы рыжий цвет поменять для одного из графиков, но это невозможно моими инструментами. https://i.imgur.com/lZvitHa.jpg
9. Попытался исправить таблицы биатлонной статистики, но смог исправить только эту. Они ужасны в плане кода, таблица в таблице, которая в таблице и в таблице... Похоже, скопирована без изменений со старого сайта. Переделайте пожалуйста. Конкретно в этой таблице добавил разделители между строками и добавил "зебру" для годов. https://i.imgur.com/miINrnG.jpg
10. В трансляциях закрался баг - лишний столбик. Время начала трансляции повторяется. Я его удалил. Также название дисциплин рассыпалось, я исправил отображение. А также исправил отображение легенды с логотипами и названиями каналов. https://i.imgur.com/EfXC7cz.jpg https://i.imgur.com/N8Sqiaz.jpg
11. Сделал страницу чата почти неотличимой от страницы чата на старом сайте. Также увеличил размер шрифтов при наборе сообщения, на новом сайте шрифт в окне набора почему-то более мелкий за шрифты в самом чате. https://i.imgur.com/ZrgCwnd.jpg
12.2. Исправил страницу с результатами сезона. Контент бокового меню вылазил за грани блока. Также добавил разделительные полосы в таблице на белом фоне, поскольку никаким другим образом (например, "зеброй") строки не выделялись, это плохо для восприятия. https://i.imgur.com/x0SVXuJ.jpeg
13.2. Галочка теперь галочка, а не обрезок, также фон квадратика на которой она изображена сереет при наведении мышкой. Интерактивность всегда хорошо. https://i.imgur.com/dTCo6N6.jpg
13.3. Спорт-школы. Текст также расположен по центру, но выравнен в одну ровную линию. Так информация воспринимается лучше. https://i.imgur.com/ZrEJxeA.jpg
13.4. В профиле список наций за которые болеешь теперь отображаются в окошке и более компактно. https://i.imgur.com/pEuCqSd.jpg
13.5. На странице эстафет теперь нации выделены жирным шрифтом, как на старом сайте. https://i.imgur.com/Kqk579U.jpg
(обновлено: оказалось, что так невозможно сделать не задевая остальные зачеты, спринты, преследования и так дальше из-за несовершенства изначального кода сайта)
И ещё многое другое было изменено, устанавливайте стиль и смотрите в живую.
Стили заточены под FullHD экраны (но скорее всего будут нормально отображаться и на других разрешениях экрана), на мобилках они точно "рассыпаются", но они и не предназначены для мобилок, туда их не установишь, не хотелось ещё на это тратить кучу времени, для этого у нас есть профи своего дела админ :)
Кстати, был удивлён, что полностью весь код и картинки нового сайта можно было найти в интернете на другом сайте и скачать, он там выставлен как пример.
Попозже напишу ещё большой пост по замечаниям и предложениям, которые своими инструментами не могу исправить. Очень надеюсь, что всё это не зря.
1. Якщо ви вже реєструвалися на сайті, введіть ваш E-mail і пароль.
2. Якщо ви залишаєте коментар перший раз, вам необхідно придумати нікнейм, і ввести ваш E-mail і пароль.
Ім'я або Нікнейм: (не вводьте його якщо ви вже реєструвалися раніше)
.gif){kind=small}
