Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Categories:

Переверстка №23. Таблица «Яндекс-денег»

Эту таблицу мы со студентами переверстывали на нескольких курсах. Она до сих пор висит по адресу https://money.yandex.ru/get и не меняется:

Таблица «Яндекс-денег»


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

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


  1. Колонки стали похожи на колонки, вертикальное движение не прерывается.

  2. Общая информация стоит сверху и накрывает те способы, к которым относится (заголовок-шапка).

  3. Юрлица отделены расстоянием и плашкой.


Таблица «Яндекс-денег»

За бортом остался вопрос о кнопке «Касса для бизнеса», в правом верхнем углу. Непонятно, какое место она должна занимать в структуре, поэтому я и не знаю, как с ней быть. Первое, что приходит в голову, — объединить в группу «Для юрлиц».

Еще эту таблицу можно перевернуть. Такой вариант пригодится, когда способов станет больше (или меньше) и они не поместятся по ширине. Этажам хорошо бы добавить ховер:

Таблица «Яндекс-денег»


Я переделал только конструкцию и немного поправил верстку. Что еще можно улучшить?

Другие переверстки про таблицы:
Тарифы «Контур-Бухгалтерии»
Таблица «Предел огнестойкости строительных конструкций»

Как попасть в «Переверстку»

Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.

Правила рубрики и все выпуски
Tags: веб, верстка, знаю как, переверстка, процесс, сайт, таблица, яндекс
Subscribe

Posts from This Journal “переверстка” Tag

  • Переверстка №31. Подписка на Cover Commander

    Nail пишет: Посмотрел ваше видео про стирание линеек, полез на ваш сайт и заинтересовался рубрикой «Переверстка». Специального…

  • Мастер-класс по стиранию линеек

    Переверстываю пять макетов в режиме реального времени. 0:01:18 — Вступление 0:03:40 — Таблица «Допустимое рабочее…

  • Переверстка страницы FAQ

    Дизайнер Дженсон Камби рассказал о переделке сайта The New Yorker Festival и в частности о том, как поменялась страница FAQ. Было и стало:…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments