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

Клиент очень просил таблицу с Ценами интегрировать на сайт, структура вот.

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

Основная доля трафа это моб. устройства. Проблема в таблице, это то что ей крайне не удобно пользоваться, т.к. не каждый запомнит что было вначале, надо додумать что она скролится, ну и вид восприятия уже устаревший.
На старой странице много не нужного текста и в элементы не возможно внести данные по ценам новой таблицы. Поэтому я предложил изменить дизайн "под ключ".
Подумав 2 дней, набросал прототип страницы причем на листочке от руки, дизайнер был не против такой подачи ))
За 5 дней дизайн, верстка и интеграция и вот что на выходе.
Не подумайте что я хвалюсь или себе цену набиваю, просто это реально может кому то поможет реализовать несколько страниц в одной и сделать удобным просмотр и подачу информации, т.к. я не быстро к этому пришел.

Как видите, все ДОМА в один ряд, и содержимое в фокусе.

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

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

1
11 комментариев

Вы не только мусор убрали, но и таблицу.

1

Ага, понял юмор) Но мы не останавливаемся.

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

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

Не стоит воспринимать мои слова в штыки. Выводы делать вам.

1

Это да, но клиенту важна классическая форма и наличие содержимого по ТЗ)

Мусор то все равно остался

мне кажется, вполне достойно.
да, можно еще причесывать (и по текстовке тоже), но стало уже лучше, чем было. так бы еще и остальной сайт весь причесать, конечно :D

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

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

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

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

Чтобы все упаковать, было принято решение сделать дома и даты вкладками. Рисовал прототип от руки)

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

Времени на прототип потратил 5 часов, посмотрел конкурентов, посмотрел площадки кое что выделил но не много. Дальше работа с дизайнером вообще труда не составило, всё было сделано с первого раза.