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

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

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

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

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

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

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

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

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

1
Ответить

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

Ответить

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

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

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

1
Ответить

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

Ответить

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

Ответить

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

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

Ответить

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

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

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

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

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

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

Ответить