12 заметок с тегом

Минсктранс

Позднее Ctrl + ↑

Большая переверстка Минсктранса, часть 4-1. Раздел «Расписание»

Привет всем! Сегодня мы займемся разделом «Расписание»

Вот как он выглядит в меню старого сайта. Как видите кроме четырех видов маршрутов
(городских, междугородних, международных и экскурсионных) тут еще какие-то правила,
порядки и национальный аэропорт «Минск».

Главная проблема этого меню в том, что, к примеру, из подраздела «Городские маршруты»
прямиком в «Международные маршруты» не попадешь одним кликом, как минимум нужно
делать два:

1) кнопка браузера «Назад»,
2) выбор раздела «Международные маршруты»

Итак, сегодня я решу эту проблему, а также 2 миллиона проблем подраздела «Городские маршруты».
Три оставшихся подраздела я оставлю для следующего поста, чтобы вас не утомлять.

Перейдя по ссылке «Городские маршруты» мы видим следующее.

Давайте по-порядку:

1) Вкладка «Минск» (кто и зачем ее так назвал?), в которой три ссылочки «Автобусы»,
«Троллейбусы» и «Трамваи». Нажал на ссылку — получил длиннющий список всех номеров
и соответствующие им названия маршрутов.

Слева, рядом с каждым названияем ячейки с днями недели, по которым маршрут
работает. В общем списке эти ячейки образуют нехилый столбец, занимающий
дохера места.
Непорядок!

Маленький столбец из кнопок «i» тоже напрягает. А че там под этой кнопкой? А вот че:

Ну нафиг!

2) Вкладка «Поиск остановки». Поиск остановки по названию, а также маршрутов,
которые через нее проходят. 3) Вкладка «Поиск маршрута» — поиск маршрута,
чего непонятного-то?

Ну что ж, займемся вкладкой «Минск». Нажимаем на первый автобусный маршрут №1.
Смотрим.

Слева все остановки маршрута в одном направлении и все остановки в обратном.
Жмешь на любую строку и узнаешь в правом окне во сколько минут в течение
конкретного часа автобус №1 придет на нажатую остановку. Вроде все понятно, так?
Но уже видно, что направления «туда-обратно» можно выполнить
в виде сегментированных кнопок — нажал на нужную, получил список.
А не нажал, то и не увидел.

До кучи — линеейчки, плашечки и столбик iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
(у меня в строку получилось :)

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

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

Буду показывать проделанную работу задом наперед. Потому что так удобнее.
И да, к черту интригу. Пойдем от общего к частному.

Вуа-ля.

Подберемся поближе

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

Переход между видами транспорта теперь у нас в виде кнопок.

Список маршрутов набран в две колонки — теперь правая часть экрана не пустует и можно
по-меньше скролить вниз. Никаких ячеек с рабочими и нерабочими днями недели,
никаких столбцов из кнопок «i». Нужная вся эта инфа? Нажми на нужный маршрут и смотри!

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

Итак, жмякаем на автобусный маршрут №1 «ДС-Веснянка — Вокзал».
Смотрим для начала на общую картину.

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

Разные направления в разных сегментированных кнопках, как я и говорил выше. Два в одном —
это ж какая экономия экрана! Самые наблюдательные заметили ссылочку на карту маршрута.
Тут ей самое место, а не в выпадающем окне по-нажатию кнопки «i».

Маленькое и полезное нововведение:

Прежде чем идти дальше, подытожим что мы успели сделать

1) Переход между разделами маршрутов теперь в один клик.

2) Список маршрутов в разделе городского транспорта теперь в две колонки.

3) Убрали мусор в виде дней недели и кнопок «i».

4) Сократили место под список остановок в два раза, благодаря сегментированным кнопкам.

5) Дополнительная, срочная и оперативная инфа набрана по-человечески и находится
прямо перед глазами.

6) Ну там.., все стало чище, приятнее и понятнее.

Едем дальше, уважаемые пассажиры. Займемся поиском остановки. Для начала обозначим
проблемы теперешнего варианта.

Меленько. Там же четыре числа всего, можно и крупнее!

Непонятно (например как вводить время отправления —
разделять пробелом? точкой? двоеточием? или неважно?).

Шумно. Зачем вываливать все время сразу?
Экономить пространство будем? А?

Мы тут медленно подбирамеся к поиску местоположения и маршрутов на карте.
Нужны иконочки. Я решил, что иконка начала пути — это «А», иконка конца пути —
это «Б». Ну как в школе, понимаете? «Из пункта А в пункт Б...»

Открываю иллюстратор и малюю. Готово!

Смотрим раздел поиска остановки, который у меня получился. Вот как он выглядит,
когда ничего не ясно.

А вот я решил найти остановку Тимирязева.

Блииже!

Теперь сразу видно какой транспорт на ней останавливается (все номера кликабельны и ведут
в раздел с расписанием маршрута). Также можно найти остановочку на карте (нажав на пин).
А можно обозначить ее на карте как начало или конец пути (иконки «А» и «Б»).
Немного терпения, раздел «Поиск маршрута» впереди.

В правой колонке вверху самое важное — ближайшие маршруты. А для тех, кто планирует
поездку, можно ввести время и узнать во сколько придет нужный ему тралик на нужную
ему остановку (в данном случае Тимирязева.) Теперь не надо тупить, глядя на все расписание
сразу — только то, что вам нужно. Не засирайте мозги, короче.

ААА! Мы близки к завершению! Последняя вкладка «Поиск маршрута».
Смотрим на проблемы.

Берт охренел.

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

Начну с рисования секундомера. Мы же тут маршрут прокладывать собираемся.

Та-даам.

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

Прямой рейс по традиции показывает нам ближайшее и заданное время.

Немного деталек.

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

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

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

Ну и конечно же ссылочка на карту.

Готово! В следующем посте я покажу как я переделал
разделы международных, междугородних и экскурсионных маршрутов.

До новых встреч!

Большая переверстка Минсктранса, часть 3. Главная страница

Привет всем кто дождался! Сегодня я покажу вам новую главную страницу
Минсктранса и расскажу о том, как я ее переверстывал.

Если забыли, вот так выглядит сайт Минсктранса сейчас.

Обозначим фронт работ.

Начнем с меню и вообще со структуры сайта. Выкинем все лишнее. Например
«Нормативные документы» и «Административные процедуры...» нафиг
не упали рядовым посетителям сайта. Если не верите, то пройдите по этим ссылкам
и убедитесь сами.

Филиалы можно смело перенести в раздел «О предприятии»

Для рекламы заведем отдельный раздел в главном меню (реклама — святое.)

Электронные сообщения сбросим в Контакты.

Контакты сбросим в подвал.

Почистим еще немного, удалим всякий ненужный хлам вроде

Конкурс художественно самодеятельности... Ну ладно, давайте будем честны —
кому это нафиг сдалось?

После основательной чистки и реструктуризации у меня получилась вот такая карта сайта.

С меню и структурой сайта разобрался. Едем дальше.

Сейчас смачное место занимает главная новость и ссылка на раздел с информацией
о работе пассажирского транcпорта в связи с дорожной обстановкой — вроде все верно,
но даже такая полезная инфа может занимать меньше места и при этом оставаться заметной.

Взглянем налево. Как я уже говорил — мед, говно и немного гвоздей. Без тазика для рвотных
масс и не взглянешь.

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

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

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

Много, много эскизов

Сетку я решил оставить старую, т. е. 12 колоночную. Вот какой макет у меня получился
первоначально.

Первый подход к снаряду. Раздел с расписанием стал чище и понятнее. Две трети сетки справа
получил блок новостей, который состоит из главной новости и трех дополнительных. Информация
о работе пассажирского транспорта в связи с дорожной обстановкой стала как раз под главной
новостью, рядом с ней встал блок с оперативной информацией (который я назвал просто «Срочно»)

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

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

Начинаю переверстывать свою переверстку. В первую очередь шапку.
Добавляю логотип. Корректирую пункты меню. Добавляю номер справочной службы —
уверен пригодится многим и не раз. Там ему самое место.

Берусь за расписание. В «Городские маршруты» добавляю инфу из раздела «Тарифы»,
а именно «Пункты продажи проездных документов» и «Калькулятор сравнения стоимости...».
Сюда же становится и USSD-запрос (хотя непонятно кому он нужен, но вдруг).

К международным маршрутам сразу пришпандориваю ссылку на сайт www.ticketbus.by
(ох, как же руки чешутся взяться за него поскорее)

Бонусом внизу блока с расписанием ставлю вот эти две ссылки

Теперь возьмемся за центральный бок новостей. Придумываю раздел «События»,
увеличиваю количество новостей. Сверху главная новость (за фотку спасибо
сайту www.citydog.by), ниже дополнительные.

Под ним всякие новости-анонсы.

Верхний правый край по праву занимает блок с оперативными новостями.

На это место также можно ставить короткое и важное послание, которое периодически
всплывает на сайте Минсктранса в самом центре страницы. Блок оперативной информации
при этом чуть съезжает вниз.

Ниже оперативной инфы идет информация о работе пассажирского транспорта в связи
с дорожной обстановкой

Придумываю заголовки, выравниваю по сетке, ставлю картинки.

Немного поразмыслив, добавляю еще один новостной блок «Как у них?», в котором будут
публиковаться новости зарубежного транспорта (от дизайна проездных билетов
и схем до интересных историй)

Уф, осталось немного, всего лишь прибрать в подвале.

Убираю цвет, выравниваю все по сеточке. Красота же.

Вот что у меня получилось в итоге.

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

Напоминаю, что это не все. Работа только начата — впереди переверстка внутренних страниц.
Следите за новостями!

Большая переверстка Минсктранса, часть 2. Редизайн логотипа

Ок, привет снова. День прошел быстро и незаметно, а у меня готов новый пост.
Сегодня я переделал лого Минсктранса.

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

Напоминаю, вот так выглядит старый вариант:

Беру карандаш и начинаю придумывать эскизы.

Включаю Иллюстратор, начинаю отрисовывать понравившиеся, при этом придумывая
новые уже в программе.

Получились вот такие знаки

Можно примерить, например на проездных

Гы, а почему бы и не черный? VIP-проездной? Не, ну, а чо? Дает право на место возле окна,
к примеру. Или провоз рояля. В троллейбусе. Придумайте еще VIP-услуг! :)

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

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

Веду поиск

Отбираю понравившиеся варианты

Вот что у меня в итоге получилось.

В следующем посте, я буду полностью переделывать главную страницу сайта www.minsktrans.by

Следите за новостями, до скорых!

Ранее Ctrl + ↓