Сегодня мы будем переверстывать вот эту схему

Да, к ней есть вопросы.

1. Какую пользу она несет?
2. О чем рассказывает и кому?
3. Как быстро тут можно все понять?
4. Почему она такая агрессивная?

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

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

Так себе начало разговора. Т. е. стою я на остановке, никого не трогаю,
поворачиваю голову и — ааа! уже обязан!

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

Нет пассажиров, не желающих платить за проезд. Они взрослые,
ответственные люди. Поэтому не надо их пугать и заставлять это сделать.

— Пассажир обязан!
— Нахуй иди!

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

Почему синий и зеленый? Какую функцию несут эти цвета?

Куда ведет этот QR?

Почему нужно лезть за телефоном, чтобы потом понять что эта ссылка для меня бесполезна?

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

Она такая

1. Заголовок, раскрывающий смысл.
2. Классификация точек продаж, в зависимости от типа билета, который
   там продается. Никому не нужно РУП «Белпочта», но всем нужен
   билет на одну поездку.
3. Краткая информация о видах проездных и билетах.

Отвечая на вопрос «Для кого эта схема», можно прийти к выводу, что скорее
всего для иногородних и туристов. Поэтому краткая информация о том, как выглядят
билеты и БСК не повредит.

Начинаю искать нужную мне компоновку макета

Кручу, верчу, двигаю объекты туда-сюда (листайте карусель)

Наконец нахожу нужный вариант

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

Затем открываю и понимаю, что структура все же неверная.
Если я ищу место, где можно купить талон на один проезд, то разумно будет
все эти места продаж объединить под одним заголовком.

Вот так будет лучше

Заголовок, правда, сочиняла нейросеть.

Меняю заголовок на человеческий.

Причесываю макет

Зашибись.

Пассажир обязан заебаться, изучая эту схему

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

Ага, вот эти:

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

В разделе «Расписание экскурсионных автобусов» находится две таблички
с расписанием двух экскурсионных маршрутов, которые ходят по маршрутам
автобусов №1 и №100. Ссори за такое количество слова «маршрут».

Итак, вот что у меня получилось.

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

И еще одно сокращение: «Более подробную информацию...» я удалил вообще

потому что теперь можно просто нажать на название маршрута,
чтобы узнать его расписание.

А чуть выше можно еще и карту маршрута посмотреть

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

Раздел вообще-то пустоватый — сюда бы еще инфу по ценам, скидкам, немножко
фоток того, что можно увидеть из окна, ну или там фоток гидов. Минсктранс, ау?!
Ладно, едем дальше.

Займемся пригородным и междугородним расписанием.

Вот как он сейчас выглядит на сайте

Если нажать на выпадающий список, то ооочень медленно появляется огроменное
число различных населенных пунктов РБ.

Выбираю город Борисов. Сразу же получаю длинный список из всех рейсов,
которые существуют в данном направлении.

Жму на рейс 17:55 — получаю список остановок, времени прибытия и отбытия с них

Дам шанс этой таблице — узнать во сколько едет твой автобус и едет
ли он сегодня можно. Но все же она абсолютно не дружелюбна, криво сверстана
и вообще ворует время пользователя, заставляя его копаться в ненужной инфе.
Ну вот нахера мне знать регулярность машрута в 8:27, если мне нужно ехать прямо
сейчас, а время на часах 17:43?

В моем мире форма поиска будет выглядеть вот так.

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

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

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

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

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

Давайте еще раз взглянем на то, что получилось

Ну красота-же!

Итак мы добались до гвоздя сегодняшнего номера! Раздел международных

маршрутов. Попрошу здесь немного больше вашего внимания.
Сейчас будет интересно.

Вот что видит пользователь, когда заходит в этот раздел.

Две формы поиска! Две, сука, формы поиска! Почему две? Зачеем?
Какую выбрать? Аааа!

Немного покопавшись, я выяснил, что нижняя форма дает возможность
выбрать маршруты только филиала «Автобусный парк №2», причем
направления не только международные, но и по Беларуси, хотя для этого есть раздел
междугородних перевозок.

Попробуем. Хочу я попасть, к примеру, в Белосток. В среду.

«Иди в жопу, дорогой товарищ, в среду мы в Белосток не поедем» , —
выдает мне форма.

Когда же вы поедете в Белосток? Хороший вопрос. Чтобы на него ответить,
нужно в списке «Выберите дату поездки», перебрать все дни недели, чтобы
найти тот, в который филиал «Автобусный парк №2» соизволит отвезти вас в Белосток.

О, нашел! Пятница!

Если кликнуть по названию маршрута (догадайся еще, что по нему
можно кликать), то можно получить список остановок по маршруту следования.

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

Очень хочется попасть в Белосток.

Пробуем.

Опа! Что я вижу! Три рейса! А где узнать подробности? А нужно всего-лишь..
скачать вордовский файл! Ладно, путь тернист, но у меня получится.

Скачал два файла, открыл и замер от восторга.

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

Веселье начинается!

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

Выбираем дату 2 июня. Получаем наши три рейса.

Попробуем прямой маршрут от филиала «Автобусный парк №2».
Покажу мой вариант с сеточкой.

А вот без сеточки

Добавляю отдельной строкой время отправления и время прибытия.

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

Вот раздел скидок из вордовского документа.

А вот он на сайте

Кстати на главной странице международных перевозок висит вот такая красная
рамка, в которой инфа про скидку в 50% для клиентов филиала «Автобусный парк №2»

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

Идем дальше. Правила возврат билетов и провоз багажа в вордовском файле.

На сайте

Я добавил еще один раздел бронирование билетов, который в текстовом
документе даже не был удостоен подзаголовка.

У нас на главной еще остались в гордом одиночестве две строчки,
которым нужно найти свое место.

Первая разместилась аккурат над формой ввода инфы.

А вторая логично переместилась в левую колонку.

Давайте взглянем еще раз

О да, детка.

А что если выбрать не прямой маршрут? Например Минск—Варшава?

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

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

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

И напоследок, обращаюсь к коллегам-дизайнерам. Коллеги-дизайнеры!

Если вы еще не в курсе на какой хрен в фотошопе есть окно Layer Comps,
то не тормозите и узнайте! Не пожалеете.

Спасибо всем за внимание! До новых встреч.

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

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

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

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

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

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

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

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

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

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

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

Ну нафиг!

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

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

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

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

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

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

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

Вуа-ля.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блииже!

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

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

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

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

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

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

Та-даам.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Веду поиск

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

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

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

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