19 заметок с тегом

вёрстка

Позднее Ctrl + ↑

Подзаголовки, ломающие переключатель

Встретил в магазине такой переключатель:

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

В тексте:

  • пара «подзаголовок — лейбл к радиокнопке» в разных пунктах согласована по-разному (2-й лейбл вообще выглядит ошибкой, как будто не оттуда скопировали);
  • в 1-м пункте повторяются «Самовывоз» и во 2-м — «Доставка», скорее всего, дубли навязывает структура.

В вёрстке:

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

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

После перевёрстки повторы и рассогласованность ушли сами:

Способ получения Стоимость
Бесплатно
Сообщает оператор
300 рублей

Линейки сами по себе не отделяют и не объединяют

Линейки работают вместе с отступами. Сейчас покажу на примере.

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

Если просто убрать линейки, блоки собираются и отлично отделяются от соседей:

Если поставить линейки в конце или начале блоков — тоже работает:

2018   вёрстка   линейки

Таблицы титрами

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

Если очень хотите титры, раздвиньте колонки сильнее:

Когда первая колонка такая однородная по ширине, левые флаги ещё аккуратнее:

2018   вёрстка   таблица

Видео выходного дня: теория графического напряжения

Игорь Штанг просто объясняет напряжение в вёрстке. С 28 минуты начинаются вопросы, в которых мало интересного. Описание теории и симулятор.

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

2017   вёрстка   видео

Почтовые упаковка и документы

В Риге не найти некоторых товаров и марок. Нет Икеи, её товары возят и перепродают маленькие магазинчики. Или привозят под заказ. Только в конце лета открылся КОС.

Пустоту заполняют Амазон и другие интернет-магазины.

Чтобы платить НДС сразу при оформлении заказа, мы покупаем товары в европейских магазинах. Когда ещё не знал, купил у Тафти набор из четырёх книг. Без НДС напрямую получалось дешевле. На почте долго тупил, за что с меня хотят денег.

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

Магазинов Эйч-Энд-Эмa в Риге много, но ассортимент неполный. Дополнительный кайф интернет-покупки — бланк, который не получить в магазине:

А вот конверт «Королевской почты»:

Конвертик «Почты Китая». Если в посылке не электроника или товар дешевле 21 €, НДС платить не нужно.

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

Если вы тоже таким занимаетесь, напишите мне на [email protected].

2016   вёрстка   почта   упаковка
Ранее Ctrl + ↓