x
 
Евгений Игнашов
5 мая 2014

Уже перепробовал кучу способов сверстать эту информацию. На 100% не устраивает пока ни один. Может, что подскажете?



Проблема в том, что ваш модуль не определился, кто он — линия или прямоугольник. Первая строка образует чёткую горизонтальную ось, а нижние строки пытаются играть с ней в прямоугольник. Это противоречие делает конструкцию слабой:

Решение в лоб — разделить и сбалансировать по высоте левую и правую части, чтобы они образовали прямоугольник:

Но оно противоречит смыслу: разнесённые подстрочники справа и слева относятся к теме отмены брони, причём в них дублируется половина информации. Применим бритву Оккама-Ильяхова и объединим текст в одну строку:

Текст об отмене брони ещё лучше отнести к кнопке:

Кстати, оба варианта имеют конструкцию из моей коллекции употребимых шаблонов модулей:


P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

Поделиться
Отправить

Комментарии

Евгений Игнашов
5 мая 2014

Спасибо за быстрый и наглядный ответ. Сделаю по вашему третьему варианту. Немного смущает, что цена далеко от кнопки, но, надеюсь, это не будет критично. Хотел ещё уточнить про «коллекцию употребимых шаблонов модулей». Её где-то можно посмотреть?

Александр Дебкалюк
5 мая 2014

Всё, кроме кнопки «Забронировать номера» — вторично. Ставьте её на первое место.

Ещё конфузит то, что одинаково выделена цена и количество номеров. Может, по-разному покрасить?

Алексей Рытов
5 мая 2014

Если убрать слова «вы выбрали» и «общая стоимость», а сами цифры сделать крупнее — станет только лучше.

Олег Бертель
5 мая 2014

Ещё напрашивается такой вариант:


5 мая 2014

Александр, Олег!

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

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

Иван Титов
5 мая 2014

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


5 мая 2014

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

Но я почему-то чаще встречаю «погружающихся и думающих», которые не могут скомпоновать.

Самое важное открытие о вёрстке — конструкция живёт по своим правилам и часто входит в противоречие со смыслом, которое нужно разрешать. Правила конструкции нужно изучать отдельно.

Всеволод Кудрявцев
5 мая 2014

Артём, расскажите про коллекцию, как собираете и храните. Сколько раз проверяете шаблон перед добавлением и удаляли что-нибудь после добавления?

Никита Торцов
6 мая 2014

Артём, мне кажется, предложенный вами второй вариант лучше третьего.

Основной текст в одну строку не содержит лишних связей (в третьем варианте: «м-8», «е-8», «р-1», «а-0»), легче воспринимается и читается быстрее. Стоимость расположена ближе к кнопке, чем дополнительные условия, что логично: нажатием клиент соглашается в первую очередь со стоимостью той услуги, которую он в данный момент желает получить, а не с отдалённой возможностью отказа (в третьем варианте реализация этой возможности становится навязываемой).

Сочетание слов «отмена брони» важно сохранить: оно точнее и понятнее для первого взгляда, чем глобальная «отмена».

Текст об отмене можно изложить следующим образом: «Отмена брони бесплатна до 14:00 12 сент. 2014; после — 200 руб.» (чтобы избежать обобщения «бесплатной отмены» с оплатой; такое обобщение во втором и третьем вариантах вызывается выделением и присутствием двоеточия).

Ещё одно двоеточие можно убрать: «Вы выбрали 2 номера».

Иван Душин
6 мая 2014

Избавимся от лишнего и упакуем всю информацию прямо в кнопку.
Информативность вырастает, глаз не бегает, нет мусора.

Следим за падежами после количества номеров.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Точка, линия и прямоугольник 2 2 5




Недавно всплыло

Как раскладывать ХТМЛ-элементы на странице? (Часть вторая: флексбоксы) 1 2 Может быть есть возможность разбавить «боль» Синельникова «кайфом» Синельникова? 6 Что за font-family? Где его взять? 2